From e13129f084999844f67b45cc3763170ee920dbdc Mon Sep 17 00:00:00 2001 From: Sarthak Date: Wed, 1 Nov 2023 21:11:28 +0530 Subject: [PATCH] Responsive Code Update --- Starline-Airways/index.html | 48 ++++--- Starline-Airways/stylesheet.css | 230 ++++++++++++++++---------------- 2 files changed, 143 insertions(+), 135 deletions(-) diff --git a/Starline-Airways/index.html b/Starline-Airways/index.html index 14fb530..e540364 100644 --- a/Starline-Airways/index.html +++ b/Starline-Airways/index.html @@ -5,39 +5,47 @@ + StarLine Airways + +
- + -
-

The Best
Deals from India

-

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. -

-
- - -
-
+
+
+

The Best
Deals from India

+

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. +

+
+ + +
+
+
diff --git a/Starline-Airways/stylesheet.css b/Starline-Airways/stylesheet.css index 65cf36e..f6fe5ec 100644 --- 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%; + } } \ No newline at end of file