Yapının HTML CSS kodu nedir?

mertyiilmaz · 18 Temmuz 2023

Merhaba,
Web progralamaya yeni başladım, şöyle bir yapıyı yapmak istiyorum fakat sıkıntı yaşıyorum. Rica etsem müsaitseniz görselde belirttiğim yapının HTML CSS'ini kodlayıp, benimle paylaşabilir misiniz? Teşekkürler.

533388 · 18 Temmuz 2023

@mertyiilmaz biz kodlarsak sen nasıl ogreniceksin sana bir fikir vereyim bir tane ana divin var ve onun içinde div-itemlerin var zaten margin padding falan belirtilmis.

@mertyiilmaz hocam yine de aklınızda fikir olsun diye kodların bir kısmını atıyorum lütfen inceledikten sonra kendiniz de yazpın kolay gelsin.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 *
 {
 margin: 0;
 padding: 0;
 }
 .container
 {
 width: 210px;
 height: 210px;
 background-color: #A0BFE0;
 padding: 7px;
 }
 .container-item:first-child
 {
 background-color: orangered;
 display: flex;
 }
 .container .img
 {
 width: 50px;
 height: 50px;
 background: gray;
 }
 .container span.
 {
 margin-left: 20px;
 color: white;
 }
 .container-item:last-child
 {
 background-color: orangered;
 display: flex;
 margin-top: 20px;
 height: 50px;
 }
 .container span.
 {
 margin-left: 20px;
 color: white;
 }
 .container-item:nth-child(2)
 {
 background-color: orangered;
 display: flex;
 margin-top: 20px;
 height: 50px;

 }
 .container span.
 {
 margin: 0;
 color: white;
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="container-item">
 <div class="img">
 IMG.
 </div>
 <span>Test123</span>
 </div>
 <div class="container-item">
 <span>Lorem123</span>
 </div>
 <div class="container-item">
 <span>Yazı ve Buton</span>
 </div>
 </div>
</body>
</html>

Yapının HTML CSS kodu nedir?

mertyiilmaz

Zeptopat

533388

Hectopat