Skip to content

Instantly share code, notes, and snippets.

@Ahnita

Ahnita/Custom Media Screen FAQ

Last active August 29, 2015 14:22
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 Ahnita/bb8040d558a66eadfa76 to your computer and use it in GitHub Desktop.
Save Ahnita/bb8040d558a66eadfa76 to your computer and use it in GitHub Desktop.
Download ZIP
FAQ
Raw
Custom Media Screen FAQ
.nav ul li {
display: inline-block;
padding: 20px 10px 20px;
}
.nav ul li a {
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
z-index:0;
}
.nav {
background-color: #000;
float: right;
width: 100%;
position: fixed;
z-index: 2;
}
a img {
z-index: 3;
float: left;
position: fixed;
left: 0;
margin-top: 1%;
margin-left: 1%;
}
.nav a img {
float: none;
}
.nav ul {
float: right;
}
li a {
transition: color 600ms;
}
.nav ul li a:hover {
color: #D42163;
text-decoration: none;
}
html {
background-color: #000;
}
.faq-container {
top: 100px;
padding: 10px 5px 10px;
background-color: #000;
}
.div {
display: block;
}
.body {
background-color: #000;
font-family: 5px 'Josefin Slab', serif, Arial;
}
.panel-heading {
font: 15px 'Josefin Sans', sans-serif;
}
.faq-container {
padding: 50px 50px 50px;
background-color: #000;
}
.panel-group {
margin-top: 30px;
}
@media screen and (max-width: 768px) {
.panel-group {
margin-top: 80px;
}
.nav ul li a{
margin-left: 20%;
word-spacing: 5%;
}
a img {
margin-top: 1%;
}
Raw
FAQ CSS
.nav ul li {
display: inline-block;
padding: 20px 10px 20px;
}
.nav ul li a {
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: 'Josefin Sans', serif;
color: #FAFFFF;
}
.nav {
background-color: rgba(0, 0, 0, 0.25);
float: right;
width: 100%;
}
.nav ul {
float: right;
}
li a {
transition: color 600ms;
}
.nav ul li a:hover {
color: #D42163;
text-decoration: none;
}
html {
background-color: #000;
}
.faq-container {
top: 100px;
padding: 10px 5px 10px;
background-color: #000;
}
.div {
display: block;
}
.body {
background-color: #000;
font-family: 5px 'Josefin Slab', serif, Arial;
}
.header h2 {
font: 48px 'Josefin Sans', sans-serif;
color: #FFFEF9;
background-color: #000;
}
.panel-heading {
font: 15px 'Josefin Sans', sans-serif;
}
Raw
FAQ HTML
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<link href="css/faq.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Josefin+Slab' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap Javascript-->
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>Graces Ahn Bustamante FAQ</title>
<!--[if lt IE 9]>
<script src = "dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class = "nav">
<ul>
<li><a href= "http://gracesahnbustamante.bitballoon.com/">Home</a></li>
<li><a href= "http://gracesahnbustamante.bitballoon.com/about">About</a></li>
<li><a href= "http://gracesahnbustamante.bitballoon.com/Projects">Projects</a></li>
<li><a href="http://gracesahnbustamante.bitballoon.com/Contact">Contact</a></li>
<li><a href="http://gracesahnbustamante.bitballoon.com/FAQ">FAQ</a></li>
</ul>
</div> <!--End of Nav -->
<div class = "header">
<h2>Frequently Asked Questions</h2>
</div>
<div class = "faq-container">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class ="glyphicon glyphicon-plus"></span>
Do you offer responsive design solutions?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Yes! Responsive web design is a bullet proof practice that ensures your website is accessible to everyone - even if they don't own a traditional computer.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class ="glyphicon glyphicon-plus"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
It emerged from a desire to help and make things better. I've spent about 8 years in Singapore helping out in implementation projects that it became a habit. The web is the largest resource of information and it made life easier looking for things to buy and to find locations. My return to the Philippines is like going inside a time capsule, I was back in the 90's when it comes to technology. I realized a greater purpose in web development.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class ="glyphicon glyphicon-plus"></span>
What is your design process?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
My design process is to first get the client's requirements, build the design and concept and present it. We got through a feedback loop to see if there's anything that needs to be revised. Once everything is approved, that's the only time I can start cracking my fingers to make your website. After everything's done, I ask for a final check to see if there's any revisions and improvement before launching.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFOUR" aria-expanded="false" aria-controls="collapseFOUR"><span class ="glyphicon glyphicon-plus"></span>
Do you provide support after the website gets built?
</a>
</h4>
</div>
<div id="collapseFOUR" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFOUR">
<div class="panel-body">
Certainly, for minor issues I can definitely help but if you require a redesign a month after launching, it will be considered as a new project.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFIVE" aria-expanded="false" aria-controls="collapseFIVE"><span class ="glyphicon glyphicon-plus"></span>
How long will the project take?
</a>
</h4>
</div>
<div id="collapseFIVE" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFIVE">
<div class="panel-body">
It depends on the complexity of the project. If it's just a few pages, it may take 1 to 2 weeks. If it's a website that requires lots of pages linked to a database, it may take a month.
</div>
</div>
</div>
</div> <!-- End of FAQ container -->
</body>
</html>
Raw
Version 2 FAQ HTML
<!doctype html>
<html lang ="en">
<head>
<meta charset = "utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="css/faq.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Josefin+Slab' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap Javascript-->
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>Graces Ahn Bustamante FAQ</title>
<!--[if lt IE 9]>
<script src = "dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class = "header">
<a href= "http://gracesahnbustamante.bitballoon.com/">
<img src="img/logo_ahnita.png" class="img.responsive" alt="Ahn Bustamante">
</a>
<div class = "nav">
<ul>
<li><a href= "http://gracesahnbustamante.bitballoon.com/about">About</a></li>
<li><a href= "http://gracesahnbustamante.bitballoon.com/Projects">Projects</a></li>
<li><a href="http://gracesahnbustamante.bitballoon.com/Contact">Contact</a></li>
<li><a href="http://gracesahnbustamante.bitballoon.com/FAQ">FAQ</a></li>
</ul>
</div>
</div> <!--- end of header -->
<div class = "faq-container">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class ="glyphicon glyphicon-plus"></span>
Do you offer responsive design solutions?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Yes! Responsive web design is a bullet proof practice that ensures your website is accessible to everyone - even if they don't own a traditional computer.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class ="glyphicon glyphicon-plus"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
It emerged from a desire to help and make things better. I've spent about 8 years in Singapore helping out in implementation projects that it became a habit. The web is the largest resource of information and it made life easier looking for things to buy and to find locations. My return to the Philippines is like going inside a time capsule, I was back in the 90's when it comes to technology. I realized a greater purpose in web development.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class ="glyphicon glyphicon-plus"></span>
What is your design process?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
My design process is to first get the client's requirements, build the design and concept and present it. We got through a feedback loop to see if there's anything that needs to be revised. Once everything is approved, that's the only time I can start cracking my fingers to make your website. After everything's done, I ask for a final check to see if there's any revisions and improvement before launching.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFOUR" aria-expanded="false" aria-controls="collapseFOUR"><span class ="glyphicon glyphicon-plus"></span>
Do you provide support after the website gets built?
</a>
</h4>
</div>
<div id="collapseFOUR" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFOUR">
<div class="panel-body">
Certainly, for minor issues I can definitely help but if you require a redesign a month after launching, it will be considered as a new project.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFIVE" aria-expanded="false" aria-controls="collapseFIVE"><span class ="glyphicon glyphicon-plus"></span>
How long will the project take?
</a>
</h4>
</div>
<div id="collapseFIVE" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFIVE">
<div class="panel-body">
It depends on the complexity of the project. If it's just a few pages, it may take 1 to 2 weeks. If it's a website that requires lots of pages linked to a database, it may take a month.
</div>
</div>
</div>
</div> <!-- End of FAQ container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment