5 changed files with 156 additions and 5 deletions
Unified View
Diff Options
-
+69 -0css/global.css
-
+30 -0css/home.css
-
+5 -0css/variables.css
-
BINimg/moeda.png
-
+52 -5index.html
+ 69
- 0
css/global.css
View File
| @ -0,0 +1,69 @@ | |||||
| @import url("./variables.css"); | |||||
| *{ | |||||
| padding: 0; margin: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; | |||||
| } | |||||
| a{ | |||||
| text-decoration: none; | |||||
| } | |||||
| html, body{ | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| background-color: var(--primary-color); | |||||
| } | |||||
| header{ | |||||
| width: 100%; | |||||
| height: 7vh; | |||||
| background-color: var(--second-color); | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| padding: 1em 1.2em; | |||||
| align-items: center; | |||||
| border-bottom: 2px solid var(--third-color); | |||||
| margin-bottom: 1em; | |||||
| } | |||||
| header > nav > ul{ | |||||
| display: flex; | |||||
| gap: 1em; | |||||
| } | |||||
| header > .brand > a > img { | |||||
| width: 50px; | |||||
| } | |||||
| header > nav > ul > li > a{ | |||||
| color: var(--third-color); | |||||
| font-weight: bold; | |||||
| } | |||||
| main{ | |||||
| min-height: 85vh; | |||||
| width: 100%; | |||||
| } | |||||
| footer{ | |||||
| width: 100%; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| border-top: 2px solid var(--third-color); | |||||
| color: var(--third-color); | |||||
| padding: 2em 1em; | |||||
| background-color: var(--second-color); | |||||
| } | |||||
| .container{ | |||||
| width: 100%; | |||||
| min-height: 82vh; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
+ 30
- 0
css/home.css
View File
| @ -0,0 +1,30 @@ | |||||
| @import url("./variables.css"); | |||||
| .title{ | |||||
| text-align: center; | |||||
| } | |||||
| .title > h1 { | |||||
| font-size: 4em; | |||||
| margin-bottom: 0.3em; | |||||
| } | |||||
| .title > h1 > span { | |||||
| color: var(--third-color); | |||||
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |||||
| } | |||||
| .title > h3{ | |||||
| font-size: 2em; | |||||
| margin-bottom: 0.3em; | |||||
| } | |||||
| .title > h4{ | |||||
| font-size: 2em; | |||||
| margin-bottom: 0.3em; | |||||
| } | |||||
| .title > h4 > a { | |||||
| color: var(--third-color); | |||||
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |||||
| } | |||||
+ 5
- 0
css/variables.css
View File
| @ -0,0 +1,5 @@ | |||||
| :root{ | |||||
| --primary-color: #CCC; | |||||
| --second-color: #000; | |||||
| --third-color: #fbff00; | |||||
| } | |||||
BIN
img/moeda.png
View File
| Before | After |
|---|---|
|
|
| Width: 64 | Height: 64 | Size: 3.0 KiB |
+ 52
- 5
index.html
View File
| @ -1,7 +1,54 @@ | |||||
| <html> | |||||
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="UTF-8"> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||||
| <link rel="stylesheet" href="/css/global.css"> | |||||
| <link rel="stylesheet" href="/css/home.css"> | |||||
| <h1> | |||||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |||||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |||||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> | |||||
| Hello World Alterado ! | |||||
| </h1> | |||||
| </html> | |||||
| <title>CoinBank</title> | |||||
| </head> | |||||
| <body> | |||||
| <header> | |||||
| <div class="brand"> <a href="#"><img src="./img/moeda.png" alt="img_coin"></a> </div> | |||||
| <nav class="navbar"> | |||||
| <ul> | |||||
| <li> <a href="#">HOME</a> </li> | |||||
| <li> <a href="#">CLIENTES</a></li> | |||||
| <li> <a href="#">LOGIN</a> </li> | |||||
| </ul> | |||||
| </nav> | |||||
| </header> | |||||
| <main> | |||||
| <div class="container"> | |||||
| <div class="title"> | |||||
| <h1><span>Coin</span>Bank,</h1> | |||||
| <h3>O banco que cuida do seu dinherio!</h3> | |||||
| <h4> Junte-se a nós agora. <a href="#">Vem ser CoinBank!</a></h4> | |||||
| </div> | |||||
| </div> | |||||
| </main> | |||||
| <footer> | |||||
| <span> CostBank 2023 © </span> | |||||
| </footer> | |||||
| </body> | |||||
| </html> | |||||