Merge branch 'Dota0011-dota001-create-nav' into 'main'

Dota0011 dota001 create nav

See merge request !1

css/abstracts/_variables.scss

@@ -13,7 +13,7 @@ $text-hover: tomato;
 $font-size-big: 3rem;
 $font-size-normal: 1.875rem;
 
-$font-weight-big: 800;
+$font-weight-big: 700;
 $font-weight-normal: 300;
 
 

css/components/_navbar.scss

 @use "../abstracts/variables" as var;
-@use "../abstracts/mixins" as mix;
\ No newline at end of file
+@use "../abstracts/mixins" as mix;
+
+.navbar {
+    background-color: var.$backround-color-base;
+    .inner {
+        @extend %wrap;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 15px;
+    
+    
+        .logo {
+            width: 100px;
+            display: inline-block;
+        }
+    
+        ul {
+            padding-left: 0;
+            margin-bottom: 0;
+            display: flex;
+            text-transform: uppercase;
+            font-weight: var.$font-weight-big;
+            li {
+               
+                &:not(:last-child) {
+                        margin-right: 20px;
+                }
+    
+                a {
+                    color: var.$text-color-primary;
+    
+                    .active {
+                        color: var.$text-color-secondary;
+                    }
+                }
+                
+            }
+        }
+
+    }
+    
+}
\ No newline at end of file

css/core/_reboot.scss

@@ -4,8 +4,9 @@
 
 body {
     margin: 0;
-    background-image: url("../../bg_repeater.jpeg");
+    background-image: url("../../images/bg_repeater.jpeg");
     background-size: cover;
+    font-family: sans-serif;
 }
 
 h1,h2,h3,ul,p {
@@ -15,4 +16,12 @@ h1,h2,h3,ul,p {
 img {
     max-width: 100%;
     display: inline-block;
+}
+
+ul {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
 }
\ No newline at end of file

css/style.css

@@ -4,8 +4,9 @@
 
 body {
   margin: 0;
-  background-image: url("../../bg_repeater.jpeg");
+  background-image: url("../../images/bg_repeater.jpeg");
   background-size: cover;
+  font-family: sans-serif;
 }
 
 h1, h2, h3, ul, p {
@@ -17,6 +18,20 @@ img {
   display: inline-block;
 }
 
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+.navbar .inner {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .btn {
   display: inline-block;
   background-color: rgba(255, 255, 255, 0.3);
@@ -31,4 +46,34 @@ img {
 
 .col-25 {
   flex-basis: 25%;
+}
+
+.navbar {
+  background-color: black;
+}
+.navbar .inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+}
+.navbar .inner .logo {
+  width: 100px;
+  display: inline-block;
+}
+.navbar .inner ul {
+  padding-left: 0;
+  margin-bottom: 0;
+  display: flex;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+.navbar .inner ul li:not(:last-child) {
+  margin-right: 20px;
+}
+.navbar .inner ul li a {
+  color: ghostwhite;
+}
+.navbar .inner ul li a .active {
+  color: #888;
 }/*# sourceMappingURL=style.css.map */
\ No newline at end of file

css/style.css.map

-{"version":3,"sources":["core/_reboot.scss","style.css","core/_common-elements.scss"],"names":[],"mappings":"AAAA;EACI,sBAAA;ACCJ;;ADEA;EACI,SAAA;EACA,+CAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,aAAA;ACCJ;;ADEA;EACI,eAAA;EACA,qBAAA;ACCJ;;ACdA;EACI,qBAAA;EACA,0CAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;ADiBJ;;ACdA;EACI,eAAA;ADiBJ;;ACdA;EACI,eAAA;ADiBJ","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["core/_reboot.scss","style.css","abstracts/_mixins.scss","core/_common-elements.scss","components/_navbar.scss","abstracts/_variables.scss"],"names":[],"mappings":"AAAA;EACI,sBAAA;ACCJ;;ADEA;EACI,SAAA;EACA,sDAAA;EACA,sBAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,aAAA;ACCJ;;ADEA;EACI,eAAA;EACA,qBAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;EACI,qBAAA;ACCJ;;ACnBA;EACI,UAAA;EACA,iBAAA;EACA,kBAAA;ADsBJ;;AE7BA;EACI,qBAAA;EACA,0CAAA;EACA,YAAA;EACA,kBAAA;EACA,kBAAA;AFgCJ;;AE7BA;EACI,eAAA;AFgCJ;;AE7BA;EACI,eAAA;AFgCJ;;AG7CA;EACI,uBCJoB;AJoDxB;AG/CI;EAEI,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,aAAA;AHgDR;AG7CQ;EACI,YAAA;EACA,qBAAA;AH+CZ;AG5CQ;EACI,eAAA;EACA,gBAAA;EACA,aAAA;EACA,yBAAA;EACA,gBCRM;AJsDlB;AG3CgB;EACQ,kBAAA;AH6CxB;AG1CgB;EACI,iBC5BC;AJwErB;AG1CoB;EACI,WC9BD;AJ0EvB","file":"style.css"}
\ No newline at end of file

index.html

@@ -10,6 +10,24 @@
 
 <body>
 
+    <div class="navbar">
+        <div class="inner">
+            <a href="./index.html" class="logo">
+                <img src="./images/dota2-logo.png" alt="logo">
+            </a>
+            <!-- <a class="hover" href=".index.html">
+                <img src="./images/dota2-logo-bak.png" alt="logo2">
+            </a> -->
+            <ul>
+                <li><a href="#">Game</a></li>
+                <li><a href="#">heroes</a></li>
+                <li><a href="#" class="active">news</a></li>
+                <li><a href="#">esports</a></li>
+            </ul>
+        </div>
+
+    </div>
+
 </body>
 
 </html>
\ No newline at end of file