bana dırekt 1 tanesının kodu lazım diğerini ben yaparımHepsi <div> içinde <div>.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>delikarga</title>
</head>
<body>
<div class="container">
<div class="first-section">
<div class="first-box"></div>
<div class="second-box"></div>
</div>
<section class="second-section"></section>
<section class="third-section">
<div class="first-box"></div>
<div class="second-box"></div>
</section>
<footer></footer>
</div>
</body>
</html>
.container {
margin: 0 20%;
}
.first-section {
display:flex;
gap:10px;
background-color:orange;
padding:20px;
}
.first-section > .first-box {
flex:1;
height:200px;
background-color:green;
}
.first-section > .second-box {
flex:2;
height:200px;
background-color:purple;
}
.second-section {
background-color: purple;
margin:10px 0;
height:40px;
}
.third-section{
display:flex;
gap:10px;
background-color:purple;
padding:20px;
}
.third-section > div{
border-radius:9px;
background-color:green;
height:200px;
}
.third-section > .first-box {
flex:1;
}
.third-section > .second-box {
flex:2;
}
footer {
height:40px;
margin-top:10px;
background-color:orange;
}
Şöyle bir şeyler yaptım. (backend developerım) Edit fiddle - JSFiddle - Code Playground
HTML:<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>delikarga</title> </head> <body> <div class="container"> <div class="first-section"> <div class="first-box"></div> <div class="second-box"></div> </div> <section class="second-section"></section> <section class="third-section"> <div class="first-box"></div> <div class="second-box"></div> </section> <footer></footer> </div> </body> </html>
CSS:.container { margin: 0 20%; } .first-section { display:flex; gap:10px; background-color:orange; padding:20px; } .first-section > .first-box { flex:1; height:200px; background-color:green; } .first-section > .second-box { flex:2; height:200px; background-color:purple; } .second-section { background-color: purple; margin:10px 0; height:40px; } .third-section{ display:flex; gap:10px; background-color:purple; padding:20px; } .third-section > div{ border-radius:9px; background-color:green; height:200px; } .third-section > .first-box { flex:1; } .third-section > .second-box { flex:2; } footer { height:40px; margin-top:10px; background-color:orange; }
Css dosyasını import ettiniz mi?Bir şey cıkmıyor bomboş sayfa
css deıl htmlde lazımCss dosyasını import ettiniz mi?
head tagının içine <link rel="stylesheet" href="css_dosyasi_adi.css" /> şeklinde eklersen olur. Ya da style tagı içine css kodlarını yazıcaksın.css deıl htmlde lazım
herhangi birşey cıkmıyor ekrandahead tagının içine <link rel="stylesheet" href="css_dosyasi_adi.css" /> şeklinde eklersen olur. Ya da style tagı içine css kodlarını yazıcaksın.
Bu sitenin çalışmasını sağlamak için gerekli çerezleri ve deneyiminizi iyileştirmek için isteğe bağlı çerezleri kullanıyoruz.