cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <html>

<head>
  <title>Presentation</title>
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.0.0/normalize.css" />
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Gentium+Basic:400,400italic,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>

<body>
  <div id="container">
    <a class="home hide" href="#" data-Page="#cover"><i class="fa fa-home fa-2x"></i></a>

    <section id="cover" class="slide">
      <div class="text">
        <h1>Wander</h1>
        <p>“The world is a book and those who do not travel read only one page,” Augustine of Hippo once said.</p>
        <hr>
      </div>
      <a class="next" href="#" data-Page="#p1"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p1" class="slide right">
      <div class="text">
        <h2>This presentation</h2>
        <p>This interactive presentation was designed by Seema Vithani and Aysha Khan using HTML5, CSS3, Javascript, the Google Maps API, D3.js data visualization libary and animations from Justin Aguilar.</p>
        <p>We'll explain how we do it all so you can fork this and play with the code yourself. And because we both think traveling is cool, we're going to use information on international travel to demonstrate each of these languages and libraries.</p>
      </div>
      <div id="newquote">
        <p>
          "If you think adventure is dangerous, try routine. It is lethal."</p>
        <p>— Paulo Coelho</p>
      </div>
      <a class="back" href="#" data-Page="#cover"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p2"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>

    <section id="p2" class="slide right">
      <div class="text">
        <h2>What is HTML?</h2>
        <p>HTML, or Hypertext Markup Language, is a markup language for structuring web documents.</p>
        <p>With it, you can do things like insert images (using &lt;img&gt; tags) and hyperlinks (using &lt;a&gt; tags) like shown below. (Click this title or the image below to read <a href="http://lifehacker.com/5539907/a-savvy-travelers-guide-to-vacationing-abroad">"A Savvy Traveler's Guide to Vacationing Abroad"</a>!)</p>
        <a href="http://lifehacker.com/5539907/a-savvy-travelers-guide-to-vacationing-abroad"><img src="https://static.pexels.com/photos/9482/plane.jpg" height="300vh" id="airplaneimage"></a>
      </div>
      <a class="back" href="#" data-Page="#p1"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p3"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>

    <section id="p3" class="slide right">
      <div class="text">
        <h2>HTML5</h2>
        <p>HTML5 is the latest and greatest version of HTML. Using it will result in code that is more readable, specific and clean, especially when paired with CSS3 (more on that soon!).</p>
        <p>For example, you no longer need to create a &lt;div&gt; with the class "footer" to style the footer in a certain way; you can just use the &lt;footer&gt; tag. That also makes it easier for web browsers and screen readers to understand your code.
          Here are some of the other simplified semantic block-level elements:</p>
        <ul>
          <li>&lt;div id="nav"&gt; &rarr; &lt;nav&gt;</li>
          <li>&lt;div id="header"&gt; &rarr; &lt;head&gt;</li>
          <li>&lt;div id="article"&gt; &rarr; &lt;article&gt;</li>
        </ul>
      </div>
      <a class="back" href="#" data-Page="#p2"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p4"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p4" class="slide right">
      <div class="text">
        <h2>HTML Elements</h2>
        <div>
          <p>In HTML, your document is made up of elements. These elements, in turn, are made up of tags. Each opening tag (like &lt;p&gt;) and closing tag (like &lt;/p&gt;) holds content.</p>
          <p>Below is an example of a styled HTML paragraph.</p>
        </div>
        <p id="Alice">"Would you like an adventure now, or shall we have tea first?" - Alice in Wonderland</p>
        &nbsp;
        <div id="videoWrapper">
          <iframe width="100%" height="400" src="https://www.youtube.com/embed/bPUpk28cngg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
        </div>
        <p>HTML documents begin with &lt;!DOCTYPE html&gt; so the document recognizes the language you're using. (This presentation  doesn't have that tag because CodePen doesn't need it.) They also have &lt;html&gt; and &lt;/html&gt; tags to open and close the document, &lt;head&gt; &lt;/head&gt; tags, which include information like the &lt;title&gt; &lt;/title&gt; and meta tags, and &lt;body&gt; &lt;/body&gt; tags, which hold the content.</p> 
      </div>
      <a class="back" href="#" data-Page="#p3"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p5"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p5" class="slide right">
      <div class="text">
        <h2>What is CSS?</h2>
        <p>CSS, or cascading style sheets, is used to dress up HTML elements. It can change layout, fonts, colors and more. CSS can be used to design multiple pages at once.</p>
        <p>We added a background image to this page and changed the opacity of this box using CSS.</p>
        <p>Check out these examples of CSS:</p>
        <ul>
          <li id="sentenceone">This sentence is blue and in italics.</li>
          <li id="sentencetwo">This is bold.</li>
          <li id="sentencethree">This is a pretty font.</li>
        </ul>
      </div>
      <a class="back" href="#" data-Page="#p4"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p6"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p6" class="slide right">
      <div class="text">
        <h2>CSS3</h2>
        <p>CSS3 is the latest version of Cascading Style Sheets. It allows the user to apply cool new elements.</p>
        <p id="shadow">For example, hover over this sentence to see an example of shadow.</p>
        <p id="animation">Hover over this sentence to make it blurry.</p>
        <p>The quotes below are dressed up using CSS. A flexbox is used to to put them side-by-side, and other elements are used to change the font, size and color.</p>
        <div id="side-by-side">
          <div class="flexquote">
            <p>“We travel, some of us forever, to seek other places, other lives, other souls.”</p> — Anais Nin</p>
          </div>
          <div class="flexquote">
            <p>"She was free in her wildness. She was a wanderess, a drop of free water. She belonged to no man and no city.</p>
            <p>— Roman Payne</p>
          </div>
        </div>
      </div>
      <a class="back" href="#" data-Page="#p5"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p7"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p7" class="slide right">
      <div>
        <h2>Largest international airlines</h2>
        <p id="Audrey">"Paris is always a good idea." - Audrey Hepburn</p>
        <h5 id="label"><em>International passengers in millions</em></h5>
<div id="chart"></div>
    <script src="http://d3js.org/d3.v2.min.js"></script>
    <script>
function renderChart() {

var data = d3.csv.parse(d3.select('#csv').text());
var valueLabelWidth = 50; // space reserved for value labels (right)
var barHeight = 20; // height of one bar
var barLabelWidth = 120; // space reserved for bar labels
var barLabelPadding = 5; // padding between bar and bar labels (left)
var gridLabelHeight = 18; // space reserved for gridline labels
var gridChartOffset = 3; // space between start of grid and first bar
var maxBarWidth = 420; // width of the bar with the max value
 
// accessor functions 
var barLabel = function(d) { return d['Name']; };
var barValue = function(d) { return parseFloat(d['Population (mill)']); };
 
// scales
var yScale = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, data.length * barHeight]);
var y = function(d, i) { return yScale(i); };
var yText = function(d, i) { return y(d, i) + yScale.rangeBand() / 2; };
var x = d3.scale.linear().domain([0, d3.max(data, barValue)]).range([0, maxBarWidth]);
// svg container element
var chart = d3.select('#chart').append("svg")
  .attr('width', maxBarWidth + barLabelWidth + valueLabelWidth)
  .attr('height', gridLabelHeight + gridChartOffset + data.length * barHeight);
// grid line labels
var gridContainer = chart.append('g')
  .attr('transform', 'translate(' + barLabelWidth + ',' + gridLabelHeight + ')'); 
gridContainer.selectAll("text").data(x.ticks(10)).enter().append("text")
  .attr("x", x)
  .attr("dy", -3)
  .attr("text-anchor", "middle")
  .text(String);
// vertical grid lines
gridContainer.selectAll("line").data(x.ticks(10)).enter().append("line")
  .attr("x1", x)
  .attr("x2", x)
  .attr("y1", 0)
  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
  .style("stroke", "#ccc");
// bar labels
var labelsContainer = chart.append('g')
  .attr('transform', 'translate(' + (barLabelWidth - barLabelPadding) + ',' + (gridLabelHeight + gridChartOffset) + ')'); 
labelsContainer.selectAll('text').data(data).enter().append('text')
  .attr('y', yText)
  .attr('stroke', 'none')
  .attr('fill', 'black')
  .attr("dy", ".35em") // vertical-align: middle
  .attr('text-anchor', 'end')
  .text(barLabel);
// bars
var barsContainer = chart.append('g')
  .attr('transform', 'translate(' + barLabelWidth + ',' + (gridLabelHeight + gridChartOffset) + ')'); 
barsContainer.selectAll("rect").data(data).enter().append("rect")
  .attr('y', y)
  .attr('height', yScale.rangeBand())
  .attr('width', function(d) { return x(barValue(d)); })
  .attr('stroke', 'white')
  .attr('fill', 'steelblue');
// bar value labels
barsContainer.selectAll("text").data(data).enter().append("text")
  .attr("x", function(d) { return x(barValue(d)); })
  .attr("y", yText)
  .attr("dx", 3) // padding-left
  .attr("dy", ".35em") // vertical-align: middle
  .attr("text-anchor", "start") // text-align: right
  .attr("fill", "black")
  .attr("stroke", "none")
  .text(function(d) { return d3.round(barValue(d), 2); });
// start line
barsContainer.append("line")
  .attr("y1", -gridChartOffset)
  .attr("y2", yScale.rangeExtent()[1] + gridChartOffset)
  .style("stroke", "#000");

}
    </script>
    <script id="csv" type="text/csv">Name,Population (mill),
Ryanair,86.37
easyJet,56.312
Lufthansa,48.244
Emirates,47.278
British Airways,35.364
Air France,31.682
Turkish Airlines,31.016
KLM,27.74
United Airlines,25.708
Delta Air Lines,24.243</script>
    <script>renderChart();</script>
        <div class="text">
          <p>The data above displays the 10 international airlines carrying the most scheduled passengers in 2014, according to the International Air Transport Association <a href="https://www.iata.org/publications/pages/wats-passenger-carried.aspx">(IATA)</a>.</p>
        </div>
      </div>
      <a class="back" href="#" data-Page="#p6"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p8"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p8" class="slide right">
      <div id="map"></div>
      <div id="box" class: "text">
        <p>"To see the world, things dangerous to come to, to see behind walls, draw closer, to find each other, and to feel. That is the purpose of life."</p>
        <p>—James Turber</p>
        <hr>
        <p>Google Maps API allows the user to customize maps and provide location information. The service is useful for many purposes, from personal to professional.</p>
        <p>This map shows the top 10 most visited countries in 2014.</p>
      </div>
      <a class="back" href="#" data-Page="#p7"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p9"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p9" class="slide right">
      <div class="text">
        <h2>Elements of Design:</h2>
        <p class="pulse" id="movement">movement</p>
        <p class="tossing">Movement is using lines, colors, values, textures, forms and space to direct the eye from one element to another.</p>
        <hr class="tossing">
      </div>
        <a class="back" href="#" data-Page="#p8"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
        <a class="next" href="#" data-Page="#p10"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p10" class="slide right">
      <div class="text">
        <div id="balancetop">
          <h2>Balance</h2>
          <p> Balance is a design principle that places components of a visual in an aesthetically pleasing arrangement. Balance is achieved symmetrically or asymmetrically. </p>
        </div>
        <p id="balanceright">When a composition is symmetrically balanced, it has equal "weight" on equal sides balanced around a central axis.</p>
        <p id="balanceleft">Asymmetrical balance is when there is unequal visual weight around the central axis of a composition, but the elements overall complement each other in a way that creates balance.</p>
      </div>
      <a class="back" href="#" data-Page="#p9"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p11"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p11" class="slide right">
      <div class="text">
        <h2>Emphasis</h2>
        <p>is the focal point of a composition to which the eye is naturally attracted. It brings attention to what's important.</p>
        <p>"Perhaps the spirit of adventure, be it mental or material adventure, is a factor so essential in human progress that no emphasis of it is undue." - Archibald Hill</p>
      </div>
      <a class="back" href="#" data-Page="#p10"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p12"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id=p12 class="slide right">
      <div class="text">
        <h2>Proportion</h2>
        <p>In a design, proportion is the relative size and scale of the different elements. </p>
        <svg width="150" height="150">
         <circle cx="75" cy="75" r="75" fill="purple"/></svg>
        <svg width="100" height="100">
         <circle cx="50" cy="50" r="50" fill="purple"/></svg>
        <svg width="50" height="50">
         <circle cx="25" cy="25" r="25" fill="purple"/></svg>
      </div>
      <a class="back" href="#" data-Page="#p11"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p13"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id=p13 class="slide right">
      <div class="text">
        <h2>Pattern</h2>
        <p>Pattern uses the art elements in planned or random repitition to enhance surfaces or paintings.</p>
        <svg width="40" height="50">
          <polygon fill="#bb8800" stroke="#008888" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="#bb8800" stroke="#008888" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="#bb8800" stroke="#008888" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="yellow" stroke="#bb8800" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="#bb8800" stroke="#008888" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="#bb8800" stroke="#008888" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="#bb8800" stroke="#008888" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="yellow" stroke="#bb8800" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="#bb8800" stroke="#008888" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="#bb8800" stroke="#008888" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="#bb8800" stroke="#008888" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
        <svg width="40" height="50">
          <polygon fill="yellow" stroke="#bb8800" stroke-width="2" points="05,30 15,10 25,30"/>
        </svg>
      </div>
      <a class="back" href="#" data-Page="#p12"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p14"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id="p14" class="slide right">
      <div class="text">
        <p class="p14_first">con-</p>
        <p class="p14_second">-trast</p>
        <p class="p14_def">juxtaposing different forms, lines or colors to create visual interest
          <p>
      </div>
      <a class="back" href="#" data-Page="#p13"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p15"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id=p15 class="slide right">
      <div class="text">
        <h1>gradation</p>
        <p class="p15">gradual change from dark to light values or from large to small shapes
          <p>
      </div>
      <a class="back" href="#" data-Page="#p14"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
      <a class="next" href="#" data-Page="#p16"><i class="fa fa-arrow-circle-right fa-2x"></i></a>
    </section>
    <section id=p16 class="slide right">
      <div class="text">
        <h2>rhythm & repetition</h2>
        <p>Repetition is repeating an element many times in a design. Rhythm is adding some variation and intervals between this repetition.</p>
      </div>
      <a class="back" href="#" data-Page="#p15"><i class="fa fa-arrow-circle-left fa-2x"></i></a>
    </section>
    </div>
</body>

</html>
            
          
!
            
              html,
body,
#map,
#container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* --------------------------
  media queries
--------------------------- */

@media (max-width: 450px) {
  section {
    overflow-y: scroll;
  }
}

@media (max-width: 510px) {
  #airplaneimage {
    width: 300px;
    height: 200px;
  }
}

@media (max-width: 348px) {
  #airplaneimage {
    width: 140px;
    height: 70px;
  }
}

@media (max-width: 738px) {
  #p3 {
    overflow-y: scroll;
  }
}

@media (max-width: 758px) {
  #p6 {
    overflow-y: scroll;
  }
}

@media (max-width: 490px) {
  #box {
    display: none;
  }
}

@media (max-width: 673px) {
  #p11 {
    overflow-x: scroll;
  }
}

@media (max-width: 721px) {
  #p3 .text {
    background-color: rgba(153, 136, 119, .6);
    padding: 10px;
  }
}

@media (max-width: 527px) {
  #newquote {
    display: none;
  }
}

section {
  color: #362c2a;
  background-color: #a1af95;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 30px;
  font-family: Gentium, Georgia, serif;
}

#cover .text {
  text-align: center;
  font-size: 2em;
  line-height: 1.1em;
}

h1 {
  font-size: 20vw;
  font-family: 'Open Sans', Arial, sans serif;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Open Sans', Arial, sans serif;
  text-transform: uppercase;
}

h2 {
  font-size: 5vw;
  color: #442233;
}

a {
  text-decoration: none;
  color: #778866;
}

a:hover {
  color: #362c2a;
}

#container {
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

.right {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.left {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.center {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.home {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.next {
  position: fixed;
  top: 20px;
  right: 70px;
  z-index: 100;
  padding: 0;
}

.back {
  position: fixed;
  top: 20px;
  right: 105px;
  z-index: 100;
  padding: 0;
}

#p8 .next,
#cover .next {
  right: 55px;
}

#p8 .back {
  right: 90px;
}

#cover {
  color: #EEEEDD;
  background: url(https://images.unsplash.com/photo-1457523826051-6f3e5aeb89b9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=03d292af688462af5ea190b4e2d7a73b) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#p8 {
  padding: 0;
}

#p1 {
  background-color: #442233;
  color: #ccccaa;
}

#p1 h2 {
  color: #a1af95;
}

.hide {
  display: none;
  visibility: hidden;
}

#label {
  padding-top: 5vh;
  padding-bottom: 0vh;
  padding-left: 20vw;
  font-style: italic;
}

#Audrey {
  font-family: cursive;
  color: #335555;
  line-height: 1em;
  font-size: 2vw;
}

#chart {
  padding-bottom: 2vh;
}

hr {
  padding: 1em;
  border: none;
  border-top: medium double;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

#box {
  padding: 10px;
  border: 5px solid #C9AF50;
  margin: 0;
  background-color: #404D60;
  color: #EEEEDD;
  opacity: .6;
  z-index: 100;
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 500px;
}

#newquote {
  padding: 10px;
  border: 5px solid #ccccaa;
  margin: 0;
    background-color: #a1af95;
  color: #442233;
  position: absolute;
  bottom: 60px;
  right: 75px;
  width: 250px;
}

#p3 {
  color: #EEEEDD;
  background: url(https://static.pexels.com/photos/7758/pexels-photo.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#p3 ul {
  padding: 0;
  background-color: #EEEEDD;
}

#p3 li {
  background-color: #EEEEDD;
  color: #404D60;
  padding: 3vw;
  margin: 0;
  width: 100%;
  overflow-y: auto;
}

#p3 h2 {
  color: #a1af95;
}

#p4 {
  overflow: scroll;
}

#Alice {
  font-family: Papyrus, Copperplate;
  background-color: #005555;
  opacity: .7;
  padding: 10px;
  color: #bbddcc;
  font-weight: bold;
  font-size: 4vh;
  line-height: 6vh;
}

#p6 h2 {
  color: #a1af95;
}

#p6 {
  background-color: #442233;
  color: #EEEEDD;
}

#side-by-side {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  position: relative;
  padding: 2vh;
}

.flexquote {
  padding: 10px;
  border: 5px solid #a1af95;
  margin: 10px;
  background-color: #aa9944;
  color: #EEEEDD;
  width: 100%;
  display: block;
}

#shadow:hover {
  -webkit-box-transform: 0px 0px 4px 2px #788913;
  text-shadow: 0 0 10px #B04E38, 0 0 5px #EEEEDD;
}

#animation:hover {
  -webkit-box-transform: 0px 0px 4px 2px #D50E0E;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
}

#p5 {
  background: url(https://upload.wikimedia.org/wikipedia/commons/a/a4/GreatWall6.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
}

#p5 .text {
  background: rgba(161, 175, 149, .7);
  padding: 3vw;
}

#sentenceone {
  color: #005555;
  font-style: italic;
}

#sentencetwo {
  font-weight: bold;
}

#sentencethree {
  font-family: cursive, "Brush Script MT", Papyrus;
}

.text {
  max-width: 100vw;
  font-size: 3vh;
  line-height: 5vh;
}

#p7 {
  overflow-y: scroll;
}

#p9 p {
  text-align: center;
}

#movement {
  text-align: center;
  font-size: 100px;
  font-weight: bold;
  padding-top: 50px;
}

@media (max-width: 650px) {
  #movement {
    font-size: 50px;
    padding-top: none;
  }
}

#balancetop {
  width: 100%;
  background-color: #ccccaa;
  padding: 10px;
}

#balanceright {
  position: absolute;
  text-align: left;
  width: 25vw;
  bottom: 0;
  color: #ccccaa;
  background-color: #005555;
  padding: 10px;
}

#balanceleft {
  position: absolute;
  text-align: left;
  width: 25vw;
  right: 30px;
  color: #ccccaa;
  background-color: #005555;
  padding: 10px;
}


/*Stack at 170px*/

#p10 {
  background-color: #442233;
}

@media (max-width:700px) {
  #balanceleft {
    position: relative;
    width: 100%;
    right: 0;
  }
}

@media (max-width:700px) {
  #balanceright {
    position: relative;
    width: 100%;
  }
}

#p11 {
  background-color: #181009;
  color: #ccccaa;
}

#p11 .text {
  text-align: center;
  font-size: 2.1vh;
  line-height: 2.8vh;
  font-family: Georgia, "Times New Roman";
}

#p11 h2 {
  text-align: center;
  font-size: 9em;
  color: #F1F8F4;
  line-height: 1vw;
  font-family: Impact, Charcoal, sans-serif;
}

#p12 p {
  padding-bottom: 60px;
}

#p13 {
  background-color: #442233;
  color: #ddddbb;
}

#p13 p {
  padding-bottom: 60px;
}

#p13 h2 {
  color: #a1af95;
  font-family: "Lucida Console", Verdana;
}

#p14 {
  background-color: #EEEEDD;
  padding: 0;
  max-width: 100%;
}

.p14_first, .p14_second {
  font-size: 10vh;
  font-family: 'Open Sans', Arial;
  padding: 0px;
  padding: 20px 60px 20px 40px;
  line-height: 10vh;
  width: 100%;
}

.p14_first {
  background-color: #EEEEDD;
  color: #442233;
  text-align: left;
  font-style: italic;
  font-family: Gentium, Georgia;
}

.p14_second {
  font-weight: bold;
  text-transform: uppercase;
  background-color: #442233;
  color: #EEEEDD;
  text-align: right;
}

.p14_def {
  color: gray;
  font-size: 4vh;
  text-transform: uppercase;
  text-align: center;
}

#p15 {
  background-image: linear-gradient(#442233, #EEEEDD);
  background: #442233;
  background: linear-gradient(#442233,#EEEEDD);
}

#p15 h1 {
  font-size: 10vh;
}

#p15 p {
  font-size: 5vh;
  color: #EEEEDD;
  line-height: 5vh;
}

#p16 {
  background-image: url(https://media.giphy.com/media/ItKGPFb5eW3lK/giphy.gif); /*gif by ted ed on giphy*/
}

#p16 div {
  position: absolute;
  bottom: 20px;
}

#p16 h2 {
  font-family: Impact;
  text-transform: lowercase; 
}

/* --------------------------
  multimedia + animation
--------------------------- */

 .videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
  padding-right: 1em;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


            
          
!
            
              $(document).ready(function(){
  
  
    $(".next").on( "click", function() {
    $(this).parent('section').removeClass('right left up down center').addClass('left');
      
      var $foo = $(this).attr("data-Page");
      $($foo).addClass('center'); 
      if ($('#cover').hasClass('center')) {$('.home').addClass('hide');} else {
        if ($('.home').hasClass('hide')) {$('.home').removeClass('hide');}
      }
      
    });
  
  $(".back").on( "click", function() {
    $(this).parent('section').removeClass('right left up down center').addClass('right');
      var $bar = $(this).attr("data-Page");
      $($bar).addClass('center'); 
     if ($('#cover').hasClass('center')) {$('.home').addClass('hide');} else {
        if ($('.home').hasClass('hide')) {$('.home').removeClass('hide');}
      }
    });
  
  
  $("#cover h1").on("click", function() {
    $("#cover h1").addClass("floating");
  });
  
    $(".home").on( "click", function() {
   $('#p1,#p2,#p3,#p4,#p5,#p6,#p7,#p8,#p9,#p10,#p11,#p12,#p13, #p14,#p15, #p16, #p17, #p18').removeClass('right left up down center');
      $('#p1').addClass('right'); 
      $('#p2').addClass('right');
      $('#p3').addClass('right');
      $('#p4').addClass('right');
      $('#p5').addClass('right');
      $('#p6').addClass('right');
      $('#p7').addClass('right');
      $('#p8').addClass('right');
      $('#p9').addClass('right');
      $('#p10').addClass('right');
      $('#p11').addClass('right');
      $('#p12').addClass('right');
      $('#p13').addClass('right');
      $('#p14').addClass('right');
      $('#p15').addClass('right');
      $('#p16').addClass('right');
      $('#p17').addClass('right');
      $('#p18').addClass('right');
      var $bar = $(this).attr("data-Page");
      $($bar).addClass('center'); 
      $('.home').addClass('hide');
    });
  
  
});

var locations = [
  ['<b>France</b>', 46.0000,2.0000, 1, 83.7, '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/1280px-Flag_of_France.svg.png" width=75%'],
  ['<b>United States</b>', 39.0921167,-94.8559125, 2, 74.8, '<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg" width=75%>'],
  ['<b>Spain</b>', 40.0000,-4.0000, 3, 65, '<img src="https://upload.wikimedia.org/wikipedia/commons/1/12/Flag_of_Spain_(state_version)_new_republic.svg" width=75%>'],
  ['<b>China</b>', 35.86166, 104.19539699999996, 4, 55.6, '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Sample_PRC_Flag.svg/3000px-Sample_PRC_Flag.svg.png" width=75%>'],
  ['<b>Italy</b>', 41.8719, 12.5674, 5, 48.6, '<img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Flag_of_Italy.svg" width=75%>'],
  ['<b>Turkey</b>', 38.963745, 35.243322000000035, 6, 39.8, '<img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Flag_of_Turkey.svg" width=75%>'],
  ['<b>Germany</b>', 51.165691, 10.451526000000058, 7, 33, '<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Flag_of_Germany_as_seen_in_Tagesschau.jpg" width=75%>'],
  ['<b>United Kingdom</b>', 52.3555, 1.1743, 8, 32.6, '<img src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg" width=75%>'],
  ['<b>Russia</b>', 61.5240, 105.3188, 9, 29.8, '<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Standard_of_the_President_of_the_Russian_Federation.svg" width=65% height=75%>'],
  ['<b>Mexico</b>', 19.427013, -99.127588, 10, 29.1, '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Flag_of_Mexico.svg/2000px-Flag_of_Mexico.svg.png" width=75%>']
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 2,
  center: new google.maps.LatLng(40.0000,-4.0000),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({
  });
var marker, i;

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

 google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0] + ' is ranked number '+ locations[i][3] + ' in the top 10 travel destinations of 2014, according to the U.N. World Tourism Organization Network, with ' + locations[i][4] + ' million visitors.&nbsp' + locations[i][5]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console