Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="strip left a1"></div>
<div class="strip left a2"></div>
<div class="strip left a3"></div>
<div class="strip left a4"></div>
<div class="strip left a5"></div>
<div class="strip left a6"></div>
<div class="strip left a7"></div>
<div class="strip left a8"></div>
<div class="strip right b1"></div>
<div class="strip right b2"></div>
<div class="strip right b3"></div>
<div class="strip right b4"></div>
<div class="strip right b5"></div>
<div class="strip right b6"></div>
<div class="strip right b7"></div>
<div class="strip right b8"></div>

<div class="container w50 center tiny-w50">
  
<header class="txtcenter mt2">
  <img src="https://benjaminzanatta.fr/photo.jpg" alt="Avatar" width="150" />
  <h1>Benjamin Zanatta</h1>
  <h2 class="ma0">Webdesigner / Intégrateur web</h2>
</header>
  
  <div class="txtcenter mt3 mb3"><a href="https://twitter.com/benjaminzanatta" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @benjaminzanatta</a></div>

<section class="mt3 mb3 pa1">
  <p class="bigger">
And if you threw a party - invited everyone you knew. You would see the biggest gift would be from me and the card attached would say thank you for being a friend! Well we're movin' on up to the east side to a deluxe apartment in the sky. The ship set ground on the shore of this uncharted desert isle with Gilligan the Skipper too the millionaire and his wife. And if you threw a party - invited everyone you knew. You would see the biggest gift would be from me and the card attached would say thank you for being a friend! Well we're movin' on up to the east side to a deluxe apartment in the sky. The ship set ground on the shore of this uncharted desert isle with Gilligan the Skipper too the millionaire and his wife. And if you threw a party - invited everyone you knew. You would see the biggest gift would be from me and the card attached would say thank you for being a friend! Well we're movin' on up to the east side to a deluxe apartment in the sky. The ship set ground on the shore of this uncharted desert isle with Gilligan the Skipper too the millionaire and his wife. And if you threw a party - invited everyone you knew. You would see the biggest gift would be from me and the card attached would say thank you for being a friend! Well we're movin' on up to the east side to a deluxe apartment in the sky. The ship set ground on the shore of this uncharted desert isle with Gilligan the Skipper too the millionaire and his wife. And if you threw a party - invited everyone you knew. You would see the biggest gift would be from me and the card attached would say thank you for being a friend! Well we're movin' on up to the east side to a deluxe apartment in the sky. The ship set ground on the shore of this uncharted desert isle with Gilligan the Skipper too the millionaire and his wife. And if you threw a party - invited everyone you knew. You would see the biggest gift would be from me and the card attached would say thank you for being a friend! Well we're movin' on up to the east side to a deluxe apartment in the sky. The ship set ground on the shore of this uncharted desert isle with Gilligan the Skipper too the millionaire and his wife.
  </p>
</section>
  
</div>

<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
              
            
!

CSS

              
                /* 

  Made by @benjaminzanatta 
  (notice that I use an external CSS file)

*/

@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700|Merriweather+Sans:400,700);

.strip {
  position: fixed;
  width: 50%;
  height: 12.5%;
}

.left { left: 0; }
.right { right: 0; }

.a1, .b1 { top: 0; }
.a2, .b2 { top: 12.5%; }
.a3, .b3 { top: 25%; }
.a4, .b4 { top: 37.5%; }
.a5, .b5 { top: 50%; }
.a6, .b6 { top: 62.5%; }
.a7, .b7 { top: 75%; }
.a8, .b8 { top: 87.5%; }

.a1 {
  background-color: #e74c3c;
  animation: openA1 1.5s linear 0.5s forwards;
}
.a2 {
  background-color: #2ecc71;
  animation: openA2 1.5s linear 0.5s forwards;
}
.a3 {
  background-color: #f39c12;  
  animation: openA3 1.5s linear 0.5s forwards;
}
.a4 {
  background-color: #3498db;
  animation: openA4 1.5s linear 0.5s forwards;
}
.a5 {
  background-color: #bdc3c7;
  animation: openA5 1.5s linear 0.5s forwards;
}
.a6 {
  background-color: #f1c40f;
  animation: openA6 1.5s linear 0.5s forwards;
}
.a7 {
  background-color: #1abc9c;
  animation: openA7 1.5s linear 0.5s forwards;
}
.a8 {
  background-color: #9b59b6;
  animation: openA8 1.5s linear 0.5s forwards;
}

@keyframes openA1 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 15%; }
}
@keyframes openA2 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 10%; }
}
@keyframes openA3 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 15%; }
}
@keyframes openA4 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 10%; }
}
@keyframes openA5 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 15%; }
}
@keyframes openA6 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 10%; }
}
@keyframes openA7 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 15%; }
}
@keyframes openA8 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 10%; }
}

.b1 {
  background-color: #e74c3c;
  animation: openB1 1.5s linear 0.5s forwards;
}
.b2 {
  background-color: #2ecc71;
  animation: openB2 1.5s linear 0.5s forwards;
}
.b3 {
  background-color: #f39c12;
  animation: openB3 1.5s linear 0.5s forwards;
}
.b4 {
  background-color: #3498db;
  animation: openB4 1.5s linear 0.5s forwards;
}
.b5 {
  background-color: #bdc3c7;
  animation: openB5 1.5s linear 0.5s forwards;
}
.b6 {
  background-color: #f1c40f;
  animation: openB6 1.5s linear 0.5s forwards;
}
.b7 {
  background-color: #1abc9c;
  animation: openB7 1.5s linear 0.5s forwards;
}
.b8 {
  background-color: #9b59b6;
  animation: openB8 1.5s linear 0.5s forwards;
}

@keyframes openB1 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 15%; }
}
@keyframes openB2 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 10%; }
}
@keyframes openB3 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 15%; }
}
@keyframes openB4 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 10%; }
}
@keyframes openB5 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 15%; }
}
@keyframes openB6 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 10%; }
}
@keyframes openB7 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 15%; }
}
@keyframes openB8 { 
  from { width: 50%; }
  75%  { width: 15%; }
  to   { width: 10%; }
}

.container {
  opacity: 0;
  animation: fadeIn 0.5s ease-in 2s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to  { opacity: 1; }
}

header img {
  border-radius: 150px;
  border: 5px solid #F0F0F0;
}

header {
  font-family: 'Merriweather', serif;
}

section {
  font-family: 'Merriweather Sans', serif;
  text-align: justify;
  font-size: 1.1em;
  color: #333;
}
              
            
!

JS

              
                
              
            
!
999px

Console