Site nasıl full responsive yapılır?
- Konuyu başlatan 720718
- Başlangıç Tarihi
- Mesaj 17
- Görüntüleme 679
Hocam biraz daha açar mısınız?
Yani Flex-box öğrenin.
Nereden öğrenebilirim?
nickyokaga
Kilopat
Daha fazla
- Cinsiyet
- Erkek
<head> tagına ekleyip dener misin?
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Bunu galiba denemiştim ama işe yaramıyordu diye hatırlıyorum.
Hocam zaten var işe yaramıyorW3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com
Bunu galiba denemiştim ama işe yaramıyordu diye hatırlıyorum.
Kodlar.
Hocam yanlış girmişim attığınızı girince etraftaki boşluklar silindi. Şimdi ise şifre iconunun şaftı kaydı.
Kodlar:
Html:
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Şifre Oluşturma Programı</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<center>
<body>
<br>
<h2>Parola Oluşturucu</h2>
<p id="basyazi">Her şeyinizi güvende tutacak parolalar üretir.</p>
<div class="container">
<div class="sifrediv">
<input type="text" class="sifrecikacakyer" placeholder="Şifre Henüz Belirlenmemiş" disabled >
<button id="sifreiconu"><i class="fa-solid fa-lock" ></i></button>
</div>
<br>
<p style="font-size: 22px; letter-spacing: 2px; display: inline-block;">Parola Uzunluğu: <span id="uzunlukDeger">8</span></p>
<input type="range" class="range" min="1" max="64" value="8">
<br>
<button type="button" class="btn btn-warning" id="olusturbuton">Oluştur</button>
<br>
<br>
<button type="button" id="olusturbuton2" class="btn btn-primary">Şifreyi Kopyala</button>
<br>
<br>
<button type="button" class="btn btn-danger" id="olusturbuton3">Temizle</button>
</div>
<p style="margin-top: 20%;">Technopat</p>
</body>
</center>
</html>Css:
CSS:
body{
background-color: #f4ecec;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}
h2{
font-size: 42px;
letter-spacing: 10px;
}
#basyazi{
font-size: 22px;
letter-spacing: 3px;
}
.sifrecikacakyer{
padding: 20px;
border-radius: 20px;
border: none;
width: 0px;
margin-top: 20px;
transition: 0.5s;
background:none
}
.sifrediv{
width: 650px;
}
.sifrediv:hover .sifrecikacakyer{
border: 1px solid #bbb;
width: 620px;
}
.sifrediv:hover #sifreiconu{
background-color: orange;
}
.range{
width: 250px;
font-size: 200px;
background-color: orange;
color: orange;
}
#olusturbuton{
width: 200px;
height: 50px;
border-radius: 20px;
border: 1px solid #bbb;
transition: 0.4s;
cursor: pointer;
margin-top: 30px;
color: black;
}
#olusturbuton:hover{
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
}
#olusturbuton2{
width: 200px;
height: 50px;
border-radius: 20px;
border: 1px solid #bbb;
transition: 0.4s;
cursor: pointer;
}
#olusturbuton2:hover{
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
background-color: #055bb6;
}
#olusturbuton3{
width: 200px;
height: 50px;
border-radius: 20px;
border: 1px solid #bbb;
transition: 0.4s;
cursor: pointer;
}
#olusturbuton3:hover{
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
background-color: #bb2b39;
}
#sifreiconu{
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #7b7676;
margin-left: -50px;
}
