<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/rvicerqveira/pen/pyZOyP?limit=all&page=47&q=nav+tabs" />
<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://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway'>
<style class="cp-pen-styles">html, body {
height: 100%;
font-family: 'Raleway', sans-serif;
}
.links {
list-style-type: none;
display: flex;
}
.links li {
width: 4rem;
}
.links li a{
color: #444;
}
.links li a:hover{
color: #000;
}
.fabuttons a {
-webkit-transition: .5s;
transition: .5s;
color: rgba(0, 0, 0, .3);
border: 1px solid rgba(0, 0, 0, .1);
background: none;
}
.fabuttons a:hover {
color: rgba(0, 0, 0, 1);
border: 1px solid rgba(0, 0, 0, .7);
}
#home {
background-color: #fff;
}
#home #homecontent {
color: rgb(0, 0, 0);
position: absolute;
top: 45%;
left: 50%;
width: 50vw;
height: auto;
margin: 0 auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#about h1, #about h2, #about p, #contact h1{
color: rgb(255, 255, 255);
}
#portfolio {
position: relative;
width: 100%;
padding-top: 7vh;
padding-bottom: 7vh;
}
#about, #contact {
position: relative;
width: 100%;
padding-top: 7vh;
padding-bottom: 7vh;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
#about {
background-image: -webkit-linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 1)), url(http://c5.staticflickr.com/2/1688/26523826412_3446871672_c.jpg);
background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 1)), url(http://c5.staticflickr.com/2/1688/26523826412_3446871672_c.jpg);
}
#contact {
background-image: -webkit-linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 1)), url(http://c1.staticflickr.com/2/1573/26015325504_059539c322_c.jpg);
background-image: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 1)), url(http://c1.staticflickr.com/2/1573/26015325504_059539c322_c.jpg);
}
#about, #contact {
padding-top: 7vh;
padding-right: 6vw;
padding-bottom: 7vh;
padding-left: 6vw;
}
#contact {
padding-bottom: 0px !important;
}
.hr-code-icon{
border: 0;
text-align: center;
}
.hr-code-icon:after{
font-family:'FontAwesome';
content: '\f121';
display: inline-block;
position: relative;
top: -.7em;
font-size: 2em;
color: #000;
text-shadow: 2px 2px 8px #ccc;
}
#home h1, #home p{
color: #000;
text-shadow: 2px 2px 8px #ccc;
}
.hr-softenlineb {
height: 1px;
border: 0;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));
}
.hr-softenlinew {
height: 1px;
border: 0;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}
footer#footer {
color:#9d9d9d;
}
footer#footer a {
color:#ccc;
}
footer#footer a:hover {
color:#fff;
}
.scrollToTop{
cursor: pointer;
position:fixed;
bottom:30px;
right:45px;
display:none;
z-index: 1000;
/*text-shadow: 2px 2px 8px #000;*/
}
.scrollToTop a{
color: #444;
border: 1px solid #444;
}
.scrollToTop a:hover {
color: #222;
border: 1px solid #222;
}
/*
.scrollToTop:hover{
color: #000;
text-shadow: 2px 2px 8px #fff;
}
*/
body {
position: relative;
}
#home{
width: 100%;
min-height: 100%;
padding-top: 1px;
height: 100%;
}
#home .box {
position: relative;
top: calc(50% - 84px);
}
#portfolio {
background: #fff;
}
.page-header h1{
text-align:center;
}
.form-control{
border: 1px solid #444;
background-color: transparent;
color: #ccc;
}
form .btn{
background-color: #222;
color: #888;
border: 1px solid #444;
}
form .btn:hover{
background-color: #555;
color: #000;
border: 1px solid #444;
}</style></head><body>
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="fabuttons scrollToTop">
<a class="btn btn-link btn-long-arrow-up" href="https://codepen.io" target="_blank" role="button"><i class="fa fa-long-arrow-up" title="Codepen"></i></a>
</div>
<div id="home" class="container-fluid a">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-desktop fa-lg"></i> RVICERQVEIRA</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right nav-tabs scrollable" role="tablist">
<li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>
<li><a href="#portfolio" aria-controls="portfolio" role="tab" data-toggle="tab">Portfolio</a></li>
<li><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
</div>
<div id="homecontent">
<div class="text-center">
<div class="row">
<div class="col-xs-12">
<h1>RUI CERQUEIRA</h1>
</div>
</div>
<hr class="hr-code-icon">
<p>FULL STACK DEVELOPER</p>
<hr class="hr-softenlineb">
<div class="col-xs-12 fabuttons">
<a class="btn btn-link btn-codepen" href="https://codepen.io" target="_blank" role="button"><i class="fa fa-codepen fa-2x" title="Codepen"></i></a>
<a class="btn btn-link btn-github" href="https://github.com" target="_blank" role="button"><i class="fa fa-github fa-2x" title="GitHub"></i></a>
<a class="btn btn-link btn-stack-overflow" href="https://stackoverflow.com/" target="_blank" role="button"><i class="fa fa-stack-overflow fa-2x" title="StackOverflow"></i></a>
<a class="btn btn-link btn-freecodecamp" href="https://freecodecamp.com/" target="_blank" role="button"><i class="fa fa-fire fa-2x" title="FreeCodeCamp"></i></a>
<a class="btn btn-link btn-linkedin" href="https://www.linkedin.com/" target="_blank" role="button"><i class="fa fa-linkedin fa-2x" title="LinkedIn"></i></a>
</div>
</div>
</div>
</div>
<div id="about" class="container-fluid a">
<div class="container">
<div class="">
<div class="page-header">
<h1>About</h1>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-sm-4"><img class="img-circle img-responsive" src="https://placehold.it/300"></div>
<div class="col-sm-8">
<h2>Rui Cerqueira</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</dvi>
</div>
</div>
</div>
</div>
<div id="portfolio" class="container-fluid a">
<div class="container">
<div class="">
<div class="page-header">
<h1>Portfolio</h1>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-md-3 col-sm-6 post">
<a href="#" class="thumbnail"><img src="https://placehold.it/500x400" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 post">
<a href="#" class="thumbnail"><img src="https://placehold.it/500x400" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 post">
<a href="#" class="thumbnail"><img src="https://placehold.it/500x400" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 post">
<a href="#" class="thumbnail"><img src="https://placehold.it/500x400" alt="" /></a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-md-3 col-sm-6 post">
<a href="#" class="thumbnail"><img src="https://placehold.it/500x400" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 post">
<a href="#" class="thumbnail"><img src="https://placehold.it/500x400" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 post">
<a href="#" class="thumbnail"><img src="https://placehold.it/500x400" alt="" /></a>
</div>
<div class="col-md-3 col-sm-6 post">
<a href="#" class="thumbnail"><img src="https://placehold.it/500x400" alt="" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact" class="container-fluid a">
<div class="container">
<div class="">
<div class="page-header">
<h1>Contact</h1>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-md-6 col-md-offset-3">
<form class="form-horizontal" role="form" method="post" action="#" onsubmit="return false">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message" placeholder="Message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="human" name="human" placeholder="2 + 3 = ?">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<button type="submit" class="btn btn-defaul"><i class="fa fa-paper-plane"></i> Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<hr class="hr-softenlinew" />
<footer id="footer">
<div class="row text-center">
<div class="col-xs-12">
<p>Powered by <a href="https://www.freecodecamp.com/rvicerqveira" target="_blank">Rui Cerqueira</a></p>
</div>
</div>
</footer>
</div>
</div>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script >$(document).ready(function() {
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
$(function() {$('.scrollable').on('click', 'a', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top},1500,'easeInOutExpo');
event.preventDefault();
});
});
//# sourceURL=pen.js
</script>
</body></html>
