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

              
                <html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://fonts.googleapis.com/css?family=Fondamento|La+Belle+Aurore|Palanquin" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>


<body>  
  <div class="container">
    <!--  BIO -->
    <div class="row" id="bio">
      <div class="col-sm-6">
        <img class="bio-pic" src="http://gibrankgibran.org/esp/ArchivoFotos/all/32682.jpg" alt="Old Picture of Kahlil Gibran sit and holding a book" />
      </div>
      <div class="col-sm-6 align-self-center">
        <div class="row">
          <div class="col">
            <h1 class="bio-name text-top">Kahlil Gibran</h1>
            <h2 class="bio-occupation"> Poet &middot; Painter &middot; Philosopher</h2>
          </div>
        </div>
        <div class="row text-top">
          <div class="col">
            <h3 class="fa fa-heartbeat" aria-hidden="true"> January 6, 1883 
                </br>Besharri, Lebanon</h3>
          </div>
          <div class="col">
            <h3 class="fa fa-heart-o" aria-hidden="true"> April 10, 1931
                </br>NY City, USA.</h3>
          </div>
        </div>
        <div class="row text-top">
          <div class="col">
            <h3 class="fa fa-flag" aria-hidden="true"> Syrian Nationalism</h3>
          </div>
          <div class="col">
            <h3 class="fa fa-plus" aria-hidden="true"> Multifaith</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-10 text-top">
            <blockquote class="copytext" cite "http://www.bbc.com/news/magazine-17997163">"The Beatles, John F Kennedy and Indira Gandhi are among those who have been influenced by its words" <a href="http://www.bbc.com/news/magazine-17997163" target="_blank">-BBC News</a></blockquote>
          </div>
        </div>
      </div>
    </div>

    <!--  QUOTE -->
    <div class="row justify-content-center text-top" id="quote">
      <div class="col-10">
        <blockquote class="any">You give but little when you give of your possessions.
It is when you give of yourself that you truly give.
          <br><span class="cited">&mdash; On giving, The Prophet.</span>
          <br><a href="https://twitter.com/share" class="twitter-share-button" data-text="&mdash; &quot;You give but little when you give of your possessions.
It is when you give of yourself that you truly give&quot;" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran, OnGiving" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
      </div>
    </div>

    <!--  LIFE -->
    <div class="row text-top" id="life">
      <div class="col">
        <h2 class="subtitle">The road to fame...</h2>
        <blockquote class="copytext text-top" cite="http://gibrankgibran.org/eng/gibran-kahlil-gibran/notas-biograficas/">Born to Kahlil Saad Gibran and Kamileh Rahme, Gibran Kahlil Gibran was raised, along with his sisters Marianna and Sultana and his half-brother Boutros, in the bosom of a Lebanese Maronite Christian family. </br><strong>Around 1891,</strong> Kahlil
          Gibran’s father was arrested on charges of improperly administering the funds he collected. Following his release, and in the wake of economic crises befalling the family, Kamileh decided to emigrate with her children to America. </br><strong>In 1895</strong>          the family arrived in New York before continuing on to Boston. There, Kamileh and her children supported themselves with a small grocery store. Gibran’s teacher, Florence Pierce, placed the young man under the tutelage of the sybarite and photographer
          Fred Holland Day, who would become a dear friend and one of the greatest influences on the life of the future artist. Day introduced Gibran into Boston intellectual and bohemian circles. It was also owing to Day that Gibran became acquainted
          with the art of William Blake (1957-1827) and Eugène Carrière (1849-1906), who would later have an impact on his symbolist works. </br><strong>Around 1898,</strong> Gibran returned to Lebanon and studied under Youssef Haddad, his most important
          teacher. He returned to Boston on the death of Sultana, which was followed by the illnesses and subsequent deaths of Boutros and Kamileh. </br> Through the mediation of Fred Holland Day, Gibran exhibited his first paintings in 1904, at the Harcourt
          Studios in Boston, where he met Mary Haskell, who would become his great friend, patroness, and companion for the rest of his life. The following year he published, in Arabic, his first book: <em>Music</em>. <br><a href="http://gibrankgibran.org/eng/gibran-kahlil-gibran/notas-biograficas/"
            target="_blank">Discover how <em>The Prophet<em><small>(1923)</small> was created, in the full article...</a></blockquote>

      </div>
    </div>

    <!--  QUOTE -->
    <div class="row justify-content-center text-top" id="quote">
      <div class="col-10">
        <blockquote class="any">Your children are not your children. They are the sons and daughters of Life's longing for itself. They came through you but not from you and though they are with you yet they belong not to you. <br><span class="cited">&mdash; On children, The Prophet.</span>
        <br><a href="https://twitter.com/share" class="twitter-share-button" data-text="&mdash; &quot;Your children are not your children. They are the sons and daughters of Life's longing for itself. They came through you but not from you and though they are with you yet they belong not to you&quot;" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran, OnChildren" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
      </div>
    </div>

    <!--  BOOKS -->
    <div class="row text-top" id="book">
      <div class="col">
        <h2 class="subtitle">Bestseller Books...</h2>
        <div class="card-deck">
          <div class="card">
            <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/41DcGMGX2SL._SX330_BO1,204,203,200_.jpg" alt="Card image cap">
            <div class="card-block">
              <p class="card-text">In Broken Wings <small>(1912)</small>, Kahlil Gibran uncovers the glory and pain of young love. This loosely autobiographical story is in the tradition of Romeo and Juliet, but with Gibran's characteristic lush Oriental settings and images.
                <br>A young Kahlil is introduced to Faris Karama, a wealthy and good-hearted merchant of Beirut, and his daughter, Salma. Kahlil and Salma are deeply attracted to on another and continue to meet regularly, with the blessings of Faris Karama.
                But a powerful priest, Father Ghalib, in order to gain access to the Karama fortune, demands that his son be allowed to marry Salma.</p>
            </div>
            <div class="card-footer">
              <a href="http://newthoughtlibrary.com/gibranKhalil/brokenWings/" target="_blank"><i class="fa fa-book text-muted" aria-hidden="true"> Read</i></a>
              <a href="https://www.amazon.com/dp/188399103X/ref=cm_sw_r_cp_dp_T1_qwmpzbNZTQMWH" target="_blank"><i class="fa fa-amazon text-muted" aria-hidden="true"> Buy</i></a>
            </div>
          </div>
          <div class="card">
            <img class="card-img-top" src="https://1year100books.files.wordpress.com/2011/08/the-madman1.jpg" alt="Card image cap">
            <div class="card-block">
              <p class="card-text">The Madman <small>(1918)</small>, is thought-provoking and inspiring, the book is a collection of memorable, life-affirming parables and poems, many of them casting an ironic light on the beliefs, aspirations, and vanities of humankind —
                and many reminiscent of the work of Tagore and Nietzsche, both of whom were strong influences on Gibran. <br>Among the 35 poems and parables in this volume are "How I Became a Madman," "The Two Hermits," "The Wise Dog," "The Good God and
                the Evil God," "Night and the Madman," "The Three Ants," "When My Sorrow Was Born," "And When My Joy Was Born," and many more.
            </div>
            <div class="card-footer">
              <a href="http://newthoughtlibrary.com/gibranKhalil/madmanParables/" target="_blank"><i class="fa fa-book text-muted" aria-hidden="true"> Read</i></a>
              <a href="https://www.amazon.com/dp/0486419118/ref=cm_sw_r_cp_dp_T1_TTmpzbQM89HJR" target="_blank"><i class="fa fa-amazon text-muted" aria-hidden="true"> Buy</i></a>
            </div>
          </div>
          <div class="card">
            <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/41pvwwHajfL._SX331_BO1,204,203,200_.jpg" alt="Card image cap">
            <div class="card-block">
              <p class="card-text">The Prophet <small>(1923)</small>, is one of the most beloved classics of our time. <br>Is a collection of poetic essays that are philosophical, spiritual, and, above all, inspirational. Gibran’s musings are divided into twenty-eight chapters
                covering such sprawling topics as love, marriage, children, giving, eating and drinking, work, joy and sorrow, housing, clothes, buying and selling, crime and punishment, laws, freedom, reason and passion, pain, self-knowledge, teaching,
                friendship, talking, time, good and evil, prayer, pleasure, beauty, religion, and death.
            </div>
            <div class="card-footer">
              <a href="http://newthoughtlibrary.com/gibranKhalil/theProphet/" target="_blank"><i class="fa fa-book text-muted" aria-hidden="true"> Read</i></a>
              <a href="https://www.amazon.com/dp/0394404289/ref=cm_sw_r_cp_dp_T1_HZmpzbTZTJ2G9" target="_blank"><i class="fa fa-amazon text-muted" aria-hidden="true"> Buy</i></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--  QUOTE -->
    <div class="row justify-content-center text-top" id="quote">
      <div class="col-10">
        <blockquote class="any">When you part from your friend, you grieve not; For that which you love most in him may be clearer in his absence, as the mountain to the climber is clearer from the plain. <br><span class="cited">&mdash; On friendship, The Prophet.</span>
       <br><a href="https://twitter.com/share" class="twitter-share-button" data-text="&mdash; &quot;When you part from your friend, you grieve not; For that which you love most in him may be clearer in his absence, as the mountain to the climber is clearer from the plain.&quot;" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran, OnFriendship" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
      </div>
    </div>

    <!--  PAINT -->
    <div class="row text-top" id="paint">
      <div class="col">
        <h2 class="subtitle">Recognized paints...</h2>
        <div id="carouselExampleIndicators" class="carousel slide text-top" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="3" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32690.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32785.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32621.jpg" alt="Third slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32794.jpg" alt="Fourth slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32781.jpg" alt="Fifth slide">
            </div>
            <div class="carousel-item">
              <img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32801.jpg" alt="Sixth slide">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>

    <!--  QUOTE -->
    <div class="row justify-content-center text-top" id="quote">
      <div class="col-10">
        <blockquote class="any">For what is evil but good tortured by its own hunger and thirst?<br><span class="cited">&mdash; On good and evil, The Prophet.</span>
        <br><a href="https://twitter.com/share" class="twitter-share-button" data-text="&mdash; &quot;or what is evil but good tortured by its own hunger and thirst?&quot;" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran, OnGoodAndEvil" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
      </div>
    </div>

    <!--  LEGACY -->
    <div class="row text-top" id="legacy">
      <div class="col">
        <h2 class="subtitle">Still inspiring...</h2>
        <p class="copytext text-top">The Prophet, by celebrated Lebanese author Kahlil Gibran, is among the most popular volumes of poetry ever written, selling over 100 million copies in forty languages since its publication in 1923. Gibran's timeless verses have been given enchanting
          new form in this painterly cinematic adventure about freedom and the power of human expression. </p>
        <!-- 16:9 aspect ratio -->
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/y9SzAFcFhYY" frameborder="0" allowfullscreen></iframe>
        </div>
        <blockquote class="copytext text-top" cite="https://www.rottentomatoes.com/m/the_prophet_2014/">This breathtaking animated feature, produced and spearheaded by Salma Hayek, was an official selection at Cannes and made its North American premiere at Toronto International Film Festival. Written and directed by Roger Allers (The Lion King),
          the film intersperses Gibran's elegant poetry within stunning animated sequences by filmmakers Tomm Moore (The Secret of Kells, Song of the Sea), Nina Paley (Sita Sings the Blues), Bill Plympton (Guide Dog), and a host of award-winning animators
          from around the world. <a href="https://www.rottentomatoes.com/m/the_prophet_2014/" target="_blank"><i class="fa fa-comments-o" aria-hidden="true"> Read Critics</i></a></blockquote>                
      </div>
    </div>

    <!--  QUOTE -->
    <div class="row justify-content-center text-top" id="quote">
      <div class="col-10">
        <blockquote class="any">Work is love made visible.           
          <br><span class="cited">&mdash; On work, The Prophet.</span>
          <br><a href="https://twitter.com/share" class="twitter-share-button" data-text="&mdash; &quot;Work is love made visible&quot;" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
      </div>
    </div>

<!--CONTAINERS' END-->
  </div>  

<!--  FOOTER -->
  <footer class="footer">
    <div class="container-fluid">
      <span>
        <i class="fa fa-code" aria-hidden="true"></i> with <i class="fa fa-coffee" aria-hidden="true"></i> and <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://github.com/jantonioavalos" target="_blank"><i class="fa fa-github" aria-hidden="true"></i>/jantonioavalos</a>
      </span>
    </div>
  </footer>
  
  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

</body>
</html>
              
            
!

CSS

              
                html {
  height: 100%;
}

body {
  background: url("http://gibrankgibran.org/esp/ArchivoFotos/all/32690.jpg")
    no-repeat
    center
    fixed;
  background-size: cover;
  background-color: #EEE5E2; //light brown
  padding-top: 2em;
}

.subtitle {
  font-family: 'Fondamento', cursive;
  font-size: 3em;
  margin-bottom: 0;
  padding-top:10px;
}

.container {
  color: #5A3628;
  background-color: rgba(250, 250, 250, 0.6); // White Glass
  //background-color: #5A3628; // Brown
}

.bio-pic {
  max-width: 100%;
  height: auto;
  display: block;
}

.bio-name {
  font-family: 'Fondamento', cursive;
  font-size: 5em;
  margin-bottom: 0;
}

.bio-occupation {
  font-family: 'Palanquin', sans-serif;
  font-size: 2em;
  margin-top: 0;
}

.text-top {
  margin-top: 1.5em;
}

.bio-data {
  font-family: 'Palanquin', sans-serif;
  font-size: 1em;
}

#quote {
  font-family: 'La Belle Aurore', cursive;
  padding: 4em 0;
  font-size: 2.5em;
  line-height:1.2em;
  background-color: #EEE5E2; //light brown
}

#quote span {
  font-family: 'Palanquin', sans-serif;
  font-size: 0.4em;
}

.copytext {
  font-size: 1.2em;
}

.card-deck > .card {
  margin:20px auto;
}

.card-block {  
  padding-top:5px;
  font-family: 'Palanquin', sans-serif;
  font-size: 1em;
  font-style:normal;
}

.card-footer {
  text-align:right;  
}

.card-footer .text-muted {
  margin-left: 15px;
}

.card-deck > .card > img {
    margin: 0 auto;
    padding: 10px 0;
    max-width: 100%;
    max-height:400px;    
}

.carousel-inner > .carousel-item > img {
    margin: auto;
    max-width: 100%;
    max-height:600px;    
}

.footer {
  display: block;
  width:100%; 
  background-color:#383838; 
  height:60px;
  color: lightgray;
  //text-shadow: -1px -1px 7px #666666;
  text-align:center;
}

.footer span {
  line-height:60px;
}

footer a {
  color: lightgray;
}

//.copytext br{} //space between paragraphs
              
            
!

JS

              
                
              
            
!
999px

Console