533388
Hectopat
- Katılım
- 27 Mart 2022
- Mesajlar
- 4.372
- Makaleler
- 2
- Çözümler
- 54
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/[email protected]/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; }
Kodunuzda Flex ile alakalı bir özellik yok ve HTML etikelerinin içinde CSS kullanayın. Display Flex kullanın.
