<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.