From be95edebb80878bdc8a663e69311e25390c3602d Mon Sep 17 00:00:00 2001
From: Jayawardana OV <114973581+OnaliyVinukiy@users.noreply.github.com>
Date: Sun, 1 Oct 2023 19:51:28 +0530
Subject: [PATCH] Changed the footer into a much attractive and professional
footer
---
Coffee Website Template/css/style.css | 103 +++++++++++++++++++++++---
Coffee Website Template/index.html | 63 +++++++++++-----
2 files changed, 136 insertions(+), 30 deletions(-)
diff --git a/Coffee Website Template/css/style.css b/Coffee Website Template/css/style.css
index 5ee6b190..4dd33ff3 100644
--- a/Coffee Website Template/css/style.css
+++ b/Coffee Website Template/css/style.css
@@ -503,30 +503,30 @@ section{
padding:1rem 0;
}
-.footer{
- background:var(--black);
- text-align: center;
-}
-.footer .share{
- padding:1rem 0;
+
+.footer .share {
+ padding: 1rem 0;
+ text-align: center;
+ margin-top: -90px; /* Adjusted margin-top to move the social media icons closer to the upper border */
}
-.footer .share a{
+.footer .share a {
height: 5rem;
width: 5rem;
line-height: 5rem;
font-size: 2rem;
- color:#fff;
- border:var(--border);
- margin:.3rem;
+ color: #fff;
+ border: var(--border);
+ margin: 0.3rem;
border-radius: 50%;
}
-.footer .share a:hover{
+.footer .share a:hover {
background-color: var(--main-color);
}
+
.footer .links{
display: flex;
justify-content: center;
@@ -556,6 +556,11 @@ section{
.footer .credit span{
color:var(--main-color);
}
+.column h2 {
+ font-size: 24px;
+ margin-bottom: 15px;
+ margin-top: 0; /* Add this line to remove default margin from h2 */
+}
@@ -639,4 +644,80 @@ section{
font-size: 50%;
}
+}
+
+
+/*footer*/
+
+.footer {
+ display: flex;
+ justify-content: space-around;
+ background-color: var(--black);
+ color: #fff;
+ padding: 40px 20px 30px 20px;
+ flex-wrap: wrap;
+}
+
+.column {
+ width: 220px;
+ margin-bottom: 30px;
+}
+
+.column h2 {
+ font-size: 24px;
+ margin-bottom: 15px;
+ margin-top: 0;
+}
+
+.column p,
+.column ul {
+ font-size: 16px;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ line-height: 1.5;
+}
+
+.column ul li {
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+}
+
+.column ul li i {
+ margin-right: 10px;
+}
+
+.column ul li a {
+ color: #fff;
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+.column ul li a:hover {
+ color: #ffcc00;
+}
+
+
+
+
+.footer .social-icons-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 20px; /* Adjust margin-top to create space between social icons and text */
+}
+
+.footer .social-icons-container .share {
+ display: flex;
+}
+
+.footer .made-with-love {
+ text-align: center;
+ font-size: 14px;
+ margin-top: 30px;
+}
+
+.footer .made-with-love i {
+ color: red;
}
\ No newline at end of file
diff --git a/Coffee Website Template/index.html b/Coffee Website Template/index.html
index 81280fa7..b9de1a52 100644
--- a/Coffee Website Template/index.html
+++ b/Coffee Website Template/index.html
@@ -396,27 +396,52 @@ our blogs
-
+