Welcome to CODEBOX! (Copy 2302)

✨ Jabont

<html>
  <head>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>Let's Start
    </title>
    <style>
      .container{
        width:100%;
        max-width:990px;
        margin:auto;
      }
      .card_wrap{
        display:flex;
        flex-flow:row wrap;
        justify-content:space-between;
      }
      .card{
        --gap:5px;
        font-family:sans-serif;
        color:white;
        width:calc((100% - var(--gap)) /2);
        background:yellow;
        display:inline-block;
        position:relative;
        margin-bottom:var(--gap);
        background-size:cover;
        background-position:center;
        font-weight:bold;
      }
      a{
        text-decoration:none;
      }
      .card_blank{
        padding-top:100%;
        background:#000a;
        opacity:0;
        transition:.2s;
        z-index:100;
        display:block;
        position:relative;
      }
      .card_blank div{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        color:white;
        transition:0;
      }
      .card_blank:hover{
        opacity:1
      }
      .card_text{
        position:absolute;
        padding:1rem;
        text-shadow:0em .05em .05em #0008;
      }
      .card_top{
        top:0;
        left:0;
      }
      .card_bottom{
        bottom:0;
        right:0;
        font-size:4em;
      }
      .card_line-2{
        font-size:3em;
      }
      /*-- Mobile Version --*/
      @media (max-width: 768px) {
        .card{
          width:100%;
        }
      }
    </style>
  </head>
  <body>
    <section>
      <div class="container card_wrap">
        <div class="card" style="background-image:url('https://images.unsplash.com/photo-1484600899469-230e8d1d59c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')">
          <div class="card_text card_top">
            <div class="card_line-1">
              Rocket
            </div>
            <div class="card_line-2">
              Falcon 1
            </div>
          </div>
          <div class="card_text card_bottom">
            01
          </div>
          <a href="#!" class="card_blank">
            <div>
              SEE MORE
            </div>
          </a>
        </div>
        <div class="card" style="background-image:url('https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')">
          <div class="card_text card_top">
            <div class="card_line-1">
              Rocket
            </div>
            <div class="card_line-2">
              Falcon 1
            </div>
          </div>
          <div class="card_text card_bottom">
            01
          </div>
          <a href="#!" class="card_blank">
            <div>
              SEE MORE
            </div>
          </a>
        </div>
        <div class="card" style="background-image:url('https://images.unsplash.com/photo-1516850228053-a807778c4e0f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80')">
          <div class="card_text card_top">
            <div class="card_line-1">
              Rocket
            </div>
            <div class="card_line-2">
              Falcon 1
            </div>
          </div>
          <div class="card_text card_bottom">
            01
          </div>
          <a href="#!" class="card_blank">
            <div>
              SEE MORE
            </div>
          </a>
        </div>
        <div class="card" style="background-image:url('https://images.unsplash.com/photo-1518364538800-6bae3c2ea0f2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80')">
          <div class="card_text card_top">
            <div class="card_line-1">
              Rocket
            </div>
            <div class="card_line-2">
              Falcon 1
            </div>
          </div>
          <div class="card_text card_bottom">
            01
          </div>
          <a href="#!" class="card_blank">
            <div>
              SEE MORE
            </div>
          </a>
        </div>
      </div>
    </section>
  </body>
</html>