Skip to content

Instantly share code, notes, and snippets.

@bmikol
Created February 3, 2017 23:18
Show Gist options
  • Save bmikol/ecdbf6f48badd2f47787a5db7104acd2 to your computer and use it in GitHub Desktop.
Save bmikol/ecdbf6f48badd2f47787a5db7104acd2 to your computer and use it in GitHub Desktop.
CareerFoundry Ex 2.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" id="home">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="projectName navbar-brand">
<a href="#">Brian Mikol</a>
</div><!-- end projectName -->
</div><!-- end navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Work <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#work1">Work 1</a></li>
<li><a href="#work2">Work 2</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div><!-- end navbar collapse -->
</div><!--end nav container -->
</nav><!-- end navbar -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/portfolioheroimage.jpeg" alt="Top-down view of a computer desk">
<div class="carousel-caption first">
<h3>Ready to work</h3>
<p>Here is an example description</p>
</div><!-- end carousel-caption -->
</div><!-- end item active -->
<div class="item">
<img class="img-responsive" src="img/portfolioheroimage2.jpg" alt="Typewriter">
<div class="carousel-caption">
<h3>…be it writing</h3>
<p>Here is an example description</p>
</div><!-- carousel-caption -->
</div><!-- end item -->
<div class="item">
<img class="img-responsive" src="img/portfolioheroimage3a.jpg" alt="Top-down view of a wooden desk with design tools">
<div class="carousel-caption">
<h3>…or designing</h3>
<p>Here is an example description</p>
</div><!-- carousel-caption -->
</div><!-- end item -->
</div><!-- carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- end carousel slide -->
<div class="container-fluid anchor">
<h1>Brian Mikol</h1>
<p><strong>Product Manager, Marketer,</strong> and soon-to-be <strong>Full-Stack Web Developer</strong>.</p>
</div><!-- /container-fluid -->
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="threecol">
<h2>Portfolio Concept</h2>
<ul>
<li>2+ years providing product management, marketing, and user experience consulting services to a wide variety of clients.</li>
<li>2.5 years Product Manager at Ingenio; 4 years Marketing before that.</li>
<li>All predicated by acheivements in Marketing and Sales at various Bay Area B2C companies.</li>
</ul>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- end 3-column -->
</div><!-- /col -->
<div class="col-md-4 col-xs-12">
<div class="threecol">
<h2>Project Goals</h2>
<p>Stay on track, even if I&rsquo;m starting a little late.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- end 3-column -->
</div><!-- /col -->
<div class="col-md-4 col-xs-12">
<div class="threecol">
<h2>Course Goals</h2>
<p>In taking this course, I&rsquo;m looking to augment my technical skillset to either further my career in Product Management or pivot closer to the code as a web developer. Assuming the pivot, ideally I would like to hire on as an entry level developer before considering freelance opportunities.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- end 3-column -->
</div><!-- /col -->
</div><!-- /row -->
<hr>
</div> <!-- /container-fluid -->
<div class="container-fluid anchor" id="about">
<h2>About Me</h2>
<div class="col-md-4 col-xs-12 about">
<img class="img-responsive" src="img/kitten.jpg" alt="Kittens wearing frog hats" />
<div class="froghat">(<a href="http://www.totalgirl.com.au/gallery/your-space-pets-cutest-kitten-photos">Source</a>)</div>
</div><!-- end about-image -->
<div class="col-md-4 col-xs-12 about">
<h3>Introduction</h3>
<p>All about me.</p>
</div><!-- end about-intro -->
<div class="col-md-4 col-xs-12 skills">
<h3>My Skills</h3>
<ul id="skill-list">
<li>Product Management</li>
<li>Project Management</li>
<li>Marketing</li>
<li>HTML &amp; CSS</li>
</ul>
</div><!-- end about-skills -->
</div><!-- end container-fluid -->
<div class="container-fluid">
<div class="main-text">
<h3>More About Me</h3>
<p>Bacon ipsum dolor amet turducken cupim corned beef venison prosciutto shankle. Biltong shankle pancetta shank, sausage fatback porchetta ground round. Pork chop ground round bresaola porchetta fatback tongue sausage cupim sirloin kielbasa pancetta landjaeger capicola strip steak bacon. Kevin shoulder andouille, sirloin prosciutto shankle swine venison.</p>
<p>Boudin kielbasa ham bresaola alcatra pig cupim brisket frankfurter tenderloin swine capicola leberkas shankle pork belly. Venison spare ribs hamburger, beef ribs shank alcatra ball tip. Tri-tip bacon short ribs meatball, short loin cow shank drumstick t-bone ball tip. Venison corned beef landjaeger frankfurter rump short ribs pork ball tip alcatra pork belly pancetta strip steak bacon sausage. Meatball alcatra tenderloin, rump pastrami turducken swine tongue pork chop corned beef pig spare ribs meatloaf beef ribs salami. Landjaeger alcatra jerky venison, jowl filet mignon bresaola porchetta drumstick rump boudin.</p>
<p>Pork biltong filet mignon turkey frankfurter short ribs strip steak. Tail ribeye strip steak short ribs capicola. Shoulder pancetta cupim tri-tip salami, chuck chicken meatloaf prosciutto pork ham hock corned beef. Pork chop tongue spare ribs turducken pork belly bresaola ribeye salami sausage picanha fatback pork loin meatloaf turkey corned beef.</p>
<p>Salami doner t-bone tail, tongue kevin pork picanha pastrami short loin ball tip andouille bacon tenderloin flank. Pork loin beef capicola drumstick jerky doner corned beef venison tail swine sausage kielbasa tri-tip. Sausage alcatra ball tip, strip steak bacon shankle pork chop pancetta brisket. Turducken hamburger corned beef, shoulder ball tip landjaeger sirloin kevin. Turkey t-bone landjaeger hamburger pork chop capicola. Kielbasa tenderloin filet mignon, chuck bacon ham hock sirloin swine shoulder ball tip picanha short ribs.</p>
<p>Shank cupim cow, pastrami short loin turducken beef ribs jowl. Boudin beef fatback meatloaf rump filet mignon. Rump biltong sausage leberkas turducken. Strip steak short ribs prosciutto, pastrami andouille spare ribs hamburger tongue tail brisket ham swine ball tip pork loin meatloaf. Cupim flank picanha, beef leberkas short loin pork loin doner kielbasa tongue. Pork chop alcatra ribeye brisket, doner salami shank shankle pork loin cow strip steak sausage tri-tip.</p>
</div><!-- end main-text -->
</div><!-- end container-fluid about -->
<div class="container-fluid anchor work">
<h2>My Work</h2>
<div class="row anchor" id="work1">
<h3>Work 1</h3>
<div class="col-md-3 col-xs-6">
<img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
</div><!-- end col-md-3 col-xs-6 -->
<div class="col-md-3 col-xs-6">
<img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
</div><!-- end col-md-3 col-xs-6 -->
<div class="col-md-3 col-xs-6">
<img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
</div><!-- end col-md-3 col-xs-6 -->
<div class="col-md-3 col-xs-6">
<img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
</div><!-- end col-md-3 col-xs-6 -->
</div><!-- end row work1 -->
<div class="row anchor" id="work2">
<h3>Work 2</h3>
<div class="col-md-3 col-xs-6">
<img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
</div><!-- end col-md-3 col-xs-6 -->
<div class="col-md-3 col-xs-6">
<img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
</div><!-- end col-md-3 col-xs-6 -->
<div class="col-md-3 col-xs-6">
<img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
</div><!-- end col-md-3 col-xs-6 -->
<div class="col-md-3 col-xs-6">
<img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
</div><!-- end col-md-3 col-xs-6 -->
</div><!-- end row work2 -->
</div><!-- end container-fluid -->
<div class="container-fluid anchor" id="contact">
<h2>Contact Me</h2>
<div class="contact">
<h2>Postal&nbsp;<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></h2>
<ul>
<li>123 Main Street</li>
<li>San Francisco, California 94123</li>
<li>United States of America</li>
</ul>
<h2>Phone&nbsp;<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></h2>
<p>+1 (415) 555-1212</p>
<h2>Email&nbsp;<span class="glyphicon glyphicon-send" aria-hidden="true"></span></h2>
<p><span class="codedirection">moc.skrowgoffs@noollabtib+nairb</span></p>
</div><!-- end contact -->
</div><!-- end container-fluid contact -->
<div class="container-fluid anchor" id="faq">
<h2>FAQ</h2>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;Why did you decide to take a web development bootcamp?
</a>
</h4>
</div><!-- end panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>I had two reasons in deciding to take this development bootcamp:</p>
<ol>
<li>To enhance my technical skills in service of future roles within Product Management.</li>
<li>To also expand my career opportunities in doing something I enjoy.</li>
</ol>
</div><!-- end panel-body -->
</div><!-- end collapseOne -->
</div><!-- end panel -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;What is the color of the sky?
</a>
</h4>
</div><!-- end panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>Blue.</p>
</div><!-- end panel-body -->
</div><!-- end collapseTwo -->
</div><!-- end panel -->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;What is the air-speed velocity of an unladen swallow?
</a>
</h4>
</div><!-- end panel-heading -->
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>According to Jonathan Corum at <a href="http://style.org/unladenswallow/">Style.org</a>, &ldquo;the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour.&rdquo;</p>
</div><!-- end panel-body -->
</div><!-- end collapseThree -->
</div><!-- end panel -->
</div><!-- end panel-group -->
</div><!-- end container-fluid faq -->
<div class="container-fluid youtube">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/UR_yCO7-aIU" frameborder="0" allowfullscreen></iframe>
</div><!-- end youtube-embed -->
</div><!-- end container-fluide -->
<footer>&copy; Brian Mikol 2017 <div class="social"><a href="https://twitter.com/bmikol" class="twitter-follow-button" data-show-screen-name="false" data-dnt="true" data-show-count="false">Follow @bmikol</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><div class="fb-share-button" data-href="http://bmikol.bitballoon.com/" data-layout="button" data-mobile-iframe="false"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fbmikol.bitballoon.com%2F&amp;src=sdkpreparse">Share</a></div></div></footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
</body>
</html>
.jumbotron {
background-image: url("../img/landscape.jpg");
background-size: cover;
}
.jumbotron p {
color: white;
}
.panel-heading {
background-color: white;
}
#carousel-example-generic {
margin-top: -2.84em;
}
.carousel-caption {
background-color: rgba(0, 0, 0, 0.25);
}
.coffee-kitten {
margin: 0.25em;
}
.threecol {
margin: 0.5em;
padding: 0.5em;
}
.anchor {
padding-top: 50px;
}
.dropdown-menu {
background-color: black;
}
.youtube {
width: 60%;
margin: 2em auto;
}
.social {
float: right;
}
.fb-share-button {
padding-left: 10px;
}
/**** About/Contact Page ****/
* {
box-sizing: border-box;
}
body {
background-color: #fffeea;
color: #34495e;
padding-top: 6.95em;
position: relative;
}
/* Large desktop */
@media (min-width: 1200px) {
body {
background-color: #f1f1f1;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
body {
background-color: #d8d8d8;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body {
background-color: #bfbfbf;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
body {
background-color: white;
}
}
.contact_container {
width: 80%;
margin: 0 auto;
}
.header h1 {
text-align: center;
}
.froghat img {
height: auto;
margin: 0 auto;
}
.froghat {
text-align: center;
}
.about {
padding: 0 1em;
margin-top: 0.75em;
margin-bottom: 1em;
}
.main-text {
clear: both;
padding: 3em 1em;
position: relative;
border: 1px black dotted;
}
.skills {
background-color: #5ad4c2;
color: #fff;
padding: 1em 0;
}
.work {
margin-bottom: 5em;
}
#contact {
background-image: url("../img/unsplash-jan-senderek.jpg");
background-attachment: fixed;
background-size: cover;
color: white;
padding: 5em 2.5em 2.5em;
height: 52em;
}
.contact {
width: 50%;
min-width: 19em;
margin: 0 auto;
padding: 5% 10%;
border: 0.05em gray solid;
background-color: rgba(0, 0, 0, 0.75);
}
.contact ul {
list-style: none;
padding-left: 0;
}
span.codedirection {
unicode-bidi: bidi-override; direction: rtl;
}
#skill-list {
margin-left: 2.5em;
}
.old-nav {
background-color: black;
position: fixed;
width: 100%;
top: 0;
padding: 2em 1em;
z-index: 1;
}
.old-nav ul {
float: right;
}
.old-nav ul li {
display: inline-block;
list-style: none;
}
/* Typography */
body {
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 1.25em;
}
h1,
h2,
h3 {
font-family: Futura, Helvetica, Arial, sans-serif;
}
.anchor h3 {
padding-left: 0.75em;
}
p,
li {
font-family: Georgia, Times, "Times New Roman", serif;
}
.intro p {
font-family: Futura, Helvetica, Arial, sans-serif;
font-size: 3em;
font-weight: 100;
-webkit-margin-before: 0;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
.contact,
.contact p,
.contact h2,
.contact li {
font-family: 'Shadows Into Light', cursive;
}
.contact li,
.contact p {
font-size: 1.25em;
}
.projectName {
text-transform: uppercase;
}
.projectName a {
color: #9d9d9d;
}
.projectName a:hover {
color: #ff0;
text-decoration: none;
}
.old-nav ul li a {
color: white;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 600ms;
-webkit-transition: color 600ms;
}
.old-nav a:hover {
color: #ff0;
text-decoration: none;
}
.panel-body p,
.panel-body li,
.panel-title {
font-family: Futura, Helvetica, Arial, sans-serif;
}
.dropdown-menu li a {
color: #9d9d9d;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment