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>

  <head>
    <div align="center" class="main-heading">
      <H1>A Season, A Reason, A Lifetime...
  </H1>
    </div>
  </head>
  <div align="center" id="main-body">
    <!--insert pic here-->
    <div class="img-border">
      <figure>
        <img src="https://static.pexels.com/photos/109919/pexels-photo-109919.jpeg"></img>
        <figcaption><i>We are constantly making and breaking connections. The following is a poem about relationships and living life without regret.</figcaption>
</figure>


  </div>
  <!--insert text of poem-->
  <div class="poem-text insert-space">
    <p id="main-body1" style="text-indent: 1em;">
      <i>Every relationship exists for a reason, a season, or a lifetime. You intersect paths with some people for a momentary experience, and that is the purpose of the meeting. You were not meant to be together for a longer time. Ken fell in love with Cindy,
      and several months later she got pregnant. The couple married and had a beautiful little boy who became the light of their lives. A few years later Ken and Cindy divorced and chose different paths. Yet they both love their son very much, and to
      this day over 20 years later, he is the best thing that ever happened to them. Ken and Cindy came together to have that child, but they did not have a purpose as life partners.
    </p>
    <p id="main-body2" style="text-indent: 1em;">
      <i>Some relationships exist for a season. You might have a friend, business colleague, or romantic partner for a number of years. Then you grow apart and the relationship changes form or dissolves. You may believe you made a mistake or something went wrong.
      But it did not. If the relationship lasted for seven years, that was the true lifespan of the relationship. If you tried to stop it before its appointed time, or you try to prolong it after it is complete, your efforts would not work. Its appointed
      time is perfect.
    </p>
    <p id="main-body3" style="text-indent: 1em;">
      <i>Some relationships last a lifetime. These might include family relationships, marriage partners, significant friendships, or career colleagues. Such relationships are a blessing, for they run deep and the loyalty and support you share is a true gift. Appreciate such relationships with all your heart. Such people are genuine soul partners.
    </p>
  </div>

  <div class="insert-space">
    <p>The original poem was written by Alan Cohen and posted in Creations Magazine. It can be found by clicking the following link:
      <a href="http://www.creationsmagazine.com/articles/C142/Cohen.html" target="_blank">Inspiring the Soul</a>.
    </p>
    <p> He has also written several books. Some titles include:
      <li>A Daily Dose of Sanity
      <li>Wisdom of the Heart
      <li>A Deep Breath of Life
    </p>
    <p>
      More information about him can be found on the following  
      <a href="http://www.hayhouse.com/authorbio/alan-cohen" target="_blank">biography </a>page.
    </p>
  </div>
  </body>
              
            
!

CSS

              
                img {
  max-width: 100%;
  height: auto;
}
body {
  border-style: outset;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  /* Background pattern from Subtle Patterns */
  background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/wall4.png");
  background-size: auto;
}
.img-border {
  border-style: outset;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
    /* Background pattern from Subtle Patterns */
  background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/textured_paper.png");
}
.poem-text {
  text-align:justify;
  text-justify: auto;
  font-family: Times New Roman, cursive;
  font-size: 20px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 30px;
  color:#000000;
  opacity:1;
}

.main-heading {
  font-family: Brush Script MT, cursive;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 20px;
}
p {
  margin-top: 10px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.insert-space {
  margin-top: 30px;
  margin-bottom: 30px;
}

              
            
!

JS

              
                
              
            
!
999px

Console