Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changed the footer of the Coffee Website Template into a much attractive and professional footer #924

Merged
merged 1 commit into from
Oct 11, 2023
+136 −30
Merged

Changed the footer of the Coffee Website Template into a much attractive and professional footer #924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 92 additions & 11 deletions Coffee Website Template/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 */
}



Expand Down Expand Up @@ -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;
}
63 changes: 44 additions & 19 deletions Coffee Website Template/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,27 +396,52 @@ <h1 class="heading"> our <span>blogs</span> </h1>

<!-- footer section starts -->

<section class="footer">

<div class="share">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
<a href="#" class="fab fa-pinterest"></a>
</div>

<div class="links">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">menu</a>
<a href="#">products</a>
<a href="#">review</a>
<a href="#">contact</a>
<a href="#">blogs</a>
<div class="footer">
<div class="column">
<a href="#" class="logo">
<img src="images/logo.png" alt="">
</a>
<br><br>
<p>Small description about the coffee shop goes here.</p>
</div>

</section>
<div class="column">
<h2>Contact Us</h2>
<ul>
<li><i class="fas fa-phone"></i> +1 (123) 456-7890</li>
<li><i class="fas fa-envelope"></i> info@example.com</li>
<li><i class="fas fa-map-marker-alt"></i> 123 Main St, Cityville, USA</li>
</ul>
</div>
<div class="column">
<h2>Important Links</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="column">
<h2>Opening Hours</h2>
<p>Mon-Fri: 8am - 8pm<br>Sat-Sun: 9am - 6pm</p>
</div>
</div>
<div class="footer">
<!-- Your existing content -->
<div class="social-icons-container">
<div class="share">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
</div>
<div class="made-with-love">
Made with <i class="fas fa-heart" style="color: red;"></i> by YourName. All rights reserved.
</div>
</div>
</div>

<!-- footer section ends -->

Expand Down
Loading