Add extra div for action section

ssimkani · Mar 2, 2024 · bd4f7ba · bd4f7ba
1 parent d9f171a
commit bd4f7ba
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -71,9 +71,13 @@ <h2>Some random information.</h2>
     </div>
 
     <div class="action">
-        <h4>Call to action! It's time!</h4>
-        <p>Sign up for our product by clicking our link right over there!</p>
-        <button>Sign Up</button>
+        <div class="action2">
+            <div class="left-text">
+                <h4>Call to action! It's time!</h4>
+                <p>Sign up for our product by clicking our link right over there!</p>
+            </div>
+            <button>Sign Up</button>
+        </div>
 
     </div>
 

diff --git a/style.css b/style.css
@@ -137,8 +137,12 @@ h1 {
 /* Quote */
 .quote {
 display: flex;
+flex-direction: column;
 background-color: #E5E7EB;
-justify-content: center;
+align-items: center;
+padding: 100px;
+gap: 30px;
+
 }
 
 .inspiration {
@@ -153,14 +157,19 @@ justify-content: center;
     font-family: #E5E7EB;
     font-size: 24px;
     font-weight: bold;
+    margin-left: 650px;
 }
 
 /* Quote */
 
 
 
 /* Call to Action */
+
 .action {
+    padding: 100px;
+}
+.action2 {
     display: flex;
     height: 150px;
     width: 1000px;
@@ -169,18 +178,25 @@ justify-content: center;
     align-items: center;
     border-radius: 10px;
     margin: auto;
+    justify-content: space-evenly;
+}
+
+.left-text {
+    display: flex;
+    flex-direction: column;
 }
 
-.action h4 {
+.left-text h4 {
     color: #F9FAF8;
+    margin: 0;
 }
 
-.action p {
+.left-text p {
     color: #E5E7EB;
     font-size: 18px;
 }
 
-.action button {
+.action2 button {
     color: #F9FAF8;
     background-color: #3882F6;
     border: solid #F9FAF8;