Skip to content

Instantly share code, notes, and snippets.

@bmikol

bmikol/about.html

Created January 29, 2017 00:43
Show Gist options
  • Save bmikol/6eb9e0e0d50854c6f6cb992c9085c84a to your computer and use it in GitHub Desktop.
Save bmikol/6eb9e0e0d50854c6f6cb992c9085c84a to your computer and use it in GitHub Desktop.
Download ZIP
CareerFoundry Ex. 1.7
Raw
about.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>About Me</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div><!-- end nav -->
<div class="contact_container">
<div class="header">
<h1>About Me</h1>
</div><!-- end header -->
<div class="image column">
<img src="img/kitten.jpg" alt="Kittens wearing frog hats" />
<p>(<a href="http://www.totalgirl.com.au/gallery/your-space-pets-cutest-kitten-photos">Source</a>)</p>
</div><!-- end image -->
<div class="intro column">
<h2>Introduction</h2>
<p>All about me.</p>
</div><!-- end intro -->
<div class="skills column">
<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 skills -->
<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 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Raw
contact.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
<title>Contact Me</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div><!-- end nav -->
<div class="container">
<div class="header">
<h1>Contact Me</h1>
</div><!-- end header -->
<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>
+1 (415) 555-1212
<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 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Raw
faq.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<title>FAQ</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div><!-- end nav -->
<div class="container">
<div class="header">
<h1>FAQ</h1>
</div><!-- end header -->
<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></div><!-- end -->
<div></div><!-- end -->
</div><!-- end container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Raw
index.html
<!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">
<!-- 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>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Brian Mikol</h1>
<p><strong>Product Manager, Marketer,</strong> and soon-to-be <strong>Full-Stack Web Developer</strong>.</p>
<a href="./about.html">About</a> | <a href="./contact.html">Contact</a> | <a href="./faq.html">FAQ</a>
</div><!-- /container -->
<div class="container">
</div><!-- /container -->
</div><!-- /jumbotron -->
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>
<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>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<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><!-- /col -->
<div class="col-md-4">
<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><!-- /col -->
</div><!-- /row -->
<hr>
</div> <!-- /container -->
<!-- ============================= -->
<!-- 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 -->
</body>
</html>
Raw
styles.css
.jumbotron {
background-image: url("../img/landscape.jpg");
background-size: cover;
}
.jumbotron p {
color: white;
}
.panel-heading {
background-color: white;
}
/**** About/Contact Page ****/
* {
box-sizing: border-box;
}
body {
background-color: #fffeea;
color: #34495e;
padding-top: 90px;
}
.contact_container {
width: 80%;
margin: 0 auto;
}
.header h1 {
text-align: center;
}
.image {
display: inline;
float: left;
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
.image p {
margin-top: -85%;
text-align: center;
}
.column {
display: inline-block;
float: left;
width: 30%;
padding: 0 20px;
margin-top: 15px;
}
.main-text {
clear: both;
padding: 60px 20px;
position: relative;
border: 1px black dotted;
}
.skills {
background-color: #5ad4c2;
color: #fff;
padding: 20px 0;
}
.contact {
width: 50%;
min-width: 433px;
margin: 0 auto;
padding: 5% 10%;
border: 1px gray solid;
}
.contact ul {
list-style: none;
padding-left: 0;
}
span.codedirection {
unicode-bidi: bidi-override; direction: rtl;
}
#skill-list {
margin-left: 50px;
}
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0;
padding: 20px 10px 20px;
}
.nav ul {
float: right;
}
.nav ul li {
display: inline-block;
list-style: none;
}
/* Typography */
h1,
h2,
h3 {
font-family: Futura, Helvetica, Arial, sans-serif;
}
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;
}
.nav ul li a {
color: white;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 600ms;
-webkit-transition: color 600ms;
}
.nav a:hover {
color: #ff0;
text-decoration: none;
}
.panel-body p,
.panel-body li,
.panel-title {
font-family: Futura, Helvetica, Arial, sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment