added footer section
This commit is contained in:
JSriwongsa
parent
38a3cd4d02
commit
ee4ae57cbb
2 changed files with 141 additions and 7 deletions
|
|
@ -1042,10 +1042,72 @@
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<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>© 2023 - <a href="#">A.Z Shop All Rights Reserved</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<div class="overlay" data-overlay></div>
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
|
@ -1129,6 +1191,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<a href="#" class="scroll-top"><i class='bx bxs-chevrons-up'></i></a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -456,7 +456,7 @@ form.search{
|
||||||
form.search input{
|
form.search input{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
form.search input[type=search]{
|
form.search :where(input[type=search], input[type=text]){
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -754,11 +754,80 @@ main > div{
|
||||||
color: var(--white-color);
|
color: var(--white-color);
|
||||||
float: right;
|
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){
|
@media only screen and (max-width:576px){
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue