muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added footer section

Browse source
This commit is contained in:
JSriwongsa 2023-06-28 17:53:33 -05:00
parent 38a3cd4d02
commit ee4ae57cbb
2 changed files with 141 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
ecommerce/fashion_website/index.html
View file

@ -1042,10 +1042,72 @@
</div>
</div>
<div class="banner">
<div class="container">
<div class="wrap object-cover">
<div class="bg-image">
<img src="images/banner.png" alt="">
</div>
<div class="info">
<span>Best Offers</span>
<h3>Glamorous style</h3>
<div class="button">
<a href="#" class="btn-signUp">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="inner-footer">
<div class="container">
<div class="wrap">
<div class="socials">
<h3>Socials Media</h3>
<ul>
<li><a href="#"><i class='bx bxl-instagram-alt'></i></a></li>
<li><a href="#"><i class='bx bxl-twitter'></i></a></li>
<li><a href="#"><i class='bx bxl-pinterest'></i></a></li>
<li><a href="#"><i class='bx bxl-youtube' ></i></a></li>
</ul>
</div>
<div class="links">
<h3>Service</h3>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Delivery Service</a></li>
<li><a href="#">Terms & Condition</a></li>
<li><a href="#">Policy</a></li>
</ul>
</div>
<div class="links">
<h3>Company</h3>
<div class="address">
<p>1234 N Lincoln Park W <br>Chicago, IL 60600</p>
<p><a href="#">+1 (312) 123-4567</a> <br> <a href="#">az.shop@outlook.com</a></p>
<p>Weekdays: 11:00 am - 8:00 pm<br> Weekends: 10:00 am to 9:00 pm</p>
</div>
</div>
<div class="subscribe">
<h3>Subscribe via email</h3>
<p>Subscribe and recive a 35% discount on your next purchase</p>
<form action="" class="search">
<i class='bx bx-envelope' ></i>
<input type="text" placeholder="Enter your email">
<input type="submit">
<i class='bx bx-right-arrow-alt' ></i>
</form>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="container">
<p>&#169; 2023 - <a href="#">A.Z Shop All Rights Reserved</a></p>
</div>
</div>
</footer>
<div class="overlay" data-overlay></div>
@ -1129,6 +1191,9 @@
</div>
</div>
</div>
<a href="#" class="scroll-top"><i class='bx bxs-chevrons-up'></i></a>
</div>

81
ecommerce/fashion_website/style.css
View file

@ -456,7 +456,7 @@ form.search{
form.search input{
position: absolute;
}
form.search input[type=search]{
form.search :where(input[type=search], input[type=text]){
width: 100%;
height: 46px;
top: 0;
@ -754,11 +754,80 @@ main > div{
color: var(--white-color);
float: right;
}
/*---------- banner ----------*/
.banner{
position: relative;
background-color: rgb(220, 220, 212);
}
.banner .wrap{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.banner .bg-image{
height: 400px;
position: relative;
}
.banner .info{
padding: 90px 0 ;
}
.banner .info span{
color: #454140;
font-weight: 600;
margin-bottom: 20px;
}
.banner .info h3{
margin-bottom: 20px;
font-size: 32px;
}
/*---------- footer ----------*/
.inner-footer{
padding: 0 0 60px;
font-size: 14px;
color: var(--based-color);
}
.inner-footer .wrap{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.inner-footer .wrap h3{
font-weight: 600;
color: var(--dark-color);
margin-bottom: 15px;
}
.inner-footer .wrap > div:not(.subscribe) h3{
font-size: 18px;
}
.inner-footer .socials ul{
display: flex;
gap: 15px;
font-size: 20px;
color: var(--dark-color);
}
footer a{
transition: color 0.3s;
}
footer a:hover{
color: var(--dark-color);
}
footer .socials a:hover{
color: var(--based-color);
}
.copyright{
text-align: center;
font-size: 12px;
}
.scroll-top{
position: fixed;
bottom: 2.3rem;
right: 2.3rem;
}
.scroll-top i{
background: var(--based-color);
color: var(--white-color);
font-size: 20px;
padding: 10px;
border-radius: 30px;
}
@media only screen and (max-width:576px){