Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Personal Portfolio
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-text">Jessica Ciarelli</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutpage">about</a></li>
<li><a href="#portfolio">portfolio</a></li>
<li><a href="#contactpage">contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- end container -->
<a name="aboutpage"></a>
<div class="container-fluid">
<div id="aboutme">
<body background="https://c1.staticflickr.com/9/8512/28739587180_8f0c044821_o.png">
<div class="row-fluid">
<div class="panel-group col-sm-8"><p>Welcome to my Portfolio! I am self taught in HTML, CSS, and Javascript and aspire towards becoming a Front-End Web Developer in the DC area. I have a background working in Ecommerce within the fashion industry and learned Design while at Drexel University. Both of those combined opportunities made me realize my true passion lies within the world of programming and web design.
<br><br>In my free time I love to travel, try new foods, and play The Sims!</p>
</div>
<div class="panel-group col-sm-4"><img src="https://c6.staticflickr.com/9/8138/29025967725_2629a7bf57_o.jpg" alt="Me" style="width:240px; height:300px;">
</div>
</div>
</div>
</div>
<a name="portfoliopage"></a>
<div id ="portfolio">
<div class="container-fluid">
<div class="row">
<div class=" title col-sm-12">My Portfolio</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="img-container">
<a href="http://codepen.io/jessmc/full/jqogaY/"><img src="https://c1.staticflickr.com/9/8483/29568856410_833a77a0f0_o.gif"></a>
</div>
<h3>Tribute Page</h3>
<h4>A <a href="http://www.freecodecamp.com">freeCodeCamp</a> project featuring Tama the Train Station Master! <br>Made with: HTML5, CSS, Bootstrap</h4>
</div>
<div class="col-xs-6 col-md-4">
<div class="img-container">
<a href="http://www.jessicaciarel.li/mdeyedocs.com"><img src="https://c2.staticflickr.com/6/5826/29748559922_b2cf72da4f_o.gif"></a>
</div>
<h3>MD Eye Docs</h3>
<h4>A business page made for a local Ophthalmology Practice<br>
Made with: HTML5, CSS</h4>
</div>
<div class="col-xs-6 col-md-4">
<div class="img-container">
<a href="http://codepen.io/jessmc/full/VKPQBz/"><img src="https://c2.staticflickr.com/6/5469/29826826016_4b423a6bfa_o.gif"></a>
</div>
<h3>Random Quote Generator</h3>
<h4>A <a href="http://www.freecodecamp.com">freeCodeCamp</a> project, featuring quotes from the Harry Potter books<br>
Made with: HTML5, CSS, Bootstrap, jQuery</h4>
</div>
<div class="col-xs-6 col-md-4">
<div class="img-container">
<a href="http://codepen.io/jessmc/full/amJzWR/"><img src="https://c1.staticflickr.com/9/8192/29907253181_221e4b44cb_o.gif"></a>
</div>
<h3>Local Weather App</h3>
<h4>A <a href="http://www.freecodecamp.com">freeCodeCamp</a> project, showing your local weather using the <a href="http://openweathermap.org">Open Weather Map</a>.<br>
Made with: jQuery, JSON, API, HTML5, CSS, Bootstrap</h4>
</div>
<div class="col-xs-6 col-md-4">
<div class="img-container">
<a href="http://codepen.io/jessmc/full/gwxGqw/"><img src="https://c3.staticflickr.com/6/5491/30021802922_5f507f9bf2_q.jpg"></a>
</div>
<h3>Wikipedia Viewer</h3>
<h4>A <a href="http://www.freecodecamp.com">freeCodeCamp</a> project that lets you search <a href="http://en.wikipedia.com">Wikipedia</a> pages. <br>
Made with: jQuery, JSON, API, HTML5, CSS, Bootstrap</h4>
</div>
<div class="col-xs-6 col-md-4">
<div class="img-container">
<img src="https://c1.staticflickr.com/9/8397/29749083342_18a686f828_o.gif">
</div>
<h3>Stay Tuned!</h3>
<h4>As I complete more projects with freeCodeCamp, this space will fill up.<br>
Check back soon!</h4>
</div>
</div>
</div>
<div id="contact">
<div class="container-fluid">
<div class="row-fluid">
<div class=" title col-sm-12">Contact Me</div>
<div id="icons">
<div class="col-sm-12" style="padding-bottom: 50px">
<a href="http://codepen.io/jessmc/"><i class="fa fa-codepen fa-4x fa-border icon"></i></a>
<a href="https://github.com/jessmc"><i class="fa fa-github-alt fa-4x fa-border icon"></i></a>
<a href="mailto:jess.mc@yahoo.com"><i class="fa fa-paper-plane-o fa-4x fa-border icon"></i></a>
</div>
</div>
</div>
</div>
<a name="contactpage"></a>
<div class="container-fluid text-center" id="created">
<h2><i class="fa fa-copyright"></i> Created by Jessica Ciarelli for <a href="http://www.freecodecamp.com">freeCodeCamp</a></h2>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
body {
margin: 0
}
/* Nav Bar */
.navbar {
background-color: #0EB29A;
border-style: none;
}
.navbar-header .navbar-text {
color: #FFF;
font-family: 'Lobster Two', cursive;
font-size: 28px;
text-decoration: none;
padding: 10px;
}
.navbar-toggle {
background-color: #FFF;
margin-top: 2em;
}
.collapse .nav li a {
text-decoration: none;
color: #FFF;
font-family: 'Assistant', sans-serif;
font-size: 16px;
margin-top: 2em;
}
/* About Section */
#aboutme {
text-align: center;
font-size: 18px;
margin-top: 180px;
padding-top: 2em;
}
#aboutme p {
color: #000000;
background-color: #FFF;
font-family: 'Assistant', sans-serif;
padding: 4em;
margin-bottom: 4em;
font-weight: 900;
border-color: #000000;
border-width: 5px;
border-style: solid;
}
#aboutme img {
border-color: #000000;
margin-bottom: 4em;
border-width: 5px;
border-style: solid;
border-radius: 20%;
}
/* Portfolio Section */
#portfolio {
background-color: #DDF0C2;
}
#portfolio .title {
text-align: center;
background-color: #DDF0C2;
margin-top: 50px;
padding-bottom: 50px;
font-family: 'Lobster Two', cursive;
font-size: 50px;
}
.col-md-4{
background-color: #FFF;
background-clip: content-box;
padding-bottom: 2em;
height: auto;
}
h3 {
text-align: center;
font-size: 18px;
}
h4 {
text-align: center;
font-size: 16px;
font-family: 'Assistant', sans-serif;
}
.img-container {
position:relative;
padding-top:66.59%;
padding-bottom: 1em;
height: auto;
width: 100%;
}
.row img {
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
}
/* Contact Section */
#contact {
background-color: #8C999A;
}
#contact .title {
margin-top: 50px;
padding-bottom: 50px;
font-family: 'Lobster Two', cursive;
font-size: 50px;
text-align: center;
background-color: #8C999A;
}
#icons {
text-align: center;
}
#icons a{
color: #FFF;
margin: 10px;
}
#created {
background-color: #323232;
color: #FFF;
}
#created h2 {
font-size: 18px;
font-family: 'Assistant', sans-serif;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment