Body içine box için "div" açman ve class vermen gerekiyor. Sonra div için border-radius kullanicaksin. Komple hazırlayıp atarimda, mobilim maalesef detaylara giremiyorumEki Görüntüle 1534351
Eki Görüntüle 1534352
Etrafına ovali bir türlü getiremedim. Margin ve Padding kullanmam gerektiğini söyledi hoca, nasıl bir yol izlemem gerekiyor acaba? Border Radius'u kullandım external css'de @SUSAMLI ÇUBUK
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Roboto', sans-serif;
}
#kutu {
border-radius:25px;
background-color:#258fa8;
}
#baslik {
font-weight:700;
}
#aciklama {
font-weight:400;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="col-md-4">
<div class="card" id="kutu">
<div class="card-body m-2">
<h5 class="card-title text-white" id="baslik">DEĞERLERİMİZ</h5>
<p class="card-text text-white" id="aciklama">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius.</p>
</div>
</div>
</div>
</div>
</body>
</html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
<style>
</style>
* {
font-family: 'Roboto', sans-serif;
color:white;
}
.kutu {
max-width:22rem;
border-radius:25px;
background-color:#258fa8;
}
.icerik {
padding:2rem;
}
.baslik {
font-weight:700;
}
.aciklama {
font-weight:400;
}
</head>
<body>
<div class="kutu">
<div class="icerik">
<h3 class="baslik">DEĞERLERİMİZ</h3>
<p class="aciklama">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius.</p>
</div>
</div>
</body>
</html>
Bu sitenin çalışmasını sağlamak için gerekli çerezleri ve deneyiminizi iyileştirmek için isteğe bağlı çerezleri kullanıyoruz.