MIR@MAX FILMS
PRESENTS

A B@ND APART

A FILM BY
QUENT!N TARANTINO

P@M
GRIER

S@MUEL L.
JACKSON

ROBERT
FO$TER

BR!DGET
FONDA

MIC@EL
KEATON

and
ROBERT DEN!RO

J@ckie
Brown


©copyright MCMXOV!LL Mighty Mighty Afrodite Production,Inc.
All Right Reserved.

Across 110th Street

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>J@ckie Brown</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">
    <!-- 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]-->
    <link href='http://fonts.googleapis.com/css?family=Cherry+Cream+Soda' rel='stylesheet' type='text/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=Gravitas+One' rel='stylesheet' type='text/css'>
    <style>
  @media screen and (max-width: 480px) {
   .inside-3 h1{
  text-shadow: 1px 1px 0 rgba(222,33,0,1);}
}

@media screen and (min-width: 480px) {
   .inside-3 h1{
  text-shadow: 2px 2px 0 rgba(222,33,0,1);}
}
@media screen and (min-width: 728px) {
   .inside-3 h1{
  text-shadow: 4px 4px 0 rgba(222,33,0,1);}
}
@media screen and (min-width: 924px) {
   .inside-3 h1{
  text-shadow: 6px 6px 0 rgba(222,33,0,1);}
}
.wrapper {
  position: relative;
  background: black;
  width:100%;
  overflow: hidden;
}
.inside {
  position: absolute;
  top: 50%;
  left: 35%;
  -webkit-transform: translate(-50%,-35%);
  transform: translate(-50%,-35%);
  text-align: center;
  color: white;
}
.inside p{
	font-weight: bolder;
  color:#ea9c00;
  text-shadow: 2px 2px 0 rgba(0,0,0,1);
  line-height: 90%;
   display: none;
   text-align: center;
   font-family: 'Cherry Cream Soda', cursive;
}

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

.inside-2 p{
  font-weight: bolder;
  color:#ea9c00;
  text-shadow: 1px 1px 0 rgba(0,0,0,1);
  line-height: 90%;
  display: none;
  text-align: center;
  font-family: 'Limelight', cursive;
}

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

.inside-3 h1{
  color:#ea9c00;
  letter-spacing: -0.1em;
  text-shadow: 4px 4px 0 rgba(222,33,0,1);
  line-height: 80%;
  text-align: center;
  font-family: 'Gravitas One', cursive;
  margin-bottom: -1%;
  display: none;
}
.jword{
  font-size: 110%;
}
.inside-3 p{
  font-weight: normal;
  letter-spacing: 0.2em;
   line-height: -20%;
	color:#ea9c00;
	text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,1);
  font-family: 'Cherry Cream Soda', cursive;
  display: none;
}

.inside-bg {
  position: absolute;
  top: 0;
  left: -270%;
  }
@-webkit-keyframes opening {
  0% { 
  -webkit-transform: translate(0,0);
  }
  100% {
  -webkit-transform: translate(70%,0); 
  }
  }
@keyframes opening {
  0% { 
  transform: translate(0,0);
  }
  100% {
  transform: translate(70%,0); 
  }
  }
.inside-chara {
  position: absolute;
  top: 100%;
  left: 45%;
  -webkit-transform: translate(-45%,-100%);
  transform: translate(-45%,-100%);
  animation: jackie 26s  linear;
  -webkit-animation: jackie 26s  linear;
}
.inside-chara img{
	width: 130%;
}
@-webkit-keyframes jackie {
  0% { 
  -webkit-transform: translate(100%,-100%);
  }
  80% { 
  -webkit-transform: translate(45%,-100%);
  }
  100% {
  -webkit-transform: translate(-45%,-100%); 
  }
  }
@keyframes jackie {
  0% { 
  transform: translate(100%,-100%);
  }
  80% { 
  transform: translate(45%,-100%);
  }
  100% {
  transform: translate(-45%,-100%); 
  }
  }

</style>
  </head>
  <body>
    <div class="wrapper">
      <div class="inside-bg">
        <img src="JB bg2.png">
      </div>
      <div class="inside-chara">
        <img src="JB.png">
      </div>
      <div class="inside-2">
        <p>MIR@MAX FILMS
          <br>
          <small>PRESENTS</small>
        </p>
        <p>A B@ND APART</p>
        <p>
          <small>A FILM BY</small>
          <br>QUENT!N TARANTINO
        </p>
      </div>
      <div class="inside">
        <p>P@M
          <br>GRIER
        </p>
        <p>S@MUEL L.
          <br>JACKSON
        </p>
        <p>ROBERT
          <br>FO$TER
        </p>
        <p>BR!DGET
          <br>FONDA
        </p>
        <p>MIC@EL
          <br>KEATON
        </p>
        <p>
          <small>and</small>
          <br>ROBERT DEN!RO
        </p>
      </div>
      <div class="inside-3">
        <h1>
          <span class="jword">J</span>@ckie
          <br>Brown
        </h1>
        <br style="line-height:-1em;">
        <p>&#169;copyright MCMXOV!LL Mighty Mighty Afrodite Production,Inc.
          <br>All Right Reserved.
        </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>
$(document).ready(function () {
    wsize = $(window).width();
    $(".wrapper").css("height", wsize*0.4255 + "px");
    $(".inside p").css("font-size", wsize*0.05 + "px");
    $(".inside-2 p").css("font-size", wsize*0.035 + "px");
    $(".inside-3 h1").css("font-size", wsize*0.16 + "px");
    $(".inside-3 p").css("font-size", wsize*0.01 + "px");
    $(".inside-bg img").css("height", wsize*0.4255 + "px");
});
$(window).resize(function () {
    wsize = $(window).width();
    $(".wrapper").css("height", wsize*0.4255 + "px");
    $(".inside p").css("font-size", wsize*0.05 + "px");
    $(".inside-2 p").css("font-size", wsize*0.035 + "px");
    $(".inside-3 h1").css("font-size", wsize*0.16 + "px");
    $(".inside-3 p").css("font-size", wsize*0.01 + "px");
    $(".inside-bg img").css("height", wsize*0.4255 + "px");
});

var cut=0;

    $(function(){
        setInterval(function() {
         cut++
         $(".inside-2 p:nth-of-type(" + cut + ")").fadeIn(1000).delay(2000).fadeOut(1000);
         $(".inside p:nth-of-type(" + (cut-4) + ")").fadeIn(1000).delay(2000).fadeOut(1000);                     
         $(".inside-3 h1:nth-of-type(" + (cut-10) + ")").fadeIn(3000);
         $(".inside-3 p:nth-of-type(" + (cut-10) + ")").fadeIn(3000);
          }, 6000);
        });
        
var cut2=0;

     $(function(){
          setInterval(function() {
          cut2++
          $(".inside-bg").css("animation"," opening 20s  linear infinite");
          $(".inside-bg").css("-webkit-animation"," opening 20s  linear infinite");
            }, 26000);
        });
</script>
  </body>
</html>
    

I leve Tarantino