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

              
                <head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Josefin+Sans" rel="stylesheet">
    <title>Tribute Page for Casey Neistat</title>
</head>
<body style="color: #e1e5e3">
    <div class="container" style="background: url('https://wallpaperscraft.com/image/new_york_city_night_buildings_sky_view_from_above_88191_3840x2400.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; height:100%;">
      <div class="jumbotron" style="background: hsla(0, 30%, 20%, 0.6); margin: 15px;">
        <div class="row">
          <div class="col-sm-offset-2">
            <div class="col-sm-10" style="text-align:center">
              <header>
              <h1 class="title" id="casey">Casey Neistat</h1>
              <h2 class="title">The man who changed YouTube</h2>
              </header>
            <figure>
              <img src="https://speakerdata.s3.amazonaws.com/photo/image/856962/PKUZbRuU.jpeg" class="img-thumbnail figure-img img-fluid img-rounded img-responsive" alt="A square picture of Casey's Neistad face in sunglasses" height="300" width="300">
              <figcaption style="font-family: 'Josefin Sans'">Casey Neistat - American YouTube personality, filmmaker, and co-founder of social media company Beme</figcaption>
            </figure>
            </div>
          </div>
        </div>    
          <article style="font-family: 'Josefin Sans'; padding: 20px; font-size: 18px;">
            <h2 class="row text-center"><b>Some facts about Casey's life:</b></h2>
              <ul class="text-left">
                <li><time>1981-03-25</time> Casey was born</li>
                <li>He dropped out of Ledyard High School in the 10th grade at age 15 and did not return to school or graduate.</li>
                <li>Prior to moving to New York City, Neistat worked as a dishwasher at a restaurant[14] and short order cook in Mystic, Connecticut. His first job in New York City was as a bike messenger.</li>
                <li>In mid-2001 Neistat and his brother Van began working with the artist Tom Sachs, ultimately making a series of films about the artist's sculptures and installations. This was the earliest work done by the brothers as a collective.</li>
                <li>His first viral video:  <b><i>iPod's Dirty Secret</i></b> from 2013 was watched by 957 860 people (September 2016)</li>
                <li>The most popular movie on his You Tube chanell - <b><i>Make It Count</i></b> - was watched by over 20 239 031  people!</li>
                <li>As of September 11, 2016, Neistat has released 924 vlogs and short films on his YouTube channel since its creation on February 15, 2010. The subject matter of the films varies greatly and most feature Neistat. On August 22, 2015, Neistat reached 1 million subscribers which increased to 4 million by August 2016</li>
                <li>Neistat started to post daily vlogs on YouTube on March 24, 2015. On his May 15, 2015, vlog post "The Vice President, Outer Space and the Baby," Neistat stated that he sees his vlogs more as a forum as opposed to a daily journal. On January 19, 2016 Neistat posted his 300th vlog. As a result of vlogging everyday, Neistat said he has chosen to refrain from making any feature length content. Neistat is frequently seen using and discussing his collection of Boosted boards in his daily vlogs, which are sometimes showcased in his other YouTube videos</li>
                </ul>
            <h2 class="row text-center"><b>Beme</b></h2>
              <p align="justify"> In a July 8, 2015 vlog, Neistat announced that he has been working with Matt Hackett on building a video sharing app called Beme. Designed as an alternative to highly edited content found in social media, the app enables users to produce unedited four-second videos, which are immediately uploaded and shared with the user's subscribers, without the ability to review the video. Users respond to shared content by sending "reactions", photographs of themselves, back to the video uploader.
              <br>
              <br>Beme released the first version of the app on <time>July 17, 2015.</time> Shortly after the launch, BuzzFeed described Beme's minimalist design as "deceptively simple and decidedly weird." The New York Times explained that Beme's user experience is "as if the phone becomes a stand-in for one's body, the camera facing outward to capture what the user is experiencing." Within eight days of the app's release, Beme users had shared 1.1 million videos and logged 2.4 million reactions.
              </p>
            <h2 class="row text-center"><b>Filmography</b></h2>
              <h3><b>Film</b></h3>
              <ol>
                <li><time datetime="2008"><b>2008</b></time> The Pleasure of Being Robbed <i>Producer</i></li>
                <li><time datetime="2009"><b>2009</b></time> Daddy Longlegs <i>Producer</i></li>
                <li><time datetime="2011"><b>2011</b></time> 3x3 <i>Director</i></li>
                <li><time datetime="2016"><b>2016</b></time> Nerve <i>Actor</i></li>
              </ol>
              <h3><b>Television</b></h3>
              <ol>
                <li><time datetime="2010"><b>2010</b></time> The Neistat Brothers <i>Director 	Producer 	Writer 	Actor</i></li>
                <li><time datetime="2011"><b>2011</b></time> Alter Egos <i>Writer</i></li>
              </ol>
          </article>
          <blockquote class="pull-right" cite="www.hustleheart.co/casey-neistat/">
            <p id="quote"><b>Never be afraid to share.  “I’ve wanted to share this for a long time but I’m afraid of coming across preachy or didactic. But the truth is when I think about the people who I’ve learned the most from in life, it’s been the people who haven’t been afraid to share their ideas. So I shouldn’t worry about being preachy and I should just speak. I should share.”</b></p>
            <small id="small"><span id="name"><b>Casey Neistat</b></span><cite title="Source"><br><a href="www.hustleheart.co/casey-neistat/">www.hustleheart.co/casey-neistat/</a></cite></small>
          </blockquote>
          <p id="find">If you want to find out more about this awesome guy go and check his <a href="https://www.youtube.com/user/caseyneistat" target="_blank" style="color: red; font-size: 30; background-color: white"> <b>You Tube</b> </a> chanell or this <a href="https://en.wikipedia.org/wiki/Casey_Neistat" style="color: black; font-size: 30; background-color: white" target="_blank" > <b>Wikipedia</b> </a> page</p>
          </div>
           </div>
         </div>  
      </div>    
  </div>
</div>
</body>
<footer style="text-align: center; margin-top: 15px; color: grey;">
  <p>This Tribute page was coded by <a href="https://www.freecodecamp.com/natamilove" target="_blank">Natalia Andrzejczuk</a></p>
</footer> 
              
            
!

CSS

              
                .title {
  font-family: 'Amatic SC', cursive;
}
#casey{
  font-size: 100px;
}

#quote {
    font-family: 'Amatic SC', sans-serif;
    font-size: 30px;

}
#small {
    font-family: 'Amatic SC', sans-serif;
    font-size: 20px;
    color: lightblue;
  
}
#name {
  font-size: 20px;
}  
#find {
  padding: 25px;
  font-family: 'Amatic SC', sans-serif;
  font-size: 30px;
}

              
            
!

JS

              
                
              
            
!
999px

Console