<body>
<section>
<div class="container-fluid">
<div class="image">
<header>
<h1>Hi There! </br></h1>
<h1><strong>I'm Jane Smith</strong> and I'm a <strong>Web Developer</strong></h1>
</header>
</div>
<div>
<div class="block">
<div class="container">
<div class="row row-padding">
<div class="col-md-7 about">
<h2>About</h2>
<p>Cliche austin post-ironic live-edge williamsburg, disrupt 8-bit four loko small batch yuccie air plant. Leggings fingerstache PBR&B selfies lo-fi. Sustainable cardigan tumeric, hexagon direct trade fashion axe shabby chic mustache pok
pok ugh polaroid kickstarter godard twee biodiesel. Bicycle rights bitters umami actually. You probably haven't heard of them prism bitters poutine bushwick mixtape. Occupy af tbh narwhal. Church-key flannel shoreditch.</p>
</div>
<div class="col-md-5">
<h2>Contact Info</h2>
<ul class="contact">
<li class="icon-1">123-456-7899</li>
<li class="icon-2">hellojsmith@jsmith.com</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="divider" align="center" />
<div class="container">
<div class="row row-padding">
<div class="col-md-7">
<h2> Education & Experience</h2>
<div class="media">
<div class="media-left">
2010-2015
</div>
<div class="media-body">
<h4 class="media-heading"> ABC Company</h4>
<p>Ea pri mundi dignissim. Tota lobortis no pri, explicari iracundia ad vix. Nisl iisque pericula pri te.</p>
</div>
</div>
<div class="media">
<div class="media-left">
2008-2010
</div>
<div class="media-body">
<h4 class="media-heading"> XYZ Company</h4>
<p>Vis ne quaeque saperet accommodare.</p>
</div>
</div>
<div class="media">
<div class="media-left">
2004-2008
</div>
<div class="media-body">
<h4 class="media-heading"> XYZ State College</h4>
<p>Vim periculis liberavisse contentiones ex, vidit latine fabulas qui ut. Vis ne quaeque saperet accommodare.</p>
</div>
</div>
</div>
<div class="col-md-5">
<h2>Skills</h2>
<div class="skills-bar">
<div class="progress html">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> HTML/CSS</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> Javascript</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">PHP & MySQL</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Photoshop</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Ruby on Rails</div>
</div>
</div>
</div>
</div>
</div>
<hr class="divider" align="center" />
</section>
<footer>
<div class="container">
<p class="footer">Copyright © 2017, All Rights Reserved.</p>
</div>
</footer>
</body>
body {
padding-bottom: $bodypadding;
font-family: 'Sansita', 'Open Sans';
}
.row-padding {
padding: 40px;
}
h1 {
text-align: center;
color: #fff;
}
h2 {
text-align: center;
color: #1e21df;
padding-bottom: 20px;
}
p {
line-height: 30px;
}
.image {
background-image:linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://images.robertharding.com/preview/RF/MI/HORIZONTAL/1174-4517.jpg);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
padding: 200px 0;
}
.container-fluid {
padding: 0;
}
.block {
width: 100%;
padding: 10px 0;
}
.about {
padding: 0, 0, 10px, 0;
text-align: center;
}
.profile-img {
width: 10%;
display: block;
margin: 0 auto;
}
.contact {
text-align: center;
padding: 30px 0;
}
.icon-contact {
width: 5%;
}
.icon-contact {
width: 5%;
list-style: none;
text-align: center;
}
.icon-1 {
display: inline;
list-style: none;
text-align: center;
font-size: 24px;
}
.icon-2 {
display: inline;
color: #f678c4;
list-style: none;
text-align: center;
font-size: 24px;
}
.divider {
height: 1px;
width: 75%;
background-color: #e5e5e5;
}
.skills-bar {
padding-top: 60px;
}
.progress-bar {
background-color: #1e21df;
}
.progress {
margin: 20px;
}
.media {
margin: 20px;
}
.media-body{
margin-left:20px;
}
.media-heading{
color: #f678c4;
}
.footer{
color:#1e21df;
}
