Skip to content

Instantly share code, notes, and snippets.

@tkbtim

tkbtim/about.html

Created July 21, 2016 15:36
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/e87a91795a32707ca0b16188008306ff to your computer and use it in GitHub Desktop.
Save tkbtim/e87a91795a32707ca0b16188008306ff to your computer and use it in GitHub Desktop.
Download ZIP
Raw
about.html
<!doctype html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> About TkbTim</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<style type="text/css">
body{background-image: url("img/white.jpe");
}
</style>
</head>
<body>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/about_styles.css">
<div class="container">
<div class="header">
<h1>More About Tim </h1>
</div><!--end div header-->
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="contact_page.html">Contact Page</a></li>
</ul>
</div><!--end nav-->
<div class="image">
<img src="img/IMG_0121_resize2.JPG" alt="img/IMG_0121_resize2.JPG">
</div><!--end div image-->
<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 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 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><!--end div container-->
</body>
</html>
Raw
about_style.css
* { box-sizing: border-box; }
.container {
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;
}
.image img{width: 30%;
display: inline-block;
float:left;
}
.column {
display: inline-block;
width: 30%;
float:left;
}
.intro{
width: 30%;
float:left;
}
.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;
}
.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;
}
.main-text{
clear: both;
padding-top: 30px;
padding-bottom: 50px;
font-size: 25px;
}
.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;
}
.container1 {
position: relative;
width: 100%;
padding-top: 20px;
padding-bottom: 60px;
color: #F5ECCE;
}
.content {
position: relative;
left: 0;
top: 30%;
width: 100%;
text-align: center;
font-size: 60px;
line-height: 15px;
}
.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;
}
.description h2{
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment