Skip to content

Instantly share code, notes, and snippets.

@khan-hasan

khan-hasan/index.html

Created September 9, 2017 02:03
Show Gist options
  • Save khan-hasan/78b0baf4d8c37efcd320f4ebf74c4907 to your computer and use it in GitHub Desktop.
Save khan-hasan/78b0baf4d8c37efcd320f4ebf74c4907 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 data-spy="scroll" data-target=".navbar">
<!-- each section (about, faq, etc) should be entirely in its own div class container or div class container-fluid -->
<!-- navbar starts here --> <!-- Collect the nav links, forms, and other content for toggling -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!-- This navbar-header div and its children are only for the collapsable navbar when the window gets small -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="projectName navbar-brand">
<!-- This is for the brand logo on the left side of the nav bar. -->
<a href="#">Project Name</a>
</div>
<!-- end projectName -->
</div>
<!-- end navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href='#about'>About</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-hasapopup="true" aria-expanded="false">
Work <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#project1">Project 1</a></li>
<li><a href="#project2">Project 2</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href='#faq'>FAQ</a></li>
</ul>
</div>
<!-- nav --> <!-- end navbar-collapse collapse -->
</div>
<!-- end nav container --> <!-- end container-fluid -->
</nav>
<!-- end navbar --> <!-- end navbar navbar-inverse navbar-fixed-top -->
<!-- navbar starts here -->
<!-- <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid" id="process">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> -->
<!-- Can replace this later with my name in cursive or some other brand name image. -->
<!-- <div class="projectName navbar-brand">
<a href="#">Project name</a>
</div> -->
<!-- end projectName -->
<!-- </div> -->
<!-- end navbar-header -->
<!-- <div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<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">About</a></li>
-->
<!-- <div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Work
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#project1">Project 1</a></li>
<li><a href="#project2">Project 2</a></li>
</ul>
</div>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div> -->
<!-- nav -->
<!-- </div> --><!-- end nav container --> <!-- end container-fluid -->
<!-- </div> --><!-- end navbar navbar-inverse navbar-fixed-top -->
<!-- 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 anchor" id="process">
<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>
<div class="container anchor" id="process">
<!-- 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 class="container anchor" id="work">
<div class="row">
<div id="project1" class="col-xs-12 col-sm-6 col-md-3 col-lg-4 anchor">
<img src="img/basketball.png" class="image-responsive" alt="Basketball">
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-4 anchor">
<img src="img/basketball.png" class="image-responsive" alt="Basketball">
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-4 anchor">
<img src="img/basketball.png" class="image-responsive" alt="Basketball">
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-4 anchor">
<img src="img/basketball.png" class="image-responsive" alt="Basketball">
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-4 anchor">
<img src="img/basketball.png" class="image-responsive" alt="Basketball">
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-4 anchor">
<img src="img/basketball.png" class="image-responsive" alt="Basketball">
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-4 anchor">
<img src="img/basketball.png" class="image-responsive" alt="Basketball">
</div>
<div id="project2" class="col-xs-12 col-sm-6 col-md-3 col-lg-4 anchor">
<img src="img/basketball.png" class="image-responsive" alt="Basketball">
</div>
</div>
</div>
<!-- end header -->
<!-- <div class="image column about-image about-column">
<img src="img/chair.png" alt="Workspace" width="100%">
</div>
<div class="intro column about-column">
<h2>Introduction</h2>
<p>Born in Silcon Valley. Bred in Atlanta. Lived in Dubai. Web developer. Student of Arabic. Spurs fan. <i>The Office</i> viewer.</p>
</div>
<div class="skills column about-column">
<h3>My Skills</h3>
<ul id="skill-list">
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
<div class="main-text">
<h3>More About Me</h3>
<p>My name is Hasan Khan. I was born to Indian parents in San Jose, California - at the heart of Silicon Valley - in 1992. I spent 4 years in Dubai, where I fell in love with the Arab culture in that desert wonderland. I've been in Metro Atlanta for the past 19 years. I played football for 10 years of my life, which includes varsity 'ball at Roswell High School, where I graduated from in 2010. I studied engineering at Georgia Perimeter College, where I discoverd my love for computer programming. As of 2017, I've found my home in the web development niche. And, my journey continues...</p>
</div> -->
<!-- end container -->
<div class="container-fluid anchor" id="about">
<div class="header about-header">
<h1>About Me</h1>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="image column about-image about-column">
<!-- This image must be optimized to reduce load time. There is a lag. -->
<img src="img/chair.png" alt="Workspace" width="100%" class="image-responsive">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="intro column about-column">
<h2>Introduction</h2>
<p>Born in Silcon Valley. Bred in Atlanta. Lived in Dubai. Web developer. Student of Arabic. Spurs fan. <i>The Office</i> viewer.</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="skills column about-column">
<h3>My Skills</h3>
<ul id="skill-list">
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</div>
</div>
<div class="main-text about-main-text">
<h3>More About Me</h3>
<p>My name is Hasan Khan. I was born to Indian parents in San Jose, California - at the heart of Silicon Valley - in 1992. I spent 4 years in Dubai, where I fell in love with the Arab culture in that desert wonderland. I've been in Metro Atlanta for the past 19 years. I played football for 10 years of my life, which includes varsity 'ball at Roswell High School, where I graduated from in 2010. I studied engineering at Georgia Perimeter College, where I discoverd my love for computer programming. As of 2017, I've found my home in the web development niche. And, my journey continues...</p>
</div>
</div>
<div class="container-fluid anchor" id="contact">
<div class="middle">
<div class="header">
<h1>Let's get in touch!</h1>
</div>
<!-- end header -->
<div class="email contact-box">
<h4>Shoot me an email:</h4>
<span class="glyphicon glyphicon-envelope"></span>
<a href="mailto:[email protected]"> [email protected]</a>
</div>
<!-- end email contact-box -->
<div class="phone contact-box">
<h4>Call, text, or leave a voicemail:</h4>
<span class="glyphicon glyphicon-earphone"></span>
<a href="tel:+1-123-456-7890"> (123) 456-7890</a>
</div>
<!-- end phone contact-box -->
<div class="address contact-box">
<h4>Or, stop by and see me in person:</h4>
<!-- This map glyphicon looks bigger than the envelope and earphone. Debug it. -->
<p><span class="glyphicon glyphicon-map-marker"></span> 123 Elm St<br>Timbuktu, AA 12345</p>
<img src="img/map.jpg" width="250em">
</div>
<!-- end address contact-box -->
</div>
<!-- end middle -->
</div>
<div class="container-fluid anchor" id="faq">
<div class="content">
<h1 id="faq-header">FAQs</h1>
<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>
<!-- /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 -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
if (href != undefined && href != '#') {
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
}
return false;
});
</script>
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</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;
}*/
/*Change all font to relative sizing using (for example, using ems).*/
/*(preferred) Change image height/width/size dimensions to %*/
/*Adjust padding/margin for each screen size col-md-4, col-xs-12, etc.*/
/*Some of the styling for Bootstrap's navbar component is very specific. To overwrite styles, you have to go to developer tools find the selector syntax. For example, nav>li>a:hover*/
body {
position: relative;
}
.projectName {
text-transform: uppercase;
}
.projectName a {
color: white;
}
/*.index-nav a {
color: yellow;
padding-right: 1.5em;
}*/
.carousel {
margin-left: -15px;
margin-right: -15px;
}
#header-intro-tagline {
color: white;
}
.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;
}
.col-md-3 > img {
width: 50%;
height: 50%;
margin: 6px;
}
/**** 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 ****/
#faq-header {
text-align: center;
}
.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);
/*The image repeats when screen is scaled to smaller size. Debug it.*/
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;
}
#contact {
background-image: url(../img/japanese_house.jpg);
/*Add a background image*/
background-attachment: fixed;
/*Give the background a fixed position so that it does not scroll when you scroll*/
background-size: cover;
/*Have the background cover the entire div section*/
color: white;
/*Change the color of the text on top so it is readable and adjust the padding as needed.*/
padding: 100px;
padding-top: 50px;
height: 700px;
}
/*About page*/
/* need to reasonably resize the text on this page and match up font, styles, and color themes across all 3 pages */
/* All these can be tinkered with until your're satisfied. */
/* need to reasonably resize the text on this page and match up font, styles, and color themes across all 3 pages */
* {
box-sizing: border-box;
}
/* All these can be tinkered with until your're satisfied. */
.about-container {
width: 80%;
margin: 0 auto;
}
.about-header h1 {
text-align: center;
}
.about-image {
height: auto;
display: inline-block;
float: left;
}
.about-column {
display: inline-block;
float: left;
}
.about-main-text {
clear: both;
padding-top: 5px;
padding: top right bottom left;
}
.about-header {
/* Play with this until your're satisfied. */
margin-bottom: 40px;
clear: left;
}
.intro.about-column {
padding: 0 20px;
}
.skills.column {
padding: 0 20px;
}
#skill-list {
margin-left: 50px;
}
/*Typography*/
.about-header h1 {
font-family: Futura, Helvetica, Arial, sans-serif;
}
.about-column h2 {
font-family: Futura, Helvetica, Arial, sans-serif;
}
.about column h3 {
font-family: Futura, Helvetica, Arial, sans-serif;
}
.about-main-text h3 {
font-family: Futura, Helvetica, Arial, sans-serif;
}
.about-column p {
font-family: Georgia, Garamond, serif;
}
.about-main-text p {
font-family: Georgia, Garamond, serif;
}
/*.nav li {
font-family: Georgia, Garamond, serif;
}*/
.skill-list li {
font-family: Georgia, Garamond, serif;
}
.intro p {
font-family: Futura, Helvetica, Arial, sans-serif;
font-size: 3em;
font-weight: 100;
-webkit-margin-before: 0;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
.anchor {
padding-top: 50px;
}
.about-body {
background-color: #fffeea;
color: #34495e;
padding-top: 90px;
}
.skills {
background-color: #5ad4c2;
/* The padding below did not get applied. Debug this later. */
padding: 100px;
/* a padding-top and a padding-bottom should be added here as directed in the Background and Colors section of Lesson 1.5. However, the padding did not work for me. I am waiting for a reply from my mentor and other CF users on how to correct this. */
}
/*.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;
}*/
.about-column p {
font-size: 2em;
}
.about-column {
width: 100%;
}
#faq {
padding-bottom: 200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment