Sayfanın alt kısımında ufak bir boşluk var nasıl yok edebilirim?
Ve bunu engellemenin yolu yok mu sürekli bunu yaşıyorum.
Resim:
'''html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Ben Kimim?</title>
<!-- CSS Files -->
<link rel="stylesheet" href="CSS/about-me.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<!-- Library -->
<script src="https://kit.fontawesome.com/5ebcc5475e.js" crossorigin="anonymous"></script>
<!-- Favicon -->
<link rel="icon" href="İmages/favicon.png" type="image/x-icon" />
</head>
<body>
<div class="container">
<div class="navbar">
<div class="icon">
<div class="text">
<a href="index.html" class="ahp"><i class="fas fa-home"></i>Anasayfa</a>
<a href="" class="ahp2"><i class="fas fa-user"></i>Hakkımda</a>
<a href="" class="ahp3"><i class="fas fa-tasks"></i>Projelerim</a>
<a href="" class="ahp4"><i class="fas fa-envelope-open-text"></i>İletişim</a>
</div>
</div>
</div>
<b><span id="i-am"><span id="i">BEN</span> Kimim?</span></b>
<span id="aciklama">
<br> Merhaba ben, <span class="renk">Can</span>. <br>
<span class="renk">Trakyalıyım</span>. <br>
Web Tasarım öğrencisiyim.
</span>
<span id="soz">
<span id="kekw"><br>'😉' <br> </span>
<b><span id="canb">-Can</span></b>
</span>
<img src="İmages/calisma2.png" alt="calisma2" id="calisma2">
<div class="kisim2"></div>
<h3 id="de">Öğrenmeye devam ettiğim diller;</h3>
<center><span id="de2">Projelelerime ulaşabileceğiniz yer;</span></center>
<center><div class="kullandiklarim">
<div class="box"><img src="İmages/html5.png" alt="html5" id="html5"></div>
<div class="box"><img src="İmages/css3.png" alt="css3" id="css3"></div>
<div class="box"><img src="İmages/js.png" alt="js" id="js"></div>
<div class="box"><img src="İmages/php.png" alt="php" id="php"></div>
</div></center>
<center><div class="kullandiklarim2">
<div class="box"><a href="https://github.com/CanB0ZKURT"><img src="İmages/git-hub.png" alt="github" id="git-hub"></a></div>
</div></center>
<footer id="footer">Can <b>BOZKURT</b> | Copyright <span id="coprything">©</span> 2021</footer>
</div>
</body>
</html>
'''
'''css
/ Colors used on site /
orange{color: #FF8000;}
black{color: #1D1D1D}
white{color: #F6F6F6;}
purple{color: #7700E7;}
yellow{color: #FFCE6F;}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body{
background-color: #1D1D1D;
background-image: url(https://i.hizliresim.com/yje2ti4.png);
}
/ "Anasayfa" button settings" /
.ahp{
font-size: 18px;
line-height: 60px;
color: #F6F6F6;
display: inline-block;
position: absolute;
padding-bottom: 1px;
left: 1040px;
text-decoration: none;
}
.ahp::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 5px;
border-radius: 10px;
background-color: #FF8000;
transition: 0.2s ease-out;
}
.ahp:hover::before{
width: 100%;
}
/ "Hakkımda" button settings /
.ahp2{
font-size: 18px;
line-height: 60px;
color: #F6F6F6;
display: block;
position: absolute;
left: 1205px;
text-decoration: none;
}
.ahp2::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 5px;
border-radius: 10px;
background-color: #FF8000;
transition: 0.2s ease-out;
}
.ahp2:hover::before{
width: 100%;
}
/ "Projelerim" button settings /
.ahp3{
font-size: 18px;
line-height: 60px;
color: #F6F6F6;
display: block;
position: absolute;
left: 1379px;
text-decoration: none;
}
.ahp3::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 4px;
border-radius: 10px;
background-color: #FF8000;
transition: 0.2s ease-out;
}
.ahp3:hover::before{
width: 100%;
}
.ahp4{
font-size: 18px;
line-height: 60px;
color: #F6F6F6;
display: inline-block;
position: absolute;
padding-bottom: 1px;
left: 1550px;
text-decoration: none;
}
.ahp4::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 5px;
border-radius: 10px;
background-color: #FF8000;
transition: 0.2s ease-out;
}
.ahp4:hover::before{
width: 100%;
}
/**/
/ İcon Settings /
.icon a i{
margin-right: 10px;
}
.text{
margin-top: 10px;
}
/ Scroll Bar Settings /
::-webkit-scrollbar{
width: 6px;
}
::-webkit-scrollbar-thumb{
background: #FF8000;
border-radius: 15px;
}
::-webkit-scrollbar-track{
background: #333333;
}
footer{
background-color: #000000;
color: #F6F6F6;
font-size: 19px;
text-align: center;
width: 100%;
height: 65px;
line-height: 65px;
position: absolute;
bottom: -580px;
}
coprything{
color: #FF8000;
}
i-am{
color: #F6F6F6;
font-size: 30px;
position: relative;
left: 280px;
top: 160px;
}
i{
color: #FF8000;
}
aciklama{
color: #F6F6F6;
font-size: 28px;
position: relative;
left: 280px;
top: 200px;
}
.renk{
color: #FF8000;
}
kekw{
color: #FF8000;
font-size: 20px;
position: relative;
left: 610px;
top: 240px;
}
canb{
color: #FF8000;
font-size: 20px;
position: relative;
left: 600px;
top: -70px;
}
calisma2{
position: relative;
top: 32px;
left: 1050px;
width: auto;
height: 350px;
}
.kisim2{
width: 100%;
height: 772px;
background: #FF8000;
position: relative;
top: 180px;
opacity: 0.1;
}
/ Kullandıklarım - About me /
.kullandiklarim{
width: 80%;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 400px;
}
.box{
border: solid 2px #FF8000;
width: 200px;
height: 140px;
border-radius: 10px;
margin-right: 28px;
transition: 0.5s;
}
.box:hover{
transform: scale(1.1);
background: #FF8000;
}
html5{
width: auto;
height: 120px;
position: relative;
top: 8px;
}
css3{
width: auto;
height: 120px;
position: relative;
top: 8px;
}
js{
width: auto;
height: 120px;
position: relative;
top: 8px;
}
php{
width: auto;
height: 120px;
position: relative;
top: 8px;
}
/**/
de{
color: #F6F6F6;
text-align: center;
font-size: 38px;
position: relative;
bottom: 475px;
}
de2{
color: #F6F6F6;
text-align: center;
font-size: 38px;
position: relative;
bottom: 135px;
}
.kullandiklarim2{
width: 80%;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
bottom: 230px;
}
.box{
border: solid 2px #FF8000;
width: 200px;
height: 140px;
border-radius: 10px;
margin-right: 28px;
transition: 0.5s;
}
.box:hover{
transform: scale(1.1);
background: #FF8000;
}
git-hub{
width: auto;
height: 120px;
position: relative;
top: 8px;
}
'''
F12 tuşuna basarak Developer Toolunu açıp en sol en üstteki imleç ile sayfa üzerindeki elemanların özelliklerini görebilirsiniz. Fazla margin-bottom veya padding-bottom tarzı bir hata varsa o şekilde görüp düzeltebilirsiniz.