The white house is seen after I choose a top over 20px on the final CSS Factor. The
class “roadmap-box”
Close to the underside of the HTML Physique Factor. The highest white field is the “roadmap-box” Click on right here to see the picture
At any time when I attempt to alter the peak, the highest white field turns into greater, but additionally the white field on the backside grows in dimension. I dont know the right way to repair that.
<!DOCTYPE html>
<html>
<head>
<title>Check Webpage 2</title>
<hyperlink rel="stylesheet" href="website-1.css">
</head>
<physique>
<div class="banner">
<div class="navbar">
<img class="profile-signature" src="Brand/logo-1.png" alt="Profile Brand">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="https://google.com/" goal="_blank">PORTFOLIO</a></li>
<li><a href="#">GAMES</a></li>
<li><a href="#">SOCIALS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="content material">
<a href="https://google.com/" goal="_blank">
<img class="profile-picture" src="Brand/logo-2.jpg" alt="Profile Image">
</a>
<h1>WELCOME TO PARADISE!</h1>
<p>It is a apply web site. There's only a little bit of textual content right here to fill the traces, blah blah blah.
<br>If you wish to know extra about me, simply take a look round</p>
<div>
<a href="https://google.com/" goal="_blank">
<button kind="button" href="#center"><span></span>PORTFOLIO</button>
</a>
<a href="https://twitter.com/" goal="_blank">
<button kind="button"><span></span>SOCIALS</button>
</a>
</div>
<div class="text-box">
<div class="images-box1">
<img src="designs/1.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Random Design 1</h1>
<p></p>
</div>
</div>
<div class="images-box1">
<img src="designs/2.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Fantasy Bathe</h1>
<p>Nicely, nothing a lot to elucidate right here. <br> <br> I want some textual content so have run studying <br> blah blah blah once more <br> <br>:)</p>
</div>
</div>
<div class="images-box1">
<img src="designs/3.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Mild Bulb Woman</h1>
<p>This picture was created 2020. <br> It exhibits an individual beeing caught inside a lightbulb. Humorous proper? No deeper <br> intentions, dont search for them, <br> lol</p>
</div>
</div>
<div class="images-box1">
<img src="designs/4.jpg" class="text-image">
<div>
<h2 class="text-title-box1">Random Design 4</h1>
<p>Check</p>
</div>
</div>
</div>
</div>
</div>
<div class="code-image-box">
<div class="code-image">
</div>
</div>
<div class="roadmap-box">
<div class="q1"></div>
<div class="q2"></div>
</div>
<div class="bottom-parent">
<div class="backside">
<div class="text-bottom" >
<a category="twitter-hover" href="https:/twitter.com/" goal="_blank"><div class="twitter">Twitter</div></a>
<a category="linkedin-hover" href="https:/linkedin.com/" goal="_blank"><div class="linkedin">LinkedIn</div></a>
<a category="instagram-hover" href="https:/instagram.com/" goal="_blank"><div class="instagram">Instagram</div></a>
<div class="impressum">Impressum</div></a>
</div>
</div>
</div>
</physique>
</html>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.banner {
width: 100%;
top: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.5)),url(Background/3.jpg) ;
background-size: cowl;
background-position: middle;
padding-bottom: 2100px;
}
.navbar {
width: 85%;
margin: auto;
padding: 35px 0;
show: flex;
align-items: middle;
justify-content: space-between;
}
.profile-signature {
width: 300px;
object-position: prime;
object-fit: comprise;
show: flex;
justify-content: middle;
align-items: middle;
cursor: pointer;
}
.navbar ul li {
list-style: none;
show: inline-block;
margin: 0 20px;
place: relative;
}
.navbar ul li a {
text-decoration: none;
shade: #fff;
text-transform: uppercase;
}
.navbar ul li::after {
content material: '';
top: 3px;
width: 0;
background: #009688;
place: absolute;
left: 0;
backside: -10px;
transition: 0.5s;
}
.navbar ul li:hover::after {
width: 100%;
}
.profile-picture {
border-radius: 50%;
width: 150px;
top: 150px;
object-fit: cowl;
cursor: pointer;
box-shadow: 16px 16px 32px rgba(255, 255, 255, 0.3),
-16px -16px 32px rgba(255, 255, 255, 0.3);
transition: 0.5s;
}
.profile-picture:hover {
width: 275px;
top: 275px;
remodel: translateY(-25px);
transition: 0.5s;
}
.content material {
width: 100%;
place: absolute;
prime: 60;
remodel: translateY(25px);
text-align: middle;
shade: white;
}
.content material h1 {
font-size: 70px;
margin-top: 60px;
}
.content material p {
margin: 20px auto;
font-weight: 100;
line-height: 25px;
}
button {
width: 200px;
padding: 15px 0;
text-align: middle;
margin: 20px 10px;
border-radius: 25px;
font-weight: daring;
border: 2px strong #009688;
background: clear;
shade: white;
cursor: pointer;
place: relative;
overflow: hidden;
}
span {
background: #009688;
top: 100%;
width: 0;
border-radius: 25px;
place: absolute;
left: 0;
backside: 0;
z-index: -1;
transition: 0.5s;
}
button:hover span {
width: 100%;
}
button:hover {
border: none
}
.text-box {
top: 600px;
border: 3px;
border-style: none;
border-color: rgba(255, 255, 255, 0.3);
remodel: translateY(500px);
show: flex;
justify-content: space-around;
}
.images-box1 {
background-color: rgba(68, 218, 185, 0.05);
border-radius: 77px;
width: 375px;
top: 628px;
border: 5px;
border-color: #1f534f;
border-style: strong none;
align-items: middle;
cursor: pointer;
z-index: -1;
transition: 0.7s;
}
.images-box1:hover {
background: rgb(152,152,152);
background: linear-gradient(3deg, rgba(152,152,152,0) 0%, rgba(255,255,255,0.3113620448179272) 100%);
top: 300px;
margin-top: 20px;
background: #009688;
transition: 0.7s;
}
.text-image {
border-radius: 75px;
width: 375px;
top: 300px;
show: flex;
justify-content: left;
align-items: middle;
flex-direction: column;
object-fit: cowl;
object-position: center;
}
.text-title-box1 {
text-align: begin;
margin-top: 10px;
text-align: middle;
}
p {
padding-top: 20px;
transition: 0.5s;
}
p:hover {
transition: 0.5s;
}
.bottom-parent {
place: relative;
}
.backside {
show: block;
width: 100%;
place: absolute;
backside: 0;
top: 45px;
background-color: rgb(21, 105, 87);
}
.text-bottom {
show: flex;
justify-content: middle;
text-indent: 20px;
padding-right: 20px;
padding-top: 13px;
shade: white;
}
.twitter-hover {
text-decoration: none;
shade: white;
}
.twitter-hover:hover {
text-decoration: underline;
shade:rgba(255, 255, 255, 0.685);
}
.linkedin-hover {
text-decoration: none;
shade: white;
}
.linkedin-hover:hover {
text-decoration: underline;
shade:rgba(255, 255, 255, 0.685);
}
.instagram-hover {
text-decoration: none;
shade: white;
}
.instagram-hover:hover {
text-decoration: underline;
shade:rgba(255, 255, 255, 0.685);
}
.impressum:hover {
cursor: pointer;
text-decoration: underline;
shade:rgba(255, 255, 255, 0.685);
}
.roadmap-box {
width: 100%;
top: 50px;
background-color: white;
remodel: translateY(-500px);
}
