Skip to content

Instantly share code, notes, and snippets.

@khan-hasan

khan-hasan/faq.html

Created September 4, 2017 18:37
Show Gist options
  • Save khan-hasan/90bf150fd8a181ba710619e3cb41e07c to your computer and use it in GitHub Desktop.
Save khan-hasan/90bf150fd8a181ba710619e3cb41e07c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
faq.html
<!doctype 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>FAQ</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="bodyfaq">
<!-- Style this nav bar however you want later. -->
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<!-- # is called a hash tag link and is a way to point to the page you're current on. It can also be used a a placeholder if you don't yet know the link. -->
<li><a href="about.html">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<!-- end nav -->
<div class="content">
<h1>FAQs</h1>
<div class="container">
<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>
What made you become a web developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
I don't really have any previous knowledge in the web development field, but I've been trying to enter the software industry for some time now. I completed 3 years of college as an Engineering student at Georgia Perimeter College. The curriculum included very little programming, but it did somewhat introduce me to MATLAB, Mathematica, Python, and HTML. Also, I most recently worked part-time as an after-school instructor at an elementary school where I introduced students to coding in Scratch and on Code.org. I also completed several Udacity courses on Android development in 2016. All this eventually led me to enroll in a web development intensive course at CareerFoundry in August 2017.
</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>
Why should we hire you?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
I tend to be quite obsessive when it comes to following set schedules and meeting deadlines. If I have committed to a task, my overachieving, perfectionist personality drives me to ensure that my work is completed in way that surpasses expectations.
</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>
What projects have you completed? What are you currently working on?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
I am currently in the process of developing my very first functional website. It is in fact this very portfolio site, which gives you an idea of what I'm about.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-plus"></span>
What technologies do you use?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
I use HTML and CSS combined with the Bootstrap framework to build out the front-end of websites. I am also currently learning JavaScript with jQuery, which will make the front-end functional. The back-end of my websites will be written in Ruby on the Ruby on Rails framework.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-plus "></span>
What other technology fields are you interested in?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
There are too many things to list here that I would like to learn. But, I recently watched the movie Hidden Figures, and it reignited my old childhood fascination in astronomy. I would like to learn low-level machine language programming in an astronomy or science application like at NASA.
</div>
</div>
</div>
</div>
</div>
</div>
<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
/**** Index page ****/
.jumbotron {
background-image: url("../img/train.jpg");
background-size: cover;
color: white;
}
.jumbotron p,
.jumbotron h1 {
text-shadow: 2px 2px 4px black;
}
.index-nav a {
color: yellow;
padding-right: 1.5em;
}
#header-intro-tagline {
color: white;
}
/**** Contact page ****/
* {
box-sizing: border-box;
}
.contact-body {
background-image: url(../img/typewriter.jpg);
background-size: cover;
padding-top: 90px;
margin: 0px;
}
.middle {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.contact-box {
margin-top: 3em;
}
.address img {
display: block;
margin: 0 auto;
}
.header h1 {
font-size: 4em;
color: white;
text-shadow: 2px 2px 4px black;
}
.contact-box h4 {
font-style: italic;
font-size: 1.1em;
color: white;
font-weight: 225;
text-shadow: 2px 2px 4px black;
font-family: Futura, Helvetica, Arial, sans-serif;
}
.contact-box a {
font-size: 1.5em;
color: yellow;
font-weight: 500;
text-shadow: 2px 2px 4px navy;
font-family: Futura, Helvetica, Arial, sans-serif;
}
.address p {
font-size: 1.5em;
color: yellow;
font-weight: 500;
text-shadow: 2px 2px 4px navy;
font-family: Futura, Helvetica, Arial, sans-serif;
}
/* The glyphicons overlap the nav bar when you zoom the page and scroll. Debug it. */
.glyphicon {
font-size: 1.5em;
color: white;
font-weight: 500;
text-shadow: 2px 2px 4px navy;
}
/* Either the li, li text size, or something else is affecting the size of the letters (I think). Everything in the nav is very slightly smaller on this page compared to the nav on contact.html. Debug later. */
.nav ul li {
display: inline-block;
padding: 20px 10px 20px;
}
.nav ul {
float: right;
}
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0;
/* Transition property gets added here, not to the pseudo-class. */
transition: color 600ms;
/* called a vendor prefix */
-webkit-transition: color 600ms;
}
.nav ul li a {
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* A pseudo-class is used to define a special state of an element. Most often used with links since links have different states. */
.nav a:hover {
color: #ff0;
text-decoration: none;
}
/**** FAQ Page ****/
.glyphicon-plus {
color: white;
font-size: 1.5em;
font-weight: 500;
text-shadow: 2px 2px 4px black;
font-family: Futura, Helvetica, Arial, sans-serif;
}
.panel-default .panel-heading {
font-family: Futura, Helvetica, Arial, sans-serif;
font-size: 1.5em;
color: #2b4846;
font-weight: 500;
text-shadow: 2px 2px 4px gray;
}
.bodyfaq {
background-image: url(../img/books.jpg);
background-size: cover;
}
.bodyfaq h1 {
text-align: center;
font-size: 4em;
color: white;
text-shadow: 2px 2px 4px gray;
}
.panel-body {
font-family: Futura, Helvetica, Arial, sans-serif;
color: white;
font-weight: 500;
background-color: #2b4846;
opacity: 0.75;
}
.content {
padding-top: 70px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment