4 changed files with 170 additions and 0 deletions
Unified View
Diff Options
-
+115 -0css/global.css
-
+5 -0css/variables.css
-
BINimg/logo.png
-
+50 -0index.html
+ 115
- 0
css/global.css
View File
| @ -0,0 +1,115 @@ | |||||
| @import url("./variables.css"); | |||||
| *{padding: 0; margin: 0; box-sizing: border-box; font-family: var(--font-main);} | |||||
| html, body{ | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| } | |||||
| a{ | |||||
| text-decoration: none; | |||||
| } | |||||
| .container{ | |||||
| height: 100%; | |||||
| display: grid; | |||||
| grid-template-areas: | |||||
| 'header header header header header header header' | |||||
| 'main main main main main main sidebar ' | |||||
| 'footer footer footer footer footer footer footer'; | |||||
| } | |||||
| .header{ | |||||
| grid-area: header; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| height: 8vh; | |||||
| background-color: var(--primary-color); | |||||
| padding: 0.5em 2em; | |||||
| border-bottom: 2px solid var(--second-color); | |||||
| } | |||||
| .header .header__logo > h1{ | |||||
| color: #FFF; | |||||
| font-size: 1.5em; | |||||
| font-weight: 300; | |||||
| text-shadow: 2px 2px 2px var(--second-color); | |||||
| } | |||||
| .header .header__logo > h1 > span{ | |||||
| font-weight: 500; | |||||
| } | |||||
| .header > .header__menu > ul { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| gap: 1.4em; | |||||
| } | |||||
| .header__menu-item > a{ | |||||
| color: #FFF; | |||||
| font-weight: bold; | |||||
| font-size: 1em; | |||||
| position: relative; | |||||
| padding: 0.2em 0em; | |||||
| } | |||||
| .header__menu-item > a::after { | |||||
| content: ""; | |||||
| position: absolute; | |||||
| left: 0; | |||||
| bottom: 0; | |||||
| width: 0; | |||||
| height: 4px; | |||||
| background-color: var(--second-color); | |||||
| transition: width 0.3s ease-out; | |||||
| } | |||||
| .header__menu-item > a:hover::after { | |||||
| width: 100%; | |||||
| } | |||||
| .sidebar{ | |||||
| grid-area: sidebar; | |||||
| height: 82vh; | |||||
| background-color: azure; | |||||
| } | |||||
| .main{ | |||||
| height: 82vh; | |||||
| grid-area: main; | |||||
| background-color: blue; | |||||
| } | |||||
| .footer{ | |||||
| height: 10vh; | |||||
| grid-area: footer; | |||||
| background-color: var(--primary-color); | |||||
| border-top: 2px solid var(--second-color); | |||||
| color: #FFF; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| .btn{ | |||||
| background: none; | |||||
| padding: 0.4em 0.5em; | |||||
| border: 1px solid #FFF; | |||||
| font-size:1em; | |||||
| border-radius: 3px; | |||||
| } | |||||
| .btn--success{ | |||||
| color: #000; | |||||
| background-color: #4B0082; | |||||
| border: none; | |||||
| } | |||||
| .btn--danger{} | |||||
+ 5
- 0
css/variables.css
View File
| @ -0,0 +1,5 @@ | |||||
| :root{ | |||||
| --primary-color: #000; | |||||
| --second-color:#00FFFF; | |||||
| --font-main:'Roboto', sans-serif; | |||||
| } | |||||
BIN
img/logo.png
View File
| Before | After |
|---|---|
|
|
| Width: 192 | Height: 192 | Size: 8.9 KiB |
+ 50
- 0
index.html
View File
| @ -0,0 +1,50 @@ | |||||
| <!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"> | |||||
| <title>Document</title> | |||||
| </head> | |||||
| <body> | |||||
| <div class="container"> | |||||
| <header class="header"> | |||||
| <div class="header__logo"> | |||||
| <h1><span>BLOG</span> Netuno</h1> | |||||
| </div> | |||||
| <nav class="header__menu"> | |||||
| <ul> | |||||
| <li class="header__menu-item"><a href="#"> ABOUT </a></li> | |||||
| <li class="header__menu-item"><a href="#">LOGIN</a></li> | |||||
| </ul> | |||||
| </nav> | |||||
| </header> | |||||
| <main class="main"> | |||||
| <h1>HELLO</h1> | |||||
| </main> | |||||
| <div class="sidebar"> | |||||
| <h1>sidebar</h1> | |||||
| </div> | |||||
| <footer class="footer"> | |||||
| <div class="footer_contact"> | |||||
| </div> | |||||
| <div class="footer_info"> | |||||
| </div> | |||||
| </footer> | |||||
| </div> | |||||
| </body> | |||||
| </html> | |||||