PULP
F!CTION

MIR@MAX FILMS
PRESENTS

A B@ND APART

AND
JERSEY F!LMS
PRODUCTION

A FILM BY
QUENT!N TARANTINO

JHON
TR@VOLTA

S@MUEL L.
JACKSON

UM@
THURMAN

HERVY
KE!TEL

T!M
ROTH

AM@NDA
PLUMMER

M@RIA
de MEDEIROS

V!NG
RHAMES

ER!C
STOLZ

ROS@NNA
ARQUETTE

CHR!STPHER
WALKEN

and
BRUCE
W!LLIS

Misirlou

Code

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PulpF!ction</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Limelight' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Vidaloka' rel='stylesheet' type='text/css'>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
@media screen and (max-width: 480px) {
   .inside h1 { 
   font-size: 300%;
   text-shadow: 0 4px 0 rgba(222,33,0,1); 
   }
   .inside-2 p,
   .inside-3 p{
	  font-size: 100%;
	 }
}

@media screen and (min-width: 480px) {
   .inside h1 { 
   font-size: 400%;
   text-shadow: 0 6px 0 rgba(222,33,0,1); 
   }
   .inside-2 p,
   .inside-3 p{
	  font-size: 200%;
	 }
}
@media screen and (min-width: 728px) {
   .inside h1 { 
   font-size: 800%;
     text-shadow: 0 10px 0 rgba(222,33,0,1); 
   }
   .inside-2 p,
   .inside-3 p{
	  font-size: 260%;
	 }
}
@media screen and (min-width: 924px) {
   .inside h1 { 
   font-size: 1200%;
   text-shadow: 0 12px 0 rgba(222,33,0,1); 
   }
   .inside-2 p{
	  font-size: 400%;
	 }
}

.wrapper {
  position: relative;
  background: black;
  width:100%;
  overflow: hidden;
}
.inside {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  animation: opening 90s;
  -webkit-animation: opening 120s;
  text-align: center;
}
.inside h1 {
  font-weight: bold;
  color:#ff9400;
  line-height: 90%;
}
.lettar-space{
	margin-left: -1.4em;
}
.title-role{
  font-family: 'Alfa Slab One', cursive;
}

.inside-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width:90%;
}

.inside-2 p{
  font-weight: bolder;
  color:#ff9400;
  text-shadow: 0 1px 0 rgba(222,33,0,1);
  line-height: 90%;
  display: none;
  text-align: center;
}

.film-by{
	font-family: 'Limelight', cursive;
}

.inside-3 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 90%;
}

.inside-3 p{
  font-weight: bolder;
  color:#fff;
  text-shadow: 0 2px 0 rgba(0,0,0,1);
  color: white;
  line-height: 90%;
   display: none;
   text-align: center;
}
.title-credit{
	font-family: 'Vidaloka', serif;
}

@-webkit-keyframes opening {
  0% { 
  -webkit-transform: translate(-50%,200%);
  }
  23% { 
  -webkit-transform: translate(-50%,100%);
  }
  36% { 
  -webkit-transform: translate(-50%,-50%);
  }
  100% { 
  -webkit-transform-origin:50% 50%;
  -webkit-transform: translate(-50%,-50%) scale(0.1,0.1); 
  }
  }
@keyframes opening {
  0% {
  transform: translate(-50%,200%);
   }
  23% {
  transform: translate(-50%,100%);
   }
  36% { 
  transform: translate(-50%,-50%);
   }
   100% { 
  transform-origin:50% 50%;
  transform: translate(-50%,-50%) scale(0.1,0.1);
   }
   }

  </style>
  </head>
  <body id="body">
    <div class="wrapper">
      <div class="title-role inside">
        <h1 id="pulp">
          <span class="lettar-space">PULP</span>
          <br>F!CTION
        </h1>
      </div>
      <div class="film-by inside-2">
        <p>MIR@MAX FILMS
          <br>
          <small>PRESENTS</small>
        </p>
        <p>A B@ND APART</p>
        <p>
          <small>AND</small>
          <br>JERSEY F!LMS
          <br>
          <small>PRODUCTION</small>
        </p>
        <p>
          <small>A FILM BY</small>
          <br>QUENT!N TARANTINO
        </p>
      </div>
      <div class="title-credit inside-3">
        <p>JHON
          <br>TR@VOLTA
        </p>
        <p>S@MUEL L.
          <br>JACKSON
        </p>
        <p>UM@
          <br>THURMAN
        </p>
        <p>HERVY
          <br>KE!TEL
        </p>
        <p>T!M
          <br>ROTH
        </p>
        <p>AM@NDA
          <br>PLUMMER
        </p>
        <p>M@RIA
          <br>de MEDEIROS
        </p>
        <p>V!NG
          <br>RHAMES
        </p>
        <p>ER!C
          <br>STOLZ
        </p>
        <p>ROS@NNA
          <br>ARQUETTE
        </p>
        <p>CHR!STPHER
          <br>WALKEN
        </p>
        <p>
          <small>and</small>
          <br>BRUCE
          <br>W!LLIS
        </p>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script>
    var cut=0;

    $(function(){

        setInterval(function() {
                   cut++; 
                    $(".inside-2 p:nth-of-type(" + cut +  ")").fadeIn(1000);
                    $(".inside-2 p:nth-of-type(" + cut +  ")").delay(2000).fadeOut(1000);
                    $(".inside-3 p:nth-of-type(" + (cut-7) +  ")").fadeIn(1000);
                    $(".inside-3 p:nth-of-type(" + (cut-7) +  ")").delay(2000).fadeOut(1000);
        }, 5000);
        });
        

$(document).ready(function () {
    wsize = $(window).width();
    $(".wrapper").css("height", wsize*0.4255 + "px");
});
$(window).resize(function () {
    wsize = $(window).width();
    $(".wrapper").css("height", wsize*0.4255 + "px");
});

</script>
  </body>
</html>
    

I love Tarantino