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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <body class="bkgd-color">
  <div class="container-fluid">
    <!-- VW Image Section -->
    <div id="header">
      <img id"vw-logo" class="grad img-responsive center-block" src="https://vignette.wikia.nocookie.net/logopedia/images/0/0a/Volkswagen_2000s.png/revision/latest?cb=20130101060237" alt="VW Logo">
      <!-- The sicrocco Section -->
      <div>
        <div class="jumbotron bkgd-color">
          <h2 id="volkswagen" class="text-center">VOLKSWAGEN</h2>
          <h1 id="scirocco" class="text-center">Scirocco</h1>
        </div>
      </div>

      <!-- 3 Images -->
      <div class="bkgd-color">
        <div class="row">
          <div class="center">
            <div class="col-md-4 col-xs-4">
              <img class="car-image box-car img-responsive" src="http://cdn1.autoexpress.co.uk/sites/autoexpressuk/files/styles/gallery_adv/public/volkswagen-scirocco-rline-1.jpg?itok=lhyJuAJ-" alt="Front of Car">
            </div>
            <div class="col-md-4 col-xs-4">
              <img class="car-image box-car img-responsive" src="http://cdn1.autoexpress.co.uk/sites/autoexpressuk/files/styles/gallery_adv/public/volkswagen-scirocco-rline-6.jpg?itok=1zTKtWh_" alt="Side of Car">
            </div>
            <div class="col-md-4 col-xs-4">
              <img class="car-image box-car img-responsive" src="http://cdn2.autoexpress.co.uk/sites/autoexpressuk/files/styles/gallery_adv/public/volkswagen-scirocco-rline-2.jpg?itok=Wii9a7I3" alt="rear of car">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Content -->

    <div class="row">
      <div class="col-md-1 "></div>
      <div id="specs-well" class="col-md-3 well well-sm well-margin">
        <div>
          <p id="specs" class="text-center">Scirocco Specs</p>
        </div>
        <p id="specs-heading" class="line-height text-center text-secondary">2.0 TDI (2008 - 2017)</p>
        <ul class="list-unstyled line-height content-text">
          <li><strong>Engine Size:</strong> 1998cc</li>
          <li><strong>Cylinders:</strong> 4</li>
          <li><strong>Valves:</strong> 16</li>
          <li><strong>Fuel Type:</strong> Diesel</li>
          <li><strong>Gearbox:</strong> 6 Speed </li>
          <li><strong>Drivetrain</strong> Front Wheel Drive</li>
          <li><strong>Power:</strong> 138bhp</li>
          <li><strong>Torque:</strong> 320 Nm, 236 ft-ib</li>
          <li><strong>CO2 Emissions:</strong> 134 g/km </li>
          <li><strong>Miles Per Tank:</strong> 605 miles</li>

        </ul>

        <p id="further-reading" class="text-center">Further Reading</p>

        <p><a href="https://en.wikipedia.org/wiki/Volkswagen_Scirocco">Scircco Wiki</a></p>
        <p><a href="https://www.topgear.com/group/scirocco">Scirocco on TopGear</a></p>
        <p><a href="https://www.laharts.ie/wp-content/uploads/2015/10/1423132542_Scirocco-Brochure.pdf">Scirocco Brochure</a></p>
      </div>

      <div class="col-md-7 well well-sm well-margin">
        <p id="history" class="text-center line-height-2">History of the Scirocco</p>
        <dl>
          <dt>1974 - 1981: First Generation</dt>
          <dd>
            <p class="text-justify">Volkswagen began work on the car during the early 1970s as the replacement for the aging Karmann Ghia coupe, and designated it the Typ 53 internally. Although the platform of the Golf (Rabbit) was used to underpin the new Scirocco, almost
              every part of the car was re-engineered in favour of a new styling (penned by Giorgetto Giugiaro) which was sleeker and sportier than that of the Golf.</p>
            <p class="text-justify"> The car changed little before being replaced by the second generation in March 1981 (Europe). However, air conditioning became available as an option on the domestic market in August 1975. The possibility to retrofit the installation, together
              with a larger battery, was offered to existing owners.</p>
            <dd>
              <dt>1981 - 1992: Second Generation</dt>
              <dd>
                <p class="text-justify">The second generation Scirocco, still assembled on behalf of Volkswagen by Karmann of Osnabrück (in the same factory as the first generation Scirocco), was first shown at the 1981 Geneva Salon in March that year.</p>
                <p class="text-justify">A mid-cycle update occurred in 1984, which included minor changes over the 1982 model: removal of the outlined "SCIROCCO" script from the rear hatch (below the spoiler), a redesigned air conditioning compressor, and a different brake master
                  cylinder with in-line proportioning valves and a brake light switch mounted to the pedal instead of on the master cylinder.</p>
                <p class="text-justify">The Scirocco was briefly joined but effectively replaced by the Corrado in the VW line-up, although this had been on sale since 1988 and was aimed further upmarket. The Scirocco continued to be offered to Japanese buyers, but only the
                  GTi with the 1.8 L engine in either manual or automatic transmissions, but starting with 1986 only the automatic transmission was offered. </p>
                <dd>
                  <dt>2008 - 2017: Third Generation</dt>
                  <dd>
                    <p class="text-justify">Volkswagen officially announced in June 2006 production of a new Scirocco model at the AutoEuropa assembly plant in Palmela, Portugal.The new model, identified by the internal type numbers 137 or 1K8, is based on the PQ35 platform
                      of the Golf V and was unveiled at the 2008 Geneva Motor Show. The 2008 model of the Scirocco received a five star safety rating from EuroNCAP even after the driver test dummy's head hit the steering wheel when the airbag bottomed
                      out.
                    </p>
                    <p class="text-justify">Six years after its launch in 2008, Volkswagen revealed the 2014 Scirocco face-lift at the Geneva Motor Show. On the outside the changes aren't very obvious as Volkswagen installed only a slightly re-profiled bumper, new bi-xenon headlights
                      with LED daytime running lights and they also tweaked the grille. At the back there are restyled LED taillights, along with a reworked bumper and boot lid. </p>
        </dl>
      </div>
    </div>
    
    <div id="footer">
      <p id="foot-note" class="text-center">Made with     
   <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>       
        and       
 <span class="glyphicon glyphicon-glass" aria-hidden="true"></span></p>
      <p id="copy-date" class="text-center"> 
         <span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span> 
        2018</p>
    </div>

  </div>
              
            
!

CSS

              
                
.bkgd-color {
  background-color: #E8E8E8;
}

.centered {
  text-align: center;
}


.center {
    margin: 0 auto;
    width: 80%;
}

.silver-text {
    color: silver;
  }

  h1 {
    font-size: 50px;
    font-color: red;

  }

  .shaddow {
    border-color: #DCDCDC;
    border-width: 20px;
    border-style: solid;
    border-radius: 50%;
  }

  .car-image {
    width: 300px;
    height: 200px;
    border-radius: 10%;
  }

  .box-car {
    border-style: solid;
    border-width: 2px;
    border-color: #C1C1C1;
    margin: 1px;
  }

  .head-box {
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    background-color: silver;
    margin: 2px;
  }

  .custom-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

.well-margin {
  margin: 5px;
}

.line-height {
  line-height: 25px !Important;
}

.content-text {
  font-size: 13px !Important;
}

p {
  line-height: 18px !Important;
  font-size: 13px !Important;
}

dt {
  line-height: 27px !Important;
  font-size: 14px !Important;
}

.silver-bkgd {
  background-color: silver !Important;
}

#volkswagen {
  line-height: 0px !Important;
}

#specs {
  font-size: 30px !Important;
  margin-top: 15px !Important;
  line-height: 30px !Important;
 
}

#specs-heading {
  font-size: 14px !Important;
  font-color: red !Important;
}

#history {
  font-size: 30px !Important;
  margin-top: 15px !Important;
  margin-bottom: 30px !Important;
  line-height: 30px !Important
  
}

.grad {
  radial-gradient (red yellow);
}
#further-reading {
  margin-top: 30px;
  font-size: 30px !Important;
  margin-bottom: 30px !Important;
  line-height: 30px !Important;
}

#scirocco {
  font-size: 80px;
  line-height 0px !Important;
}

#links {
  font-size: 40px !Important;
}

#specs-well {
  background-color: #D9D9D9;
}

#footer {
  background-color: #D9D9D9  ;
  margin-top: 20px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 10px;
}

#foot-note {
  font-size: 14px !Important;
  margin-top: 20px !Important;
  line-height: 0px !Important
}

#copy-date {
  font-size: 15px !Important;
}

#vw-logo {
  margin-top: 10px !Important;
}

#header {
  margin-top: 20px;
}
              
            
!

JS

              
                
              
            
!
999px

Console