<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <header role="banner" class="topHeaderPic banner"> <div class="container"> <div class="row"> <div class=" col-md-7 col-xs-12"> <div class="row"> <div class="col-xs-10 col-xs-offset-1 col-sm-7 col-sm-offset-0"> <h1 class="webDev">WordPress Developer</h1> </div> </div> <div class="row"> <div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-2"> <img src="http://mikeclark.mossycity.com/img/meheadBlueBack.png" style="margin-top:20px;"> </div> <div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-0"> <hgroup> <h2>Mike Clark</h2> <ul> <li style="margin-bottom:10px;">Seattle, Wa</li> <li style="margin-bottom:10px;"><a href="https://www.linkedin.com/in/michael-clark-webdeveloper" target="_blank">Linkedin <i class="fa fa-linkedin-square" aria-hidden="true"></i> </a></li> <li><a href="#a-contact">contact me via form </a></li> </ul> </hgroup> </div> </div> </div> </div> </div> </header> <div id="topHeader" class="" style="z-index:1000"> <nav class="navbar navbar-default" style="width:100%; height:44px"> <div class="container-fluid" style="width:100%"> <div id="navbar-brand"> <a class="navbar-brand" href="#"></a> </div> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse " id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li class=""> <a class="page-scroll" href="#a-whoAmI">Who Am I</a> </li> <li class=""> <a class="page-scroll" href="#a-objective">Objective</a> </li> <li class=""> <a class="page-scroll" href="#a-competencies">Competencies</a> </li> <li> <a class="page-scroll" href="#a-work">Work</a> </li> <li> <a class="page-scroll" href="#a-contact">Contact</a> </li> </ul> </div> </div> </nav> </div> <a class="anchor" id="a-whoAmI"></a> <section> <div class="container"> <div class="row"> <div class="col-lg-12 whoIam"> <div class="sectionTitle">Who I am</div> </div> </div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-lg-12 whoIam"> <div class="sectionTitle">Who I am</div> <p>Hi, thanks for visiting my website.</p> <p>I live near Seattle and can be reached by phone; web conferencing or email. I have 10+ years in web development industry, mostly as a software contractor for The Boeing Company and Microsoft but now I'm a freelancer.</p> </div> </div> </div> </section> <a class="anchor" id="a-objective"></a> <section> <div class="container"> <div class="row"> <div class="col-lg-12 myAboutMe"> <div class="sectionTitle">Objective</div> <p>I'm actively looking for freelance jobs that align well with my passions. I'm passionated about the css framework <em>Bootstrap</em>, php framework <em>Laravel</em>, <em>WordPress</em>, <em>Mysql</em> and building responsive websites that function well on both desktop and mobile devices.</p> </div> </div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-lg-12 whoIam"> <div class="sectionTitle">Who I am</div> <p>Hi, thanks for visiting my website.</p> <p>I live near Seattle and can be reached by phone; web conferencing or email. I have 10+ years in web development industry, mostly as a software contractor for The Boeing Company and Microsoft but now I'm a freelancer.</p> </div> </div> </div> </section> <a class="anchor" id="a-objective"></a> <section> <div class="container"> <div class="row"> <div class="col-lg-12 myAboutMe"> <div class="sectionTitle">Objective</div> <p>I'm actively looking for freelance jobs that align well with my passions. I'm passionated about the css framework <em>Bootstrap</em>, php framework <em>Laravel</em>, <em>WordPress</em>, <em>Mysql</em> and building responsive websites that function well on both desktop and mobile devices.</p> </div> </div> </div> </section>

body { position: relative; } .webDev { color: #cecece; font-style: italic; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); margin: 10px 0px 0px 0px; } .h1, h1 { font-size: 3.5rem; } header hgroup ol, header hgroup ul { list-style: none; padding: 0; margin: 0 0 20px; } @media only screen and (min-width: 768px) { .topHeaderPic { background: url(http://mikeclark.mossycity.com/img/wordPressBike.png) no-repeat top center fixed; height: 230px; width: auto; margin: 0; padding: 0; color: black; background-size: 350px auto; background-position-x: 80%; } } /* * Styles For top menu and logo ********************************************************************* */ /* Remove the navbar's default margin-bottom and rounded borders */ .navbar { margin-bottom: 0; border-radius: 0; } #navbar-brand a { padding: 5px; } #navbar-brand img { width: 200px; } #myNavbar a:hover { background-color: gray; } @media only screen and (min-width: 768px) { #navbar-brand img { width: 300px; margin-top: -10px; } } #myNavbar .navbar-right li a { color: white; font-weight: 600; } #myNavbar .navbar-right li.active a { color: white; background-color: #0f434c; } .navbar-default { background-color: #33a4c9; border: none; /*border-color: #e7e7e7; */ } #topHeader.affix { position: fixed; width: 100%; z-index: 1000; top: 0px; } .stuck { position: fixed; top: 0; z-index: 100; } .collapse { background-color: #33a4c9; z-index: 100; position: relative; } .collaspse a { background-color: #33a4c9; } /* End of menu ***************/ .sectionTitle { padding: 0 0 0px 70px; margin: 50px 0; position: relative; } .sectionTitle:before { background-color: #33a4c9; border-radius: 25px; content: ' '; display: block; height: 50px; left: 0; position: absolute; top: 0px; width: 50px; } .sectionTitle-font, .sectionTitle { font-size: 2rem; } section { font-size: 1.8rem; }

// Closes the Responsive Menu on Menu Item Click $('.navbar-collapse ul li a').click(function() { $('.navbar-toggle:visible').click(); }); var $ = jQuery; $.getScript("https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.3/jquery.sticky.min.js", function(){ $('#topHeader').sticky({topSpacing:0}); }); $('body').scrollspy({ target: '#myNavbar' })