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

E1Rhan · 5 Temmuz 2023

Merhaba arkadaşlar, resimdeki Footer'ı responsive olarak boostrap ile nasıl yapabilirim? Denedim ama istediğim gibi yapamadım.

TheDobrevic · 5 Temmuz 2023

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container-lg">
      <div class="upper">
        <div class="title"><h1>FORD OTOMOTİV SANAYİ A.Ş.</h1></div>
        <div class="badges">
          <i class="fas fa-globe-asia"></i>
          <i class="fab fa-facebook-f"></i>
          <i class="fab fa-twitter"></i>
          <i class="fab fa-youtube"></i>
          <i class="fab fa-instagram"></i>
        </div>
      </div>
      <div class="text">
        <p><b>Akpınar Mah. Hasan Basri Cad. No:2 Sancaktepe/İstanbul</b></p>
        <p>www.ford.com.tr - iletisim@ford.com.tr-444 36 73</p>
        <p><b>MERSİS No:</b> 0649002036300014</p>
      </div>
      <div class="lower">
        <div class="koc">
          <img class ="img-fluid" src="2.png" alt="koc" />
          <p>Koç</p>
        </div>

        <div class="img-fluid"><img src="1.png" alt="ford" /></div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

CSS:

.container-lg{
    background-color: rgb(27, 27, 116);
}

.upper{
    display: flex;
    justify-content: space-between;
    color: rgb(226, 226, 226);
    align-items: center;
    padding-top: 20px;
}

.upper h1, i{
    font-size: 1.5em;
    padding: 5px;
}

.text{
    color: rgb(226, 226, 226);
    display: flex;
    flex-direction: column;
    padding-top:1em;
}

.text p{
    margin-bottom:0.1em;
}

.lower{
    display: flex;
    justify-content: space-between;
}

.lower{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top:1.5em;
}
img{
    background-color: transparent;
    width: 5em;
    height: 5em;
}

.logo2{
    color:white
}

.koc{
    display: flex;
    align-items: center;
}

.koc p{
    color:rgb(226, 226, 226);
    font-size: 2em;
    margin-left:0.1em
}

.koc img{
    width: 3em;
    height: 3em;
    filter:brightness(0) invert(1);
}

Benzedi gibi.

bonz · 7 Temmuz 2023

TheDobrevic dedi:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container-lg">
      <div class="upper">
        <div class="title"><h1>FORD OTOMOTİV SANAYİ A.Ş.</h1></div>
        <div class="badges">
          <i class="fas fa-globe-asia"></i>
          <i class="fab fa-facebook-f"></i>
          <i class="fab fa-twitter"></i>
          <i class="fab fa-youtube"></i>
          <i class="fab fa-instagram"></i>
        </div>
      </div>
      <div class="text">
        <p><b>Akpınar Mah. Hasan Basri Cad. No:2 Sancaktepe/İstanbul</b></p>
        <p>www.ford.com.tr - iletisim@ford.com.tr-444 36 73</p>
        <p><b>MERSİS No:</b> 0649002036300014</p>
      </div>
      <div class="lower">
        <div class="koc">
          <img class ="img-fluid" src="2.png" alt="koc" />
          <p>Koç</p>
        </div>

        <div class="img-fluid"><img src="1.png" alt="ford" /></div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

CSS:

.container-lg{
    background-color: rgb(27, 27, 116);
}

.upper{
    display: flex;
    justify-content: space-between;
    color: rgb(226, 226, 226);
    align-items: center;
    padding-top: 20px;
}

.upper h1, i{
    font-size: 1.5em;
    padding: 5px;
}

.text{
    color: rgb(226, 226, 226);
    display: flex;
    flex-direction: column;
    padding-top:1em;
}

.text p{
    margin-bottom:0.1em;
}

.lower{
    display: flex;
    justify-content: space-between;
}

.lower{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top:1.5em;
}
img{
    background-color: transparent;
    width: 5em;
    height: 5em;
}

.logo2{
    color:white
}

.koc{
    display: flex;
    align-items: center;
}

.koc p{
    color:rgb(226, 226, 226);
    font-size: 2em;
    margin-left:0.1em
}

.koc img{
    width: 3em;
    height: 3em;
    filter:brightness(0) invert(1);
}

Benzedi gibi.

Eki Görüntüle 1848830

Çok iyi olmuş elinize sağlık. Sadece sağdan ve soldan biraz daha içeri alınabilir. Ford logosu belki 50pixel daha büyürse olur. Bir de sağ üstte ki sosyal medya ikonlarına border radius verildiği zaman biter.

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

E1Rhan

Megapat

Dosya Ekleri

TheDobrevic

Kilopat

bonz

Gigapat