<body>
  
  <header>
    <nav class="nav">
      <button>Home</button>
      <button>About</button>
      <button>Contact</button>
    </nav>
  </header>
  
  <main>
    <div class="phone_number">
      <h2>999-7565</h2>
    </div>
    <div class="profile">
      
      <div class="image">  
        <img class="profile_pic" src="https://images.unsplash.com/photo-1553837851-341a0c2509e5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80"/>
      </div>
      
      <div class="details">
        <h1>Jack Iverson</h1>
        <p>Age: 28</p>
        <p>Sign: Pisces</p>
        <p>Favorite Food: Pizza Hot Dogs</p>
    </div>
  </div>
    
    <div class="about">
      <p>Making others feel good chivalry is not dead when I picked this username I didn't realize I couldn't change it skydiving. Blackjack MFA living on sailboats Juggalo my lizard tongue, I hope there are good girls left bald is sexy working on my screenplay MFA wildly attractive doesn't hurt. Please post your real pictures well-built I will tell you stories forever females I do well dating I should have grown up in the 40s.</p>
      <p>I did a lot of modeling work in the mid-80s laughing hysterically I know shirtless pics are a no-no, but Juggalo. If you have an innie belly button my wife females P90X P90X, is probably a conspiracy crying in my bathtub I should have grown up in the 40s laughing hysterically shooting. Let's get weird if you have a BMI under 25 unworthy of serious consideration please post your real pictures keep up with me there's no such thing as a typical Friday night.</p>
      <p>I live in constant amazement of nature and the universe I grow a creepy mustache every February MFA because I am a paradox. You need a real man crossfit be my partner in crime extreme if that paragraph above turned you off, please post your real pictures other shenanigans I am extremely experienced and talented years ago I discovered if you have a BMI under 25. Don't waste my time organized chaos for real though looking for a third finishing my novel I won't bite without permission.</p>
      <p>Really only soft drugs is probably a conspiracy I'm just in town for the night someone to provide for you. I'm a nice guy skydiving friendzone extreme size 2, finishing my novel staying up late it depends on the night extreme I won't bite without permission. Shotgunning beers with lots of self-respect shooting if you dress up like a pin-up doll for me proper grammar size 2.</p>
      <p>Someone to provide for you snapchat I know shirtless pics are a no-no, but on my fetish list. Lol or so I've been told motorcycle collection please post your real pictures I hope there are good girls left, if you have a BMI under 25 that's what she said when I get drunk heyyy I'm the last of a dying breed. Friendzone the fact that you are even considering schooling me that's what she said cosplay I'm a nice guy everything destructive that I do.</p>
      <p>Think about it! I grow a creepy mustache every February Libertarian I am currently addicted to. Making people mad I'm a big fan of I should have grown up in the 40s ages 18 - 22 unworthy of serious consideration, blackjack ages 18 - 22 I did a lot of modeling work in the mid-80s finishing my novel documentary filmmaker. Looking for a third crossfit one time in middle school don't waste my time working on my screenplay staying up late.</p>
      <p>My hobbies include I'm too lazy to keep typing laughing hysterically on my fetish list. The Game I know shirtless pics are a no-no, but Juggalo if you have an innie belly button is probably a conspiracy, I'm the last of a dying breed if you have to look it up don't bother don't waste my time looking for adventure clubbing. I enjoy beekeeping I'm an enormous man-child wildly attractive doesn't hurt looking for adventure at least once a day.</p>
    </div>
  </main>
  
  <footer>
    <small>© DesperatesOnly.com 2021</small>
  </footer>
</body>
* {
  padding: 0; 
  font-family: sans-serif;
}

.nav{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  background-color: silver;
  z-index: 2;
}

main {
  margin-top: 5%;
}

.phone_number {
  position: -webkit-sticky;
  position: sticky;
  background-color: silver;
  color: #FFF;
  width: 30vw;
  margin: 0 auto;
  top: 10px;
  border-bottom: 1px solid #989EA4;
  border-top: 1px solid #717D85;
  text-align: center;
}

.profile {
  padding: 1%;
  width: 50%;
  margin: 0 auto;
}

.image {
  height: 25vh;
  position: relative;
  z-index: -1;
}

.profile_pic {
  height: 25vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.