Skip to content

Instantly share code, notes, and snippets.

@Tinusw

Tinusw/about.html

Created January 10, 2016 14:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Tinusw/062364dacb102d74ee77 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Tinusw/062364dacb102d74ee77 to your computer and use it in GitHub Desktop.
Download ZIP
1.9 Responsive Web Design
Raw
about.html
<!doctype html>
<html lang="en">
<!-- used to declare that page language is english -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Used if you want to build responsive sites! -->
<title> About Me </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700|Source+Sans+Pro:400,600|Raleway:400,300,700|Arimo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<~[endif]-->
<!-- Code above is used to fix HTML5 support in older browsers -->
</head>
<body>
<div class="nav">
<a href="index.html">Home</a>
<ul>
<li><a href="#">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<!-- About Me Bootstrap Grid -->
<div class="container-fluid">
<h2>About Me</h2>
<div class="row" id="about">
<div class= "hidden-xs hidden-sm col-md-3 col-lg-4">
<div class="image">
<img src="img/kitty.jpg" alt="kitten" class="img-responsive">
</div> <!-- image div -->
</div> <!-- col-md-3 div -->
<div class= "col-xs-6 col-sm-6 col-md-4 col-lg-4">
<div class="intro">
<h3> "The internet couldn't possibly handle that many cats."...We sure showed them. </h3>
<p> that's pretty cool </p>
</div> <!-- intro div -->
</div> <!-- col-md-3 div -->
<div class= "col-xs-6 col-sm-6 col-md-5 col-lg-4">
<div class="skills-column">
<h3>My Skills</h3>
<ul id="skill-list">
<li> Awesome messages </li>
<li> Sick collection of Cats </li>
<li> One very professional dog </li>
</ul>
</div> <!-- skills div -->
</div> <!-- col-md-3 div -->
</div> <!-- Container-fluid Div -->
<!-- ============================= -->
<!-- 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 her -->
</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">
<div class="col-md-4 col-xs-3"></div>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Tinus Wagner. Developer</title>
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700|Source+Sans+Pro:400,600|Raleway:400,300,700|Arimo' rel='stylesheet' type='text/css'>
<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>
<div class="nav">
<a href="#">Home</a>
<ul>
<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.html">FAQ</a></li>
</ul>
</div>
<div class="container-fluid">
<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">
<!-- item 1 -->
<div class="item active">
<img src="img/carousel1.jpg" alt="carousel1">
<div class="carousel-caption">
<h3> What's up? </h3>
<p> It's working I guess? </p>
</div>
</div>
<!-- item 2 -->
<div class="item">
<img src="img/carousel2.jpg" alt="carousel2">
<div class="carousel-caption">
<h3> This is actuall pretty doable </h3>
<p> Definitely Works </p>
</div>
</div>
<!-- item 3 -->
<div class="item">
<img src="img/carousel3.jpg" alt="carousel3">
<div class="carousel-caption">
<h3> huh, actually pretty cool </h3>
<p> ugh, now to make it fit properly...</p>
</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>
<!-- Main jumbotron for a primary marketing message or call to action -->
<!-- <div class="jumbotron"> -->
<div class="container">
<h1>Tinus Wagner. Webmaster</h1>
<br>
<p><strong>Hopefully serving all of your web development needs (soon)</strong> </p>
<p>Hi there! I'm Tinus and I'm a budding programmer. I'm immensely interested in building interactive sites, web-based audio tools and toys, and visually stunning sites. Let's do this.</p>
</div><!-- /container -->
<div class="container">
<p>
<a href="about.html">About Me </a>
<a href="contact.html"> Contact Me</a>
</div>
</div><!-- /jumbotron -->
<!-- My work Bootstrap image stuff -->
<div class="container-fluid">
<div class="row" id="work">
<h3> My work </h3>
<div class= "col-xs-12 col-sm-6 col-lg-3">
<div class="image">
<img src="img/kitty.jpg" class="img-responsive">
<p> My work 1</p>
</div> <!-- image div -->
</div> <!-- col-md-3 div -->
<div class= "col-xs-12 col-sm-6 col-lg-3">
<div class="image">
<img src="img/kitty.jpg" class="img-responsive">
<p> My work 2</p>
</div> <!-- image div -->
</div> <!-- col-md-3 div -->
<div class= "col-xs-12 col-sm-6 col-lg-3">
<div class="image">
<img src="img/kitty.jpg" class="img-responsive">
<p> my work 3</p>
</div> <!-- image div -->
</div> <!-- col-md-3 div -->
<div class= "col-xs-12 col-sm-6 col-lg-3">
<div class="image">
<img src="img/kitty.jpg" class="img-responsive">
<p> my work 4</p>
</div> <!-- image div -->
</div> <!-- col-md-3 div -->
<div class= "col-xs-12 col-sm-6 col-lg-3">
<div class="image">
<img src="img/kitty.jpg" class="img-responsive">
<p> my work 5</p>
</div> <!-- image div -->
</div> <!-- col-md-3 div -->
<div class= "col-xs-12 col-sm-6 col-lg-3">
<div class="image">
<img src="img/kitty.jpg" class="img-responsive">
<p> my work 6</p>
</div> <!-- image div -->
</div> <!-- col-md-3 div -->
<div class= "col-xs-12 col-sm-6 col-lg-3">
<div class="image">
<img src="img/kitty.jpg" class="img-responsive">
<p> my work 7</p>
</div> <!-- image div -->
</div> <!-- col-md-3 div -->
<div class= "col-xs-12 col-sm-6 col-lg-3">
<div class="image">
<img src="img/kitty.jpg" class="img-responsive">
<p> my work 8</p>
</div> <!-- image div -->
</div> <!-- col-md-3 div -->
</div> <!-- row div -->
</div> <!-- container-fluid div -->
<div class="container3">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-xs-6">
<h2>Portfolio Concept</h2>
<p>For my portfolio I've collected a few sites that I really like. They're mostly quite minimal and clean. Have a look! </p>
<p><a class="btn btn-default" href="concepts.html" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4 col-xs-3">
<h2>Project Goals</h2>
<p>Obviously this is just the beginning, but I have a few goals </p>
<p><a class="btn btn-default" href="goals.html" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4 col-xs-3">
<h2>Course Goals</h2>
<p>Why I'm doing this, what I'd like to do, and where I'd like to end up</p>
<p><a class="btn btn-default" href="course.html" 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
* { box-sizing: border-box; }
body {
padding-top: 20px;
}
.nav {
position: fixed;
width: 100%;
top: 0;
background-color: black;
padding: 20px 10px 5px 5px;
z-index: 1;
}
.nav a {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 1.2em;
color: white;
/*transition color dictates how quick mouse.hover takes to happen*/
transition: color 800ms;
-webkit-transition: color 600ms;
}
/*dope on-mouse hover effect*/
.nav a:hover {
color: #ff0;
text-decoration: none;
}
.nav ul {
float: right;
}
.nav ul li {
display: inline-block;
float: left;
}
.nav ul li a {
padding: 20px 10px 5px 5px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
}
.carousel-caption {
top: 15%;
padding-bottom: 10%;
}
.carousel-control {
color: orange;
}
.jumbotron {
background-image: url("../img/landscape.jpg");
background-size: #%;
}
.container {
color: white;
}
#work h3 {
text-align: center;
padding: 1px;
color: orange;
font-size: 2.2em;
}
/*index page responsive design stuff*/
/*typography*/
h1,
h2,
h3 {
font-family: 'Raleway', 'Arimo', Arial, sans-serif;
font-weight: 800;
}
li {
font-family: 'Arimo', Times, 'Times New Roman', serif;
}
/*Contact Page*/
* { box-sizing: border-box; }
body {
padding-top: 20px;
}
.nav {
position: fixed;
width: 100%;
top: 0;
background-color: black;
padding: 20px 10px 5px 5px;
}
.nav a {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 1.2em;
color: white;
/*transition color dictates how quick mouse.hover takes to happen*/
transition: color 800ms;
-webkit-transition: color 600ms;
}
/*dope on-mouse hover effect*/
.nav a:hover {
color: #ff0;
text-decoration: none;
}
.nav ul {
float: right;
}
.nav ul li {
display: inline-block;
float: left;
}
.nav ul li a {
padding: 20px 10px 5px 5px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
html {
background:
linear-gradient(
to right,
rgba(89, 98, 106, 1),
rgba(89, 98, 106, 0.1)
), url("../img/about_back.jpg") no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.container {
width: 60%;
margin: 0 auto;
}
.header {
text-align: center;
padding-top: 15%;
padding-bottom: 2%;
margin-bottom: 15px;
}
.notice {
text-align: center;
padding-bottom: 1%;
}
.email {
display: inline-block;
text-align: center;
width: 10vw;
margin-left: 42%;
margin-right: 45%;
padding: 1%;
border: 8px solid #70819A;
}
}
.email p {
position: absolute;
width: 100vw;
left: calc(-50vw + 50%);
}
.bye {
text-align: center;
padding-top: 1%;
}
.bye p {
position: relative;
margin-top: 1%;
padding-top: 14%;
}
footer {
width: 60%;
margin: 0 auto;
}
.icons {
text-align: center;
}
/*Typography*/
h1,
h2,
h3 {
font-family: 'Raleway', 'Arimo', Arial, sans-serif;
font-weight: 800;
}
li {
font-family: 'Arimo', Times, 'Times New Roman', serif;
}
.container h1 {
color: white;
}
.carousel-caption h3 {
font-family: 'Raleway', 'Arimo', Arial, sans-serif;
font-weight: 1000;
color: orange;
font-size: 5em;
}
.carousel-caption p {
font-family: 'Raleway', 'Arimo', Arial, sans-serif;
font-weight: 400;
color: black;
font-size: 2em;
}
/*About Page Styling*/
* { box-sizing: border-box; }
body {
padding-top: 2%;
}
.nav {
position: fixed;
width: 100%;
top: 0;
background-color: black;
padding: 20px 10px 5px 5px;
}
.nav a {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 1.2em;
color: white;
/*transition color dictates how quick mouse.hover takes to happen*/
transition: color 800ms;
-webkit-transition: color 600ms;
}
/*dope on-mouse hover effect*/
.nav a:hover {
color: #ff0;
text-decoration: none;
}
.nav ul {
float: right;
}
.nav ul li {
display: inline-block;
float: left;
}
.nav ul li a {
padding: 20px 10px 5px 5px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.container-fluid h2 {
color: orange;
}
.intro p {
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-size: 3em;
font-weight: 100;
-webkit-margin-before: 0;
}
.skills-column h3 {
text-align: center;
text-transform: uppercase;
}
.main-text h3 {
font-size: 2em;
}
.main-text p {
font-family: 'Arimo', Arial, 'Source Sans Pro', sans-serif;
font-size: 18px;
}
.skills-column {
background-color: lightblue;
padding-bottom: 39%
}
body {
background-color: #fffeea;
color: #34495e;
}
/*Typography*/
h1,
h2,
h3 {
font-family: 'Raleway', 'Arimo', Arial, sans-serif;
font-weight: 800;
}
li {
font-family: 'Arimo', Times, 'Times New Roman', serif;
font-size: 1.8em;
}
h2 {
font-size: 4em;
font-weight: 1000;
padding-top: 5%;
text-align: center;
}
h3 {
font-size: 3em;
font-weight: 900;
padding-top: 15px;
text-align: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment