Landing Page is now responsive!

- Finished implementing responsiveness in the Landing Page.
kevtorres23 · Jun 7, 2024 · e2c6877 · e2c6877
1 parent 98c7a61
commit e2c6877
Show file tree

Hide file tree

Showing 2 changed files with 188 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -172,5  172,35 @@ <h1>Everything is ready.</h1>
         <h2>Launching in 3, 2, 1...</h2>
         <a href="views/create-account.html"><button class="sign-now">Get Started</button></a><br><br>
     </section>
     <footer>
         <div class="group">
             <div class="brand">
                 <div class="logo">
                     <img src="views/images/rocket-logo.png" alt="" width="40px" height="40px">
                     <span>Rocket</span>
                 </div><br>
                 <p>Shoot at the stars. Launch your ideas.</p>
             </div>
             <div class="box">
                 <h2>ABOUT US</h2>
                 <p>What is Rocket</p>
                 <p>Use Guideline</p>
                 <p>Terms and Conditions</p>
                 <p>Privacy Policy</p>
             </div>
             <div class="box">
                 <h2>TOOLS</h2>
                 <p>Articles</p>
                 <p>Rocket's Team</p>
                 <p>Forums</p>
             </div>
             <div class="box">
                 <h2>CONTACT US</h2>
                 <p>Articles</p>
                 <h2>GET IN TOUCH</h2>
                 <i class="ph ph-facebook-logo"></i><i class="ph ph-instagram-logo"></i><i class="ph ph-x-logo"></i>
             </div>
         </div>
     </footer>
 </body>
 </html>
diff --git a/views/styles/index_styles.css b/views/styles/index_styles.css
@@ -402,7  402,6 @@ main h3{
 }
 
 .features h1{
-    padding: 12px 80px;
     font-weight: 600;
     font-size: 5vw;
     color: white;
@@ -539,7  538,7 @@ main h3{
     border-style: none;
     border-color: none;
     font-family: 'DM Sans';
-    font-size: 3vh;
     font-size: 1.5vw;
     font-weight: 700;
     color: #707070;
     cursor: pointer;
@@ -562,7  561,7 @@ main h3{
     padding-right: 15px;
     display: none;
     overflow: hidden;
-    font-size: 2.3vh;
     font-size: 16px;
 }
 
 .everything-ready{
@@ -576,8  575,8 @@ main h3{
     color: white;
     background-image: linear-gradient(to right, #B780FF, #880AEA);
     width: 100%;
-    padding-top: 4vw;
-    padding-bottom: 4vw;
     padding-top: 5vw;
     padding-bottom: 5vw;
 }
 
 .everything-ready h1{
@@ -780,6  779,14 @@ footer .group .box figure{
         font-size: 2vw;
         padding: 2vw 4vw;
     }
 
     .collapsible-content{
         font-size: 1.5vw;
     }
 
     .collapse-btn{
         font-size: 2vw;
     }
 }
 
 @media (max-width: 885px){
@@ -816,6  823,14 @@ footer .group .box figure{
         width: 35vw;
         height: 35vw;
     }
 
     .collapsible-content{
         font-size: 1.8vw;
     }
 
     .collapse-btn{
         font-size: 2.2vw;
     }
 }
 
 @media (max-width: 643px){
@@ -853,6  868,14 @@ footer .group .box figure{
         font-size: 7vw;
     }
 
     .collapsible-content{
         font-size: 2.5vw;
     }
 
     .collapse-btn{
         font-size: 3vw;
     }
 
     .sign-now{
         padding: 2vw 4vw;
         font-size: 2.7vw;
@@ -912,4  935,134 @@ footer .group .box figure{
         padding: 2vw 4vw;
         font-size: 2vw;
     }
 }
 
 @media (max-width: 426px){
     header .container{
         padding: 0 2rem;
     }
 
     main{
         padding: 5rem 1rem;
     }
 
     .main-text{
         width: 90%;
     }
 
     .main-text h1{
         font-size: 13vw;
     }
 
     .main-text h3{
         font-size: 4vw;
         max-width: 100%;
         margin-top: 1.5vw;
     }
 
     .get-started{
         margin-bottom: 4vw;
     }
 
     .features h1{
         font-size: 12vw;
         margin-bottom: 18vw;
     }
 
     .features h2{
         font-size: 4.5vw;
         padding-left: 10vw;
         padding-right: 10vw;
         margin-bottom: 18vw;
     }
 
     .feature-btn{
         font-size: 3.5vw;
         padding: 3vw 5vw;
     }
 
     .feature-row{
         row-gap: 5vw;
     }
 
     .how-it-works{
         align-items:flex-end;
     }
 
     .how-it-works h1{
         font-size: 11vw;
     }
 
     .how-it-works h2{
         font-size: 4vw;
         text-align: center;
         padding-left: 0;
         padding-right: 0;
         font-weight: 500;
     }
 
     .collapsible-content{
         font-size: 3.8vw;
     }
 
     .collapse-btn{
         font-size: 4.5vw;
     }
 
     .learning h1{
         font-size: 10vw;
     }
 
     .learning p{
         font-size: 4vw;
     }
 
     .dev-team-btn{
         font-size: 4vw !important;
         padding: 4vw 6vw;
     }
 
     .everything-ready h1{
         font-size: 12vw;
     }
 
     .everything-ready h2{
         font-size: 6vw;
     }
 
     .sign-now{
         font-size: 4vw;
         padding: 4vw 6vw;
     }
 }
 
 @media (max-width: 820px){
     footer .group{
         grid-template-columns: repeat(2, 2fr);
         column-gap: 20vw;
         row-gap: 10vw;
     }
 
     .box h2{
         font-size: 1rem;
     }
 
     .box p{
         font-size: 1rem;
     }
 }
 
 @media (max-width: 500px){
     footer{
         justify-content: left;
     }
 
     .brand{
         width: 100%;
     }
 
     footer .group{
         grid-template-columns: repeat(1, 2fr) !important;
         row-gap: 7vw;
     }
 }