Web tasarım ödevi

Sncroow · 3 Ekim 2022

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.

SUSAMLI ÇUBUK · 3 Ekim 2022

Title için "h3" kullan yazı içinse "p" etiketini kullanip css ile düzenle.
Ovali, "border-radius:50px;" ile yapacaksın.

Sncroow · 3 Ekim 2022

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

SUSAMLI ÇUBUK · 3 Ekim 2022

Sncroow dedi:
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 @SUSAMLI ÇUBUK

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.

https://codepen.io/dodocode/pen/MWGGRyW

dgknbzglu · 3 Ekim 2022

Bootstrap ile :

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: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>

Bootstrapsız:

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>

Yazı tipini değiştirip kullanabilirsin.

Web tasarım ödevi

Sncroow

Hectopat

SUSAMLI ÇUBUK

Hectopat

Sncroow

Hectopat

SUSAMLI ÇUBUK

Hectopat

dgknbzglu

Megapat