Refactored the css of Home page

JAYESHBATRA · Jan 3, 2024 · 3658069 · 3658069
1 parent 9ea6fc9
commit 3658069
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 36 deletions.
diff --git a/Pages/About-Us/style.css b/Pages/About-Us/style.css
@@ -22,7 +22,7 @@
 
 /* nav bar */
 
-.nav-toggle { /* In Use */
+.nav-toggle {
     display: none;
 }
 

diff --git a/index.html b/index.html
@@ -93,9 +93,9 @@ <h1 id="automatic-change">Learn Interactively</h1>
         <p id="sub-para">Experience immersive learning like never before with simulations, 3D visualizations, customized
           quizzes, and
           videos all in one place!</p>
-        <a href="#features" class="primary-button get-started-btn"">Get Started</a>
-            </div>
-            <div class=" header-right">
+        <a href="#features" class="primary-button get-started-btn">Get Started</a>
+      </div>
+      <div class=" header-right">
           <img src="./assets/asset 2.svg" alt="hero image" class="hero-image">
       </div>
     </div>
@@ -314,7 +314,8 @@ <h2>Academic<br>Edge Pro</h2>
           <h2>CareerLaunch <br>Accelerator</h2>
         </div>
         <div class="aj_p">
-          <p>Prepare for your dream career, which includes video lectures, simulations, 3D Visualisations, Quizzes, and a
+          <p>Prepare for your dream career, which includes video lectures, simulations, 3D Visualisations, Quizzes, and
+            a
             Doubt Engine to resolve doubts.</p>
         </div>
         <div class="price-section">
@@ -378,7 +379,6 @@ <h2>CareerLaunch <br>Accelerator</h2>
       hamburger.classList.toggle("active");
       navMenu.classList.toggle("active");
     })
-
   </script>
   <script src="scroll-reveal.js"></script>
 </body>

diff --git a/media-queries.css b/media-queries.css
@@ -1,9 +1,8 @@
-@media screen and (max-width: 991px) {
+@media screen and (max-width: 1030px) {
 
     h3 {
         font-size: 1.2rem;
     }
-
 
     .main-nav {
         overflow: initial;
@@ -22,9 +21,10 @@
    .hamburger.active .bar:nth-child(3){
     transform: translateY(-8px) rotate(-45deg);
     }
+
     .nav-menu{
         position: absolute;
-        top: -100%;
+        top: -1000px;
         left: 0;
         gap: 0;
         flex-direction: column;
@@ -34,7 +34,7 @@
         z-index: 1;
         /* background-color: aqua; */
         /* max-height: 10vh; */
-        margin: 0;
+        margin-top: 50px;
         padding: 0;
 
         background: rgba(236, 235, 255, 0.2);
@@ -51,6 +51,10 @@
     .nav-menu.active{
         top: 13%;
     }
+
+    .company-logo{
+        min-width: 200px;
+    }
 }
 
 @media screen and (max-width: 767px) {
@@ -134,5 +138,4 @@
         position: relative;
         left: -13vw;
     }
-
 }
diff --git a/style.css b/style.css
@@ -43,11 +43,15 @@ body {
 }
 
 h1 {
-	font-size: 3rem;
+	font-size: 3rem !important;
+	position: relative;
+	z-index: -10;
 }
 
 h2 {
-	font-size: 2rem;
+	font-size: 2rem !important;
+	z-index: -10;
+	position: relative;
 }
 
 h3 {
@@ -56,9 +60,11 @@ h3 {
 
 p {
 	font-family: "Roboto", sans-serif;
-	font-size: 1.25rem;
+	font-size: 1.25rem !important;
 	color: var(--secondary-text-color);
 	line-height: 1.8rem;
+	z-index: -10;
+	position: relative;
 }
 
 a {
@@ -130,45 +136,45 @@ ul {
 /* nav bar */
 
 .main-nav {
-	margin-top: 20px;
-	justify-content: space-between;
+    margin-top: 20px;
+    justify-content: space-between;
 }
 
 .company-logo img {
-	width: 200px;
+    width: 200px;
 }
 
 .nav-links {
-	flex-basis: 790px;
+    flex-basis: 730px;
 }
 
-.nav-menu {
-	display: flex;
-	align-items: center;
+.nav-menu{
+  display: flex;
+  align-items: center;
 }
 
 .nav-links ul {
-	justify-content: end;
-	gap: 35px;
+    justify-content: end;
+    gap: 40px;
 }
 
 .nav-toggle {
-	display: none;
+    display: none;
 }
 
-.hamburger {
-	display: none;
-	cursor: pointer;
+.hamburger{
+  display: none;
+  cursor: pointer;
 }
 
-.bar {
-	display: block;
-	width: 25px;
-	height: 3px;
-	margin: 5px auto;
-	-webkit-transition: all 0.3s ease-in-out;
-	transition: all 0.3s ease-in-out;
-	background-color: black;
+.bar{
+  display: block;
+  width: 25px;
+  height: 3px;
+  margin: 5px auto;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  background-color: black;
 }
 /* social media section */
 
@@ -255,9 +261,16 @@ header {
 	margin-top: 20px;
 }
 
+.header-right{
+	z-index: -10;
+	position: relative;
+}
+
 .header-right img {
 	width: 200%;
-	transform: translateX(-13vw);
+	/* transform: translateX(-13vw); */
+	z-index: -10;
+	position: relative;
 }
 
 /* features section */