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

yazilimologgg31 · 10 Kasım 2023

@533388 bakabilir misin?

pottie4r · 10 Kasım 2023

4 sütun oluştur. Sonra buna benzer şekilde stilleme yap.

Ellie Williams · 10 Kasım 2023

Bootstrap'teki Grid System işini görecektir.

v4 için:

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

getbootstrap.com

v5 için:

Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.

getbootstrap.com

yazilimologgg31 · 10 Kasım 2023

Ellie Williams dedi:
Bootstrap'teki Grid System işini görecektir.

v4 için:

Grid system

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

getbootstrap.com

v5 için:

Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.

getbootstrap.com

Bu proje için bootstrap kullanmamız yasak maalesef.

Ellie Williams · 10 Kasım 2023

yazilimologgg31 dedi:
Bu proje için Bootstrap kullanmamız yasak maalesef.

O zaman class'lara kendin atama yap CSS üzerinden. Her türlü "div"lerle yapacaksın ne de olsa.

533388 · 11 Kasım 2023

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Footer</title>
 <link rel="stylesheet" href="app.css">
</head>
<body>
 <footer>
 <div class="section1">
 <h1>Linkler</h1>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#">Link 4</a></li>
 </ul>
 </div>
 <div class="section2">
 <h1>Biz kimiz</h1>
 <ul>
 <li><a href="#">Kurumsal</a></li>
 <li><a href="#">Ekibimiz</a></li>
 <li><a href="#">Medyada Biz</a></li>
 <li><a href="#">Foto Galeri</a></li>
 </ul>
 </div>
 <div class="section3">
 <h1>Hizmetlerimiz</h1>
 <ul>
 <li><a href="#">Hizmet 1</a></li>
 <li><a href="#">Hizmet 2</a></li>
 <li><a href="#">Hizmet 3</a></li>
 <li><a href="#">Hizmet 4</a></li>
 </ul>
 </div>
 <div class="section4">
 <h1>Sosyal medya</h1>
 <ul>
 <li><a href="#">İnstagram</a></li>
 <li><a href="#">Facebook</a></li>
 <li><a href="#">Youtube</a></li>
 </ul>
 </div>
 </footer>
</body>
</html>

CSS:

*
{
 margin: 0;
 padding: 0;
 list-style: none;
}

footer.
{
 position: fixed;
 bottom:0px;
 right:0px;
 display: flex;
 width: 100vw;
 height: 300px;
 background: #232323;
 justify-content: center;
}

footer .section1 h1.
{
 color: white;
 font-family: Arial;
}

footer .section1 ul li a
{
 color: aquamarine;
}
footer .section2 {
 margin-left: 200px;
}
footer .section2 h1.
{
 color: white;
 font-family: Arial;
}

footer .section2 ul li a
{
 color: aquamarine;
}
footer .section3 {
 margin-left: 200px;
}
footer .section3 h1.
{
 color: white;
 font-family: Arial;
}

footer .section3 ul li a
{
 color: aquamarine;
}

footer .section4 {
 margin-left: 200px;
}
footer .section4 h1.
{
 color: white;
 font-family: Arial;
}

footer .section4 ul li a
{
 color: aquamarine;
}

Devamı sana kalmış.

Ve otomatik düzeltme yüzünden gelen noktaları silersen iyi olur.

yazilimologgg31 · 11 Kasım 2023

533388 dedi:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Footer</title>
 <link rel="stylesheet" href="app.css">
</head>
<body>
 <footer>
 <div class="section1">
 <h1>Linkler</h1>
 <ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
 <li><a href="#">Link 4</a></li>
 </ul>
 </div>
 <div class="section2">
 <h1>Biz kimiz</h1>
 <ul>
 <li><a href="#">Kurumsal</a></li>
 <li><a href="#">Ekibimiz</a></li>
 <li><a href="#">Medyada Biz</a></li>
 <li><a href="#">Foto Galeri</a></li>
 </ul>
 </div>
 <div class="section3">
 <h1>Hizmetlerimiz</h1>
 <ul>
 <li><a href="#">Hizmet 1</a></li>
 <li><a href="#">Hizmet 2</a></li>
 <li><a href="#">Hizmet 3</a></li>
 <li><a href="#">Hizmet 4</a></li>
 </ul>
 </div>
 <div class="section4">
 <h1>Sosyal medya</h1>
 <ul>
 <li><a href="#">İnstagram</a></li>
 <li><a href="#">Facebook</a></li>
 <li><a href="#">Youtube</a></li>
 </ul>
 </div>
 </footer>
</body>
</html>

CSS:

*
{
 margin: 0;
 padding: 0;
 list-style: none;
}

footer.
{
 position: fixed;
 bottom:0px;
 right:0px;
 display: flex;
 width: 100vw;
 height: 300px;
 background: #232323;
 justify-content: center;
}

footer .section1 h1.
{
 color: white;
 font-family: Arial;
}

footer .section1 ul li a
{
 color: aquamarine;
}
footer .section2 {
 margin-left: 200px;
}
footer .section2 h1.
{
 color: white;
 font-family: Arial;
}

footer .section2 ul li a
{
 color: aquamarine;
}
footer .section3 {
 margin-left: 200px;
}
footer .section3 h1.
{
 color: white;
 font-family: Arial;
}

footer .section3 ul li a
{
 color: aquamarine;
}

footer .section4 {
 margin-left: 200px;
}
footer .section4 h1.
{
 color: white;
 font-family: Arial;
}

footer .section4 ul li a
{
 color: aquamarine;
}

Devamı sana kalmış.

Ve otomatik düzeltme yüzünden gelen noktaları silersen iyi olur.

Hocam neden böyle gözüküyor ben de. Alt alta nasıl getirebilirim?

533388 · 11 Kasım 2023

yazilimologgg31 dedi:
Hocam neden böyle gözüküyor ben de. Alt alta nasıl getirebilirim?

O dediğim H1'in sonundaki noktalarıı silin.

Oldu mu?

yazilimologgg31 · 11 Kasım 2023

533388 dedi:
O dediğim H1'in sonundaki noktalarıı silin.

Hocam buna bakabilir misiniz? Başka bir örnekle ilgili slider yaptım fakat ekranın sağ tarafında taşmalar oldu ve alt tarafta da bir scroll açıldı. Bir de sliderlar arası geçiş yapamıyorum. Yardımcı olursanız sevinirim.

533388 dedi:
O dediğim H1'in sonundaki noktalarıı silin.

Oldu mu?

Bakıyım hocam bir saniye.

533388 · 11 Kasım 2023

yazilimologgg31 dedi:
Hocam buna bakabilir misiniz? Başka bir örnekle ilgili slider yaptım fakat ekranın sağ tarafında taşmalar oldu ve alt tarafta da bir scroll açıldı. Bir de sliderlar arası geçiş yapamıyorum. Yardımcı olursanız sevinirim.

Bakayım hocam bir saniye.

Şu an müsait değilim olur olmaz bakarim.

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

Ayrıntılı düzenleme

yazilimologgg31

Picopat

pottie4r

Kilopat

Ellie Williams

Petapat

Grid system

Columns

yazilimologgg31

Picopat

Grid system

Columns

Grid system

Columns

Ellie Williams

Petapat

533388

Hectopat

yazilimologgg31

Picopat

Dosya Ekleri

533388

Hectopat

yazilimologgg31

Picopat

Dosya Ekleri

533388

Hectopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz