Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <div id="header">
  <div id="header-top">
    <div  class="container">
      <ul id="header-top-nav">
        <li><a href="https://publictransit.neocities.org/">Contact Us</a></li>
        <li><a href="#">Click This to Instantly Die</a></li>
      </ul> <!-- end header top nav -->
      <p><span class="bold">Address:</span> 123 Cheese St, Boston, Bohio 80085</p>
      <p><span class="bold">Phone:</span> 666-666-6666</p>
      <ul id="header-top-icons">
        <li>b</li>
        <li>u</li>
        <li>t</li>
        <li>t</li>
        <li>s</li>
      </ul> <!-- end header top icons -->
    </div> <!-- end container -->
  </div> <!-- end top -->
  <div id="header-bottom">
    <div class="container">
      <div class="logo">
        <img src="https://troy-sucks.neocities.org/images/manson.gif">
        <h1>MLM Scams 101</h1>
        <h4>By Manson Corporation</h4>
      </div> <!-- end logo -->
      <ul id="nav">
        <li><a href="https://troy-sucks.neocities.org/aboutme">BLOG</a></li>
        <li><a href="https://troy-sucks.neocities.org/sitemap">PAGES</a></li>
        <li><a href="https://troy-sucks.neocities.org/gallerylobby">FORUMS</a></li>
        <li><a href="https://troy-sucks.neocities.org/jackariccomic">SHOP</a></li>
        <li><a href="https://troy-sucks.neocities.org/transring">BECOME TRANS</a></li>
      </ul> <!-- end nav -->
    </div> <!-- end container -->
  </div> <!-- end bottom -->
</div> <!-- end header -->
<div id="main">
  <div  class="container">
    <h1>WELCOME TO THE NEW TROY-SUCKS THEME.</h1>
    <h3>Clean and responsive WordPress theme with a professional design created for corporate and portfolio websites. Emmet comes packaged with page builder and fully integrated with WordPress Customizer. Theme works perfectly with major WordPress plugins like WooCommerce, bbPress, BuddyPress and many others.</h3>
    <a class="features-cta">THESE BUTTONS DONT DO ANYTHING</a><a class="read-cta">LOL</a>
  </div> <!-- end container -->
</div> <!-- end main -->
<div id="features">
    <ul id="features-top">
       <div class="container">
         <li class="feat-content">
         <h1>Yes, I am 100% serious.</h1>
         <p>Build blocks, change theme colors, edit titles, manage widgets and see the results of the changes in real time. Make some pretty unique site designs without touching any code. Build blocks, change theme colors, edit titles, manage widgets and see the results of the changes in real time. Make some pretty unique site designs without touching any code. Build blocks, change theme colors, edit titles, manage widgets and see the results of the changes in real time. Make some pretty unique site designs without touching any code. Build blocks, change theme colors, edit titles, manage widgets and see the results of the changes in real time. Make some pretty unique site designs without touching any code.</p>
         <a href="#" class="features-btn">THIS BEING POSTED ON APRIL 1ST IS ENTIRELY A COINCIDENCE.</a>
        </li>
        <li class="feat-content">
        <img src="https://troy-sucks.neocities.org/images/manson.gif"/>
        </li>
      </div> <!-- end container -->
    </ul> <!-- end features top -->
    <ul id="features-bottom">
      <div class="container">
        <li class="feat-content">
          <img src="https://troy-sucks.neocities.org/images/manson.gif" width="600px">
        </li>
        <li class="feat-content">
          <h1>Manson manson manson</h1>
          <p>manson manson manson manson manson manson manson manson manson manson manson: manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson manson; manson manson manson manson manson manson manson manson manson manson manson, manson manson manson manson manson manson manson manson manson manson.</p>
          <a href="https://troy-sucks.neocities.org/dothethingthething" class="features-btn">I WANNA READ LESS PLEASE</a>
        </li>
      </div> <!-- end container -->
    </ul> <!-- end features bottom -->
</div> <!-- end features -->
<div id="install">
  <div  class="container">
    <h1>SILLINESS DONE YOUR WAY</h1>
    <h3>Our team of goobers and silly little guys work with us in real time, even across the globe! Thanks to man's(on) super-duper cool invention of the super-duper cool computer. How awesome is that!!! Hooray!!!! i dont know what else to put here</h3>
    <a class="features-cta" >these buttons still dont do anything</a><a class="read-cta">lol</a>
  </div> <!-- end container -->
</div> <!-- end install -->
<div id="info">
  <div class="container">
    <h1>Features</h1>
    <h3>What makes your business STUPID!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1!!1!!!1!!1!11111!!!one</h3>
    <ul id="info-row">
      <li class="info-box">
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Hangouts_Icon.png"/>
        <h3>Simplicity</h3>
        <p>The design is clean thanks to a pleasant color scheme, readable typography and smartly organized content elements.</p>
        <a class="info-btn" href="#">Read More</a>
      </li>
      <li class="info-box">
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Hangouts_Icon.png"/>
        <h3>Simplicity</h3>
        <p>The design is clean thanks to a pleasant color scheme, readable typography and smartly organized content elements.</p>
        <a class="info-btn" href="#">Read More</a>
      </li>
      <li class="info-box">
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Hangouts_Icon.png"/>
        <h3>Simplicity</h3>
        <p>The design is clean thanks to a pleasant color scheme, readable typography and smartly organized content elements.</p>
        <a class="info-btn" href="#">Read More</a>
      </li>
      <li class="info-box">
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Hangouts_Icon.png"/>
        <h3>Simplicity</h3>
        <p>The design is clean thanks to a pleasant color scheme, readable typography and smartly organized content elements.</p>
        <a class="info-btn" href="#">Help Me</a>
      </li>
    </ul> <!-- end info row -->
  </div> <!-- end container -->
</div> <!-- end info -->
<div id="simple-sect">
  <div class="container">
    <h1>Get started today!<br /><span>Start today in creating the business you've always wanted, and pave your way to financial freedom.</span></h1>
    <a href="#" id="start-tdy">Help Me</a>
  </div> <!-- end container -->
</div> <!-- end simple sect -->
<div id="team">
  <div class="container">
    <h1>Our Team</h1>
    <h3>Meet our hard working team members</h3>
    <div class="row team-row">
      <div class="box-6-col">
        <div class="team-pic">
          <img src="https://s-media-cache-ak0.pinimg.com/originals/39/e9/b3/39e9b39628e745a39f900dc14ee4d9a7.jpg"/>
        </div> <!-- end team-pic -->
        <h3 class="member-name">Johnny Dowe</h3>
        <h4>Team Member</h4>
      </div> <!-- end box-6-col -->
      <div class="box-6-col">
        <div class="team-pic">
          <img src="https://s-media-cache-ak0.pinimg.com/originals/39/e9/b3/39e9b39628e745a39f900dc14ee4d9a7.jpg"/>
        </div> <!-- end team-pic -->
        <h3 class="member-name">Johnny Dowe</h3>
        <h4>Team Member</h4>
      </div> <!-- end box-6-col -->
      <div class="box-6-col">
        <div class="team-pic">
          <img src="https://s-media-cache-ak0.pinimg.com/originals/39/e9/b3/39e9b39628e745a39f900dc14ee4d9a7.jpg"/>
        </div> <!-- end team-pic -->
        <h3 class="member-name">Johnny Dowe</h3>
        <h4>Team Member</h4>
      </div> <!-- end box-6-col -->
      <div class="box-6-col">
        <div class="team-pic">
          <img src="https://s-media-cache-ak0.pinimg.com/originals/39/e9/b3/39e9b39628e745a39f900dc14ee4d9a7.jpg"/>
        </div> <!-- end team-pic -->
        <h3 class="member-name">Johnny Dowe</h3>
        <h4>Team Member</h4>
      </div> <!-- end box-6-col -->
      <div class="box-6-col">
        <div class="team-pic">
          <img src="https://s-media-cache-ak0.pinimg.com/originals/39/e9/b3/39e9b39628e745a39f900dc14ee4d9a7.jpg"/>
        </div> <!-- end team-pic -->
        <h3 class="member-name">Johnny Dowe</h3>
        <h4>Team Member</h4>
      </div> <!-- end box-6-col -->
      <div class="box-6-col">
        <div class="team-pic">
          <img src="https://s-media-cache-ak0.pinimg.com/originals/39/e9/b3/39e9b39628e745a39f900dc14ee4d9a7.jpg"/>
        </div> <!-- end team-pic -->
        <h3 class="member-name">Johnny Dowe</h3>
        <h4>Team Member</h4>
      </div> <!-- end box-6-col -->
    </div> <!-- end row -->
  </div> <!-- end container -->
</div> <!-- end team -->
<div class="newsletter-form">
  <div class="container">
    <h1>Newsletter form</h1>
    <h3>Use this section to display subscription form of any WordPress plugin or newsletter service</h3>
    <form action="" method="" id="newsLetter"/>
    <input class="news-form" type="text" placeholder="Your Email"><button id="newsSub" class="sub-btn">Subscribe</button>
    </form> <!-- end newsLetter -->
  </div> <!-- end container -->
</div> <!-- end newsletter form -->
<div class="testimonials">
  <div class="container">
    <h1>Testimonials</h1>
    <h3>What our happy customers say</h3>
    <div class="row">
      <div class="box-3-col">
        <div class="testim">
          <p class="testim-quote">Awesome theme! The corporation I work for asked me to manage the company's blog built with Emmet and I just want to say thanks for such a good work! Iit simplified my blogging in many ways.</p> <!-- end testim-quote -->
        </div> <!-- end testim -->
        <div class="testim-thumb-holder">
          <img class="testim-thumbnail" src="http://pixelcurse.com/wp-content/uploads/2011/06/infrared_portrait_2.jpg"/>
        </div> <!-- end testim-thumbnail -->
        <h3 class="testim-name">Imtoolazyto Editthismessage</h3>
        <p>MANSON CORPORATION</p>
      </div> <!-- end box-3-col -->
      <div class="box-3-col">
        <div class="testim">
          <p class="testim-quote">i hate this place so much please keep me out of here oh my god theres manson everywhere. why did i even want to get hired here. i cant even quit. manson is everywhere</p> <!-- end testim-quote -->
        </div> <!-- end testim -->
        <div class="testim-thumb-holder">
          <img class="testim-thumbnail" src="http://pixelcurse.com/wp-content/uploads/2011/06/infrared_portrait_2.jpg"/>
        </div> <!-- end testim-thumbnail -->
        <h3 class="testim-name">Jayne Dowe</h3>
        <p>MANSON CORPORATION</p>
      </div> <!-- end box-3-col -->
      <div class="box-3-col">
        <div class="testim">
          <p class="testim-quote">hello i am normal worker at MANSON CORPORATION and definitely not Man Son, owner of MANSON CORPORATION. i sure love this place! i get paid one million dollars per second. not because i am the CEO. i am normal worker. yes yes</p> <!-- end testim-quote -->
        </div> <!-- end testim -->
        <div class="testim-thumb-holder">
          <img class="testim-thumbnail" src="http://pixelcurse.com/wp-content/uploads/2011/06/infrared_portrait_2.jpg"/>
        </div> <!-- end testim-thumbnail -->
        <h3 class="testim-name">Man Son</h3>
        <p>MANSON CORPORATION</p>
      </div> <!-- end box-3-col -->
    </div> <!-- end row -->
  </div> <!-- end container -->
</div> <!-- end testimonials -->

              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
  font-family: arial;
}

body {
  background: url("http://www.advantagebusinessvaluations.com/wp-content/uploads/2015/08/slide3.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.container {
  width: 85%;
  margin: 0 auto;
}

#header {
  width: 100%;
  background-color: #f1f1f1;
  color: #555;
}

#header-top {
  width: 100%;
  background-color: #d9d9d9;
  border-bottom: 1px solid #c1c1c1;
  height: 50px;
  line-height: 30px;
}

#header-top-nav {
  float: left;
}

#header-top-nav li {
  float: left;
  list-style: none;
}

#header-top-nav a {
  color: #555;
  text-decoration: none;
  display: block;
  padding: 10px 10px;
}

#header p {
  display: inline-block;
  padding: 10px;
}

#header-top-icons {
  float: right;
}

#header-top-icons li {
  float: left;
  list-style: none;
  width: 32px;
  height: 32px;
  background-color: #999;
  text-align: center;
  padding-top: 5px;
  box-sizing: border-box;
  margin: 9px;
}

#header .bold {
  color: #222;
}

#header-bottom {
  height: 100px;
  line-height: 80px;
}

.logo {
  float: left;
  line-height: 30px;
  margin-top: 20px;
  width: 500px;
}

.logo img {
  height: 60px;
  width: 60px;
  float: left;
  margin-right: 20px;
  margin-top:-5px;
}

#nav {
  float: right;
}

#nav li {
  list-style: none;
  float: left;
}

#nav li a {
  display: block;
  color: #222;
  text-decoration: none;
  padding: 10px 30px;
}

#main {
  padding: 200px 0px;
  text-align: center;
  color: #f7f7f7
}

#main h1 {
  margin: 0px 0px 50px 0px;
  font-size: 3em;
}

#main h3 {
  margin: 0px 0px 50px 0px;
}

#main a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 20px 30px;
}

.features-cta {
  background-color: #5fcca0;
  border-radius: 5px;
  margin-right: 20px;
}

.read-cta {
  border: 2px solid #f7f7f7;
  border-radius: 5px;
  margin-left: 20px;
}

#features {
  background-color: #fff;
  overflow:hidden;
}

#features-top {
  text-align: left;
  padding: 50px 0px;
  overflow: hidden;
}

.feat-content {
  width: 48.5%;
  float: left;
  list-style: none;
  padding: 20px;
  box-sizing: border-box;
}

.feat-content h1 {
  margin: 70px 0px 40px 0px;
}

.feat-content p {
  font-size: 1.1em;
  color: #444;
  line-height: 25px;
  margin-bottom: 40px;
}

.features-btn {
  background-color: #5fcca0;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 15px 20px;
  border-radius: 5px;
}

.feat-content img {
  height: 400px;
  display: block;
  margin: 0 auto;
}

#features-bottom {
  text-align: right;
  padding: 50px 0px;
  overflow: hidden;
  background-color: #d5d5d5
}

#install {
  padding: 80px 0px;
  text-align: center;
  color: #fff;
}

#install h1 {
  margin-bottom: 40px;
}

#install h3 {
  margin-bottom: 40px;
}

#install a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 20px 30px;
}

#info {
  background-color: #fff;
  padding: 80px 0px;
  text-align: center;
}

#info h1 {
  font-size: 3em;
  margin-bottom: 30px;
}

#info h3 {
  margin-bottom: 30px;
}

#info-row {
  overflow: hidden;
}

#info-row .info-box {
  width: 23.5%;
  float: left;
  list-style: none;
  padding: 0px 20px;
  box-sizing: border-box;
}

.info-box img {
  width: 200px;
  height: 200px;
  display: block;
  margin: 0px auto 30px auto;
}

.info-box h3 {
  font-size: 1.5em;
  color: #444;
  padding-bottom: 30px;
  border-bottom: 1px dashed;
}

.info-box .info-btn {
  display: inline-block;
  text-decoration: none;
  margin-top: 30px;
  color: #5fcca0;
  border: 2px solid;
  padding: 10px 20px;
}

#portfolio {
  background-color: #fff;
  text-align: center;
  overflow: hidden;
}

#portfolio > .container {
  border-top: 1px dashed #999;
  padding: 80px 0px;
}

#portfolio h1 {
  font-size: 3em;
  margin-bottom: 30px;
}

#portfolio h3 {
  color: #444;
  margin-bottom: 40px;
}

#portfolio img {
  display: block;
  width: 22%;
  height: 200px;
  float: left;
  margin: 0px 1.5% 3% 1.5%;
}

#works {
  text-decoration: none;
  color: #999;
  border: 2px solid #999;
  display: inline-block;
  padding: 10px 20px;
}

#pricing {
  overflow: hidden;
  background-color: #f2f2f2;
  padding: 80px 0px;
  text-align: center;
}

#pricing h1 {
  margin-bottom: 30px;
}

#pricing h3 {
  margin-bottom: 40px;
}

.price-table {
  width: 20%;
  float: left;
  list-style: none;
  padding: 0px 0px 30px 0px;
  border: 1px solid #d1d1d1;
  margin: 0px 0px 0px 4%;
}

#basic {
  padding: 20px 0px;
  background-color: #444;
  color: #fff;
  font-size: 1.5em;
}

#bas-price {
  padding: 15px 0px;
  background-color: #555;
  color: #fff;
  font-size: 1.2em;
}

.prc-numb {
  font-size: 3em;
}

.option {
  padding: 0px 20px;
}

.option p {
  border-bottom: 1px dashed #c9c9c9;
  padding: 20px 0px;
  color: #888;
}

#bas-btn {
  display: inline-block;
  padding: 10px 25px;
  border: 2px solid;
  margin-top: 30px;
  color: #222;
  text-decoration: none;
}

#simple-sect {
  overflow: hidden;
  background-color: #129b49;
  color: #fff;
  padding: 50px;
}

#simple-sect h1 {
  font-size: 3em;
  display: inline-block;
  float: left;
}

#simple-sect h1 span {
  font-size: .4em;
}

#start-tdy {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 20px 40px;
  border: 2px solid;
  float: right;
  margin-top: 30px;
}

#team {
  background-color: #fff;
  overflow: hidden;
  padding: 50px 0px;
  text-align: center;
}

#team h1 {
  margin-bottom: 30px;
  font-size: 3em;
}

#team h3 {
  margin-bottom: 70px;
}

.row {
  width: 100%;
  overflow: hidden;
  list-style: none;
}

.box-6-col {
  width: 15%;
  float: left;
  margin: 0px .75%;
}

.team-pic {
  height: 200px;
  margin-bottom: 30px;
}

.box-6-col img {
  width: 100%;
}

.box-6-col .member-name {
  margin-bottom: 10px !important; 
}

.newsletter-form {
  overflow: hidden;
  padding: 70px 0px;
  text-align: center;
  color: #fff;
}

.newsletter-form h1 {
  font-size: 3em;
  margin-bottom: 20px;
}

.newsletter-form h3 {
  margin-bottom: 30px;
}

.newsletter-form .news-form {
  padding: 15px;
  width: 20%;
  margin-right: 20px;
  border: 1px solid #f3f3f3;
  border-radius: 3px;
}

.newsletter-form .sub-btn {
  padding: 15px 20px;
  background-color: #5fcca0;
  border-radius: 3px;
  border: 1px solid #5fcca0;
  color: #fff;
}

.blogs {
  width: 100%;
  overflow: auto;
  background-color: #fff;
  padding: 80px 0px;
  text-align: center;
}

.blogs h1 {
  font-size: 3em;
  margin-bottom: 30px;
}

.blogs h3 {
  margin-bottom: 80px;
}

.box-4-col {
  width: 23.5%;
  margin: 0px .7%;
  float: left;
}

.blog-post {
  padding-bottom: 20px;
}

.blog-thumnail {
  width: 100%;
  height: 250px;
}

.blog-thumbnail img {
  width: 100%;
}

.blog-title {
  display: block;
  color: #5fcca0;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.5em;
  margin: 20px 0px;
}

.blog-post p {
  color: #555;
  margin-bottom: 20px;
}

.more-btn {
  text-decoration: none;
  color: #999;
  border: 2px solid #999;
  display: inline-block;
  padding: 20px 40px;
  margin-top: 80px;
}

.testimonials {
  width: 100%;
  overflow: hidden;
  padding: 80px 0px;
  text-align: center;
  color: #fff;
}

.testimonials h1 {
  font-size: 3em;
  margin-bottom: 30px;
}

.testimonials h3 {
  margin-bottom: 30px;
}

.box-3-col {
  width: 30%;
  float: left;
  margin: 0px 1.6%;
  text-align: left;
}

.testim {
  width: 100%;
  background-color: #fff;
  color: #999;
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 80px;
  box-shadow: inset 10px 0px #5fcca0;
  position: relative;
}

.testim::after {
  content:"";
  display: block;
  height: 10px;
  width: 0px;
  position: absolute;
  bottom:-40px;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-top: 30px solid #fff;
}

.testim p {
  line-height: 40px;
  font-size: 1.5em;
}

.testim-thumb-holder {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 50px;
}

.testim-thumbnail {
  width: 100%;
}

.testim-name {
  color: #5fcca0;
}

.message-form {
  padding: 80px 0px;
  text-align: center;
  color: #fff;
}

.message-form h1 {
  font-size: 3em;
  margin-bottom: 30px;
}

.message-form h3 {
  margin-bottom: 30px;
}

.form-wrap {
  width: 100%;
  overflow: hidden;
}

.form-info {
  padding: 10px;
  width: 20%;
  margin: 2%;
  border: 1px solid #f4f4f4;
  border-radius: 5px;
}

.text-area {
  display: block;
  width:73%;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #f4f4f4;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  margin: 10px auto 30px auto;
}

.form-button {
  background-color: #5fcca0;
  border: 1px solid #5fcca0;
  padding: 10px 40px;
  color: #fff;
  border-radius: 5px;
}

.footer-upper {
  width: 100%;
  background-color: #444;
  border-top: 5px solid #5fcca0;
  padding: 50px 0px;
  overflow: hidden;
  color: #fff;
}

.footer-upper h3 {
  margin-bottom: 10px;
}

.footer-upper .logo {
  color: #777 !important;
  margin-bottom: 20px;
}

.footer-upper p {
  padding-bottom: 30px;
  border-bottom: 1px solid #555;
  margin-top: 20px;
}

.footer-upper .company-info {
  padding-bottom: 0px !important;
  border-bottom: 0px;
}

.recent-post {
  overflow: hidden;
  margin-bottom: 20px;
}

              
            
!

JS

              
                // This page was created for html and css practice purposes, I decided to look at a theme and test my html and css skills to see if i can create it. I am aware that there are many errors especially my usage of IDs and Classes. Instead of correcting them I will leave them be to see how far I've grown in future projects. As of Dec 3rd 2016 this page is static only, it is not responsive as I have yet to learn responsive design. Thank you for viewing, if you want to see the actual them please click the Emmett theme link in the footer 
              
            
!
999px

Console