<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>
