Skip to content

Instantly share code, notes, and snippets.

@tkbtim

tkbtim/about_style.css

Created July 30, 2016 02:46
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/d31306cf2f1dd5853b04f8c66edf559b to your computer and use it in GitHub Desktop.
Save tkbtim/d31306cf2f1dd5853b04f8c66edf559b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
about_style.css
* { box-sizing: border-box; }
.container_about {
width: 100%;
height: auto;
margin: 0 auto;
}
.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: 30px;
color: #FE2E2E;
}
.image img{width: 30%;
display: inline-block;
float:left;
}
.column {
display: inline-block;
width: 30%;
float:left;
}
.intro{
width: 30%;
float:left;
color: #FE2E2E;
}
.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;
}
.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;
}
.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: center;
color: #FE2E2E;
}
.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: #FE2E2E;
}
.main-text{
clear: both;
padding-top: 30px;
padding-bottom: 50px;
font-size: 25px;
color: #FE2E2E;
}
.body p li{
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
font-style: normal;
font-variant: normal;
font-weight: 20;
line-height: 26.4px;
}
.nav{
background-color: #642EFE;
position: fixed;
width: 100%;
top: 0;
text-align: center;
}
.nav ul li{
display: inline-block;
}
.nav ul li a{
color: white;
text-transform: uppercase;
letter-spacing: .05em;
float: right;
}
.nav a{
transition:color 600ms;
-webkit-transition:color 600ms;
}
.nav a:hover{
color: #FE2E2E;
text-decoration: none;
}
Raw
contact_page.html
<!doctype html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact Tim</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
body{background-image: url("img/white.jpe");
}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container1">
<div class="header">
<h1>Contact Me </h1>
</div><!--end div header-->
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Contact Page</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div><!--end nav-->
<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 container1-->
<!-- ============================= -->
<!-- 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
faq.html
<!doctype html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> FAQ</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
body{background-image: url("img/white.jpe");
}
</style>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="header">
<h1>Frequently Asked Questions</h1>
</div><!--end div header-->
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact_page.html">Contact Page</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div><!--end nav-->
<div class="container2">
</div><!--end div container2-->
<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>
</body>
<!-- ============================= -->
<!-- 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 -->
</head>
Raw
styles.css
/*Styles for Home Page*/
.jumbotron{
background-image: url("../img/madrid.jpe");
background-size: cover;
}
.jumbotron p {
color: #ffff99;
}
.jumbotron h1{
color: #ffff99;
}
/*Styles for Contact 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: #FE2E2E;
}
.container1 {
position: relative;
width: 100%;
padding-top: 20px;
padding-bottom: 60px;
color: #FE2E2E;
}
.content {
position: relative;
left: 30%;
top: 30%;
width: 50%;
text-align: left;
font-size: 60px;
line-height: 15px;
}
.nav{
background-color: #642EFE;
position: fixed;
width: 24%;
top: 0;
text-align: left;
margin-left: 37%;
}
.nav ul li{
display: inline-block;
}
.nav ul li a{
color: white;
text-transform: uppercase;
letter-spacing: .05em;
float: right;
}
.nav a{
transition:color 600ms;
-webkit-transition:color 600ms;
}
.nav a:hover{
color: #FE2E2E;
text-decoration: none;
}
.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: 75%;
width: 100%;
text-align: center;
font-size: 25px;
font-weight: 35;
}
/*styles for faq page*/
.container2{
width: 100%;
height: auto;
}
.panel-heading{
background-color: #A4A4A4;
}
.panel-title{
background-color: #A4A4A4;
width:30%;
margin-left: 35%;
text-align: center;
}
.panel-title a{
color: #FF0000;
background-color: #A4A4A4;
}
.panel-body{
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment