Web tasarım ödevi

Sncroow

Decapat
Katılım
5 Temmuz 2020
Mesajlar
672
Çözümler
2
Daha fazla  
Cinsiyet
Erkek
Merhaba, web geliştirmede yeniyim. Ödevim hakkında bilmediğim bir yer var. Aşağıda bıraktığım görseli yanındakine nasıl dönüştürebilirim? Etrafına gelen oval vs.
1664769916105.png
1664769922735.png

1664769938704.png
 
KS
KS
Sncroow

Sncroow

Decapat
Katılım
5 Temmuz 2020
Mesajlar
672
Çözümler
2
Daha fazla  
Cinsiyet
Erkek
1664775731416.png

1664775740225.png

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 @Kircheis
 

Kircheis

Decipat
Katılım
21 Şubat 2021
Mesajlar
1.179
Makaleler
1
Çözümler
4
Daha fazla  
Cinsiyet
Erkek
Eki 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 @Kircheis
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 giremiyorum

Responsive lazim degilse neyin ne oldugunu anlaman için suna bakabilirsin. Google'dan font cekersin.
 
Son düzenleme:

dgknbzglu

Hectopat
Katılım
5 Mart 2019
Mesajlar
1.056
Çözümler
22
Yer
İstanbul/Maltepe
Daha fazla  
Cinsiyet
Erkek
Meslek
PHP Developer
Bootstrap ile :
1.png

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="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:[email protected]&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>

Bootstrapsız:
2.png

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:[email protected]&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>

Yazı tipini değiştirip kullanabilirsin.
 
Son düzenleme:

Yeni konular

Yukarı