adaptive view for mobile (nav)

revou-fundamental-course · Jun 19, 2024 · 01d235a · 01d235a
1 parent 910cf5f
commit 01d235a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -33,13 +33,23 @@ nav {
     background-color: aliceblue;
     box-shadow: 0 4px 10px 5px rgba(0, 0, 0, 0.5);
 }
+nav p{
+    display: flex;
+    align-items: center;
+}
 
 .nav_title {
     display: flex;
     align-items: center;
     gap: 20px;
 }
 
+.nav_title p{
+    font-weight: 500;
+    display: inline-block;
+    font-size: 1.3em;
+}
+
 #nav_logo {
     height: 90%;
 }
@@ -209,9 +219,10 @@ footer {
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.5)
 }
 
+/* Mobile View Support */
 @media (max-width: 600px) {
     .container {
-        width: 100%; /* Make container full width */
+        width: 100%; 
     }
     .calc_buttons{
         width: 45%;
@@ -224,6 +235,20 @@ footer {
         font-size: 15px;
         width: 100%
     }
+    nav{
+        height: 40px;
+    }
+    nav p{
+        font-size: 0.75em;
+    }
+    .nav_title p{
+        font-weight: 500;
+        display: inline-block;
+        font-size: 1em;
+    }
+    .nav_title{
+        gap: 5px;
+    }
 }
 
 /* Animasi ketika web dibuka */

diff --git a/index.html b/index.html
@@ -16,8 +16,9 @@
         <!-- Div Kotak Ikon dan Nama Website -->
         <div class="nav_title">
             <img id="nav_logo" src="assets/icon.png">
-            <p style="font-weight: 500; display: inline-block; font-size: 1.3em;">Kalkulator Suhu</p>
+            <p>Kalkulator Suhu</p>
         </div>
+        <p>RevoU SEFC Mini Project</p>
     </nav>
 
     <div class="container">