Egid Dikmen
Hectopat
Daha fazla
- Sistem Özellikleri
- Macbook Pro 16" M1 Pro Silver
- Cinsiyet
- Erkek
- Meslek
- Ağa/Paşa
Bir proje ödevim var yani boostrap kullanmaktansa kod yazmam gerekiyor ancak neyi yaparsam yapayım konumlandırmayı başaramıyorum. Margin , Padding , Grid... bin tane şey var ancak ben ne yapacağımı halen anlamadım. Konumlandırmayı kodla değil görsel olarak yapabileceğim bir uygulama var mı? Eğer yoksa yerleştirmeyi güzel anlatan kaynak biliyorsanız yazarsanız sevinirim.
Not : Ana div'i (turuncu olan) ın içine formu koyunca hiçbir şey yapmamama rağmen kendi kendine sağ üste gitti ve üstteki divin alanını daralttı. Çakışmamalarını istiyorum bunu nasıl yapabilirim? Siz konumlandırmayı nasıl yapıyorsunuz?
Not 2 : Burada çerçeve 2 divden olşuyor. 4 köşesinde de radius olan en büyük çerçeve var ve bu çerçevenin içinde en üstte içinde "BİZE ULAŞIN" yazan ayrı bir div var.
Kodlar :
Kafamdaki :
Çıktı :
Not : Ana div'i (turuncu olan) ın içine formu koyunca hiçbir şey yapmamama rağmen kendi kendine sağ üste gitti ve üstteki divin alanını daralttı. Çakışmamalarını istiyorum bunu nasıl yapabilirim? Siz konumlandırmayı nasıl yapıyorsunuz?
Not 2 : Burada çerçeve 2 divden olşuyor. 4 köşesinde de radius olan en büyük çerçeve var ve bu çerçevenin içinde en üstte içinde "BİZE ULAŞIN" yazan ayrı bir div var.
Kodlar :
HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<title>Bize Ulaşın</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100&display=swap" rel="stylesheet">
</HEAD>
<BODY>
<div class="kutu">
<div class="kutu_ust">BİZE ULAŞIN</div>
<form id="contact" action="" method="">
<div class="form-control">
<input placeholder="Ad/Soyad" type="text" required autofocus>
</div>
<div class="form-control">
<input placeholder="E-Posta Adresi" type="email" required>
</div>
<div class="form-control">
<input placeholder="Konu" type="text" required>
</div>
<div class="form-control">
<textarea placeholder="Mesajınızı Buraya Yazın.." required></textarea>
</div>
<div class="form-control">
<button name="submit" type="submit" id="submit">GÖNDER</button>
</div>
</form>
</div>
</BODY>
</HTML>
CSS:
body {
background: #FFE6D7;
}
.kutu {
font-family: 'JetBrains Mono',monospace ;
border: 8px solid #EB5800 ;
border-radius: 80px ;
height: 800px ;
width: 800px ;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
display: flex;
}
.kutu_ust {
font-family: 'JetBrains Mono',monospace ;
font-size: 70px ;
font-weight: bold;
color : white ;
border: 8px solid #EB5800 ;
background-color: #EB5800 ;
height: 100px ;
width: 800px ;
border-top-left-radius: 60px ;
border-top-right-radius: 60px ;
text-align: center;
}
Kafamdaki :
Çıktı :