Skip to content

Instantly share code, notes, and snippets.

@jessmc

jessmc/index.html

Created December 16, 2016 20:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jessmc/050c1ae02cc5099a6aa76e953367d71d to your computer and use it in GitHub Desktop.
Save jessmc/050c1ae02cc5099a6aa76e953367d71d to your computer and use it in GitHub Desktop.
Download ZIP
Personal Portfolio
Raw
index.html
<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>
Raw
scripts
<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>
Raw
style.css
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;
}
Raw
styles
<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