Updated Footer Section

utkarshh7 · Dec 4, 2024 · d2d3c24 · d2d3c24
1 parent 6fb8d57
commit d2d3c24
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 6 deletions.
diff --git a/Usability-Clone/index.html b/Usability-Clone/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>UsabilityHub By Utkarsh</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
@@ -197,10 +197,56 @@ <h3> can user complete a task in my software interface</h3>
         </div>
       </div>
     </section>
-    <section class="cta-section"></section>
-    <footer></footer>
-    <div class="subfooter"></div>
-    <div class="spacer"></div>
+    <section class="cta-section">
+        <h2>Start Using Today</h2>
+        <p>Take the guesswork out of design decisions</p>
+        <button>Get Started</button>
+    </section>
+    <footer>
+        <div class="container flex footer-container">
+            <a href="#" class="company-logo">
+                <img src="./assets/asset 1.png" alt="company logo">
+            </a>
+            <div class="link-column flex">
+                <h4>Products</h4>
+                <a href="#" class="hover-link">Overview</a>
+                <a href="#" class="hover-link">Pricing</a>
+                <a href="#" class="hover-link">Usability Hub</a>
+                <a href="#" class="hover-link">Customers Page</a>
+                <a href="#" class="hover-link">Status Page</a>
+            </div>
+            <div class="link-column flex">
+                <h4>Methodologies</h4>
+                <a href="#" class="hover-link">Card Sorting</a>
+                <a href="#" class="hover-link">Prototype Testing</a>
+                <a href="#" class="hover-link">First Click Tests</a>
+                <a href="#" class="hover-link">Preference Tests</a>
+                <a href="#" class="hover-link">Five Second Tests</a>
+                <a href="#" class="hover-link">Design Surveys</a>
+            </div>
+            <div class="link-column flex">
+                <h4>Resources</h4>
+                <a href="#" class="hover-link">Blog</a>
+                <a href="#" class="hover-link">Examples</a>
+                <a href="#" class="hover-link">Testing Guides</a>
+                <a href="#" class="hover-link">Help Center</a>
+                <a href="#" class="hover-link">Contact</a>
+                <a href="#" class="hover-link">Careers</a>
+            </div>
+        </div>
+    </footer>
+
+    <div class="sub-footer">
+        <p>Made By Utkarsh Dubey</p>
+        <div class="container flex sub-footer-container">
+            <a href="#" class="hover-link">Privacy Policy</a>
+            <a href="#" class="hover-link">Terms & Condition</a>
+            <a href="#" class="hover-link">Security Information</a>
+            <a href="#" class="hover-link"><i class="fa-brands fa-facebook"></i></a>
+            <a href="#" class="hover-link"><i class="fa-brands fa-twitter"></i></a>
+        </div>
+    </div>
+
     <script
       src="https://kit.fontawesome.com/06431ec618.js"
       crossorigin="anonymous"

diff --git a/Usability-Clone/style.css b/Usability-Clone/style.css
@@ -229,4 +229,78 @@ box-shadow: 0 0 10px #888;
 }
 .spacer {
   min-height: 100vh;
-}
+}
+
+.card-text {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    color: white;
+}
+
+ .cta-section {
+    background-color: #183b54;
+    padding: 120px var(--padding-inline-section) 80px;
+ }
+
+.cta-section-container {
+    flex-direction: column;
+    gap: 30px;
+    color: white;
+    text-align: center;
+}
+
+.cta-section h2 {
+    color: white;
+    text-align: center;
+    margin-top: 5px;
+}
+.cta-section p {
+    color: rgb(255, 255, 255);
+    margin-top: 20px;
+    text-align: center;
+}
+
+.cta-section button{
+    background-color: var(--accent-color);
+
+}
+
+
+ footer {
+    padding-block: 80px;
+    background-color: #ebf2fa;
+ }
+
+.link-column {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+}
+
+.footer-container {
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+
+.sub-footer {
+    background-color: #b9cde4;
+    padding: var(--padding-inline-section);
+    text-align: center;
+}
+
+.sub-footer p{
+    font-size: 18px;
+    font-weight: 900;
+    font-family: 'Times New Roman', Times, serif;
+    margin-bottom: 5px;
+    color: var(--accent-color-dark);
+}
+
+.sub-footer-container {
+    justify-content: center;
+    gap: 30px;
+    flex-wrap: wrap;
+}