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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <nav>
  <ul>
    <li><a href="#about">About</a></li>
    <li><a href="#popular">Popular Videos</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#social">Social</a></li>
  </ul>
</nav>

<section id="main">
  <div class="container">
    <div id="tribute-info">
      <h1 id="title">Brad Traversy</h1>
      <p>Brad has been a freelancer, worked for a company and has run his own business, but he discovered that his real passion is teaching web development & programming in a simple and understandable way. He now runs the Traversy Media YouTube channel and produces online courses</p>

      <p>
        His <a id="tribute-link" href="https://www.youtube.com/channel/UC29ju8bIPH5as8OGnQzwJyA" target="_blank">YouTube Channel</a> has 700+ video tutorials.
      </p>

      <div class="g-ytsubscribe" data-channel="TechGuyWeb" data-layout="full" data-count="default"></div>
    </div>

    <div id="img-div" class="img-div">
      <img src="https://i0.wp.com/trydiscountcoupons.com/wp-content/uploads/2017/10/brad-traversy-instructor-udemy.jpg?fit=200%2C200&ssl=1" alt="brad" id="image" class="responsive-img"/>
      <p id="img-caption">Brad Traversy - <strong>#CoolGuy</strong> 👨🏻‍💻</p>
    </div>
  </div>
</section>

<section id="popular" class="bg-red">
  <h2>Popular Videos</h2>
  <div class="container">
    <div class="video-wrapper">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/UB1O30fR-EE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="video-wrapper">
      <iframe width="560" height="315"
              src="https://www.youtube.com/embed/yfoY53QXEnI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
    </div>
    <div class="video-wrapper">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/hdI2bqOjy3c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="video-wrapper">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/w7ejDZ8SWv8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  </section>

<section id="testimonials">
  <h2>Testimonials</h2>
  <div class="container">
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Been one of my favorite content creators for a couple of years. Highly recommend for anyone looking to learn in different categories of web development</p>&mdash; James Q Quick (@jamesqquick) <a href="https://twitter.com/jamesqquick/status/1228793660877221889?ref_src=twsrc%5Etfw">February 15, 2020</a></blockquote> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Thank you Brad for your hard work and inspiration... 1M person who wants to see new content from you is amazing. That&#39;s big responsibility also but I am sure you know it.<br>Wish you to reach 2M Subs next year. <a href="https://t.co/VlKS2w7VVY">pic.twitter.com/VlKS2w7VVY</a></p>&mdash; The Codeholic (@thecodeholic) <a href="https://twitter.com/thecodeholic/status/1228897622506835968?ref_src=twsrc%5Etfw">February 16, 2020</a></blockquote>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">The first developer YouTube channel I subscribed to.<br>In fact, the man that kicked off my developer journey 3 years ago. From HTML and CSS to the MERN stack and beyond! I truly can&#39;t thank you enough or recommend anyone better than Brad Traversy!!!<a href="https://twitter.com/hashtag/MillionThanksBrad?src=hash&amp;ref_src=twsrc%5Etfw">#MillionThanksBrad</a> <a href="https://t.co/uMBkwOM9ew">https://t.co/uMBkwOM9ew</a></p>&mdash; codeWithMatt 💻👨‍💻 (@codingWithMatt) <a href="https://twitter.com/codingWithMatt/status/1229063394331893766?ref_src=twsrc%5Etfw">February 16, 2020</a></blockquote>
    </div>
</section>

<section id="social" class="bg-red">
  <h2>Follow him on</h2>
    <ul class="container social-ul">
      <li><a id="tribute-link" href="https://twitter.com/traversymedia" target="_blank"><i class="fab fa-twitter"></i></a></li>
      <li><a href="https://www.instagram.com/traversymedia/" target="_blank"><i class="fab fa-instagram"></i></a></li>
      <li><a href="https://www.facebook.com/traversymedia" target="_blank"><i class="fab fa-facebook"></i></a></li>
      <li><a href="https://www.linkedin.com/in/bradtraversy/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
      <li><a href="https://github.com/bradtraversy" target="_blank"><i class="fab fa-github"></i></a></li>
    </ul>
</section>

<footer>
  We Love You Brad 💛
</footer>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="https://apis.google.com/js/platform.js"></script>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Montserrat:400,600&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', san-serif;
  margin: 0;
  padding-top: 50px;
}

nav {
  background-color: #111;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding 15px;
  z-index: 100;
}

ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul li a {
  color: #fff;
  padding: 20px;
}

.bg-red {
  background-color: #54b2cc;
  color: #fff;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
}

.tribute-info {
  margin: 0 10px;
  max-width: 450px;
}

.responsive-img {
  display: block;
  max-width: 100%;
}

.img-div p {
  background-color: #eee;
  font-size: 12px;
  margin: 0;
  padding: 5px;
  text-align: center;
}

.video-wrapper{
  margin: 10px;
}

.twitter-tweet {
  max-width: 300px;
}

section {
  padding: 20px;
  margin: 15px auto 0; 
}

h2 {
  text-align: center;
}

footer {
  background-color: #111;
  color: #fff;
  padding: 15px;
  text-align: center;
}

li {
  font-size: 2em;
}
              
            
!

JS

              
                
              
            
!
999px

Console