deniz8943
Decapat
- Katılım
- 26 Şubat 2023
- Mesajlar
- 447
- Makaleler
- 1
Daha fazla
- Cinsiyet
- Erkek
Selamünaleyküm VS Code'da site yazıyordum. Ekranın ortasındaki kareyi bir türlü çözemedim. Görünüşteki gibi her ekran için kodu nasıl ayarlayabilirim?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css">
<script src="https://kit.fontawesome.com/ce62c61ff7.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="sel">
<button type="button" class="homeb">
<i class="fa-duotone fa-solid fa-house"></i>
</button>
<button type="button" class="gameb">
<i class="fa-duotone fa-solid fa-gamepad"></i>
</button>
<button type="button" class="userb">
<i class="fa-duotone fa-solid fa-user"></i>
</button>
<button type="button" class="progb">
<i class="fa-solid fa-window-maximize"></i>
</button>
<button type="button" class="movb">
<i class="fa-solid fa-clapperboard"></i>
</button>
</div>
<div class="page">
</div>
</body>
</html>
CSS:
body{
margin: 0px;
padding: 0px;
background-color: #5d6d7e;
}
.sel{
position: absolute;
width: 75px;
height: 100%;
background-color:#17202a ;
border-radius: 0 16px 16px 0;
}
.homeb{
margin-left: 15px;
margin-top: 15px;
position: absolute;
aspect-ratio: 1;
width: 60%;
border: none;
background-color: #34495e;
transition: 500ms;
border-radius: 10px;
}
.homeb:hover{
background-color: aliceblue;
}
.gameb{
margin-left: 15px;
margin-top: 75px;
position: absolute;
aspect-ratio: 1;
width: 60%;
border: none;
background-color: #34495e;
transition: 500ms;
border-radius: 10px;
}
.gameb:hover{
background-color: aliceblue;
}
.userb{
margin-left: 15px;
bottom: 10px;
position: absolute;
aspect-ratio: 1;
width: 60%;
border: none;
background-color: #34495e;
transition: 500ms;
border-radius: 10px;
}
.userb:hover{
background-color: aliceblue;
}
.progb{
margin-left: 15px;
margin-top: 135px;
position: absolute;
aspect-ratio: 1;
width: 60%;
border: none;
background-color: #34495e;
transition: 500ms;
border-radius: 10px;
}
.progb:hover{
background-color: aliceblue;
}
.movb{
margin-left: 15px;
margin-top: 195px;
position: absolute;
aspect-ratio: 1;
width: 60%;
border: none;
background-color: #34495e;
transition: 500ms;
border-radius: 10px;
}
.movb:hover{
background-color: aliceblue;
}
.page{
box-sizing: border-box;
background-size: cover;
position: fixed;
margin-left: 120px;
margin-top: 20px;
width: 1150px;
height: 600px;
background-color: #17202a;
border-radius: 16px;
}
Son düzenleyen: Moderatör:
