Skip to content

Commit

Permalink
Merge pull request #1065 from ANKeshri/feat/footer-of-furniture-website
Browse files Browse the repository at this point in the history 
add footer in furniture website
  • Loading branch information
@apu52
apu52 authored Jul 24, 2024
2 parents 1bcc0d4 + 6720360 commit 30b2d42
Show file tree
Hide file tree
Showing 2 changed files with 274 additions and 0 deletions.
185 changes: 185 additions & 0 deletions Projects/Furniture-website/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,3 +297,188 @@ body {
}

/* ---------------> End Of Cart <---------------- */
#footer {
color: #fff;
font-family: "Ubuntu";
padding: 60px;
}
.gradient-background{
background: #333;
}

#footer h4 {
font-family: "Montserrat";
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: bold;
position: relative;
padding-bottom: 10px;
}

#footer h4::after {
content: '';
position: absolute;
width: 50px;
height: 5px;
background:var(--primaryColor);
left: 0;
bottom: 0;
}

#footer ul {
list-style: none;
padding-left: 0;

}

#footer ul li {
margin-bottom: 10px;
}

#footer ul li a {
color: aliceblue;
font-weight: 600;

}

#footer .signup_form {
padding-bottom: 30px;
}

#footer .signup_form input {
width: 85%;
padding: 10px;
border: none;
border-radius: 5px 0 0 5px;
}

#footer .signup_form button {
padding: 10px;
background: var(--primaryColor);
border: none;
border-radius: 0 5px 5px 0;
color: black;
}

.footer-icon {
margin-right: 30px;
}

.footer-social-icons i {
font-size: 1.6rem;
margin: 0 10px;
}

.footer-social-icons i:hover {
color: #f2cbd0;
transform: scale(1.1);
}
/* Footer */
.footer {
background-color: #f8f9fa;
padding: 20px 0;
}

.footer h4 {
font-weight: 600;
margin-bottom: 20px;
}

.social-icons {
list-style: none;
padding: 0;
}

.social-icons li {
display: inline;
margin-right: 10px;
}

.social-icons a {
text-decoration: none;
color: #000;
font-size: 1.5rem;
}

.footer p {
margin: 0;
}
b, strong {
font-weight: 600;
}
.row{
display: flex;
justify-content: space-evenly;
}
.location{
width: 20%;
}
.cnt{
width: 40%;
}
.cnt h3{
color: white;
}
.location h3{
color: white;
}
#cont{
margin-top: 1rem;
margin-bottom: 2rem;

}
#footer ul {
list-style: none;
padding-left: 0;
}
@media (min-width: 768px) {
.col-md-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 992px) {
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 992px) {
.col-lg-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
}
@media (min-width: 992px) {
.col-lg-12 {
flex: 0 0 auto;
width: 100%;
}
}
.copyright {
text-align: center;
font-weight: 800;
padding-top: 10px;
border-top: 2px solid var(--primaryColor);
margin-top: 30px;
}
.gradient-background {
background: #333;
background-size: 180% 180%;
animation: gradient-animation 18s ease infinite;
}
#footer h4 {
font-family: "Montserrat";
font-size: 1.5rem;
margin-bottom: 20px;
font-weight: bold;
position: relative;
padding-bottom: 10px;
}
#footer ul li a {
color: aliceblue;
font-weight: 600;
}
.text-decoration-none {
text-decoration: none !important;
}
89 changes: 89 additions & 0 deletions Projects/Furniture-website/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,97 @@ <h3>your total : $ <span class="cart-total">0</span></h3>
</div>
</div>
<!-- end of cart -->
<!-- Footer -->
<section id="footer" class="gradient-background">
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-12">
<div>
<h4>Services</h4>
<ul>
<li class="mb-1"><a class="link text-decoration-none" href="#">Home</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">Features</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">Pricing</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">FAQs</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">About</a></li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div>
<h4>Further Infomation</h4>
<ul>
<li class="mb-1"><a class="link text-decoration-none" href="#">Terms & Conditions</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">Privacy Policy</a></li>
</ul>
</div>
<div>
<h4>Contact</h4>
<ul>
<li class="mb-1"><a class="link text-decoration-none" href="#">Phone: 91+ 9900000000</a></li>
<li class="mb-1"><a class="link text-decoration-none" href="#">Address: XYZ,India</a></li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div>
<h4>Subscribe</h4>
<div class="signup_form">
<form class="subscribe">
<input type="text" class="subscribe__input" placeholder="Enter Email Address">
<button type="button" class="subscribe__btn"><i class="fas fa-paper-plane"></i></button>
</form>
</div>
<div>
<h4>Follow Us</h4>
<ul class="footer-social-icons">
<i class="footer-icon fa-brands fa-facebook-f"></i>
<i class="footer-icon fa-brands fa-instagram"></i>
<i class="footer-icon fa-solid fa-envelope"></i>
</ul>
</div>
</div>

</div>
<div id="popup">Thanks for subscribing!</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
<p class="copyright">© Comfy House</p>
</div>
</div>
</div>

</section>

<!-- javascript -->
<script src="./assets/js/app.js"></script>
<script>
document.querySelector('.subscribe__btn').addEventListener('click', function() {
// Show the popup
var popup = document.getElementById('popup');
popup.style.display = 'block';
popup.style.position = 'fixed';
popup.style.top = '23rem'; // Positioning at the top
popup.style.right = '20px'; // Positioning at the right
popup.style.backgroundColor = 'green'; // Green background
popup.style.color = 'white'; // White text
popup.style.padding = '10px 20px';
popup.style.borderRadius = '5px';
popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
popup.style.zIndex = '1000';
popup.style.width = '13rem';

// Hide the popup after 3 seconds
setTimeout(function() {
popup.style.display = 'none';
}, 3000);
});

// Initial style setup for the popup (hidden by default)
var popup = document.getElementById('popup');
popup.style.display = 'none';
</script>
<script src="https://kit.fontawesome.com/eb59e06a58.js" crossorigin="anonymous"></script>
</body>
</html>

0 comments on commit 30b2d42

Please sign in to comment.