<body data-spy="scroll" data-target=".navbar" data-offset="0">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a href="#" class="navbar-brand"> <span> Ri/Code </span> </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#about"> About </a> </li>
<li> <a href="#portfolio"> Portfolio </a> </li>
<li> <a href="#contact"> Contact </a> </li>
</ul>
</div>
</nav>
<!--- About Section --->
<div class="jumbotron background-img bottom-margin top-margin" id="about">
<div class="row">
<div class="col-md-8">
<p style="color:green"> Stony Brook Graduate with a bio degree with a growing passion in tech and web development. Self Taught programmer. Aspiring Frontend Developer and full time kickboxer! </p>
</div>
<div class="col-md-4 col-sm-push-1">
<img class="small-profile-pic img-rounded" src="https://scontent-lga3-1.xx.fbcdn.net/v/t1.0-9/18403206_10155265292489061_5328291198802502897_n.jpg?oh=7f99b94d8d31d633ad61d8590693f156&oe=5A3A6A8F">
</div>
</div>
</div>
</div>
<!--- Second Section --->
<div class="jumbotron bottom-margin jumbo2" id="portfolio" >
<h1 style="text-align: center" >Portfolio</h1>
<div class="row">
<div class="col-md-3"> <a href="http://ladiesletsride.com/llr/" target="_blank"> <div class="thumbnail"> <img class="img-responsive" style="display:inline" src="https://scontent-iad3-1.xx.fbcdn.net/v/t31.0-8/22135766_10155716324769061_5528135781459276598_o.jpg?oh=634cb6a2f19519cfd186e3befcadf1bd&oe=5A7DCB99"> <p>Ladies Let's Ride: First website with a sense of aesthetics</p> </div> </a> </div>
<div class="col-md-3"> <a href="http://vitalspiritualclinic.com" target="_blank"> <div class="thumbnail"> <img class="img-responsive" style="width:100%" src="https://scontent-iad3-1.xx.fbcdn.net/v/t31.0-0/p552x414/22048073_10155716383829061_6297943114851068971_o.jpg?oh=816b3d36f71e80fe60f488ce6d034a74&oe=5A7C4E90"> <p> Vital Spiritual Clinic: A "spirtual consulting" site </p> </div> </a> </div>
<div class="col-md-3"> <a class="disabled" "#" target="_blank"> <div class="thumbnail"> <img class="img-responsive" style="width:100%" src="https://scontent-iad3-1.xx.fbcdn.net/v/t31.0-0/p552x414/22051255_10155716396569061_6160081530932953408_o.jpg?oh=91bd7a3845d11c02fcdca5428ecd8b48&oe=5A80249F"> <p> Ukraine Unveiled: Mockup (not used) for news souce for Ukrainian events </p> </div> </a> </div>
<div class="col-md-3"> <a href="http://shop.makingfastlooksexy.com" target="_blank"> <div class="thumbnail"> <img class="img-responsive" style="width:100%" src="https://scontent-lga3-1.xx.fbcdn.net/v/t31.0-8/22529062_10155748025289061_7374113381672109394_o.jpg?oh=09698c9338f4913bfc0b3b8f42aa7b3c&oe=5A85BBEF"> <p> Making Fast Look Sexy: Official online shop for Ladies Let's Ride </p> </div> </a> </div>
</div>
</div>
<!--- Third Section --->
<div class="jumbotron bottom-margin" id="contact">
<h1 style="text-align:center"> Contact Me </h1>
<form class="form-group">
<label for="name"> Name: </label>
<input class="form-control" id="name" type="text">
<label for="email"> Email: </label>
<input class="form-control" type="email" id="email">
<label for="digits"> Phone: </label>
<input class="form-control" type="text" id="digits">
</form>
<div class="form-group">
<label for="comment"> Message </label>
<textarea class="form-control" id="comment" rows="5"> </textarea>
<br>
<button class="btn btn-default" type="submit"> Submit </button>
</div>
<div class="row">
<div class="col-sm-6 col-sm-push-1"> <p style="font-size: 40px"> Let's Get Social <span class="glyphicon glyphicon-arrow-right"> </span> </p> </div>
<div class="col-sm-6 col-sm-push-1 btn-group" style="align:center"> <a href="https://www.linkedin.com/in/ricardo-jean-pierre-50a67614/" target="_blank"> <i class="fa fa-linkedin fa-5x"> </i> </a> <a href="https://www.facebook.com/ricardo.jeanpierre.7" target="_blank"> <i class="fa fa-facebook fa-5x"> </i> </a> <a href="https://www.instagram.com/rricky122890/?hl=en" target="_blank"> <i class="fa fa-instagram fa-5x"> </i> </a> <a hre="#"> <i class="fa fa-codepen fa-5x"> </i> </a>
</div>
</div>
</div>
</body>
<!--- Got a couple of bugs. 1 Wrap up the whole form group. 2. Add the submit button. .body {background-color: green; width: 100%; font-size: 30px;}
.bottom-margin {margin-bottom: }
.top-margin {margin-top: 20px}
.small-profile-pic {height: 200px; width: 200px; }
.background-img {background-image: url("https://wallpapercave.com/wp/vo32bd8.jpg");
background-size: 100%
}
.jumbo2 {background-color: pink}
External CSS
- https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
- https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
External JavaScript
This Pen doesn't use any external JavaScript resources.