<body>
  <div class="container-1">
    <p class="title">You know what?</p>
  </div>
  <div>
    <p class="content">CSS is Awesome</p>
  </div>
</body>
body {
  background-color: rgb(205, 241, 242);
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

div {
  background-color: rgb(250, 246, 248);
  height: 3rem; 
  margin: 1rem;
  border-radius: 10px;
  padding: .5rem 2rem;
  box-shadow: 1px 4px 15px 0px #0000001c;
  width: 60%;
  transition: all .2s ease;
} 

div:hover {
    transform: translateY(-3px);
}

div p {
  font-family: sans-serif;
  font-weight: bold;
  color: rgb(26, 27, 65);
}

.title::before {
  content: "😏";
  margin-right: .5rem;
}

.content::after {
  content: "🌈";
  margin-left: .5rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.