footer added and final push

munna516 · Aug 10, 2024 · 7993e03 · 7993e03
1 parent a9ce87d
commit 7993e03
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 12 deletions.
diff --git a/CSS/medium-device-responsive.css b/CSS/medium-device-responsive.css
@@ -31,4 +31,8 @@
         padding: 20px;
         gap: 100px;
     }
+    .footer-img img {
+        width: 95%;
+        margin: 0 auto;
+    }
 }
diff --git a/CSS/small-device-responsive.css b/CSS/small-device-responsive.css
@@ -34,8 +34,18 @@
     .player-card {
         width: 100%;
     }
-    .highlight-container{
+
+    .highlight-container {
         padding: 20px;
         gap: 50px;
     }
+
+    footer {
+        margin-top: 50px;
+    }
+
+    .footer-img img {
+        width: 90%;
+        margin: 0 auto;
+    }
 }
diff --git a/CSS/styles.css b/CSS/styles.css
@@ -3,7 +3,6 @@
 
 body {
     font-family: "Poppins", sans-serif;
-    border: 2px solid red;
     max-width: 1440px;
     margin: 0 auto;
 }
@@ -15,6 +14,17 @@ body {
     padding: 0;
 }
 
+.btn {
+    background: rgb(224, 44, 109);
+    color: rgb(255, 255, 255);
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 10px 24px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
 #Player,
 #highlight {
     margin-top: 100px;
@@ -73,6 +83,7 @@ main {
     padding: 10px 24px;
     border: none;
     border-radius: 5px;
+    cursor: pointer;
 }
 
 /* Banner Styles */
@@ -94,15 +105,7 @@ main {
     margin-bottom: 27px;
 }
 
-.btn {
-    background: rgb(224, 44, 109);
-    color: rgb(255, 255, 255);
-    font-size: 1rem;
-    font-weight: 500;
-    padding: 10px 24px;
-    border: none;
-    border-radius: 5px;
-}
+
 
 .banner-img {
     max-width: 555px;
@@ -185,4 +188,37 @@ main {
 .highlight-img img {
     width: 100%;
     height: 100%;
+}
+
+/* footer Styles */
+footer {
+    max-width: 1440px;
+    margin: 0 auto;
+    margin-top: 100px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+}
+
+.footer-items {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-links img {
+    width: 50%;
+}
+
+.footer-links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.copyright {
+    color: rgb(0, 0, 0);
+    font-size: 1.1rem;
 }
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
                     <li><a href="">Clubs</a></li>
                     <li><a href="">World Cup 2023</a></li>
                     <li><a href="">Upcoming Matches</a></li>
-                    <li><a href="">Contact</a></li>
+                    <li><a href="#footer">Contact</a></li>
                 </ul>
             </div>
             <div class="right-items">
@@ -143,6 +143,23 @@ <h1 class="highlight-title">All Highlights
             </div>
         </section>
     </main>
+
+    <footer id="footer">
+        <div class="footer-items">
+            <div class="footer-img">
+                <img src="images/Logo.png" alt="">
+            </div>
+            <div class="footer-links">
+                <a href=""><img src="images/Social Icons/Instagram.png" alt=""></a>
+                <a href=""><img src="images/Social Icons/Dribbble.png" alt=""></a>
+                <a href=""><img src="images/Social Icons/Twitter.png" alt=""></a>
+                <a href=""><img src="images/Social Icons/Youtube.png" alt=""></a>
+            </div>
+            <div>
+                <p class="copyright">Copyright © 2022 Football</p>
+            </div>
+        </div>
+    </footer>
 </body>
 
 </html>