Yol göstermek adına yardımcı olayım ama daha ilerisinde yardımcı olamam takdir edersiniz ki zaman alıcı işler. siz renkleri iconları yazıyı kendi istediğiniz gibi düzeltirsiniz. Bu arada chatgpt bu konuda fena değildir. Bir kaç yönlendirme ile istediğinize yardımcı olur.
html kodu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Icon Kutusu</title>
</head>
<body>
<div class="kutu">
<i class="fas fa-icons"></i>
<h3><a href="
https://siteadi.com" target="_blank">Deneme</a></h3>
</div>
</body>
</html>
style.css
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.kutu {
width: 400px;
height: 400px;
background-color: white;
border: 2px solid blue;
text-align: center;
color: blue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: border-color 0.3s;
}
i {
font-size: 50px;
color: blue;
transition: color 0.3s;
}
h3 a {
color: blue;
text-decoration: none;
transition: color 0.3s;
}
.kutu:hover i,
.kutu:hover h3 a {
color: red;
}
.kutu:hover {
border-color: red;
}
h3 a:hover {
text-decoration: underline;
}
Alıntıyı görüntüle
