added footer
This commit is contained in:
JSriwongsa
parent
073ad18dbc
commit
7ea4002a7c
2 changed files with 253 additions and 1 deletions
|
|
@ -319,6 +319,20 @@ form.search :where(i:last-child){
|
|||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
form :where(input, textarea, select){
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--white-color);
|
||||
outline: 0;
|
||||
background-color: transparent;
|
||||
padding: 10px 20px;
|
||||
transition: border 0.3s;
|
||||
}
|
||||
form :where(input, textarea, select):focus{
|
||||
border-color: var(--dark-color);
|
||||
}
|
||||
form :where(input, textarea, select)::placeholder{
|
||||
color: grey;
|
||||
}
|
||||
.inner-header .search .input{
|
||||
display: flex;
|
||||
height: 80px;
|
||||
|
|
@ -867,6 +881,59 @@ form.search :where(i:last-child){
|
|||
.product-about.shipping .grey-color{
|
||||
color: grey;
|
||||
}
|
||||
/*--------- alsolike ---------*/
|
||||
.alsolike .heading h2{
|
||||
font-size: 30px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
/*---------- footer ----------*/
|
||||
.inner-footer{
|
||||
padding: 100px 0;
|
||||
padding-bottom: 20px;
|
||||
line-height: 1.4;
|
||||
background-color: whitesmoke;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.inner-footer .wrap >div{
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 50px;
|
||||
}
|
||||
.inner-footer .subscribe{
|
||||
width: 100%;
|
||||
}
|
||||
.inner-footer .top.subscribe h3{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.inner-footer p{
|
||||
font-size: 14px;
|
||||
}.inner-footer .search{
|
||||
max-width: 400px;
|
||||
}
|
||||
.inner-footer .search .input{
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--main-color);
|
||||
}
|
||||
.inner-footer .subscribe .grey-color{
|
||||
color: grey;
|
||||
}
|
||||
.inner-footer .subscribe .search i{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.inner-footer .list-block .company-address a{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.inner-footer .list-block .company-address:hover a{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.inner-footer .list-block .company-address p{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.inner-footer .list-block .company-address:hover p{
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -438,8 +438,193 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alsolike">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="heading">
|
||||
<h2 class="title">You may also like</h2>
|
||||
</div>
|
||||
<div class="inner-wrapper">
|
||||
<div class="dotgrid alsolike-box">
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new1.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new1-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Onyx Dress with Embroidery</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$129.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new5.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new5-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Villie Wide-legs Shorts</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$115.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/best2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/best2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">White Snow Open Back Halter Top</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$89.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/new9.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/new9-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Jester Loafers</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="current">$149.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="dot-image">
|
||||
<a href="" class="product-link"></a>
|
||||
<div class="thumbnail">
|
||||
<img src="images/top2.jpg" alt="">
|
||||
</div>
|
||||
<div class="thumbnail hover">
|
||||
<img src="images/top2-1.jpg" alt="">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<ul>
|
||||
<li><a href=""><i class='bx bx-heart'></i></a></li>
|
||||
<li><a href=""><i class='bx bx-share-alt' ></i></a></li>
|
||||
<li><a href=""><i class='bx bx-store-alt' ></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="label"><span>25% OFF</span></div>
|
||||
</div>
|
||||
<div class="dot-info">
|
||||
<h2 class="dot-title"><a href="">Crayola Lemon Thong Bodysuit</a></h2>
|
||||
<div class="product-price">
|
||||
<span class="before">$125.00</span>
|
||||
<span class="current">$93.00</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer></footer>
|
||||
<footer>
|
||||
<div class="inner-footer">
|
||||
<div class="container">
|
||||
<div class="wrap">
|
||||
<div class="top">
|
||||
<div class="subscribe">
|
||||
<h3>Subscribe via email</h3>
|
||||
<p class="grey-color">Subscribe and recive a 35% discount on your next purchase</p>
|
||||
<form action="" class="search">
|
||||
<i class='bx bx-envelope'></i>
|
||||
<input type="text" class="input" placeholder="Enter your email">
|
||||
<i class='bx bx-right-arrow-alt' ></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title social">Social Media</h3>
|
||||
<ul>
|
||||
<li><a href="#"><i class='bx bxl-instagram-alt'></i> Instagram</a></li>
|
||||
<li><a href="#"><i class='bx bxl-twitter'></i> Twitter</a></li>
|
||||
<li><a href="#"><i class='bx bxl-pinterest'></i> Printerest</a></li>
|
||||
<li><a href="#"><i class='bx bxl-youtube' ></i> Youtube</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="list-block">
|
||||
<h3 class="dot-title">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="list-block">
|
||||
<h3 class="dot-title">Company</h3>
|
||||
<div class="company-address grey-color">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue