0.0_lucas
Hectopat
Daha fazla
- Sistem Özellikleri
- İşlemci; i7 12700K
RAM; Kingston Fury Beast 32 GB 3200 MHz DDR4 CL16
Ana Kart; ASUS B660M - E D4 3600MHz
Ekran Kartı; RX6750XT 12GB
Sıvı Soğutucu; MSI MAG CORELIQUID P360 360 mm İşlemci Sıvı Soğutucu
- Cinsiyet
- Erkek
- Meslek
- Meslek Lisesi Yazılım Öğrencisi
Bir web site açıyorum ve 2 farklı div bir birinin içine giriyor düzeltemedim.
Bileşenler üst classlı div ile bileşenler çıktı div iç içe giriyor.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>Kimya Botumuz</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
</div>
<nav class="navbar">
<a href="index.html"><img class="nav-img" src="https://r.resimlink.com/6cVT3ps.gif" alt=""></a>
<div class="list">
<a href="index.html"><i class="fa fa-home"></i> ANASAYFA</a>
<a href="yapay-zeka.html"><i class="fa fa-brain"></i> YAPAY ZEKA</a>
<a href="hakkimizda.html"><i class="fa fa-question"></i> HAKKIMIZDA</a>
</div>
</nav>
<div class="bilesenler-ust">
<div class="bilesen-input">
<input type="text" class="first-bilesen" placeholder="1.Molekülü Giriniz">
<br> <br> <br>
<input type="text" class="second-bilesen" placeholder="2.Molekülü Giriniz">
<br> <br> <br>
<button type="submit" class="gonder-button">Gönder</button>
</div>
<div class="bilesenler-div">
<div class="bilesenler-box1">
<!-- Görsel Alınacak -->
</div>
<div class="bilesenler-box2">
<!-- Görsel Alınacak -->
</div>
</div>
</div>
<div class="bilesenler-cikti-div">
<div class="bilesenler-cikti1">
<!-- Görsel Alınacak -->
</div>
<div class="bilesenler-cikti2">
<!-- Görsel Alınacak-->
</div>
<div class="bilesenler-cikti3">
<!-- Görsel Alınacak -->
</div>
</div>
<div id="footer">
<header id="fot">© EFA Teknoloji 2024</header>
</div>
</body>
</html>
CSS:
@media (max-width: 667px) {
.navbar {
background-color: rgb(13, 13, 82);
margin: 15px;
padding: 15px;
border-radius: 30px;
}
body {
background-image: url(https://cdn.glitch.global/8078fd66-cdf6-488e-897c-10edcd06b457/e93fd91f-2fe5-4084-8f89-8f3bb7f18cf8.tubitak%20arkaplan%20(
Telefon%20Duvar%20Ka%C4%9F%C4%B1d%C4%B1
).jpg?v=1736063854651);
}
.nav-img {
background-image: url(https://r.resimlink.com/6cVT3ps.gif);
height: 50px;
width: 50px;
display: inline-block;
}
.list {
display: inline-block;
float: right;
margin-top: 15px;
}
.list a {
text-decoration: none;
color: black;
padding: 5px;
border-radius: 10px;
font-size: 10px;
}
.list a:hover {
color: white;
}
/* navbar bitiş*/
.aa {
padding: 25px;
margin: 5px;
border-radius: 30px;
}
/* form başlangıç*/
.bilesenler-ust {
display: block;
flex-direction: column;
}
.bilesen-input {
width: 97%;
height: 50%;
}
.bilesenler-div {
display: inline-block;
flex-direction: column;
width: 97%;
}
.bilesenler-box1{
height: 200px;
width: 97%;
}
.bilesenler-box2{
height: 200px;
width: 97%;
margin-top: 2%;
}
.bilesenler-cikti-div{
display: inline-block;
flex-direction: column;
}
.bilesenler-cikti1{
height: 200px;
width: 97%;
margin-top: 10%;
}
/* form bitiş*/
#hakkimizda {
color: black;
padding: 25px;
flex: 1;
margin: 20px;
margin-bottom: 30px;
border-radius: 40px;
}
.yazilar {
margin: 25px;
padding: 5px;
border-radius: 45px;
}
}Bileşenler üst classlı div ile bileşenler çıktı div iç içe giriyor.
