A Pen by John

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  John</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section>
  <div class="show-image">
    <img src="https://images.pexels.com/photos/970089/pexels-photo-970089.jpeg?auto=compress&cs=tinysrgb&h=350" alt="">
    <p>name of show</p>
    <div>
      <p>genres</p>
      <span class="border">1</span>
      <span class="border">2</span>
      <span class="border">3</span>
    </div>
  </div>
<!--   <div class="show-info">
    <h1>name of show</h1>
    <p><small>crime, horror, action</small></p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi est praesentium fuga magnam sit voluptates nemo, ipsa, illo libero inventore dignissimos vitae aspernatur incidunt dolores, quia asperiores tempore reprehenderit quasi.</p>
  </div> -->
<!--   <div class="show-seasons">
    <h3>list of seasons goes here</h3>
  </div> -->
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/a-pen-by-john-vjoqNr */
*, *::before, *::after {
  box-sizing: border-box;
}

.border {
  border: solid 1px lightgray;
  padding: 2px 15px;
  border-radius: 3px;
}

img {
  display: block;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  section {
    display: flex;
    flex-wrap: wrap;
  }

  section .show-image {
    flex-basis: 20%;
  }

  section .show-info {
    flex: 1 0 60%;
    background: red;
  }
}

Comments