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 id="direction">
  <div class="direction-arrow arrow-up" id>
    <i class=" fa fa-arrow-up"></i>
  </div>
  <div class="direction-arrow arrow-up" id>
    <i class=" fa fa-arrow-down"></i>
  </div>
</div>
<div class="main-container" id="main">
  <header class="header">
    <div class="title" id="title">
      <span class="subtitle">“Sometimes great possibilities are right in front of us but we don't see them because we choose not to. I think that we need to be open to exploring something new.”</span>
      <br />
      <span class="name">― Barry Allen "The Flash"</span>
    </div>
  </header>
  <div class="storyteller" id="tribute-info">
    <section>
      <div class="img-div" id="img-div">
        <img id="image" src="https://i.imgur.com/FVPSYct.png" alt="The Flash">
        <div id="img-caption">
          <span>The Flash is a meber of the Justice League with the mission to protect the Earth</span><br />
          <span style="font-size: 18px;">"The fastest man alive"</span>
        </div>
      </div>
      <div class="storyline">
        <div class="story story-1">
          <div class="details">
            <h1 class="date">2014</h1>
            <p>Child often abused by his comrades, Barry Allen one day attends the death of his mother in strange circumstances. Now an adult, he works for the scientific police. After the explosion of a particle accelerator, he was struck by lightning and fell into a coma. When he woke up, nine months later, Barry soon realized that he was now endowed with superpowers.</p>
          </div>
          <div class="caption-img">
            <img src="https://i.imgur.com/iV0fhRo.png" alt="The Flash">
          </div>
        </div>
        <div class="story story-2">
          <div class="caption-img">
            <img src="https://i.imgur.com/IgUDMiN.png" alt="Captain Cold">
          </div>
          <div class="details">
            <h1 class="date">2015</h1>
            <p>

              Leonard Snart aka Captain Cold returns to Central City with a partner, Mick Rory aka Heat Wave. When the duo have just stolen a multi-million dollar painting, Cold suddenly decides to set a trap for Flash. The latter, with the help of Mick, kidnaps a person very close to the Bolide and threatens to execute him if he does not face them in a duel of fire and ice.</p>
          </div>
        </div>
        <div class="story story-3">
          <div class="details">
            <h1 class="date">2015</h1>
            <p>
              After the nuclear explosion separated Ronnie and Dr. Stein, Barry and his team believe the two men are safe. Caitlin is thrilled to have found her fiancé and is preparing to resume their lives together as Dr. Stein returns to his wife.</p>
          </div>
          <div class="caption-img">
            <img src="https://i.imgur.com/0frsv9g.jpg" alt="Firestorm">
          </div>
        </div>
        <div class="story story-4">
          <div class="caption-img">
            <img src="https://i.imgur.com/xf5hzCP.jpg" alt="Firestorm-HeatWave">
          </div>
          <div class="details">
            <h1 class="date">2015</h1>
            <p>The Flash apprend que le Captain Cold et Heat Wave sont de retour à Central City. Cette fois, Snart a amené sa petite sœur Lisa pour l'aider à faire des ravages dans la ville.</p>
          </div>
        </div>
        <div class="story story-5">
          <div class="details">
            <h1 class="date">2015</h1>
            <p>
Barry must face the Reverse-Flash which makes a last threat to the member of the group. To make matters worse, Dr. Wells frees Grodd out of town to distract Barry and the team. Joe, Barry and Cisco descend into the sewers to catch Grodd but the gorilla quickly takes over after he kidnaps Joe. Iris and Barry have an open hearted conversation.</p>
          </div>
          <div class="caption-img">
            <img src="https://i.imgur.com/Tn8m6E6.jpg" alt="">
          </div>
        </div>
        <div class="story story-6">
          <div class="caption-img">
            <img src="https://i.imgur.com/gtIk3wD.jpg?1" alt="Zoom">
          </div>
          <div class="details">
            <h1 class="">November 10, 2015</h1>
            <p>Barry and Zoom end up confronting each other in an intense face-to-face encounter, but Zoom defeats Barry, paralyzes him and drags him from one end of the city to the other, in order to show the inhabitants of Central City that he far superior to him and that nothing can stop him. He then leaves for Terre-II. At the end of this episode, Barry announces that he no longer feels his legs.</p>
          </div>
        </div>
        <div class="story story-7">
          <div class="details">
            <h1 class="">November 17, 2015</h1>
            <p>
              Grodd returns and uses scientists to steal various chemicals in the hopes of creating more gorillas with his level of intelligence. Later, he kidnaps Caitlin to help him succeed in his plan. Wells puts on the Reverse-Flash costume in an attempt to deceive Grodd into believing that his creator is still alive.</p>
          </div>
          <div class="caption-img">
            <img src="https://www.syfy.com/sites/syfy/files/styles/1200x680_hero/public/wire/legacy/0HspUps.jpg" alt="Gorilla Grood">
          </div>
        </div>
        <div class="story story-8">
          <div class="caption-img">
            <img src="https://i.imgur.com/kwb4Xdn.jpg" alt="Reverse Flash">
          </div>
          <div class="details">
            <h1 class="">November 10, 2015</h1>
            <p>The paradoxes created during the death of Eddie Thawne allowed Eobard Thawne to reappear. The criminal kidnaps Tina McGee to create tachyons to set off in her time. Thanks to Cisco's vibrations, Barry manages to prevent Thawne from killing the scientist. He succeeds in overtaking Thawne which he imprisons at Star Labs.</p>
          </div>
        </div>
        <div class="story story-9">
          <div class="details">
            <h1 class="">February 23, 2016</h1>
            <p>After Jay's death, the team is in shock, especially Caitlin who saw the one he loves dying before his eyes. King Shark that everyone believed dead has returned and wants to kill Flash. After a fight in the fierce water, Flash wins by turning around his opponent and by sparking him.</p>
          </div>
          <div class="caption-img">
            <img src="https://blogdesuperheroes.es/wp-content/plugins/BdSGallery/BdSGaleria/77132.jpg" alt="King Shark">
          </div>
        </div>
        <div class="story story-10">
          <div class="caption-img">
            <img src="https://vignette.wikia.nocookie.net/arrow/images/c/c5/Barry_Allen_in_the_Speed_Force.png/revision/latest?cb=20160515124633" alt="speedforce">
          </div>
          <div class="details">
            <h1 class="">May 10, 2016</h1>
            <p>
Barry disappeared in the new throttle explosion, at least in appearance until Cisco vibrates on the remains of his suit and discovers that he is in fact caught in pure speed. Barry discovers there a conscious form of energy, which has recreated a familiar version of Central City where he will have to reconnect with her to regain her powers, by accepting the death of her mother.</p>
          </div>
        </div>
      </div>
    </section>
  </div>
  <section class="footer">
    <span>If you have time, you should read more about this incredible Meta-human being on his<a href="https://en.wikipedia.org/wiki/Flash_(comics)" target="_blank" id="tribute-link">&nbsp;Wikipedia entry</a> .</span>

  </section>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Bangers|Fredericka+the+Great|Faster+On|Oswald");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "bangers", sans-serif;
}

body {
}

.main-container {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "footer";
}

.header {
  padding: 100px 0px 10px 0px;
  grid-area: header;
  background: #ffa305;
  text-align: center;
  line-height: 75px;
  position: relative;
}
.header:after {
  content: "";
  position: absolute;
  background: linear-gradient(
    140deg,
    #dd4646 0%,
    #e36744 16%,
    #e98340 33%,
    #ed9d3b 50%,
    #f1b634 66%,
    #f4cf29 98%,
    #f5e814 100%
  );
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  box-shadow: 0 0.5px 3px #444;
}

.header:before {
  background: black;
  content: "";
  height: 20px;
  right: 0;
  left: 0;
  z-index: 1000;
}
.header .subtitle {
  font-size: 2em;
}

.header .name {
  font-size: 25px;
  font-weight: 10;
}

.storyteller {
  display: grid;
  grid-area: content;

  background: #3f3e31;
}

#image {
  display: block;
  min-width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

#img-caption {
  height: 100%;
  background: #eaac1c;
  text-align: center;
  font-size: 25px;
  font-family: "Faster One", cursive;
}
.storyline {
  position: relative;
  display: grid;
  grid-gap: 20px 0px;
  padding: 20px 150px 20px 150px;
  margin: 0;
}

.storyline:after {
  content: "";
  position: absolute;
  width: 4px;
  margin: auto;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: -webkit-linear-gradient(
    50deg,
    #f4b61c 0%,
    #f4b61c 16%,
    #e98340 33%,
    #ed9d3b 50%,
    #f1b634 66%,
    #f4cf29 83%,
    #f5e814 100%
  );
  background: -o-linear-gradient(
    50deg,
    #f4b61c 0%,
    #f4b61c 16%,
    #e98340 33%,
    #ed9d3b 50%,
    #f1b634 66%,
    #f4cf29 83%,
    #f5e814 100%
  );
  background: linear-gradient(
    140deg,
    #f4b61c 0%,
    #f4b61c 16%,
    #e98340 33%,
    #ed9d3b 50%,
    #f1b634 66%,
    #f4cf29 83%,
    #f5e814 100%
  );
}
.story {
  display: flex;
  justify-content: space-between;
  background: #bbb;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
}

/*.story:before {
  content: "🗲";
  position:relative;
  font-size: 4.5em;
  color: #f7df0c;
  margin: 0;
  padding:0;
  z-index: 2000;
}

.story:after {
  content: "";
  position:relative;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  z-index: 1500;
  border: 5px solid #e5d200;
  box-shadow: 0px 0px 13px #444;
}*/

.details {
  width: 50%;
  background: white;
  height: 100%;
}

.details > p {
  text-align: justify;
  padding: 55px 45px 15px 10px;
  font-size: 25px;
  font-family: "Oswald", sans-serif;
  line-height: 1.3;
}

.details:nth-child(even) > p {
  padding: 65px 45px 15px 45px;
}
.details:nth-child(even) > h1 {
  margin: 10px 50px 0px 15px;
  float: right;
  /*background: url('../images/');*/
}

.details > h1 {
  margin: 0px 0px 5px 10px;
  float: left;
  font-size: 40px;
  /*background: url('../images/');*/
}

.caption-img {
  width: 50%;
  position: relative;
}

.caption-img img {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.8;
}

.story-1 {
}
.story-1 .caption-img:after {
  content: "";
  background-color: #740900;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  opacity: 0.55;
}

.story-1 .caption-img:before {
  content: "The Flash is born";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 8px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.95;
}

.story-2 {
}

.story-2 .caption-img:after {
  content: "";
  background-color: lightblue;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  opacity: 0.5;
}

.story-2 .caption-img:before {
  content: "It's cold outside";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 8px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.95;
}

.story-3 {
}

.story-3 .caption-img:before {
  content: "Firestorm";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 7px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.95;
}

.story-4 {
}

.story-4 .caption-img:after {
}

.story-4 .caption-img:before {
  content: "Rogue Time";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 8px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.95;
}
.story-5 {
}

.story-5 .caption-img:after {
}

.story-5 .caption-img:before {
  content: "Rogue Air";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 7px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.95;
}

.story-6 {
}

.story-6 .caption-img:after {
}

.story-6 .caption-img:before {
  content: "Enter Zoom";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 7px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.95;
}

.story-7 {
}

.story-7 .caption-img:after {
}

.story-7 .caption-img:before {
  content: "Rogue Time";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 8px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.95;
}
.story-8 {
}

.story-8 .caption-img:after {
}

.story-8 .caption-img:before {
  content: "Rogue Air";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 7px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.95;
}

.story-9 {
}

.story-9 .caption-img:after {
}

.story-9 .caption-img:before {
  content: "King Shark";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 7px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.95;
}

.story-10 {
}

.story-10 .caption-img:before {
  content: "Back to the source";
  text-align: center;
  font-size: 40px;
  position: absolute;
  right: 0;
  left: 0;
  background-color: #1e1d1d;
  top: 50;
  color: dimgray;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -3px 8px black;
  padding-top: 5px;
  padding-bottom: 5px;
  opacity: 0.9;
}

.footer {
  grid-area: footer;
  background: yellow;
  padding: 50px;
  text-align: center;
}
/*
.footer:before {
  content: "🗲";
  position:relative;
  font-size: 4.5em;
  color: #f7df0c;
  margin: 0;
  padding:0;
  z-index: 2000;
}

.footer:after {
  content: "";
  position:relative;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  z-index: 1500;
  border: 5px solid #e5d200;
  box-shadow: 0px 0px 13px #444;
}
*/

              
            
!

JS

              
                // coded by @ChaituVR
const projectName = "tribute-page";
localStorage.setItem("example_project", "Tribute Page");

              
            
!
999px

Console