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

              
                <div id="TI101mainContainer">
  <div id="questions-container">
  <div class="sidebar-wrapper">
  <div id="questions-sidebar">
      <ul class="questions-list">
  <li class="question-title">Travel Headaches</li>
  <div id="current-question">
  <img src="https://test.insureyonder.com/wp-content/uploads/2017/01/ic_blueCheckboxSmall.png" alt="" class="check-icon"/>
  <span class="current-questionText">Cancel For Any Reason:<br>Do I Need It?
  </span>
    <div class="question-linebreak"></div>
</div>
  <li class="question"><a href="/cancellationcoverage/">Cancellation Coverage <br>Explained</a></li>
        <div class="question-linebreak"></div>
         <li class="question"><a href="/tripcost/">Trip Cost: What It Means and<br>What You Can Insure
         </a></li>
        <div class="question-linebreak"></div>
  <li class="question"><a href="/baggageloss/">What's Covered by <br>Baggage Loss</a></li>
        <div class="question-linebreak"></div>
  <li class="question"><a href="/dontdrink/">Don't Drink and Expect<br>To Be Covered</a></li>
                <div class="question-linebreak"></div>
  <li class="question"><a href="/terroristactcoverage/">Terrorist Act Coverage<br>Explained</a></li>
  <a href="/travelheadaches/"><span class="question-more">MAIN PAGE</span></a>
</ul>
  </div>
  </div>
  <div id="TI101pageContainer">
  <span class="TI101pageTitle">TRAVEL INSURANCE 101</span>
    <span class="TI101pageSubtitle">Travel Headaches | <span style="font-family: open sans, sans serif; color: #019cdb">Cancel For Any Reason: Do I Need It?</span> 
      <p></p>
 <span class="TI101pageText">Want to spend less time comparing and considering the variety of travel insurance types and more time researching the quickest route to the beach or the nearest coffee shop to your Airbnb? We can relate. You can save time just by picking up a comprehensive travel insurance policy. It’s that easy. Comprehensive travel insurance is the simplest type of plan to understand, and all you really need to know is this: “Comprehensive” can essentially be translated as “everything but the kitchen sink” in the travel insurance conversation.  
        <p></p>
       <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_peopleblue.png" alt="ic_peopleblue" width="80" height="80" />
<strong> WHO SHOULD BUY THIS COVERAGE?</strong>
    <p></p>
    While every policy has some nuance and there may specific exclusions (which we’ll discuss below), comprehensive insurance should be the first coverage to consider when your trip falls into one or more of these categories:
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30"/> You want to ensure that you have the most complete coverage possible.
   <p></p>
      <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30"/> There's a greater chance your trip could be cancelled or interrupted
   <p></p>
      <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30"/> Your trip is a large or uncommon financial investment for you
   <p></p>
      <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30"/> You've budgeted for insurance and don't care to put a lot of thought into what's covered
   <p></p>
      <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30"/> Business, Family and Empty Nester Types of Travelers
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_helpbriefcaseblue.png" alt="ic_helpbriefcaseblue" width="80" height="80" />
   <strong> WHAT'S COVERED</strong>
   <p></p>
   Coverage types and limits differ based on what type of comprehensive plan you purchase. Most comprehensive plans include coverage for:
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30"/> Emergency Medical & Dental Expenses
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30"/> Baggage Delay
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30" /> Medical Evacuation
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30" /> Trip Delay
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30" /> Trip Cancellation & Interruption
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30"/> Domestic and International Travel
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_circlecheckblue.png" alt="ic_circlecheckblue" width="30" height="30"/> Accidental Death & Dismemberment
   <p></p>
   <img class="bulletpointcheck" src="http://www.insureyonder.com/wp-content/uploads/2016/05/ic_tagblue.png" alt="ic_tagblue" width="80" height="80"/>
   <strong> WHAT'S NOT COVERED</strong>
   <p></p>
Note: all plans are a bit different, but the most common exclusion of comprehensive policies (often offered as an option to add to your policy) is “Cancel for Any Reason” coverage, which protects you in the event that you’ve already put down deposits or made non-refundable payments, but have to cancel because the trip just won’t work out (for any reason, get it?). With the right timing and documentation, your add-on “Cancel for Any Reason” coverage should entitle you to a percentage of refund for those costs - proving that the term “non-refundable” is meaningless with the right insurance. 
   <p></p>
   <strong>IN SUMMARY</strong>
   <p></p>
   But even without optional coverage, most plans will cover up to 100% of your total trip cost for covered, unexpected cancellations and interruptions. It pays (sometimes literally) to know what insurance can do for you, so if something goes wrong before or during your trip, you’re protected for reimbursement and can put some of that money toward your next life-changing trip. Now you know. Total peace of mind, coverage for the range of unexpected occurrences, and simplicity are the benefits of comprehensive travel insurance. It may not be the least expensive type of policy, but sometimes in life and in travel, you get what you pay for, friends.
   <div id="questionsBottomContainer">
  <div id="navbuttons-container">
  <a href="/cancellationcoverage/">
    <span class="question-back">Previous Question</span>
</a>
  <a href="/travelheadaches/">
    <span class="question-return">Return to Main Page</span>
</a>
  <a href="/tripcost/">
    <span class="question-forward">Next Question</span>
</a>
</div>
</div>
<div id="bottomcontactContainer">
  <div id="bottom-grayBar">
  <img src="https://test.insureyonder.com/wp-content/uploads/2017/01/ic_whiteMail.png" alt="" class="bottom-icon"/>
  <span class="bottom-grayBarText">Still Have Questions?<br><a href="mailto:hello@insureyonder.com">Click to Email Us</a></span>
    <div id="bottom-grayBar">
  <img src="https://test.insureyonder.com/wp-content/uploads/2017/01/ic_whitePhone.png" alt="" class="bottom-icon" style="padding-left: 20px"/>
  <span class="bottom-grayBarText">Give Us a Call<br>(952) 358-6440</span>
</div>
</div>
</div>
      </div>
</div>    
  </div>
              
            
!

CSS

              
                #TI101mainContainer {
    width: 100%;
  max-width: 1100px;
    margin-left: auto; 
    margin-right: auto;
    text-align: center;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

#questions-container {
  width: 100%;
  max-width: 1100px;
  text-align: center;
  display:table;
}
.sidebar-wrapper{
  display:table-cell;
  width: 275px;
}
#questions-sidebar {
  border: 1px solid #959595;
  border-radius: 7px;
  width:100%;
}
.questions-list {
  list-style-type: none;
  margin: 0px;
  padding: 0 0 8px 0px;
}
.question-title {
  width: 100%;
  padding-top: 14px;
  padding-bottom: 14px;
  color:white;
  text-decoration: none;
  text-align:center;
  font-weight:600;
  font-size:23px;
  font-family: 'Fira Sans';
    src: url('/wp-content/themes/ISC/assets/fonts/FiraSans/eot/FiraSans-ExtraBold.eot');
    src: local('Fira Sans ExtraBold'), url('/wp-content/themes/ISC/assets/fonts/FiraSans/eot/FiraSans-ExtraBold.eot') format('embedded-opentype'), url('/wp-content/themes/ISC/assets/fonts/FiraSans/woff/FiraSans-ExtraBold.woff') format('woff'), url('/wp-content/themes/ISC/assets/fonts/FiraSans/ttf/FiraSans-ExtraBold.ttf') format('truetype');
    font-style: normal;
  text-transform: uppercase;
  background: #959595;
  border-radius: 7px 7px 0px 0px;
  display: inline-block;
}
.question {
  font-family: "open sans","sans serif";
  font-size: 15px;
  padding-top: 1px;
  padding-bottom: 1px;
  text-align: left;
  margin-left: 28px;
}
.question a {
  text-decoration: none;
  color: black;
}
.question a:hover {
  color: #019cdb;
}
.question-linebreak {
  width: 85%;
  height: 1px;
  background: #dadada;
  margin-right: auto;
  margin-left: auto;
  margin-top: 12px;
  margin-bottom: 7px;
}

/**********Current Question**************/

#current-question {
  text-align: left;
  display: inline-block;
  padding-top: 16px;
  padding-bottom: 12px;
}
.current-questionText {
  font-family: "open sans","sans serif";
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
.check-icon {
  vertical-align: middle;
}
.question-more {
  width: 145px;
  height: 35px;
  background: #019cdb;
  text-align: center;
  display: inline-block;
  font-family: "open sans";
  color: white;
  font-weight: bold;
  padding-top: 10px;
  margin-top: 20px;
bottom: -30px;
  position: relative;
  margin:0 auto;
  left:0;
  right:0;
}
.question-more:hover {
  background: #959595;
}

/*********** Travel Insurance 101 Page Content *************/
#TI101pageContainer {
  display: table-cell;
  text-align: left; 
  padding-left:25px;
}
.TI101pageTitle {
  font-family: 'Fira Sans';
    src: url('/wp-content/themes/ISC/assets/fonts/FiraSans/eot/FiraSans-ExtraBold.eot');
    src: local('Fira Sans ExtraBold'), url('/wp-content/themes/ISC/assets/fonts/FiraSans/eot/FiraSans-ExtraBold.eot') format('embedded-opentype'), url('/wp-content/themes/ISC/assets/fonts/FiraSans/woff/FiraSans-ExtraBold.woff') format('woff'), url('/wp-content/themes/ISC/assets/fonts/FiraSans/ttf/FiraSans-ExtraBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-size: 42px;
    color: #000;
  text-transform: uppercase;
}
.TI101pageSubtitle {
  font-family: 'Fira Sans';
    src: url('/wp-content/themes/ISC/assets/fonts/FiraSans/eot/FiraSans-ExtraBold.eot');
    src: local('Fira Sans ExtraBold'), url('/wp-content/themes/ISC/assets/fonts/FiraSans/eot/FiraSans-ExtraBold.eot') format('embedded-opentype'), url('/wp-content/themes/ISC/assets/fonts/FiraSans/woff/FiraSans-ExtraBold.woff') format('woff'), url('/wp-content/themes/ISC/assets/fonts/FiraSans/ttf/FiraSans-ExtraBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-size: 28px;
    color: #000;
  display: block;
}
.TI101pageText {
  font-family: "open sans";
  font-size: 17px;
  color: #000;
  font-weight: lighter;
}
.TI101pageText li{
  line-height: 36px;
}
#questionsBottomContainer {
  width: 100%;
  text-align: center;
}
#navbuttons-container {
    width: 100%;
    margin-top: 50px;
    margin-left: auto; 
    margin-right: auto;
    text-align: center;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
  display: table;
}
#navbuttons-container a {
      vertical-align: top;
    display: inline-block;
    *display: inline;
	padding-right: 50px;
	padding-left: 50px;
  text-decoration: none;
}
.question-back {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-left: 2.2em;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  font-family: "open sans";
  font-weight: bold;
  text-align: left;
  font-size: 16px;
  color: black;
}
.question-back a {
  text-decoration: none;
}
.question-back a:hover {
  color: #019cdb;
}
.question-back:before {
  content: "\f137";
  position: absolute;
  left: 0em;
  top:-.15em;
  padding: 0 1px;
  font-family: FontAwesome;
  zoom: 2;
}
.question-back:hover:before, .question-back:focus:before, .question-back:active:before {
  color: #019cdb;
}

/* Icon Forward */
.question-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  padding-right: 2.2em;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  font-family: "open sans";
  font-weight: bold;
  text-align: right;
  font-size: 16px;
  color: black;
}
.question-forward a{
  color: black;
  text-decoration: none;
}
.question-forward a:hover {
  color: #019cdb;
}
.question-forward:before {
  content: "\f138";
  position: absolute;
  right: 0em;
  top: -.15em;
  padding: 0 1px;
  font-family: FontAwesome;
  zoom: 2;
}
.question-forward:hover:before, .question-forward:focus:before, .question-forward:active:before {
  color: #019cdb;
}
.question-return {
  font-family: "open sans";
  font-size: 16px;
  color: black;
  font-weight: bold;
}
.question-return a {
  text-decoration: none;
}
.question-return a:hover {
  color: #019cdb;
}
.helpfultext {
  font-family: "open sans";
  font-size: 16px;
}
#bottomcontactContainer {
  width: 100%;
  text-align: center;
  background: #959595;
  padding-top: 14px;
  padding-bottom: 14px;
  border-radius: 8px;
  display: block;
  margin-top: 30px;
}

#bottom-grayBar {
  text-align: left;
  display: inline-block;
  background: #959595;
}
.bottom-grayBarText {
  font-family: "open sans","sans serif";
  font-size: 22px;
  color: white;
  display: inline-block;
  vertical-align: middle;
  padding: 16px 10px 0px 10px; 
  margin: 0px 24px 0px 0px;
  line-height: 24px;
}
.bottom-grayBarText a {
  text-decoration: none;
  font-size: 18px;
  color: white;
}
.bottom-grayBarText a:hover {
  color: #019cdb;
}
.bottom-icon {
  vertical-align: middle;
  float: left;
  padding-left: 24px;
}
.bulletpointcheck {
  display: inline-block;
  vertical-align: middle;
  padding-right: 4px;
}
              
            
!

JS

              
                
              
            
!
999px

Console