<div class="hero">
<div class="hero_content">
<h1>Bigger than</br>architecture</h1>
<div class="explore">
<p><button>EXPLORE</button> Be a <strong>hero.</strong></p>
</div>
</div>
<div class="picture">
<p>Picture by <a href="https://unsplash.com/@hernanlucio" target="_blank">@hernanlucio</a>
</div>
body {
font: 100% system-ui, sans-serif;
margin: 0 auto;
width: 100%;
}
.hero {
position: relative;
background-image: url(https://images.unsplash.com/photo-1451153378752-16ef2b36ad05?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1047&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100vh;
}
.hero_content {
text-align: center;
position: absolute;
top: 50%;
left: 65%;
transform: translate(0%, -50%);
transition: all ease 0.3s;
}
h1 {
font-size: 60px;
margin: 0;
font-weight: 900;
}
.explore {
text-align: left;
}
button {
cursor: pointer;
margin: 1rem;
color: white;
letter-spacing: 2px;
border: none;
background-color: #f79477;
border-radius: 30px;
width: 120px;
height: 50px;
}
p {
margin: 0;
font-size: 15px;
}
.picture {
margin: 1rem;
position: absolute;
bottom: 0;
right: 0;
}
a {
color: black;
cursor: pointer;
}
@media (max-width: 1090px) {
h1 {
font-size: 40px;
}
}
@media (max-width: 700px) {
.hero_content {
background-color: #ffedde;
width: 400px;
padding: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.explore {
text-align: center;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.