<div class="background">
  <div class="card">
    <div class="head">
      <div class="sun"></div>
      <div class="text">
        <span>My Sample</span>
        <span>Message</span>
      </div>
    </div>
    <div class="body">
      <a href="#" class="go-to-site">Go to site</a>
    </div>
  </div>
</div>
@import url("https://fonts.googleapis.com/css?family=Poiret+One&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

.background {
  background-color: #242424;
  height: 100vh;
  display: flex;
}

.card {
  width: 40vmin;
  height: 80vmin;
  margin: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3vmin 8vmin rgba(0, 0, 0, 0.8);
}

.head, .body, .text {
  width: 100%;
  height: 50%;
  display: flex;
}

.head {
  background-color: #ffca28;
  position: relative;
}

.sun {
  width: 60%;
  height: 60%;
  background-color: #fb8c00;
  margin: auto;
  border-radius: 50%;
}

.text {
  color: rgba(255, 255, 255, 0.8);
  font-family: "Poiret One", cursive;
  font-size: 7vmin;
  text-align: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.body {
  background-color: #4fc3f7;
}

.go-to-site {
  color: #ffffff;
  font-family: Montserrat, sans-serif;
  font-size: 5vmin;
  text-decoration: none;
  background-color: #2962ff;
  outline: none;
  padding: 2.5vmin 4vmin;
  margin: auto;
  border-radius: 2vmin;
  transition:
    background-color 300ms ease-in-out,
    transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.go-to-site:hover {
  background-color: #0d47a1;
  transform: scale(1.15);
}

.go-to-site:active {
  transform: scale(0.95);
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.