"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ItsTheCoon/pen/ALjaOx?depth=everything&order=popularity&page=49&q=skype&show_forks=false" /> <!-- imports --> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Lato:100,300italic,400,700,900' rel='stylesheet' type='text/css'> <!-- title --> <title>The Portfolio of Tracer</title> <!-- meta --> <meta name="author" description="Tracer"> <meta name="description" content="The Portfolio of Tracer"> <meta name="tags" description="tracer, portfolio"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/g/jquery.owlcarousel@1.31(owl.carousel.css+owl.theme.css)'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css'> <style class="cp-pen-styles">body { padding-top: 50px; padding-bottom: 00px; background-color: #f6f6f6; height: 1000px; overflow-x: hidden; } button a { color: #ffffff !important; } .navbar { z-index: 9999; background-color: black; box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.7); } #masthead { width: 100vw; height: 100vh; background-image: url("https://s12.postimg.org/a62zfyf4t/tracer_overwatch_by_plank_69_d9xzms3_copy.png"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-color: rgb(28, 28, 28); color: white; } #nav-bar ul li:hover::after { width: 100%; } #nav-bar ul li::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; background: #ffa200; width: 0; transition: width 0.2s; } .max { max-width: 1300px; margin: auto; padding-bottom: 15px; } .tagline1 { font-family: 'lato', sans-serif; font-size: 2em; font-weight: 300; font-style: italic; color: #bbb; text-align: left; padding-top: 70px; text-shadow: 1px 1px black; } .tagline2 { font-family: 'lato', sans-serif; font-size: 7em; letter-spacing: 7px; line-height: 0.95em; font-weight: 100; color: white; text-align: left; text-shadow: 1px 1px black; padding-top: 10px; } .tagline3a, .tagline3b, .tagline3c { font-family: 'courier', sans-serif; font-size: 1.75em; font-style: italic; color: #666; text-align: left; line-height: 1em; text-shadow: 1px 1px black; } .tagline3a { padding-top: 50px; } .tagline3b { padding-left: 30px; } .tagline3b span:hover { color: #ffa200; } h1 { font-family: 'roboto', sans-serif; color: #333; font-size: 40px; text-align: left; font-weight: 300; text-align: center; } h1 span { border-bottom: 2px dotted #ffa200; font-weight: 400; } .vouch { background-color: rgba(255,162,0,.1); height: 50px; margin-top: -50px; } .vouch p { font-family: 'lato', sans-serif; font-size: 2em; font-weight: 300; color: rgba(255,255,255,.9); text-align: center; } .vouch p span { font-weight: 500; } #wio { margin-top: 100px; } .i { color: #ffa200; border-bottom: 0px; } .btn-warning { background-color: #ffa200; margin-top: 20px; border: solid 1px rgba(0,0,0,0) !important; box-shadow: 1px 1px 4px rgba(0,0,0,0.4); -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4); } .btn-warning:active { box-shadow: 1px 1px 4px rgba(0,0,0,0); } #about, #portfolio, #contact { margin-top: 70px; } #about h1, #portfolio h1 { text-align: left; border-left: 4px #ffa200 solid; padding-left: 10px; } #about p { font-family: Open Sans; font-size: 16px; } #lan p { font-size: 15px; font-family: Open Sans; font-weight: 300; } #lan p:hover { color: #ffa200; font-size: 15px; } /* Owl Carousel */ .latest-blog-posts { position: relative; margin-top: -40px; } .latest-blog-posts .container-fluid { padding: 60px; position: relative; max-width: 1230px; } .latest-blog-posts .thumbnail { margin: 0 15px; } .latest-blog-posts .customNavigation { -webkit-transform: translateY(-50%); transform: translateY(-50%); top: calc(50% - 37px); position: absolute; width: 100%; left: 0; } .latest-blog-posts .customNavigation > span { -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position: absolute; } .latest-blog-posts .pager-left { left: calc(0% + 15px); } .latest-blog-posts .pager-right { right: calc(0% + 15px); } .latest-blog-posts .next, .latest-blog-posts .prev { font-size: 28px; color: #ccc; } small { font-weight: 400 !important; } a { color: #ffa200; } a:hover { text-decoration: none; color: #d17300; } .middle-dot-divider:after { content: "\00B7"; padding: 0 6px; font-weight: bold } h4 { text-align: center; } h6 { font-style: italic; color: #ccc; text-align: center; } .footer { margin-top: 50px; margin-bottom: 50px; } .footer a { color: #aaa; } @media (max-width: 740px) { .tagline3a,.tagline3b,.tagline3c { font-size: 20px; } .tagline1 { font-size: 20px; margin-left: -50px !important; } .tagline2 { font-size: 50px; margin-left: -50px !important; } } @media (max-width: 1199px) { .vouch { display: none; } }</style></head><body> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav id="nav-bar" class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#wio">What I Offer</a></li> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </nav> <header id="masthead"> <div class="container-fluid"> <div class="row me animated fadeIn"> <div class="col-xs-offset-5 col-sm-offset-6 col-xs-7 col-sm-6"> <div class="tagline1">the portfolio of</div> <div class="tagline2 animated fadeIn">TRACER</div> <div class="animated fadeIn"> <div class="tagline3a">{</div> <div class="tagline3b"><span>designer :</span> <br> <span>coder :</span> <br> <span>cyclist :</span> <br> <span>astronomer :</span> <br> <span>entrepreneur :</span> <br> </div> <div class="tagline3c">}</div> </div> </div> </div> </div> </header> <section class="vouch"> <div class="container"> <p>Amazing service and very reliable. Tracer is one the best web developers I have ever met. -<span>Frosty</span></p> </div> </section> <section id="wio"> <div class="container"> <h1><span class="i"><i class="fa fa-money"></i></span><br>Websites starting at $15. Software installation starting at $5. <span>Your project starting at your budget.</span></h1> <center><button type="button" class="btn btn-warning btn-lg"> <a href="#portfolio">View my Portfolio</a></button> </center> </div> </section> <section id="about"> <div class="container"> <h1>About</h1> <div class="row"> <div class="col-md-9"> <p>Aspiration. As every year goes by, aspiration births new startups yearning to reach the international market. While word of mouth has been around a whole lot longer than the internet, it may take you a while to reach seven billion people. What's the solution to this issue? A great website, of course. But there's tons of people out there whole can make you a spiffy site, but what can I bring to the table? I'm driven, that's what. While I could just make you a $5 site and call it 'special', I make each of my client's experience hand-crafted from scratch. Your project is the door. My artisanship is the key. Let's roll up our sleeves together. <br><br>Your project deserves the best. Your project deserves Tracer Designs. And in your heart, you know it too. </p> </div> <div class="col-md-3" id="lan"> <p><b>Front-End Web Development Skills</b></p> <p><i class="fa fa-code" aria-hidden="true"></i> 9 Years of HTML4 </p> <p><i class="fa fa-html5" aria-hidden="true"></i> 2 Years of HTML5 </p> <p><i class="fa fa-css3" aria-hidden="true"></i> 9 Years of CSS3 </p> <p><i class="fa fa-code" aria-hidden="true"></i> 6 Years of CSS Frameworks </p> <p><i class="fa fa-code" aria-hidden="true"></i> 5 Years of JS </p> </div> </div> </div> </section> <section id="portfolio"> <div class="container"> <h1>Portfolio <small>Just a handful of snippets you may like.</small></h1> <div class="latest-blog-posts bg-white pt60 pb60"> <div class="container-fluid"> <div id="owl-demo-2" class="owl-carousel owl-theme"> <article class="thumbnail item"> <a class="blog-thumb-img" href="/htmlgo" title=""> <img src="https://s18.postimg.io/vmx5f8xjt/Screen_Shot_2016_09_16_at_7_49_31_PM.png" class="img-responsive" /> </a> <div class="caption"> <h4 itemprop="headline"> <a href="/htmlgo" rel="bookmark">HTMLGo Homepage</a> </h4> <p itemprop="text" class="flex-text text-muted"></p> </div> </article> <article class="thumbnail item"> <a class="blog-thumb-img" href="/fancy-portal" title=""> <img src="https://s18.postimg.io/v2i4ck4bd/Screen_Shot_2016_09_16_at_7_52_35_PM.png" class="img-responsive" /> </a> <div class="caption"> <h4 itemprop="headline"> <a href="/fancy-portal" rel="bookmark">Fancy Portal</a> </h4> <p itemprop="text" class="flex-text text-muted"> </p> </div> </article> <article class="thumbnail item"> <a class="blog-thumb-img" href="/chameleon" title=""> <img src="https://s18.postimg.io/txo276huh/Screen_Shot_2016_09_16_at_7_50_19_PM.png" class="img-responsive" /> </a> <div class="caption"> <h4 itemprop="headline"> <a href="/chameleon" rel="bookmark">Chameleon Homepage</a> </h4> <p itemprop="text" class="flex-text text-muted"></p> </div> </article> <article class="thumbnail item"> <a class="blog-thumb-img" href="/b-bs4-landing-page" title=""> <img src="https://s18.postimg.io/e0paagpg9/Screen_Shot_2016_09_16_at_7_50_40_PM.png" class="img-responsive" /> </a> <div class="caption"> <h4 itemprop="headline"> <a href="/b-bs4-landing-page" rel="bookmark">B + BS4 Landing Page</a> </h4> <p itemprop="text" class="flex-text text-muted"></p> </div> </article> <article class="thumbnail item"> <a class="blog-thumb-img" href="/5-ways-baby-boomers-changing-healthcare/" title=""> <img src="https://s18.postimg.io/q00shrv15/Screen_Shot_2016_09_16_at_7_49_55_PM.png" class="img-responsive" /> </a> <div class="caption"> <h4 itemprop="headline"> <a href="#" rel="bookmark">Tribute to the Last of Us</a> </h4> <p itemprop="text" class="flex-text text-muted"></p> </div> </article> </div> <!-- #owl-demo-2 --> <div class="customNavigation"> <span class="pager-left"><a class="btn btn-link prev"><span class="glyphicon glyphicon-chevron-left"></span></a> </span> <span class="pager-right"><a class="btn btn-link next"><span class="glyphicon glyphicon-chevron-right"></span></a> </span> </div> </div> <!-- .container --> </div> </div> </section> <section id="contact"> <div class="container"> <h1><span class="i"><i class="fa fa-share"></i></span><br>Contact</span></h1> <h4><span class="middle-dot-divider"><a href="skype:tttracer"><i class="fa fa-skype"></i></a></span> <span class="middle-dot-divider"><a href="https://twitter.com/ttttracer"><i class="fa fa-twitter"></i></a></span> <span class="middle-dot-divider"><a href="mailto:tracerdeveloper@gmail.com"><i class="fa fa-envelope-o"></i></a></span> <span><a href="http://www.mc-market.org/members/45400/"><i class="fa fa-bars"></i></a></span></h4> <div class="footer"> <hr> <h6>"I've never been so tempted to break my oath of following no one, to following you. Not actually doing it, just letting you know. I like you. I hope you stick around." -Justis R</h6> <h6>Copyright © Tracer Designs 2016. All rights reserved. All products or services sold are non-distributable.</h6> <h6>Code licensed under the <a href="/assets/LICENSE.txt">RECEX SHARED SOURCE LICENSE</a>.</h6></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script><script src='https://cdn.jsdelivr.net/g/jquery@2.1.4,jquery.migrate@1.4.1,bootstrap@3.3.7,jquery.matchheight@0.7.0,jquery.owlcarousel@1.31'></script> <script >jQuery(document).ready(function($) { var owl = $("#owl-demo-2"); owl.owlCarousel({ items : 3, itemsDesktop : [992,3], itemsDesktopSmall : [768,2], itemsTablet: [480,2], itemsMobile : [320,1] }); $(".next").click(function(){ owl.trigger('owl.next'); }); $(".prev").click(function(){ owl.trigger('owl.prev'); }); $('.latest-blog-posts .thumbnail.item').matchHeight(); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: