Skip to content

Instantly share code, notes, and snippets.

@khan-hasan

khan-hasan/index.html

Created September 6, 2017 16:29
Show Gist options
  • Save khan-hasan/6a132b03c23408dfe5ab8831b0714b27 to your computer and use it in GitHub Desktop.
Save khan-hasan/6a132b03c23408dfe5ab8831b0714b27 to your computer and use it in GitHub Desktop.
Download ZIP
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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<!-- I am linking a Bootstrap CSS and Bootstrap JS file through a CDN, which means that the files will load from an external serve rather than from my local computer. -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<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>
<body>
<!-- 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</a></li>
<li><a href="FAQ.html">FAQ</a></li>
</ul>
</div>
<!-- end nav -->
<!-- Main jumbotron for a primary marketing message or call to action -->
<!--
<div class="jumbotron">
<div class="container">
<h1>Hasan Khan</h1>
<p id="header-intro-tagline"><strong>Making websites since 2017.</strong><br> I handcraft simple, yet vibrant functional webpages to meet your business needs.<br><i>Have ideas for a website? Let's create something amazing together!</i></p>
<div class="index-nav">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>
</div>
<div class="container">
</div>
</div>
-->
<div class="container-fluid">
<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">
<div class="item active">
<img src="img/train.jpg" alt="...">
<div class="carousel-caption">
<h3>Hasan Khan</h3>
<p><i>Web Developer</i></p>
</div>
</div>
<div class="item">
<img src="img/nyc.jpg" alt="...">
<div class="carousel-caption">
<h3>Have ideas for a website?</h3>
<p><i>Let's create something amazing together!</i></p>
</div>
</div>
<div class="item">
<img src="img/typewriter2.jpg" alt="...">
<div class="carousel-caption">
<h3>I handcraft simple, yet vibrant functional webpages to meet your business needs.</h3>
<p><i>Making websites since 2017.</i></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>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>Since I am completely new to web development, I will only have the projects from this course to include in my portfolio. My theme will revolve around serving the client, using words like "you tell me how" and "you design." Visually, I’d like a theme of cities (buildings, offices, etc). Essentially, my website itself should show off my web development skills before you even look at my portfolio projects.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>I am studying at CareerFoundry full-time. I have no other part-time job or college. I very strictly follow the Pomodoro studying technique combined with KanBan Flow to schedule my day. I plan on doing 16 Pomodoros on day one, followed by 14 Pomodoros the next day, then 12 the next day. Then, I will take the fourth day off, and then repeat. I will strictly follow this schedule until I finish the course.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>Since I have no industry experience or even a college degree, I am relying on this course to teach me what I need in order to enter the workforce as an entry level developer.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<!-- /col -->
</div>
<!-- /row -->
<hr>
</div>
</div>
<!-- /container -->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- jQuery must be loaded before JS because Bootstrap needs the jQuery to access some of that JS. -->
<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;
}
.carousel {
margin-left: -15px;
margin-right: -15px;
}
#header-intro-tagline {
color: white;
}
#carousel-example-generic {
margin-top: 70px;
}
.carousel-caption {
margin-bottom: 200px;
}
.carousel-caption > h3 {
font-size: 29px;
text-shadow: 2px 2px 4px gray;
}
.carousel-caption > p {
font-size: 19px;
text-shadow: 2px 2px 4px gray;
}
/**** 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 {
z-index: 1;
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