123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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 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.

            
              <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">
    <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>
          <h3 id="subtitle"><i>Resiliense and creativite, the paths from rags to riches</i></h3>
        </div>
        <!------------------------- img and caption ------------------------------>
        <div class="col-xs-12 col-md-12 col-lg-12">
          <img id="quoteimg" class="img-responsive" src="https://cdn-images-1.medium.com/max/1600/0*UY0vCLnHjlLFwJLU.jpg" alt="J.K.Rowling" class="img-responsive" />
          <div 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="paragraphs" class="row">
        <!-------------------- first column --------------------------->
        <div class="col-xs-12 col-md-4">
          <h4 class="headlines">Life struggles:</h4>
          <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">
          <h4 class="headlines">Life turnover:</h4>
          <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">
          <h4 class="headlines">Impact in the world:</h4>
          <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 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 
      <strong> Maria Theresa Henriques
        </sup>
    <strong>
        <img 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"/>       
      </footer>
       </div>
    </div>
</body>
            
          
!
            
              body {
  background-image: url(http://www.publicdomainpictures.net/pictures/70000/velka/stars-in-the-night-sky.jpg);
  height: 100%;
  width:100%;
}

.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;
}

#quoteimg{
  position: relative;
  display: center;
  text-align: center;
  padding: 2% 2% 1% 2%;
}

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

#paragraphs {
  padding: 2%;
}

.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;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console