<body>
<header>
<nav class="nav">
<button>Home</button>
<button>About</button>
<button>Contact</button>
</nav>
</header>
<main>
<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>
</div>
</main>
<footer>
<small>© DesperatesOnly.com 2021</small>
</footer>
</body>
* {
padding: 0;
/* border: 1px solid grey; */
font-family: sans-serif;
}
.nav{
height: 5vh;
}
.profile {
border: 1px solid purple;
padding: 1%;
width: 50%;
margin: 0 auto;
}
.image {
border: 1px solid gold;
height: 25vh;
position: relative;
z-index: -1;
}
.profile_pic {
height: 25vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.