Görseldeki gibi bir footer nasıl yapılır?

533388 dedi:

O zaman kısımlara ayırıp inceleyin.

Genişletmek için tıkla...

Hocam hallettim bu arada teşekkürler footer için.

Tailwind kullan?

533388 dedi:

O zaman kısımlara ayırıp inceleyin.

Genişletmek için tıkla...

Hocam slider yaptım onunla ilgili bir sorum var .Slider da geçiş yaptığım zaman sayfa kendini otomatik olarak navbarın altına atıyor.

Kodlar bu şekilde:
HTML
<section class="slider">
<div class="slider-wrapper">
<div class="slider-1">
<img id="slide-1" src="game1 (2).jpg" alt="">
<img id="slide-2" src="game2.jpg" alt="">
<img id="slide-3" src="game3.jpg" alt="">
<img id="slide-4" src="game4.jpg" alt="">
<img id="slide-5" src="game5.jpg" alt="">

</div>
<div class="slider-nav">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
<a href="#slide-4"></a>
<a href="#slide-5"></a>
</div>
</div>
</section>

CSS

.slider{
padding: 2rem;

}
.slider-wrapper{
position: relative;
max-width: 50rem;
margin: 0 auto;
}
.slider-1{
display: flex;
aspect-ratio: 16/9;
overflow-x: auto;
scroll-snap-type: none;
scroll-behavior: smooth;
box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
border-radius: 0.5rem;
overflow: hidden;
}
.slider-1 img{
flex: 1 0 100%;
scroll-snap-align: start;
object-fit: cover;
}
.slider-nav{
display: flex;
column-gap: 1rem;
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.slider-nav a{
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: #fff;
opacity: 0.75;
transition: 250ms ease;
}
.slider-nav a:hover{
opacity: 1;
}