implemenatndo pagina inicial

3 years ago · ba91ab63af
--- a/css/global.css
+++ b/css/global.css
@ -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{}
--- a/css/variables.css
+++ b/css/variables.css
@ -0,0 +1,5 @@
 :root{
    --primary-color: #000;
    --second-color:#00FFFF;
    --font-main:'Roboto', sans-serif;
 }
--- a/img/logo.png
+++ b/img/logo.png
--- a/index.html
+++ b/index.html
@ -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>