Still working in the Landing Page

kevtorres23 · Jun 5, 2024 · 1343301 · 1343301
1 parent 21a048c
commit 1343301
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -131,29 +131,30 @@ <h3>Ideas Generation</h3>
             <h1>Rocket remains simple</h1>
             <h2>By following some simple steps, you will get started into our general<br>worfklow. We made sure it is easy for you to follow.</h2>
             <br>
-            <div class="purple-line"></div>
-            <div class="collapsible-element">
-                <button type="button" class="collapse-btn"><i class="ph-bold ph-notebook icon"></i>Tell us what are you looking for.</button>
-                <div class="collapsible-content">
-                    <p>Fill out a form to provide us with essential information about what you need exactly. Is it a technical, design, or logical inquiry? How would you like it to be presented? Please let us know everything.</p>
+            <div class="collapsible-set">
+                <div class="collapsible-element">
+                    <button type="button" class="collapse-btn"><i class="ph-bold ph-notebook icon"></i>Tell us what are you looking for.</button>
+                    <div class="collapsible-content">
+                        <p>Fill out a form to provide us with essential information about what you need exactly. Is it a technical, design, or logical inquiry? How would you like it to be presented? Please let us know everything.</p>
+                    </div>
                 </div>
-            </div>
-            <div class="collapsible-element">
-                <button type="button" class="collapse-btn"><i class="ph-bold ph-paper-plane-tilt icon"></i>Send it for development.</button>
-                <div class="collapsible-content">
-                    <p>When you feel you"ve explained your solution request enough, please send it to us. We will receive it and review it to start working on it.</p>
+                <div class="collapsible-element">
+                    <button type="button" class="collapse-btn"><i class="ph-bold ph-paper-plane-tilt icon"></i>Send it for development.</button>
+                    <div class="collapsible-content">
+                        <p>When you feel you"ve explained your solution request enough, please send it to us. We will receive it and review it to start working on it.</p>
+                    </div>
                 </div>
-            </div>
-            <div class="collapsible-element">
-                <button type="button" class="collapse-btn"><i class="ph-bold ph-nut icon"></i>Let"s get to work.</button>
-                <div class="collapsible-content">
-                    <p>A Rocket"s development team will briefly start working on your request. Meanwhile, they will stablish a clear, effective communication with you to ensure that everything is going well.</p>
+                <div class="collapsible-element">
+                    <button type="button" class="collapse-btn"><i class="ph-bold ph-nut icon"></i>Let"s get to work.</button>
+                    <div class="collapsible-content">
+                        <p>A Rocket"s development team will briefly start working on your request. Meanwhile, they will stablish a clear, effective communication with you to ensure that everything is going well.</p>
+                    </div>
                 </div>
-            </div>
-            <div class="collapsible-element">
-                <button type="button" class="collapse-btn"><i class="ph-bold ph-cube icon"></i>Receive your solution product.</button>
-                <div class="collapsible-content">
-                    <p>When your request is completed, you will receive a report containing all your solution details, including a product ready to download or use as you wish.</p>
+                <div class="collapsible-element">
+                    <button type="button" class="collapse-btn"><i class="ph-bold ph-cube icon"></i>Receive your solution product.</button>
+                    <div class="collapsible-content">
+                        <p>When your request is completed, you will receive a report containing all your solution details, including a product ready to download or use as you wish.</p>
+                    </div>
                 </div>
             </div>
     </section>

diff --git a/views/styles/index_styles.css b/views/styles/index_styles.css
@@ -471,25 +471,29 @@ main h3{
     background-image: linear-gradient(to right, #9747FF, #6F00FF);
 }
 
+.collapsible-set{
+    display: flex;
+    flex-direction: column;
+}
+
 .how-it-works{
-    overflow: hidden;
-    padding-top: 80px;
+    padding-top: 6vw;
     padding-left: 80px;
-    padding-bottom: 80px;
+    padding-bottom: 6vw;
     color: black;
-    margin-top: 150px;
+    margin-top: 10vw;
     background-color: white;
-    height: 950px;
+    overflow-x: hidden;
 }
 
 .how-it-works h1{
-    font-size: 3.5vw;
+    font-size: 4vw;
 }
 
 .how-it-works h2{
-    margin-top: -30px;
+    margin-top: -2vw;
     font-weight: 400;
-    font-size: 21px;
+    font-size: 1.2rem;
     margin-bottom: 3vw;
 }
 
@@ -503,14 +507,15 @@ main h3{
 }
 
 .fill-out-image{
-    border-radius: 40px;
+    display: flex;
     float: right;
+    position: relative;
+    border-radius: 40px;
     transform: translateX(6vw);
     margin-top: 80px;
 }
 
 .collapsible-element{
-    width: 40%;
     padding: 30px 30px;
     border-radius: 10px;
     margin-bottom: 0.7vw;