Görseldeki footer nasıl yapılır?
- Konuyu başlatan E1Rhan
- Başlangıç Tarihi
- Mesaj 2
- Görüntüleme 376
TheDobrevic
Kilopat
Daha fazla
- Sistem Özellikleri
- CPU: AMD R5-5600
GPU: SAPPHIRE RX580 NITRO+ 8GB
Anakart: MSI B550M Pro-Vdh Wifi
RAM: 2 x 8
HDD: SEAGATE 1TB 7200RPM
SSD: Hyperx Fury 480GB
Monitör: MSI G27C4, MSI G241
Kasa: Cooler Master MB511
PSU: FSP HYPER 80+ 700W
- Cinsiyet
- Erkek
- Meslek
- Kalıp Tasarım Mühendisi, Metalurji ve Malzeme Mühendisi
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/[email protected]/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 - [email protected] 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/[email protected]/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.
serhatcandev
Megapat
Ç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.
