HTML
<footer class="footer">
<div class="footer-stor play-stor">
<img src="images/play-store.png" alt="">
<h5>play stor</h5>
</div>
<div class="footer-stor apple-stor">
<img src="images/apple.png" alt="">
<h5>apple stor</h5>
</div>
<div class="footer-social-icon">
<a href="#"><img src="images/Icon awesome-instagram.png" alt=""></a>
<a href="#"><img src="images/Icon feather-facebook.png" alt=""></a>
<a href="#"><img src="images/Icon simple-whatsapp.png" alt=""></a>
</div>
<div class="footer-image">
<img src="images/footer.png" alt="">
</div>
<p>copyright © 2023 by <span> ahmed alnshar </span>| all rights reserved.</p>
</footer>
css
.footer {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
height: 58rem;
width: 100vw;
color: var(--text-color);
padding: 0 10% 4rem;
background-image: url(images/footer-bg.png);
background-position: center;
background-size: cover;
}
.footer-stor {
display: flex;
align-items: self-start;
justify-content: space-around;
}
.footer-stor .apple-stor,
.footer-stor .play-stor {
padding: 1rem 3rem 1rem;
border-radius: 1rem;
background: #fff;
text-align: left;
margin: 1rem;
}
.footer-stor h5 {
position: absolute;
}
p {
text-transform: capitalize;
font-size: 1.8rem;
}
.footer-iconTop a {
display: inline-flex;
justify-content: center;
align-items: center;
padding: .8rem;
background: none;
border-radius: .8rem;
transition: 0.5s ease;
}
.footer-image img {
width: 40vw;
}
لاكن ممكن نعمل تمديد للصوره من الاجناب وتحت بحيث تكون مظبوطه ولا مينفعش
