Navbar use grid instead of list

NaMLiM · Mar 12, 2020 · f81851e · f81851e
1 parent 3ef2450
commit f81851e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 36 deletions.
diff --git a/css/home.css b/css/home.css
@@ -2,34 +2,49 @@ html{
     margin: 0 3% 0 3%;
 }
 
-.logo img{
-    width: 10%;
-    height: 5%;
-    overflow: hidden;
+.nav-1{
+    display: grid;
+    justify-content: end;
+    align-content: center;
+    grid-auto-flow: column;
+    grid-gap: 10px;
+}
+
+.nav-1 a{
+    text-decoration: none;
 }
 
-nav{
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+.nav-2{
+    display: grid;
+    min-height: 100px;
+    grid-auto-flow: column;
+    grid-gap: 20px;   
+}
+
+.logo{
+    display: grid;
+    justify-content: start;
+    align-content: center;
     overflow: hidden;
-    background-color: #333;
 }
 
-.nav-2 li{
-    display: inline;
+.navlink{
+    display: grid;
+    justify-content: end;
+    align-content: center;
+    grid-auto-flow: column;
+    grid-gap: 10px;
 }
 
-.nav-2 a{
-    display: block;
+.navlink a{
     padding: 8px;
     background-color: #ffffff;
     text-decoration: none;
     transition: 300ms;
-    float: right;
+    border-radius: 2px;
 }
 
-.nav-2 a:hover{
+.navlink a:hover{
     background-color: orange;
     color: #ffffff;
 }

diff --git a/index.html b/index.html
@@ -8,29 +8,24 @@
     <body>
         <header>
             <div class="nav-1">
-                <ul>
-                    <li><a href="#">PERUSAHAAN</a></li>
-                    <li><a href="#">KARIR</a></li>
-                    <li><a href="#">id_ID</a></li>
-                    <li><a href="#">en_EN</a></li>
-                </ul>
-                <br>
+                <a href="#">PERUSAHAAN</a>
+                <a href="#">KARIR</a>
+                <a href="#">id_ID</a>
+                <a href="#">en_EN</a>
             </div>
             <nav>
-                <div class="logo">
-                    <a href="index.html">
-                        <img src="navicon.png">
-                    </a>
-                </div>
-                <div>
-                    <div class="nav-2">
-                        <ul>
-                            <li><a href="index.html">HOME</a></li>
-                            <li><a href="#">RUANG PUBLIK</a></li>
-                            <li><a href="#">PRODUK & LAYANAN</a></li>
-                            <li><a href="#">HUBUNGI</a></li>
-                            <li><a href="#">PENGADAAN</a></li>
-                          </ul>
+                <div class="nav-2">
+                    <div class="logo">
+                        <a href="index.html">
+                            <img src="navicon.png">
+                        </a>
+                    </div>
+                    <div class="navlink">
+                        <a href="index.html">HOME</a>
+                        <a href="#">RUANG PUBLIK</a>
+                        <a href="#">PRODUK & LAYANAN</a>
+                        <a href="#">HUBUNGI</a>
+                        <a href="#">PENGADAAN</a>
                     </div>
                 </div>
             </nav>