Skip to content

Instantly share code, notes, and snippets.

@ellathur

ellathur/faqs.html

Created December 29, 2016 18:41
Show Gist options
  • Save ellathur/70ad4d55ec2430e55f19bba4e8dab0bf to your computer and use it in GitHub Desktop.
Save ellathur/70ad4d55ec2430e55f19bba4e8dab0bf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
faqs.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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>FAQs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css"
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" type="text/css">
<!--link rel="stylesheet" <link href="https://fonts.googleapis.com/css?family=lobster" type="text/css"-->
</head>
<body>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Work</a></li><!--Come back and finish link-->
<li><a href="contact.html">Contact</a></li>
<li><a href="faqs.html">FAQs</a></li>
</ul>
</div>
<div class="faqscontainer"><!--start container-->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-plus"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Having pursued degrees mainly based on the built environment and have mainly worked in the biotech industry for the past 10 years I have finally decided to learn to code and for that matter web development.
</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" aria-expanded="false" aria-controls="collapseTwo">
<span class="glyphicon glyphicon-plus"></span>
“What other Languages and frameworks have you learned so far?”
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
I started learning to code in python and thereafter Django as a framework. Learn Python The Hardway was useful.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingThree">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="glyphicon glyphicon-plus"></span>
“Who are your clients?”
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingFour">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
<span class="glyphicon glyphicon-plus"></span>
“What is your average project turnaround?”
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Coming Soon!
</div>
</div>
</div>
</div><!--end container-->
<!-- jQuery must be before bootstrap.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Raw
styles.css
.jumbotron {
background-image: url("../img/gallery.jpg");
background-size: contain;
}
.jumbotron p {
color: white;
font-family: lato;
}
.jumbotron h1 {
color: /*#333;*/ #34495e;
font-family: 'Lobster Two', cursive;
}
/**** Navbar Disabled
.navbar {
background-color: #34495e;
padding: 0;
margin: 0;
text-transform: uppercase;
}
.navbar-list ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 16px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
**/
/***NavBar****/
.nav ul li {
display: inline-block;
padding: 20px 10px 20px;
float: right;
}
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0;
}
.nav ul li>a {
color: white;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
}
.nav a:hover {
color: #ff0;
text-decoration: none;
}
/*****Contact styles***/
.container1 {
width: 90%;
margin: 5% 5%;
color: white;
text-align: center;
font-family: lato;
}
.glyphicon {
padding-right: .5em;
}
.contact {
}
.contactme {
text-align: center;
padding-top: 5%;
}
.Bold-email {
font-weight: bold;
font-size: 2em;
font-weight: 100;
}
.contact-address>p {
font-size: 2em;
font-weight: 100;
}
.follow a {
}
img.resize {
max-width: 5%;
max-height: 2%;
padding-bottom: 5%;
}
img.gmap {
max-width: 50%;
max-height: 50%;
}
body {
background-color: #34495e;
}
/****FAQs***/
.panel-default>.panel-heading {
color: #44f;
background-color: white;
border-style: none;
}
#headingOne {
padding-top: 5%
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment