diff --git a/css/global.css b/css/global.css
new file mode 100644
index 0000000..175e946
--- /dev/null
+++ 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{}
\ No newline at end of file
diff --git a/css/variables.css b/css/variables.css
new file mode 100644
index 0000000..022e7dc
--- /dev/null
+++ b/css/variables.css
@@ -0,0 +1,5 @@
+:root{
+    --primary-color: #000;
+    --second-color:#00FFFF;
+    --font-main:'Roboto', sans-serif;
+}
\ No newline at end of file
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 0000000..ad5cbe2
Binary files /dev/null and b/img/logo.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..019e75c
--- /dev/null
+++ 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>
\ No newline at end of file
