A Pen by John

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- ©


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

  <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">



  <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>
      <span class="border">1</span>
      <span class="border">2</span>
      <span class="border">3</span>
<!--   <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> -->



/*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;