Skip to main content

Image Plate

Big O

HTML​

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Plate</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="card">
      <div class="inner">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempora
          minus ab aspernatur aliquam quasi! Lorem ipsum dolor sit amet
          consectetur adipisicing elit.
        </p>
        <a href="">Link</a>
      </div>
    </div>
  </body>
</html>

CSS​

.card {
  width: 800px;
  height: 400px;
  background-image: url(https://picsum.photos/seed/0236/1600/900);
  display: flex;
  background-size: cover;
  align-items: flex-end;
}

.inner {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}

.inner p {
  margin-right: 30px;
}

.inner a {
  display: inline-block;
  color: white;
  padding: 15px 25px;
  background-color: blue;
}