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

              
                <html>
  <title>Kyle Dempster Tribute</title>
 <head>
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
   
  </head>
<body>
<header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1 class="brownbg" id="mainheader">Kyle Dempster</h1>
      <h3 class="brownbg1">Alpinist/Adventurer/Bikepacker/Barista</h3>
   </div>
  </div>
 </div>
 </header>
    
<div class="container">
  <div class="row">
   <div class="col-md-6 p1">
     <p>“Real adventure is not polished. It's not the result of some marketing budget, there's no hashtag for it. It burns brightest on the maps edges but it exists in all of us. It exists at the intersection of imagination and the ridiculous. You have to have faith, it will find you there. And when it does, remember, there's just one question. In this life, when the road comes to the end, will you keep pedalling?” -Kyle Dempster </p>
    </div>
 <div class="col-md-6">
   <img       src="https://www.outsideonline.com/sites/default/files/styles/img_400x225/public/migrated-images/KyleDempter2_06302011.jpg?itok=c-PfrIJO"class="img-responsive" width="100%" alt="Kyle Dempster Smiling brightly with a red rain-jacket on."
/>
    </div>
  </div>
 </div><!-----END OF ROW 1------>

  <div class="container">
  <div class="row">
   <div class="col-md-12">   
<hr class="red-flourish"> <!--LINE-->
    </div>
  </div>
 </div>

 <div class="container"><!-----START OF 2RD ROW------>
  <div class="row">
   <div class="col-md-6"><!--ROW2 COL1-->
    <img src="https://www.adventure-journal.com/wp-content/uploads/2013/03/dirtbag-gourmet-kyle-dempster-660.jpg"class="img-responsive" alt="Kyle Dempster shown working as a barista." width="100%"/>
    </div>
    
    <div class="col-md-6"><!--ROW2 COL2-->
      <table width="100%">
        <th colspan="2">Stats</th>
          <tr>
            <td style="border-bottom:1pt dotted                         black;">Born:</td>
            <td>1983</td>
          </tr>
          <tr>
            <td style="border-bottom:1pt dotted                         black;">Died:</td>
            <td>Sept. 2016-exact date unknown
          <tr>
            <td style="border-bottom:1pt dotted                         black;">Profession:</td>
            <td>Barista/Climber</td>
          </tr>
          <tr>
            <td style="border-bottom:1pt dotted                         black">Nickname:</td>
            <td>The Alpine Silverback</td>
          </tr>
          <tr>
            <td style="border-bottom:1pt dotted                         black;">Awards:</td>
           <td>(2)Piolet d'Or</td>
          </tr>
         <tr>
           <td style="border-bottom:1pt dotted                           black;">Sponsors:</td>
           <td>Outdoor Research/La Sportiva/Black                       Diamond</td>
          </tr>
          <tr>
            <td style="border-bottom:1pt dotted                         black;">Favorite Band:</td>
            <td>Black Sabbath</td>
          </tr>
          <tr>
           <td style="border-bottom:1pt dotted black">                  Vices:</td>
           <td>Red wine, Chocolate, Coffee</td>
          </tr>
          <tr>
           <td style="border-bottom:1pt dotted black">                  Fears:</td>
           <td>Sedentary life and Routine</td>
          </tr>
          <tr>
            <td style="border-bottom:1pt dotted                        black">Claim to Fame:</td>
            <td>1st place Teenage Mutant Ninja Coloring                 Contest</td>
          </tr>
          <tr>
            <td style="border-bottom:1pt dotted                         black;">Favorite Place in the World:</td>
            <td>Pakistani Karakoram</td>
          </tr>
      </table>
    </div>
   </div>
  </div><!-----END OF 2RD ROW------>
    
 <div class="container">
  <div class="row">
   <div class="col-md-12">   
<hr class="red-flourish">
    </div>
  </div>
 </div>
    
 <div class="container">
  <div class="row">
   <div class="col-md-6">
     <p>Kyle Dempster was an american Alpinist from Salt lake City Utah, best known for his first accents of remote peaks and wild adventures off the beatan path.  His travels brought him all over the world and inspired many to follow a road less travelled.   Kyle recieved the coveted <a href="https://en.wikipedia.org/wiki/Piolet_d%27Or"> Piolet d'Or</a> in 2010 for his first ascent of the north face of Xuelian West in the Chinese Tien Shan and again in 2013 for braving the 23,901-foot Baintha Brakk (aka Ogre I). </p>
<p>Kyle was last seen on september 22nd on the north face of the Ogre II in Pakistan with fellow climber Scott Addamson. News broke around the the 28th of september that the climbers were past due on there 5 day planned summit attempt and a search effort was quickly initiated.  The climbing comunity rose to action and impressively raised over $198,000 in less than six days by starting a <a href="https://www.gofundme.com/2mjv38k">Gofundme campaign</a>. Nearly 5,000 people contributed to the crowd sourced fund in order to aid with the search. On September 3, 2016 the families of Kyle and Scott made the difficult decision to end the extensive search that was being conducted by the Pakistani Military.</p>
     <p>Kyle is often described as one in a million by his friends and fans who had the pleasure of knowing him. For a man who had achieved so much to be so incredibly humble and have a truely unique positive outlook towards everything and everyone is remarkable.   Kyle not only quietly inspired those who knew him, but anyone who caught a brief glimpse into his life.  He will be remembered for his love of adventure and the people he shared it with as well as his unique outlook on life. Most of all, he will be remembered as an example of how to truely live a life worth living.</p>
     <p><i>“There are two choices in life, the known and the unknown. Maybe it was the fact I'd come this far. Or maybe it was the vodka and fermented mare's milk, or maybe it was something else. But I chose the unknown path.”</i> -Kyle Dempster</p>
    </div>
  <div class="col-md-6">   
   <img class="image1" src="https://www.outsideonline.com/sites/default/files/migrated-images/KyleDempter5_06302011.jpg"class="img-responsive" width="100%" alt="Kyle Dempster climbing an ice wall."/>
    </div>
   </div>
  </div><!-----END OF 3RD ROW------>
 
 
 <div class="container">
  <div class="row">
   <div class="col-md-12">   
    <hr class="red-flourish">
   </div>
  </div>
 </div>
    
 <!--------FOOTER-------->
  <div class="button">
   <button><a href="https://kyledempster.blogspot.com/" target="_blank">Kyles Blog</a></button>
  <button><a href="https://vimeo.com/69045994" target="_blank">Watch the "Road from Karakol"</a></button>
   </div>


<div class="container">
  <div class="row">
   <div class="col-md-12">   
    <hr class="red-flourish">
   </div>
  </div>
 </div>

</body
</html>

              
            
!

CSS

              
                body{
  background-color:#999; 
  font-family:Indie Flower;
}

.brownbg{
  background-color: #7D5147; 
}
.brownbg1{
  background-color: #896861; 
}
#mainheader{
  font-family:Indie Flower; 
  text-align:center; 
  font-size: 4em; 
  font-weight: 900; 
  padding: 5px; 
}
h3{
  text-align:center; 
  padding: 5px 5px;
  font-family:Indie Flower;
  border-bottom:1px solid #E4DEDD; 
}  
.p1{
  /*height: 100%;
  width: 50%;
  line-height: 100%;
  text-align: center; */
 
 
  top: 50%;
  transform: translateY(50%);
  display:inline;
   
}


p{ 
  font-size:1.3em;
  padding-right: 15px; 
  padding-left: 15px; 
}
.red-flourish {
   color: #f00;
   height: 8px;
  /*margin-right: 5%; 
   margin-left: 3%; */
   /*padding: 0px 15px 0px 15px; */
}

.button{
  text-align: center;  
}

table{
  font-size: 1.3em;
  border-spacing: 20px; 
  
}
th{
  border-bottom:1px solid black;
  text-align: center; 
  font-size:1.5em;
}
td:nth-child(2){
  text-align: right;
  padding:0 
  
}
td:first-child{
  font-weight: bold;
}
td{ 
  padding-right: 50px;
  border-bottom: 1px dotted black;
}

              
            
!

JS

              
                
              
            
!
999px

Console