Bootstrap Kart (Card) Kullanımı
Örnek
Örnek
Örnek
Örnek
Örnek
Örnek
Örnek
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mevsimler</title>
<link rel="stylesheet" href="bootstrap-5.3.3-dist/css/bootstrap.min.css">
<script src="bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
background-image: url(resim/back.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.row{
margin-top: 200px;
}
.card{
opacity: 0.9;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="card text-bg-primary" style="width: 18rem;">
<img src="resim/kıs.png" class="card-img-top" style="width: 18rem; height: 22rem;">
<div class="card-body">
<p class="card-text">Kışın İstanbul ortalama sıcaklık</p>
<h3>-3 C'</h3>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-dark" style="width: 18rem;">
<img src="resim/sonbahar.jpg" class="card-img-top" style="width: 18rem; height: 22rem;">
<div class="card-body">
<p class="card-text">Sonbahar İstanbul ortalama sıcaklık</p>
<h3>9 C'</h3>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-warning" style="width: 18rem;">
<img src="resim/yaz.png" class="card-img-top" style="width: 18rem; height: 22rem;">
<div class="card-body">
<p class="card-text">Yaz İstanbul ortalama sıcaklık</p>
<h3>28 C'</h3>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-light" style="width: 18rem;">
<img src="resim/ilkb.png" class="card-img-top" style="width: 18rem; height: 22rem;">
<div class="card-body">
<p class="card-text">İlkbahar İstanbul ortalama sıcaklık</p>
<h3>19 C'</h3>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mevsimler</title>
<link rel="stylesheet" href="bootstrap-5.3.3-dist/css/bootstrap.min.css">
<script src="bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<style>
body{
background-image: url(resim/back.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.row{
margin-top: 200px;
}
.card{
opacity: 0.9;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="card text-bg-primary" style="width: 18rem;">
<img src="resim/kıs.png" class="card-img-top" style="width: 18rem; height: 22rem;">
<div class="card-body">
<p class="card-text">Kışın İstanbul ortalama sıcaklık</p>
<h3>-3 C'</h3>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-dark" style="width: 18rem;">
<img src="resim/sonbahar.jpg" class="card-img-top" style="width: 18rem; height: 22rem;">
<div class="card-body">
<p class="card-text">Sonbahar İstanbul ortalama sıcaklık</p>
<h3>9 C'</h3>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-warning" style="width: 18rem;">
<img src="resim/yaz.png" class="card-img-top" style="width: 18rem; height: 22rem;">
<div class="card-body">
<p class="card-text">Yaz İstanbul ortalama sıcaklık</p>
<h3>28 C'</h3>
</div>
</div>
</div>
<div class="col">
<div class="card text-bg-light" style="width: 18rem;">
<img src="resim/ilkb.png" class="card-img-top" style="width: 18rem; height: 22rem;">
<div class="card-body">
<p class="card-text">İlkbahar İstanbul ortalama sıcaklık</p>
<h3>19 C'</h3>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Örnek
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="boost/bootstrap-5.3.3-dist/css/bootstrap.min.css">
<script src="boost/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
<div class="card" style="width: 18rem;">
<img src="ilkbahar.jpg" class="card-img-top" alt="..." height="300px">
<div class="card-body">
<h5 class="card-title">Yesterday
17C</h5>
<p class="card-text">Tomorrow
15C </p>
</div>
</div>
</div>
<div class="col">
<div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
<div class="card" style="width: 18rem;">
<img src="yaz.jpg" class="card-img-top" alt="..." height="300px">
<div class="card-body">
<h5 class="card-title">Yesterday
23C</h5>
<p class="card-text">Tomorrow
21C </p>
</div>
</div>
</div>
<div class="col">
<div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
<div class="card" style="width: 18rem;">
<img src="sonbahar.jpg" class="card-img-top" alt="..." height="300px">
<div class="card-body">
<h5 class="card-title">Yesterday
14C</h5>
<p class="card-text">Tomorrow
11C </p>
</div>
</div>
</div>
<div class="col">
<div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
<div class="card" style="width: 18rem;">
<img src="kıs.jpg" class="card-img-top" alt="..." height="300px">
<div class="card-body">
<h5 class="card-title">Yesterday
8C</h5>
<p class="card-text">Tomorrow
5C </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="boost/bootstrap-5.3.3-dist/css/bootstrap.min.css">
<script src="boost/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
<div class="card" style="width: 18rem;">
<img src="ilkbahar.jpg" class="card-img-top" alt="..." height="300px">
<div class="card-body">
<h5 class="card-title">Yesterday
17C</h5>
<p class="card-text">Tomorrow
15C </p>
</div>
</div>
</div>
<div class="col">
<div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
<div class="card" style="width: 18rem;">
<img src="yaz.jpg" class="card-img-top" alt="..." height="300px">
<div class="card-body">
<h5 class="card-title">Yesterday
23C</h5>
<p class="card-text">Tomorrow
21C </p>
</div>
</div>
</div>
<div class="col">
<div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
<div class="card" style="width: 18rem;">
<img src="sonbahar.jpg" class="card-img-top" alt="..." height="300px">
<div class="card-body">
<h5 class="card-title">Yesterday
14C</h5>
<p class="card-text">Tomorrow
11C </p>
</div>
</div>
</div>
<div class="col">
<div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
<div class="card" style="width: 18rem;">
<img src="kıs.jpg" class="card-img-top" alt="..." height="300px">
<div class="card-body">
<h5 class="card-title">Yesterday
8C</h5>
<p class="card-text">Tomorrow
5C </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Yorumunuzu Ekleyin
