Monday, November 28, 2022
HomeCSShtml - Why is there white house on the underside of the...

html – Why is there white house on the underside of the online web page


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);
  
}



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments