Star Wars Intro 2

by Patrick Sletvold

HTML

<!-- Place in Body where you'd like intro to appear -->
<div class="star-wars-intro">

  <!-- Blue Intro Text -->
  <p class="intro-text">
    A few days ago, during...
  </p>

  <!-- Logo Image or Text goes in here -->
  <h2 class="main-logo">
    STAR<br>WARS
  </h2>

  <!-- All Scrolling Content Goes in here -->
  <div class="main-content">

    <div class="title-content">
      <p class="content-header">EPISODES IV-VI<br/>A Movie Marathon</p>

      <br>

      <p class="content-body">
        After years of galactic silence, civilization is on the brink of a new Star Wars release. Now, with the Force preparing to awaken, the people of Earth seek solace in films of old. With nowhere to turn, they gather in great numbers and watch the original trilogy without rest. Three films. 6 hours. 24 minutes. Popcorn. Slushies. Total elation.
      </p>

      <!-- button or link or whatever -->
      <a href="./StarScroll.zip" class="space-button">Download The Code Now!</a>
        
    </div>
  </div>
</div>

CSS

/*
Name: StarWarsIntro.css
URI: polarnotion.github.io/starwarsintro
Author: Polar Notion
Author URI: http://polarnotion.com/
Description: A simple CSS library for creating a Star Wars Intro Crawl. May the Force be with you.
Version: 1.0
*/

body, html{
  height: 100%;
  min-height: 100vh;
  margin: 0px;
}

.star-wars-intro {
  background: url("img/stars-bg.jpg") center center;
  width: 100%;
  height: 100%;
  font-family: "Droid Sans", arial, verdana, sans-serif;
  font-weight: 700;
  color: #EBD71C;
  background-color: #000;
  overflow: hidden;
  position: relative;
}

.star-wars-intro p.intro-text {
  position: relative;
  max-width: 16em;
  font-size: 200%;
  font-weight: 400;
  margin: 20% auto;
  color: #4ee;
  opacity: 0;
  z-index: 1;
  text-align: center;
  -webkit-animation: intro 2s ease-out;
  -moz-animation: intro 2s ease-out;
  -ms-animation: intro 2s ease-out;
  -o-animation: intro 2s ease-out;
  animation: intro 2s ease-out;
}

.star-wars-intro .main-content{
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 3;
  width: 98%;
  height: 50em;
  bottom: 0;
  font-size: 80px;
  font-weight: bold;
  text-align: justify;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(350px) rotateX(25deg);
}

.star-wars-intro .main-content:after {
  position: absolute;
  content: ' ';
  top: 0;
  bottom: 60%;
  background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
  pointer-events: none;
}

.star-wars-intro .space-button {
  color: #EBD71C;
  border: 12px solid #EBD71C;
  padding: 20px;
  background: transparent;
  text-decoration: none;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.star-wars-intro .space-button:hover {
  background-color: #D2BE03;
  border-color: #D2BE03;
  color: black;
}

.star-wars-intro .space-button:active,
.star-wars-intro .space-button:focus {
  background-color: #B8A40A;
  border-color: #B8A40A;
  color: black;
}

.star-wars-intro .title-content {
 ...