Skip to content

Instantly share code, notes, and snippets.

@Tinusw

Tinusw/contact.html

Created January 6, 2016 21:51
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Tinusw/38e86272cbf8cbd43b9f to your computer and use it in GitHub Desktop.
Download ZIP
1.7 Bootstrap Components + Plugins
Raw
contact.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> Contact </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=Archivo+Narrow|Fira+Sans:400,300|Karla:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/contact_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.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Work</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div>
<div class="container">
<div class="header">
<h1> Wanna Chat? </h1>
</div>
<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:[email protected]"> 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>
<p> thumbs up glyphicon for the win <span class="glyphicon glyphicon-heart"></span> </p>
</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>
<!-- Can place script tags with JavaScript files here -->
</body>
<footer>
<div class="icons">
<a href="https://twitter.com/thatguytinus"><img src="img/twitter.png" height="50px" width="60px"></a>
<a href="https://github.com/Tinusw"><img src="img/github.png" height="50px"></a>
<a href="https://soundcloud.com/vertelmy"><img src="img/sndcld.jpeg" height="50px"></a>
</div>
</footer>
</html>
Raw
faq.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> FAQ </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=Archivo+Narrow|Fira+Sans:400,300|Karla:400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/faq_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="home">
<a href="index.html">Home</a>
</div>
<div class="container">
<h1> FAQ </h1>
<div class="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="#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 class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</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 here -->
</body>
</html>
Raw
faq_styles.css
* { box-sizing: border-box; }
h1 {
color: orange;
}
html {
background-color: #4E4D5B;
}
body {
background-color: #4E4D5B;
}
.home a {
color: orange;
padding-left: 1%;
}
.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,
a {
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-size: 1.5em;
font-weight: 100;
-webkit-margin-before: 0;
}
.panel-body {
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: 300;
-webkit-margin-before: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment