Responsive Code Update

Sd-Jerry · Nov 1, 2023 · e13129f · e13129f
1 parent e4d3663
commit e13129f
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 135 deletions.
diff --git a/Starline-Airways/index.html b/Starline-Airways/index.html
@@ -5,39 +5,47 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- ---------- FAVICON LINK IS HERE ---------- -->
     <link rel="icon" href="./img/plane favicon 2.png" type="image/svg+xml">
     <title>StarLine Airways</title>
+    <!-- ---------- CSS LINK IS HERE ---------- -->
     <link rel="stylesheet" href="./stylesheet.css">
+    <!-- ---------- FONT-AWESOME LINK IS HERE ---------- -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
 </head>
 
 <body>
     <div class="container1">
-        <nav>
-            <img src="./Img/Logo.png" class="logo">
+        <header>
+            <nav>
+                <img src="./Img/Logo.png" class="logo">
                 <input type="checkbox" name="check" id="check">
                 <label for="check" class="CheckBtn">
                     <i class="fa-solid fa-bars-staggered"></i>
                 </label>
-            <ul class="list">
-                <li><a href="#">Travel Guide</a></li>
-                <li><a href="#">Check-In</a></li>
-                <li><a href="#">E63 Rewards</a></li>
-                <li><a href="#">Support</a></li>
-                <li><a href="#"><i class="fas fa-plane-departure"></i>Bookings</a></li>
-            </ul>
-        </nav>
+                <ul class="list">
+                    <li><a href="#">Travel Guide</a></li>
+                    <li><a href="#">Check-In</a></li>
+                    <li><a href="#">E63 Rewards</a></li>
+                    <li><a href="#">Support</a></li>
+                    <li><a href="#"><i class="fas fa-plane-departure"></i>Bookings</a></li>
+                </ul>
+            </nav>
+        </header>
 
-        <div class="content">
-            <h1>The Best<br>Deals from India</h1>
-            <p>Let the journey begin, Plan your next staycation with Star Line Airways. Ensuring that the World Heritage
-                sites their outstanding universal value is an Increasingly challenging mission.
-            </p>
-            <form>
-                <input type="text" placeholder="Country Name">
-                <button type="submit" class="btn">Search</button>
-            </form>
-        </div>
+        <main>
+            <div class="content">
+                <h1>The Best<br>Deals from India</h1>
+                <p>Let the journey begin, Plan your next staycation with Star Line Airways. Ensuring that the World
+                    Heritage
+                    sites their outstanding universal value is an Increasingly challenging mission.
+                </p>
+                <form>
+                    <input type="text" placeholder="Country Name">
+                    <button type="submit" class="btn">Search</button>
+                </form>
+            </div>
+        </main>
     </div>
 </body>
 

diff --git a/Starline-Airways/stylesheet.css b/Starline-Airways/stylesheet.css
@@ -1,174 +1,174 @@
 @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200&family=Poppins:wght@300&display=swap');
 
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
 }
 
-/* container1 section */
+/* CONTAINER SECTION */
 .container1 {
-    width: 100%;
-    min-height: 100vh;
-    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5)50%, rgba(0, 0, 0, 0.5)50%), url('./Img/Home\ bg.jpg');
-    background-position: center;
-    background-size: cover;
-    padding: 20px 8%;
+  width: 100%;
+  min-height: 100vh;
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5)50%, rgba(0, 0, 0, 0.5)50%), url('./Img/Home\ bg.jpg');
+  background-position: center;
+  background-size: cover;
+  padding: 20px 8%;
 }
 
+/* HEADER STARTED FROM HERE */
 nav {
-    width: 100%;
-    height: 100px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .logo {
-    height: 110px;
-    cursor: pointer;
+  height: 110px;
+  cursor: pointer;
 }
 
 #check,
 .CheckBtn {
-    display: none;
+  display: none;
 }
 
 .CheckBtn {
-    cursor: pointer;
-    font-size: 30px;
-    float: right;
-    color: orange;
-    line-height: 80px;
-}
-
-.list {
-    list-style: none;
+  cursor: pointer;
+  font-size: 30px;
+  float: right;
+  color: orange;
+  line-height: 80px;
 }
 
 .list li {
-    display: inline-block;
-    margin: 0px 20px;
-    padding: 5px 8px;
-    border-radius: 4px;
-    transition: all 0.3s linear;
+  list-style: none;
+  display: inline-block;
+  margin: 0px 20px;
+  padding: 5px 8px;
+  border-radius: 4px;
+  transition: all 0.3s linear;
 }
 
 .list li:hover {
-    transform: translateY(-5px);
-    background-color: #ff9b1996;
+  transform: translateY(-5px);
+  background-color: #ff9b1996;
 }
 
 .list li a {
-    text-decoration: none;
-    font-size: 20px;
-    font-weight: 500;
-    color: #fff;
+  text-decoration: none;
+  font-size: 20px;
+  font-weight: 500;
+  color: #fff;
 }
 
 .list li a i {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
+/* MAIN STARTED FROM HERE */
+
 .content {
-    margin-top: 10%;
-    max-width: 620px;
+  margin-top: 10%;
+  max-width: 620px;
 }
 
 .content h1 {
-    color: #fff;
-    font-size: 70px;
-    font-weight: 600;
-    line-height: 85px;
-    margin-bottom: 25px;
+  color: #fff;
+  font-size: 70px;
+  font-weight: 600;
+  line-height: 85px;
+  margin-bottom: 25px;
 }
 
 .content p {
-    color: #fff;
-    font-size: 18px;
-    letter-spacing: 1.1px;
+  color: #fff;
+  font-size: 18px;
+  letter-spacing: 1.1px;
 }
 
 .content form {
-    display: flex;
-    align-items: center;
-    border-radius: 5px;
-    background: #fff;
-    padding: 10px;
-    margin-top: 30px;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  background: #fff;
+  padding: 10px;
+  margin-top: 30px;
 }
 
 .content form input {
-    border: none;
-    outline: none;
-    width: 100%;
-    font-size: 16px;
-    padding-left: 10px;
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: 16px;
+  padding-left: 10px;
 }
 
 .content form .btn {
-    font-size: 15px;
-    padding: 10px 30px;
-    margin-top: 0;
+  font-size: 15px;
+  padding: 10px 30px;
+  margin-top: 0;
 }
 
 .content form .btn:hover {
-    color: black;
+  color: black;
 }
 
 .btn {
-    display: flex;
-    align-items: center;
-    border: 2px solid #ff9a19;
-    outline: none;
-    border-radius: 5px;
-    background: #ff9a19;
-    color: #fff;
-    cursor: pointer;
-    transition: all 0.3s ease-in;
+  display: flex;
+  align-items: center;
+  border: 2px solid #ff9a19;
+  outline: none;
+  border-radius: 5px;
+  background: #ff9a19;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease-in;
 }
 
 .btn:hover {
-    background: transparent;
-}
-
-/* RESPONSIVE */
-
-@media screen and (max-width:805px) {
-
-    body {
-        overflow-x: hidden;
-    }
-
-    .list {
-        width: 100%;
-        height: 50vh;
-        background-color: rgb(255, 187, 61);
-        color: #fff;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        position: absolute;
-        top: 12rem;
-        left: 100%;
-        transition: all 1s ease-in;
-    }
-
-    .list li {
-        margin-top: 25px;
-        padding: 10px 0;
-    }
-
-    #check {
-        display: none;
-    }
-
-    .CheckBtn {
-        display: block;
-    }
-
-    #check:checked~ul {
-        left: 0%;
-    }
+  background: transparent;
+}
+
+/* RESPONSIVE CODE */
+
+@media screen and (max-width: 768px) {
+
+  body {
+    overflow-x: hidden;
+  }
+
+  .list {
+    width: 100%;
+    height: 58vh;
+    background-color: rgb(255, 187, 61);
+    color: #fff;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 9rem;
+    left: 100%;
+    transition: all 1s ease-in;
+  }
+
+  .list li {
+    margin-top: 25px;
+    padding: 10px 0;
+  }
+
+  #check {
+    display: none;
+  }
+
+  .CheckBtn {
+    display: block;
+  }
+
+  #check:checked~ul {
+    left: 0%;
+  }
 }