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.

            
                <div id="cover">        
  <div class="jumbotron jumbotron-fluid">
    <div class="btn-group rightHeader">
      <a href="https://github.com/contact"><button class="btn btn-outline-primary">contact.</button></a>
    </div>
    <div class="btn-group leftHeader">        
    <a href="https://github.com/session"><button class="btn btn-outline-primary">return</button></a>
    <a href="https://github.com/join?source=login"><button class="btn btn-outline-primary">join</button></a>    
    </div>  
    <div class="container">
      <h1 class="title display-3 text-center" style="font-weight:100;">dev<strong style="font-weight:600;">Crunch</strong>.io</h1>
      <p class="lead string-1 text-center">Changing the way the rest of the world looks at code. Join the revolution today by implimenting our lightweight SDK in your products.</p>
      
    </div>
  </div>
</div>

<div class="content">
  <h1>welcome.</h1>
  <p>Lorem ipsum dolor sit amet, donec at ut ut blandit, odio massa morbi vel cillum urna, nam ullamcorper diam, dolor vivamus. Sed cursus viverra, fames neque nisl suscipit, et dictum pellentesque, mauris a volutpat rhoncus in id. Pede velit sit quis sed, dui elit, diam faucibus eros. Suspendisse donec et in, feugiat a eget dolor mi, placerat et leo feugiat, elit amet et vestibulum nullam molestie porta. Pede ipsum dignissim magna, eget fringilla lorem, vel vitae donec ornare, scelerisque rutrum quis vehicula turpis. Ac lacus pellentesque sit, quis interdum erat neque, aliquet saepe penatibus nulla at elit, rhoncus eget facilisis tortor vehicula ut. Orci senectus curabitur nunc, ac neque non parturient in diam. Dui imperdiet fusce duis malesuada maecenas. 
  </p><p>
Montes in aliquam sapien donec, velit massa feugiat ac sed. Lorem viverra justo, risus luctus potenti, et vel vel mi sit nulla ultricies. Non ligula vitae mauris felis, accumsan molestie facilisi ipsum natoque, justo pretium curabitur nunc curabitur libero sit, lectus dolor turpis eget. Dapibus malesuada arcu odio quis ipsum in, et sit in eleifend dis.
  </p><p>
Dolor facilisis. Parturient luctus in vehicula felis at, fermentum gravida ornare ante, lorem volutpat nec sed vitae tortor, placerat sit congue faucibus tincidunt, pellentesque nunc sed cras eros eget. Odio placerat nulla viverra fames molestie, et pede nam hac parturient nascetur risus, sociis felis lacinia et accumsan donec habitant. Vestibulum enim, ac leo urna lacinia ut nibh. Senectus sit, nulla fermentum imperdiet lacus nulla tincidunt non, elementum in, et eget ut at vivamus, quisque adipiscing sed iaculis nunc fusce pretium. Per lectus libero neque nunc porta, odio nibh ligula leo vulputate a aliquam, libero nulla pellentesque vitae tempor, mollis molestie felis diam congue. Nisl vestibulum ridiculus fusce eget non. At integer rhoncus aliquam autem, in nam est eget, sed luctus, luctus luctus dolor potenti, aliquet sit aliquet condimentum eget tincidunt pellentesque. Parturient turpis, enim dictumst semper in vitae. Magna sapien eu nunc, penatibus id eros lectus.
  </p><p>
Quis ac mauris, pellentesque hendrerit amet fusce viverra luctus massa, sem elementum at eros lorem eu, at sapien elementum, nec velit sociis fames vitae nam. Ac viverra justo vestibulum sollicitudin sed lacus. Donec do volutpat rhoncus leo id et. Mi aptent ut duis sit nulla morbi, quisque et leo, mollitia convallis in ut nam dui, in iaculis metus amet nisl, nec orci faucibus mauris. Sodales eu mollit orci justo metus, adipiscing amet vestibulum luctus, et a lectus, sed integer. Vivamus nihil felis cursus. Ac aliquam nibh diam condimentum, ac eros vitae parturient neque accumsan purus, orci auctor tellus, nunc ullamcorper tellus vivamus hymenaeos amet. Sem sagittis ipsum phasellus amet eros, lectus dapibus, dolor officiis metus non molestie, sed dui quis gravida etiam wisi tincidunt, lobortis est volutpat ut rhoncus donec quisque. Sit pulvinar, ut viverra at, erat wisi semper consectetuer sollicitudin vulputate. Ante massa quam odio wisi, justo vitae pellentesque erat natoque eget. Tortor mattis arcu, sem libero nec sociis blandit. Donec neque sollicitudin, auctor sed nunc, rhoncus nascetur habitant, amet praesent id.
  </p><p>
Nulla malesuada suspendisse elementum, scelerisque massa consectetuer, sed fringilla, nec wisi orci morbi lacus. Luctus a senectus id ac purus tristique, dolor felis, libero phasellus posuere integer vestibulum vestibulum. Labore arcu quis taciti, nunc interdum, eget elit leo mattis provident sed sed, imperdiet risus fames, accumsan velit ullamcorper vel iaculis. Faucibus quae odio justo risus eu nonummy, purus nisl sed tellus turpis torquent adipiscing, a massa ultrices praesent. Praesent cras auctor velit lacus scelerisque volutpat, fermentum et scelerisque blandit sint lorem donec, quis donec lectus proin cras sollicitudin semper, mattis penatibus dictum. Fusce tellus, lobortis neque amet posuere, ac vestibulum sed auctor urna massa. Ut ut wisi, in wisi ligula in pretium felis.</p>

            
          
!
            
              /* JUMBOTRON STYLE HERE */
.jumbotron{
  background: 
linear-gradient(
  rgba(0, 0, 250, 0.25), 
  rgba(125, 250, 250, 0.45)
),
url(https://source.unsplash.com/1600x1050/?computer+screen);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:100vh;
}

/* BUTTON STYLE HERE */
.btn{
    margin-right:10px;
}
.btn-outline-primary{
  border-color: white;
  color:white;
  background-color:transparent;
  margin-top:30px;
  font-weight:100;
}
.btn-outline-primary:hover{
  border-color: transparent;
  color:black;
  background-color:white;
}
.btn-outline-primary:active{
  border-color: transparent;
  color:black;
  background-color:white;
  padding:9px 20px 9px 20px;
}

/* BUTTON HEADER RIGHT */
.rightHeader{
  position: absolute;
  top: -15px;
  right: 8px;
}
/* BUTTON HEADER LEFT */
.leftHeader{
  position: absolute;
  top: -15px;
  left: 20px;
}

.title{
  margin-top:10vh;
}
.text_margin{
    width:70vw;
    margin: 0 auto;
}
.string-1{
  padding-top:30px;
  width:600px;
  margin:0 auto;
  font-weight:100;
  margin-top:-35px;
}


.content{
  margin:10%;
}
br{
  margin:20px;
}
            
          
!
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