Vogue inspired Cover Page !

In this example below you will see how to do a Vogue inspired Cover Page ! with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by yoann54, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright yoann54 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Vogue inspired Cover Page !</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>
<div class="cover">
  <h1>Visit Poland !</h1>
  </div>
</header>
<div class="container">

<div class="article">
  <h2>A trip to poland...</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Voluptates distinctio sunt, iure odit voluptatum ex quibusdam laborum facere a, perferendis enim placeat ab fugit laboriosam cum neque nobis. Adipisci modi, voluptates laboriosam tempora laudantium facilis velit repellat, dicta!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum iusto ducimus minima blanditiis facere, sint incidunt culpa officia eligendi ipsa ullam id nostrum aspernatur, minus aliquam earum, quos eveniet modi!Voluptates distinctio sunt, iure odit voluptatum ex quibusdam laborum facere a, perferendis enim placeat ab fugit laboriosam cum neque nobis. Adipisci modi, voluptates laboriosam tempora laudantium facilis velit repellat, dicta!</p>
</div>
  </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/yoann54/vogue-inspired-cover-page-woMZRJ */
* {
  margin:0;
}
header {
  display:flex-column;
}
.cover {
  background-image: url("https://cdn-img.vacancesbleues.fr/sites/default/files/SH-POLOGNE-1900px-VBV014444hd.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  min-height:100vh;
}
.cover {
  display:flex;
}
.cover h1 {
  text-align: center;
  font-size:25vh;
  color:red;
  margin:auto;
}
.container {
  width:90%;
    margin:1em auto;;
}
.article{
  column-width:300px;
  column-gap: 2em;
  column-rule: 2px solid #444;
}

Comments