Skip to content

Instantly share code, notes, and snippets.

@Tinusw

Tinusw/index.html

Created January 17, 2016 21:01
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Tinusw/e848eeaebbf3b9c1cb83 to your computer and use it in GitHub Desktop.
Download ZIP
1.11 Responsive Website
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>
<!-- NAVBAR -->
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigtaion">
<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">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- End navbar header -->
<div class="navbar-collapse collapse">
<div class="tinus">
<a href="#">Tinus</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
</div>
</nav> <!-- END BOOTSTRAP NAVBAR -->
<!-- <div class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div> -->
<!-- IMAGE CAROUSEL -->
<div class="container-fluid" id="home">
<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> Welcome </h3>
<p> So this is basically the whole thing </p>
</div>
</div>
<!-- item 2 -->
<div class="item">
<img src="img/carousel2.jpg" alt="carousel2">
<div class="carousel-caption">
<h3> CSS is a pain </h3>
<p> Especially once you merge CSS sheets... </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...success</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> <!-- Definitely need this DIV according to Bootstrap documentation -->
<!-- MY WORK IMAGES USING BOOTSTRAP GRID -->
<div class="container-fluid2">
<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 -->
<!-- THREE SUB CATEGORIES = PORTFOLIO/PROJECT + COURSE GOALS -->
<div class="containerCategories">
<!-- Example row of columns -->
<div class="row" id="categories">
<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 -->
</div> <!-- /container -->
<!-- ABOUT PAGE -->
<div class="container-fluid">
<div class="row" id="about">
<h1>About Me</h1>
<div class= "col-xs-12 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-12 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-12 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>
</div> <!-- Container-fluid Div -->
<!-- CONTACT PAGE -->
<div class="containerContact" id="contact">
<div class="row" id="contact">
<div class="faqheader">
<h1> Wanna Chat? </h1>
</div>
<div class="container anchor" id="process">
<div class="notice">
<h3> I love working on web applications and pretty soon I will nail both HTML and CSS. They're amazing tools that you can do some crazy stuff with. But if you'd like to give me an internship, I probably won't say no!</h3>
</div>
<div class="email">
<a href="mailto:tinus.wagnersa@gmail.com"> Email Me</a>
<p> I'll be waiting :) </p>
</div>
<div class="bye">
<h2><span class="glyphicon glyphicon-triangle-right"></span> Talk soon! <span class="glyphicon glyphicon-triangle-left"></span> </h2>
<p> ..or check me out on a few other places <span class="glyphicon glyphicon-thumbs-up"></span> </p>
<div class="icons">
<a href="https://twitter.com/thatguytinus"><img src="img/social/twitter.png" height="50px" width="60px"></a>
<a href="https://github.com/Tinusw"><img src="img/social/github.png" height="50px"></a>
<a href="https://soundcloud.com/vertelmy"><img src="img/social/sndcld.jpeg" height="50px"></a>
</div>
<p> thumbs up glyphicon for the win <span class="glyphicon glyphicon-heart"></span> </p>
</div>
</div>
</div>
</div>
<!-- FAQ -->
<div class="containerFAQ" id="faq">
<h1> FAQ </h1>
<div class="header">
<div class="container anchor" id="process">
<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="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-plus"></span> Why should you pick Tinus?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse ">
<div class="panel-body">
Immaculate style, impeccable taste in music, and a spring in his step. That's three of the 100 reasons why you should hire Tinus. He's an eager beaver, a self-starter, and oh boy, he doesn't mess around.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="glyphicon glyphicon-plus"></span> What are his skills?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
A better question would be what skill doesn't he have? Cooking? Got it. Dancing? He's got some moves. An over-inflated ego? Sure, if you wanna call that a skill he's not going to stop you!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="glyphicon glyphicon-plus"></span> Is Tinus real?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Some say he was born underneath a holy star. Others that he can survive on the moisture of a single drop of rain for months. All we really know is this guy wants to learn how to code.
</div>
</div>
</div>
</div>
</div>
</div>
</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>
<!-- SMOOOOOTH SCROLLING!!!! -->
<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
syles.css
* { box-sizing: border-box; }
html,body{height:100%;}
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;
}
}
}
body {
height: 100%;
position: relative;
}
.container {
width: 60%;
margin: 0 auto;
}
.anchor {
padding-top: 50px;
padding-bottom: 20px;
width: 80%;
}
/* NAVBAR */
.navbar {
position: fixed;
width: 100%;
top: 0;
background-color: black;
padding: 5px 10px 5px 5px;
z-index: 1;
}
.navbar-header {
font-size: 1.6em;
font-weight: 1000;
color: orange;
}
/*Project name = tinus*/
.tinus {
text-transform: uppercase;
}
.tinus a {
padding-top: 2%;
padding-left: 1%;
color: Orange;
}
/*Rest of the navbar*/
.navbar 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*/
.navbar a:hover {
color: orange;
text-decoration: none;
}
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
padding: 20px 10px 5px 5px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
/*Carousel sizes*/
.container-fluid {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
height: 100%;
}
.carousel-caption {
top: 15%;
padding-bottom: 10%;
}
.carousel-caption p {
padding-bottom: 5%;
}
/*Set images within carousel to fit screen*/
.carousel,.item,.active{height:100%;}
/* MY WORK IMAGES STYLING WITH BOOTSTRAP */
.container-fluid {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
height: 100%;
}
.container-fluid2 {
padding-left: 0;
padding-right: 0;
padding-top: 50px;
margin-left: auto;
margin-right: auto;
height: 80%;
}
#work {
text-align: center;
padding-top: 5% ;
padding-bottom: 10%;
color: orange;
}
#work h3 {
font-size: 2.8em;
padding-bottom: 0;
}
.image p {
font-size: 1.2em;
}
/*THREE SUB CATEGORIES*/
.containerCategories {
position: relative;
padding-bottom: 5%;
text-align: center;
color: orange;
background-color: #4E4D5B;
}
.containerCategories p {
font-size: 1.3em;
}
#categories {
height: 20%;
}
/*ABOUT ME PAGE*/
.container-fluid {
height: 100%;
}
.container-fluid h1{
padding-top: 5%;
padding-bottom: 4.3%;
text-align: center;
color: orange;
}
.container-fluid h2 {
color: white;
}
#skill-list li {
font-size: 1.3em;
}
/*BACKGROUND IMAGE*/
.jumbotron {
background-image: url("../img/landscape.jpg");
background-size: #%;
}
/*CONTACT PAGE*/
#contact {
position: inherit;
height: 100%;
}
.header {
padding-top: 1%;
text-align: center;
padding-bottom: 2%;
margin-bottom: 15px;
}
.notice {
text-align: center;
padding-bottom: 1%;
}
.email {
margin: 0 auto;
width: 10%;
display: block;
text-align: center;
position: relative;
border: 4px solid orange;
padding: 1.2%;
}
.email a {
color: white;
font-size: 2em;
padding-bottom: 1%;
transition: color 800ms;
-webkit-transition: color 600ms;
}
/*dope on-mouse hover effect*/
.email a:hover {
color: orange;
text-decoration: none;
}
.email p {
position: absolute;
width: 100vw;
left: calc(-50vw + 50%);
color: black;
padding-bottom: 1%;
font-size: 0.2em;
}
.bye {
text-align: center;
padding-top: 1%;
}
.bye h2 {
color: orange;
}
.bye p {
position: relative;
margin-top: 1%;
padding-top: 2%;
color: orange;
}
/*Icons for other contact points */
.icons {
text-align: center;
}
/*FAQ STYLING */
.containerFAQ {
color: orange;
height: 100%;
padding-top: 15%;
padding-left: 1%;
margin: 0 auto;
position: relative;
width: 30vw
}
.panel > .panel-heading {
background-image: none;
background-color: #4E4D5B;
color: white;
}
.panel-body {
color: orange;
background-color: #6D6C7C;
}
.panel-title {
color: orange;
}
/*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*/
.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: 1.125em;
}
.skills-column {
background-color: lightblue;
padding-bottom: 39%
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment