Skip to content

Instantly share code, notes, and snippets.

@tkbtim

tkbtim/index.html

Created October 4, 2016 17:11
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 tkbtim/bfc4609597d236516bfaa5ddec547784 to your computer and use it in GitHub Desktop.
Save tkbtim/bfc4609597d236516bfaa5ddec547784 to your computer and use it in GitHub Desktop.
Download ZIP
2.1.1
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>TkbTim2</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]-->
<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>
</head>
<body data-spy="scroll" data-target=".navbar">
<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.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--navbar starts here-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
…
</nav> <!-- end navbar-->
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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="#">tkbtim</a>
</div> <!--end projectName -->
</div> <!--end navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#homepage">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact Page</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div> <!-- nav -->
</div> <!-- end nav container-->
</nav> <!-- end navbar-->
<div class = "container-fluid" id="homepage">
<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 src="img/portfolioheroimage1_cropped.jpg" class="img-responsive" alt="Mossy Rock">
<div class="carousel-caption">
Web development in progress<br>
***
</div>
</div>
<div class="item">
<img src="img/lesson8-portfolioheroimage2_cropped_png.png" class="img-responsive" alt="Marsh">
<div class="carousel-caption">
My grandmother's typewriter<br>
***
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage3_cropped_png.png" class="img-responsive" alt="Cliffs">
<div class="carousel-caption">
My busy desk<br>
***
</div>
</div>
...
</div>
<!-- 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>
<div class="carousel-caption">
<h3></h3>
<p></p>
</div>
</div>
</div><!--end div container-fluid-->
<div class="container-fluid" id="portfolio">
<div class="row">
<div class="col-xs-12 col-md-4">
<h2>Portfolio Goals</h2>
<p>My ultimate goal is to be working in a web developer role in a enviroment where my industrial experience as a Instrument Technician will provide a foundation to build a second career.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-xs-12 col-md-4">
<h2>Project Goals</h2>
<p>My project goals follow from my Portfolio goal. That is to upgrade my existing skills and learn new skills and technology to make freelance web development a second career.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-xs-12 col-md-4">
<h2>Course Goals</h2>
<p>I wish to leverage the CareerFoundry Web Developer course to jumpstart me into a successful second career as a Web Developer.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
</div><!-- /row -->
</div> <!-- /container -->
<!-- ================container about===============-->
<div class="container-fluid" id="about">
<div class="header">
<h1>More About Tim </h1>
</div><!--end div header-->
<div class="col-xs-6 col-md-4">
<div class="image">
<img src="img/ME_160810.jpg" class="img-responsive" alt="ME">
</div><!--end div image-->
</div><!--end col-->
<div class="col-xs-6 col-md-4">
<div class="intro column">
<h2>Introduction</h2>
<p>I have many relevant skills to offer, including much experience programming industrial control systems.<br>This includes presenting human interface information in a clear and concise manner.<br>This will enable me to build clear concise web sites.</P>
</div><!--end div intro-->
</div><!--end col-->
<div class="col-xs-6 col-md-4">
<div class="skills column">
<h2>Web Development Skills</h2>
<ul id="skill-list">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</div><!--end div skills-->
</div><!--end col-->
<div class="col-xs-6 col-md-12">
<div class="main-text">
<h2>More About Me</h2>
<p> Not "Hipster Cool" just a knowledgeable guy with some skills and a desire to be successful.</p>
</div><!--end div main-text-->
</div>
</div><!--end div container-->
<div class="container-fluid" id="contact">
<div class="header2">
<h1>Contact Me </h1>
</div><!--end div header-->
<div class="content">
<p><span class="glyphicon glyphicon-hand-right"></span> Tim McLean</p>
<P><span class="glyphicon glyphicon-phone"></span> 780-898-4242</P>
<P><span class="glyphicon glyphicon-envelope"></span> tkbinst@gmail.com</p>
</div><!--end div content-->
<div class="description">
<h2>A Somewhat Related Career</h2>
<p>I have been in the business of displaying information my entire career. Sometimes on industrial control equipment or more recently, on a web page. In both cases the goal has always been the same. To clearly and concisely present information in a non-ambiguous, immediatly actionable way.
</p>
</div><!--end description-->
</div><!--end div contact-->
<div class="container-fluid" id="work"><!--container work-->
<div class ="row2" id="work">
<div class="col-xs-6 col-md-3">
<img src="img/IMG_1098.jpg" class="img-responsive" alt="cliffs">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/IMG_1101.jpg" class="img-responsive" alt="cliffs">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/IMG_1109.jpg" class="img-responsive" alt="cliffs">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/IMG_1112.jpg" class="img-responsive" alt="cliffs">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/IMG_1113.jpg" class="img-responsive" alt="cliffs">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/IMG_1118.jpg" class="img-responsive" alt="cliffs">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/IMG_1119.jpg" class="img-responsive" alt="cliffs">
</div>
<div class="col-xs-6 col-md-3">
<img src="img/IMG_1128.jpg" class="img-responsive" alt="cliffs">
</div>
</div><!--end row2-->
</div><!--end container work-->
<div class="container-fluid" id="faq"><!--container faq-->
<div class="header">
<h1>Frequently Asked Questions</h1>
</div><!--end div header-->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordian" href="#collapseOne">
Why Web Design?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
I have come to the point in my career where I needed something new to learn, a new challenge and a new direction. Web development represented an opportunity to, hopefully, leverage some of my previous instrumentation training and experience into a technical field in a growing industry.
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordian" href="#collapseTwo">
What do I hope to accomplish?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
I hope to be working as a wev developer by June 20, 2017.
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordian" href="#collapseThree">
How will I be successful?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
I have always been a good listener. I believe listening to what the customer wants is the very first step to delivering exactly that.
</div>
</div>
</div>
</div><!--end container faq-->
<!-- Embedded video-->
<div class="bugsbunny">
<!-- 16:9 aspect ratio -->
<div class="row">
<div class="col-xs-12">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/FKXOevtekJI">
</iframe>
</div><!--end 16by9-->
</div><!--end col-->
</div><!--end row-->
</div><!--end bugsbunny-->
<footer>
&copy;Tim McLean TKB Instrumentation Ltd 2016
<a href="https://twitter.com/tkbtim" class="twitter-follow-button" data-show-count="false">Follow @tkbtim</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<div class="fb-like" data-href="https://tkbtim.bitballoon.com" data-width="10px" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></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>
<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>
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
.body {
position: relative;
}
/*Styles for nav-bar*/
.projectName {
text-transform: uppercase;
}
.projectName a {
color: white;
}
/*Styles for home page*/
#homepage{
padding-bottom: 20%;
}
.carousel-caption{
color: #58FAF4;
font-size: 525%;
}
/*Styles for Portfolio*/
#portfolio{
padding-top: 20%;
padding-bottom: 30%;
background-color: #E0F8F1;
}
/*Styles for About page*/
.header h1 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 70px;
font-style: italic;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
padding-top: 70px;
padding-bottom: 50px;
color: blue;
}
.column {
display: inline-block;
width: 100%;
float:left;
}
.intro{
width: 100%;
float:left;
color: white;
}
.intro h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 26.4px;
text-align: center;
color: blue;
}
.intro p {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: 50;
line-height: 26.4px;
padding-left: 20px;
padding-bottom: 34px;
color: blue;
}
.skills h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 26.4px;
text-align: left;
color: blue;
}
.skills{
display: inline-block;
float: left;
}
#skill-list{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
font-variant: normal;
font-weight: 50;
line-height: 26.4px;
color: blue;
}
.main-text{
clear: both;
padding-top: 30px;
padding-bottom: 50px;
font-size: 25px;
color: blue;
}
#about{
padding-bottom: 2%;
background-color: #E0F8F1;
}
/*Styles for Contact Page*/
.header2 h1{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 70px;
font-style: italic;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
padding-top: 70px;
padding-bottom: 50px;
color: white;
}
.content {
position: relative;
left: 30%;
top: 5%;
width: 60%;
text-align: left;
font-size: 60px;
line-height: 15px;
}
.description h2{
padding-top: 5%;
position: relative;
left: 0;
top: 90%;
width: 100%;
text-align: center;
font-size: 40px;
padding-bottom: 40px;
}
.description p{
position: relative;
left: 0;
top: 65%;
width: 100%;
text-align: center;
font-size: 25px;
font-weight: 35;
}
#contact{
padding-bottom: 40%;
background-image: url("../img/IMG_1101_cropped.jpg");
/*Add a background image*/
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/*Have the background cover the entire div section*/
color: white;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
padding:100px;
padding-top: 50px;
height: 1200px;
}
/*Styles for work*/
#work{
padding-top: 6%;
padding-bottom: 30%;
background-color: #E0F8F1;
}
.col-md-3{
padding-bottom: 1em;
}
/*styles for faq page*/
.panel-group{
background-color: #E0F8F1;
}
.panel-heading{
background-color:#E0F8F1 !important;
}
.panel-title{
background-color:#E0F8F1;
width: 30%;
height: auto;
margin-left: 35%;
text-align: center;
}
.panel-title a{
color: blue;
background-color: #E0F8F1;
}
.panel-body{
text-align: center;
color:blue;
background-color: #E0F8F1;
}
#faq{
padding-bottom: 30%;
background-color: #E0F8F1;
}
/*styles for iframe*/
.bugsbunny{
padding: 10em 30em;
}
/*styles for footer*/
.twitter-follow-button{
float: right;
}
.fb-like{
float: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment