Structure and style sign-up section

Add inner and outer containers for sign-up section, make these containers flexbox and then style the text and button.
TechieVinita · Nov 17, 2023 · 0d4ee42 · 0d4ee42
1 parent a9daad0
commit 0d4ee42
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
             <div class="content">
                 <h1>This website is awesome</h1>
                 <p>This website has some subtext that goes here under the main title. It's a smaller font and the color is lower contrast.</p>
-                <button>Sign up</button>
+                <button class="btn">Sign up</button>
             </div>
             <div class="img-box">
                 This is a placeholder for an image
@@ -56,12 +56,17 @@ <h2>Some random information.</h2>
 
     <div class="comment-section">
         <p class="comment">This is an inspiring quote, or a testimonial from a customer. Maybe it's just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks nice.</p>
-        <p class="author-name">-Thor,God of Thunder</p>
+        <p class="author-name">-Thor, God of Thunder</p>
     </div>
 
-    <div class="sign-up-section">
-        <p><span>Call to action! It's time!</span>Sign up for our product by clicking that button right over there!</p>
-        <button>Sign up</button>
+    <div class="outer-sign-up-section">
+        <div class="inner-sign-up-section">
+            <div class="text">
+                <p class="bold-text">Call to action! It's time!</p> 
+                <p>Sign up for our product by clicking that button right over there!</p>
+            </div>
+            <button class="btn">Sign up</button>
+        </div>
     </div>
 
     <div class="footer">

diff --git a/style.css b/style.css
@@ -59,13 +59,17 @@ h1{
 }
 
 .content button{
-    color: #E5E7EB;
-    background-color: #3882F6;
-    font-weight: bold;
-    padding: 4px 20px;
     margin-top: 16px;
     border: 2px solid transparent;
+}
+
+.btn{
+    font-weight: bold;
     border-radius: 5px;
+    padding: 4px 20px;
+    color: #E5E7EB;
+    background-color: #3882F6;
+    border: 2px solid currentColor;
 }
 
 .img-box{
@@ -94,4 +98,39 @@ h1{
     font-size: 26px;
     font-weight: bold;
     text-align: right;
+}
+
+/* Sign Up Section */
+
+.outer-sign-up-section{
+    padding: 80px 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #E5E7EB;
+}
+
+.inner-sign-up-section{
+    display: flex;
+    background-color: #3882F6;
+    width: 80%;
+    border-radius: 5px;
+    padding: 30px 90px;
+    justify-content: space-between;
+}
+
+.bold-text{
+    font-size: 22px;
+    font-weight: bold;
+}
+
+/* footer */
+
+.footer{
+    font-size: 18px;
+    text-align: center;
+    color: #E5E7EB;
+    background-color: #1F2937;
+
+    padding: 26px 0;
 }