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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <link href="https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<body>
  <div class="container-fluid" id="main">
    <div class="coluna col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
      <div class="row">
        <!----------------------- title and subtitle --------------------------->
        <div class="col-xs-12">
          <h1 id="title">J.K.Rowling, the Word Witch</h1>
          <h2 id="subtitle"><i>Resiliense and creativite, the paths from rags to riches</i></h2>
        </div>
        <!------------------------- img and caption ------------------------------>
        <div id="img-div" class="col-xs-12 col-md-12 col-lg-12">
          <img id="image" class="img-responsive" src="https://cdn-images-1.medium.com/max/1600/0*UY0vCLnHjlLFwJLU.jpg" alt="J.K.Rowling" class="img-responsive" />
          <div id="img-caption"class="caption text-center">From living on state benefits to multi-millionaire status within five years</div>
        </div>
      </div>
      <!------------------------------ details of her life --------------------->
      <div id="tribute-info" class="row">
        <!-------------------- first column --------------------------->
        <div class="col-xs-12 col-md-4">
          <h3 class="headlines">Life struggles:</h3>
          <ul>
            <li>1990 - Rowling's mother, Anne, died after ten years suffering from multiple sclerosis.</li>
            <li>1993 - Rowling divorce from her husband four months after having a baby.</li>
            <li>She was diagnosed with clinical depression and comtemplated suicide.</li>
            <li>Signed up for welfare benefits, describing this moment in her life years later as being "as poor as it is possible to be in modern Britain, without being homeless".</li>
            <li>1994 - Her ex-husband arrived in Scotland looking for Rowling and his daughter, she obtained an order of restraint against her ex-husband. Some biographers suggested that Rowling suffered domestic abuse during her marriage, although the extent
              is unknown.</li>
            <li><q>Harry Potter and the Philosopher's Stone</q> was submittedto twelve publishing houses, all of which rejected the manuscript. </li>
            <li>1996 - She was advised to get a day job, after Bloomsbury agreed to publish the book, since she had little chance of making money in children's book.</li>
          </ul>
        </div>
        <!------------------- second column ----------------------------->
        <div class="col-xs-12 col-md-4">
          <h3 class="headlines">Life turnover:</h3>
          <ul>
            <li>1997 - The first 1,000 copies of <q>Philosopher's Stone</q> were published. Nowadays, they valued between 16,0000 to 25,000 libras.</li>
            <li>In less than a year the book won 3 awars: Nestlé Smarties Book Prize, British Book Awards - Children's Book of the Year, and Children's Book Award.</li>
            <li>1998 - An auction was held in the United States for the rights to publish the novel, Scholastic Inc. won for the US$105,000. </li>
            <li> 2004 - <i>Forbes</i> named Rowling as the first person to become a U.S.-dollar billionaire by writing books. The second-richest female entertainer.</li>
            <li>2013 - She was assessed as the 13th most powerful woman in the United Kingdom.</li>
            <li>2017 - <i>Forbes</i> named her as the most highly paid author int the world, with earnings of 72 million libras a year.</li>
          </ul>
        </div>
        <!--------------------- third column ------------------------->
        <div class="col-xs-12 col-md-4">
          <h3 class="headlines">Impact in the world:</h3>
          <ul>
            <li>The <q>Harry Potter</q> book serie gained recognition for sparking an interest in reading among the young at a time when children were thought to be abandoning books for computers and television.</li>
            <li>The series has been translated, in whole or in part, into 65 languages.</li>
            <li>One of Rowling's demands in her contract with Coca-Cola, the victor in the race to tie in their products to the film series, donate US$18 million to the American charity Reading is Fundamental, as well as several community charity programs.</li>
            <li>She donated more than US$160 million in charity.</li>
          </ul>
        </div>
      </div>
      <!-------------------------------- video -------------------------->
      <div class="row">
        <div class="video col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1">
          <iframe width="560" height="415" src="https://www.youtube.com/embed/wHGqp8lz36c" frameborder="0" allowfullscreen></iframe>
        </div>
        <!------------------------------- quote -------------------------->
        <div class="quote col-xs-12">
          <blockquote>
            <p>"Why do I talk about the benefits of failure? Simply because failure meant a stripping away of the inessential. I stopped pretending to myself that I was anything other than what I was, and began to direct all my energy into finishing the
              only work that mattered to me."
            </p>
            <footer><cite>J.K.Rowling</cite></footer>
          </blockquote>
        </div>
        <!-------------------------------- links -------------------------->
        <div class="information col-xs-12"> To know more about J.K.Rowling life and achievements, check her profile on <a id="tribute-link" href="https://en.wikipedia.org/wiki/J._K._Rowling" target="_blank">wikipedia</a> or in her personal <a href="https://www.jkrowling.com/" target="blank">website</a>.
        </div>
      </div>
    </div>
  </div>
  <!-------------------------- footer ----------------------->
 <div class="col-xs-6 col-xs-offset-3">
  <footer class="footer text-center">
    <hr>
    <sup> Created by <img id="laurel" src="http://www.clker.com/cliparts/Z/p/S/T/k/v/laurel-crown-md.png" width="30" alt="Laurel Crown" title="Nike's Laurel Wreath"/> 
      <strong>Maria Theresa Henriques
        </sup>
    <strong>
              
      </footer>
       </div>
    </div>
</body>
              
            
!

CSS

              
                body {
  background-image: url(http://www.publicdomainpictures.net/pictures/70000/velka/stars-in-the-night-sky.jpg);
  height: 100%;
  width:100%;
}

#main{
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

.coluna {
  background-color: black;
  margin: auto-flow;
  padding: 2%;
}

#title { 
  color: rgb(230,194,0);
  font-family: 'IM Fell DW Pica', serif;
  text-align: center;
}

#subtitle { 
  color: rgb(230,194,0);
  font-family: 'IM Fell DW Pica', serif;
  text-align: center;
}

#image{
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

.caption {
  color:rgb(193,193,193);
  border-color: rgb(193,193,193);
  
}

#tribute-info {
  padding: 2%;
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

.headlines { 
  color: rgb(230,194,0);
  font-family: 'IM Fell Great Primer', serif;
  text-align: center;
}

ul {
  list-style-type: circle;
}

li{
  color: rgb(193,193,193);
  text-align: auto;
}

.video {
  position: center;
  text-align: center;
}

.video iframe {
  width:100%;
  position: center auto;
  padding: 5%;
}

.quote blockquote {
  color: rgb(193,193,193);
  text-align: center;
  border: none;
  padding: 8%;
}

.information {
  color: rgb(193,193,193);
  text-align: center;
  border: none;
  padding: 0% 5% 5% 5%;
}

footer{
  color: white;
  padding:15px;
}

#laurel {
  padding: 0 4px 6px 4px;
}
              
            
!

JS

              
                
              
            
!
999px

Console