Skip to content

Instantly share code, notes, and snippets.

@khan-hasan

khan-hasan/index.html

Created October 2, 2017 15:01
Show Gist options
  • Save khan-hasan/dac361d45fff98445a7fa2ac34f12d8f to your computer and use it in GitHub Desktop.
Save khan-hasan/dac361d45fff98445a7fa2ac34f12d8f to your computer and use it in GitHub Desktop.
Download ZIP
CF 2.8 | dynamically add work samples (images) to work section, dynamically add alternating border colors to those images
Raw
index.html
<!DOCTYPE html><!-- Instructs browser what version of HTML the page is written in. html indicates HTML5 -->
<html lang="en">
<!-- Specifies the language of the element's content -->
<head>
<!-- A container for metadata, data about the HTML document which is not displayed -->
<!-- Google Analytics -->
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107063946-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-107063946-1');
</script>
<meta charset="utf-8">
<!-- Browsers must know the character set to display the HTML page correctly. utf-8 covers almost all characters and symbols in the world. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- X-UA-Compatible specifies which version of IE should render the page. IE=edge displays content in the highest mode available. Both attributes go together. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Modifies viewport on mobile devices to make content responsive. -->
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hasan Khan's Portfolio</title>
<!-- Bootstrap CSS and Bootstrap JS files are being linked through a CDN, which means that the files will load from an external serve rather than from my local computer. JS files are linked at the end of the body tag. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Bootstrap core CSS. Latest compiled and minified CSS. -->
<link rel="stylesheet" href="css/styles.css">
<!-- Fonts from Google Fonts API for fonts used in this app -->
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Yellowtail" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!-- Condtional comment to be executed by IE only. HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries. IE8 does not allow styling of unknown elements by default. -->
<!--[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]-->
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body data-spy="scroll" data-target=".navbar">
<!-- Updates links in navigation bar based on scroll position. -->
<!-- navigation bar starts here -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- role attribute indicates specified role of element to screen readers -->
<div class="container-fluid">
<div class="navbar-header">
<!-- navbar-header groups together brand and toggle into 1 div -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<!-- Always specify type for button elements. Different browsers use different default types for buttons. navbar-toggle makes this button toggle the content in the class specified by the data-target attribute. -->
<span class="sr-only">Toggle navigation</span><!-- This is additional text hidden from the page and only used by SR. Span is like div but for inline elements. -->
<span class="icon-bar"></span><!-- The three horizontal bars composing the button which toggles the collapsable nav bar. -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<!-- The navbar brand, which can be text or a logo image. -->
<a href="index.html">Hasan Khan</a>
</div>
<!-- end .navbar-brand -->
</div>
<!-- end navbar-header -->
<!-- Collect the nav links, forms, and other content for toggling. -->
<div class="navbar-collapse collapse">
<!-- The collapsed navbar for smaller screens. -->
<ul class="nav navbar-nav navbar-right">
<!-- navbar-nav class is applied to the ul, which contains the content for the dropdown menu. -->
<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='#faq'>FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!-- end navbar-collapse collapse -->
</div>
<!-- end container-fluid -->
</nav>
<!-- end navbar navbar-inverse navbar-fixed-top -->
<!-- navigation bar ends here -->
<!-- Image carousel starts here. -->
<div class="container-fluid anchor-carousel">
<!-- anchor class can be styled to prevent section headings from being covered up by the navbar when nav links are clicked. -->
<div id="carousel-main" class="carousel slide" data-ride="carousel">
<!-- Carousels require an ID for controls to function properly. data-ride="carousel" animates carousel immediately when page loads. -->
<!-- Indicator dots at bottom of carousel. data-slide-to specifies which slide to go to dot is clicked. -->
<ol class="carousel-indicators">
<li data-target="#carousel-main" data-slide-to="0" class="active"></li>
<li data-target="#carousel-main" data-slide-to="1"></li>
<li data-target="#carousel-main" data-slide-to="2"></li>
</ol>
<!-- Wrapper (the main content?) for slides -->
<div class="carousel-inner" role="listbox">
<!-- Slides are specified with .carousel-inner. -->
<div class="item active">
<!-- .item defines each slide's content. .active is the initial image the carousel will display, required for carousel to work -->
<!-- consider eventually using srcset and/or picture tags and/or sprites and/or other ways to optimize images -->
<img src="img/motorcycle.jpg" alt="Motorcycle" id="motorcycle-image">
<div class="carousel-caption">
<h3>Greetings!<br>I'm <span class="text-emphasis">Hasan Khan,</span> and I make websites.</h3>
<hr>
<p>Learn more about me.</p>
<!-- *******enable smooth scroll on these glyphicon-chevron-down links. do you need jquery for this? -->
<a href="#about"><span class="glyphicon glyphicon-chevron-down"></span></a>
</div>
</div>
<!-- end item active -->
<div class="item">
<img src="img/coffee.jpg" alt="Subway" id="subway-image">
<div class="carousel-caption">
<h3>I handcraft <span class="text-emphasis">robust,</span> responsive web applications to meet <span class="text-emphasis">your</span> business needs.</h3>
<hr>
<p>Check out some of my work.</p>
<a href="#work"><span class="glyphicon glyphicon-chevron-down"></span></a>
</div>
</div>
<!-- end item -->
<div class="item">
<img src="img/subway.jpg" alt="Airplane" id="plane-image"><!-- alt specifies text in case image cannot load -->
<div class="carousel-caption">
<h3>Making <span class="text-emphasis">you</span> look good is my <span class="text-emphasis">priority</span>.</h3>
<hr>
<p>Let's get in touch.</p>
<a href="#contact"><span class="glyphicon glyphicon-chevron-down"></span></a>
</div>
</div>
<!-- end item -->
</div>
<!-- end carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-main" role="button" data-slide="prev">
<!-- .left and .carousel-control add left arrow button. data-slide can be either "next" or "prev," which alter the slide position relative to its current position. -->
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-main" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end carousel-slide -->
</div>
<!-- end container-fluid anchor -->
<!-- Image carousel ends here. -->
<!-- 3 Boostrap example containers provided by CF start here. -->
<div class="container anchor">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Plan.</h2>
<p>Develop an efficient gameplan for address your business needs.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Click here to view more details">View details &raquo;</button>
</div>
<!-- end col-md-4 -->
<div class="col-md-4">
<h2>Develop.</h2>
<p>Implement the designs based on project goals to create robust web applications.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Click here to view more details">View details &raquo;</button>
</div>
<!-- end col-md-4 -->
<div class="col-md-4">
<h2>Maintain.</h2>
<p>Debug issues and keep site running smoothly in the long-run.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Click here to view more details">View details &raquo;</button>
</div>
<!-- end col-md-4 -->
</div>
<!-- end row -->
<hr>
</div>
<!-- 3 Bootstrap example containers provided by CF end here. -->
<!-- About section starts here. -->
<div class="container anchor" id="about">
<div class="header about-header">
<h1>About Me</h1>
<hr>
</div>
<!-- end header -->
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4 col-xl-4">
<div class="image column about-image about-column">
<img src="img/coding.png" alt="Code" class="image-responsive" id="coding-image">
</div>
</div>
<!-- end column 1 -->
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="intro column about-column">
<h3>Web developer.<br>Math enthusiast.<br>Multilingual.<br>Reader &amp; Thinker.<br>NBA fan.<br>Aspiring blogger.</h3>
</div>
</div>
<!-- end column 2 -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<div class="skills column about-column">
<h2>My Skills &amp; Interests</h2>
<ul id="skill-list">
<li>Finding solutions to challenging problems</li>
<li>Mathematics, Engineering, and Computer Science</li>
<li>Reading and forming my own intellectual opinions</li>
<li>Talking for hours about things I'm passionate about</li>
<li>Learning new things</li>
</ul>
</div>
</div>
<!-- end column 3 -->
</div>
<!-- end row -->
<div class="main-text about-main-text">
<h2>Who am I?</h2>
<p>I was born in San Jose, California - right in the heart of Silicon Valley. Before moving to Atlanta as a first grader - where I still live today - I had the opportunity to experience other cultures abroad when I lived in Dubai for a few years.<br><br>In a previous life, I was a defensive tackle for ten years and a video game fanatic for close to twice as many years.<br><br>In my present life, I studied engineering at Georgia State University Perimeter College. It was there that I had my first exposure to programming by writing tiny snippets of code in Matlab, Mathematica, Python, and HTML. Exploring my curiosity in this newfound field, I started taking courses on Coursera, Udacity, Codecademy, and Udemy to learn Java and Android development. In 2016, I completed a small language learning mobile application which allowed users to learn Miwok vocabulary one word at a time by reading the word, hearing the pronunciation, and creating a mental word association by visualizing the provided graphic. In 2017, I shifted my focus to web development by enrolling at <a href="https://careerfoundry.com/" target="_blank" title="Official website" id="item1">CareerFoundry</a>. I am currently utilizing several front-end and back-end technologies to create a portfolio of web applications.<br><br>In my free time, I read and reflect on global issues. Periodically, I also find myself in never-ending debates with my friends trying to sway their opinion on whatever is the latest topic in the world of sports.<br><br>I can speak Urdu, understand Hindi, and read and write in Arabic.<br><br>If you want to learn more about who I am, about my experiences as I learn to traverse the world of software development, and about how the landscape of the world looks through my eyes, be sure to keep an eye out for my blog, which will be coming soon...</p>
</div>
<!-- endend container anchor main-text -->
<div class="embed-responsive embed-responsive-16by9">
<!-- makes iframe responsive --><!-- 16:9 aspect ratio -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/YIOT2e2vV9Y" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<!-- end .about-section -->
<!-- About section ends here. -->
<!-- Work section starts here -->
<div class="container-fluid anchor work-section" data-stellar-background-ratio="0.25" id="work">
<div class="work-body">
<div class="header header-work">
<h1>Work</h1>
<hr>
</div>
<!-- <div class="row" id="works">
<div class="col-xs-4 col-sm-5 col-md-3 col-lg-4 col-xl-4 anchor calculator-div" id="project1">
<a href="http://calculator-hasankhan.bitballoon.com/" target="_blank"><img src="img/calculator.png" class="image-responsive calculator-img" alt="Calculator" id="calculator-image"></a>
</div>
<div class="col-xs-8 col-sm-7 col-md-9 col-lg-8 col-xl-8 anchor">
<h2>Project 1</h2>
<h3>(In progress...)</h3>
<p>This very simple calculator is my first programming project (not including the portfolio website you are currently on) in which I utilize web development technologies. So far, I have completed the layout with HTML and styled it with CSS. Later, I will code the arithmetic functionality with jQuery and JavaScript. Check back soon for the completed product...</p>
</div>
</div> -->
<!-- end row 1 -->
<!-- <div class="row">
<div class="col-xs-4 col-sm-5 col-md-3 col-lg-4 col-xl-4 anchor" id="project2" >
<img src="img/coming_soon.png" class="image-responsive coming-soon-img" alt="Coming soon">
</div>
<div class="col-xs-8 col-sm-7 col-md-9 col-lg-8 col-xl-8 anchor">
<h2>Project 2</h2>
<p>Check back soon for a description of this project...</p>
</div>
</div> -->
<!-- end row 2 -->
<div class="row" id="work-samples">
<!-- <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 anchor">
<img src="img/coming_soon.png" class="image-responsive coming-soon-img" alt="Coming soon">
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 anchor">
<img src="img/coming_soon.png" class="image-responsive coming-soon-img" alt="Coming soon">
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 anchor">
<img src="img/coming_soon.png" class="image-responsive coming-soon-img" alt="Coming soon">
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 anchor">
<img src="img/coming_soon.png" class="image-responsive coming-soon-img" alt="Coming soon">
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 anchor">
<img src="img/coming_soon.png" class="image-responsive coming-soon-img" alt="Coming soon">
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 anchor">
<img src="img/coming_soon.png" class="image-responsive coming-soon-img" alt="Coming soon">
</div> -->
</div>
<!-- end row 3 -->
<div class="row other-links">
<div class="col-lg-12 col-xl-12 other-links-header">
<h2>Find my work in other places:</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<a href="https://github.com/khan-hasan" target="_blank"><img src="img/github_logo.png" alt="GitHub logo" id="github-logo"></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<a href="https://stackexchange.com/users/9283263/hasan-khan" target="_blank"><img src="img/stackoverflow_logo.png" alt="Stack Overflow" id="stackoverflow-logo"></a>
</div>
</div><!-- end .row .other-links -->
<!-- end row 4 -->
</div>
</div>
<!-- end container-fluid anchor -->
<!-- Work section ends here. -->
<!-- FAQ section starts here. -->
<div class="container anchor faq-section" id="faq">
<div class="content">
<div class="header">
<h1 id="faq-header">FAQs</h1>
<hr>
</div>
<!-- Learn More section starts here -->
<div class="container-fluid">
<div class="row">
<h2 class="learn-more">Learn More</h2>
<div class="modal-button">
<!-- Small modal button -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
</div>
<!-- end .modal-button -->
<!-- Large modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mylargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<!-- end .modal-header -->
<div class="modal-body">
<embed id="modalembed" src="resume.pdf"></embed>
</div>
<!-- end .modal-body -->
</div>
<!-- end modal-content -->
</div>
<!-- end .modal-dialog .modal-sm -->
</div>
<!-- end .modal .fade .bs-example-modal-sm -->
</div>
<!-- end .row -->
</div>
<!-- end .container-fluid -->
<!-- Learn More section ends here -->
<div class="panel-group" id="accordion">
<!-- .panel-group clears the bottom margin of each panel. -->
<div class="panel panel-default">
<!-- .panel-default gives you the default gray colored panel. -->
<div class="panel-heading">
<!-- .panel-heading adds a heading to the panel. -->
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> What technologies do you use?</a><!-- data-toggle="collapse" is added to the link which expands/collapses the component when clicked. -->
</h4>
</div>
<!-- end panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in">
<!-- .collapse hides the content by default. -->
<div class="panel-body">
<div class="technology-logos">
<div class="ruby-on-rails-container">
<img src="img/ruby_on_rails_logo.png" alt="Ruby on Rails">
<h4>Ruby on Rails</h4>
</div>
<!-- end .ruby-on-rails-container -->
<div class="ruby-container">
<img src="img/ruby_logo.png" alt="Ruby">
<h4>Ruby</h4>
</div>
<!-- end .ruby-container -->
<div class="javascript-container">
<img src="img/javascript_logo.png" alt="JavaScript">
<h4>JavaScript</h4>
</div>
<!-- end .javascript-container -->
<div class="jquery-container">
<img src="img/jquery_logo.png" alt="jQuery" id="jquery-logo">
<h4>jQuery</h4>
</div>
<!-- end .jquery-container -->
<div class="html-container">
<img src="img/html_logo.png" alt="HTML">
<h4>HTML</h4>
</div>
<!-- end .html-container -->
<div class="css-container">
<img src="img/css_logo.png" alt="CSS">
<h4>CSS</h4>
</div>
<!-- end .css-container -->
<div class="bootstrap-container">
<img src="img/bootstrap_logo.png" alt="Bootstrap">
<h4>Bootstrap</h4>
</div>
<!-- end .bootstrap-container -->
</div>
<!-- end .technology-logos -->
</div>
</div>
<!-- end panel-collapse collapse -->
</div>
<!-- end panel panel-default. end first QA panel. -->
<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>
What projects have you completed? What are you currently working on?
</a>
</h4>
</div>
<!-- end panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
My first project using web technologies was <a href="#Home">this portfolio site</a>, which you are currently on. I also made the UI for a very simple <a href="#project1">calculator application</a> using HTML and CSS. I will soon use JavaScript to implement functionality which will enable users to perform simple arithmetic operations. The big project, which is rapidly coming up on my horizon, will be a production-ready e-commerce web application.
</div>
</div>
<!-- end panel-collapse collapse -->
</div>
<!-- end panel panel-default. end second QA panel. -->
<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 other technology fields are you interested in?
</a>
</h4>
</div>
<!-- end panel-heading -->
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Firstly, I would like to become more proficient in and obtain a level of mastery with the technical abilites I currently possess. In terms of expanding my technical, there are truly more things that I would like to learn than can be listed here, but I will name two. My foremost priority is to vastly expand my knowledge of algorithms and data structures in order to become more efficient at programmatically solving large, complex problems. Additionally, what stimulates my creativity at the moment is the the is the Internet of Things (IoT). I believe that devices like Arduino and Raspberry Pi can enable us to solve many problems encountered in everyday life. As one of my next big goals, I would like to learn to do cool things using IoT devices.
</div>
</div>
<!-- end panel-collapse collapse -->
</div>
<!-- end panel panel-default. end third QA panel. -->
</div>
<!-- end panel-group. end accordian. -->
</div>
<!-- end content -->
</div>
<!-- end container-fluid anchor -->
<!-- FAQ section ends here. -->
<!-- Contact section starts here. -->
<div class="container-fluid anchor contact-section" id="contact" data-stellar-background-ratio="0.25">
<div class="middle">
<div class="header contact-header">
<h1>Let's get in touch!</h1>
<hr>
</div>
<!-- end header -->
<div class="contact-information col-md-4 col-lg-4">
<h2>Contact</h2>
<div class="phone contact-box">
<span class="glyphicon glyphicon-earphone"></span>
<a href="tel:+1-404-769-8559"> (404) 769-8559</a>
</div>
<!-- end phone contact-box -->
<div class="email contact-box">
<span class="glyphicon glyphicon-envelope"></span>
<a href="mailto:[email protected]"> [email protected]</a>
</div>
<!-- end email contact-box -->
</div>
<!-- end .contact-information -->
<div class="contact-form col-md-8 col-lg-8">
<h2 id="form-header">Send me a message</h2>
<form>
<div class="form-group name-group col-lg-4">
<p class="input-heading">Name</p>
<label for="Name" class="sr-only">Your name</label>
<input type="text" class="form-control" placeholder="Ex. Muhammad Ali (optional)" id="Name" title="min. 1 character" minlength="1">
</div>
<!-- end .form-group -->
<div class="form-group phone-number-group col-lg-4">
<p class="input-heading">Phone number</p>
<label for="Phone-number" class="sr-only">Phone number</label>
<input type="tel" class="form-control" placeholder="Ex. 9430285830 (optional)" id="Phone-number" title="Include area code, don't include punctuation (min. 10 digits, max. 20 digits)" minlength="10" maxlength="20">
</div>
<!-- end .form-group -->
<div class="form-group">
<p class="input-heading">Email</p>
<label for="Email" class="sr-only" required="required">*Email address</label>
<input type="email" class="form-control" placeholder="*[email protected] (required)" id="Email" title="min. 4 characters" minlength="4" required>
</div>
<!-- end .form-group -->
<p class="input-heading">Message</p>
<label for="Message" class="sr-only" required="required">*Your message</label>
<!-- make textarea maxlength match js for making excessive char-count display turn red. add required attr back to textarea open tag -->
<textarea style="resize: none" cols="40" rows="5" class="form-control message-box" placeholder="*Hello. I have a question for you ... (required)" id="Message" title="min. 3 characters, max. 50 characters" minlength="3" maxlength="100" required></textarea>
<p id="char-count"></p>
<p id="visible-comment"></p>
<button type="submit" class="btn btn-primary btn-lg" id="button">Submit</button>
</form>
</div>
<!-- end .contact-form -->
</div>
<!-- end middle -->
</div>
<!-- end container-fluid anchor -->
<hr>
<!-- Contact section ends here. -->
<footer>
<div class="twitter"><a href="https://twitter.com/HasanKh72605399" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @HasanKh72605399</a></div>
<div class="facebook">
<div class="fb-share-button" data-href="https://www.facebook.com/profile.php?id=100022112691600" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D100022112691600&amp;src=sdkpreparse">Share</a></div>
</div>
<div class="linkedin-box">
<a href="https://www.linkedin.com/in/hasan-khan-34ab98149/" target="_blank"><img src="img/linkedin_logo.png" alt="LinkedIn logo" id="linkedin-logo"></a>
</div>
<div class="copyright">&copy; Hasan Khan. 2017</div>
</footer>
<!-- JavaScript and jQuery start here. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!-- jQuery must be loaded before JS because Bootstrap needs the jQuery to access some of that JS. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><!-- Bootstrap core JS -->
<!-- dropdown toggle effect on navbar -->
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
<!-- work.js -->
<script src="js/work.js"></script>
<!-- scripts.js -->
<script src="js/scripts.js"></script>
<!-- stellar.min.js file -->
<script src="js/jquery.stellar.min.js"></script>
</body>
</html>
Raw
scripts.js
// will load immediately
// twitter
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
// facebook
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// will load when document is ready
$(document).ready(function(){
// smooth scrolling
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;
});
// stellar.js
$('body').stellar();
// cf tooltip js
$(function () {
$('#[item1]').tooltip();
})
// 3 tooltips
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
// click listener for form submission button
$("#button").on('click', function() {
if ($(".message-box").val() === "") { // === compares both objects without conversion, == converts both objects to the same type before comparing. we used === here.
// textarea background
$(".message-box").css("border", "2px solid red")
} else {
// gets value from the selected elements and sets them equal to specified variables
var name = $("#Name").val();
var phoneNumber = $("#Phone-number").val();
var emailAddress = $("#Email").val();
var comment = $(".message-box").val();
// hides all form elements
$('#Name').hide();
$('#Phone-number').hide();
$("#Email").hide();
$('.message-box').hide();
$(".input-heading").hide();
// change form header to display "message sent"
$('#form-header').html("Message sent.");
// confirmation message
if (phoneNumber === "") { // === compares both objects without conversion, == converts both objects to the same type before comparing. we used === here.
var confirmationMessage = "Hey, " + name + "!<br><br>" + "I have received your message:<br><br>" + comment.italics() + "<br><br>I will get back to you ASAP at " + emailAddress + ".<br><br>" + "Thanks,<br><br>Hasan Khan";
} else {
var confirmationMessage = "Hey, " + name + "!<br><br>" + "I have received your message:<br><br>" + comment.italics() + "<br><br>I will get back to you ASAP at " + emailAddress + " or at " + phoneNumber + ".<br><br>" + "Thanks,<br><br>Hasan Khan";
};
$('#visible-comment').html(confirmationMessage);
// hides textarea
$('.message-box').hide();
}; //end if/else
return false;
}); //end click listener for form submission button
$(".message-box").on("keyup", function() {
console.log("keyup happened");
var charCount = $(".message-box").val().length; // charCount is set to length of text typed into .message-box
console.log(charCount);
$("#char-count").html(charCount); // here we show a running character count to the user
if (charCount > 50) {
$("#char-count").css("color", "red");
} else {
$("#char-count").css("color", "green");
}; //end if/else
}); //end keyup click listener for .message-box
// work section
console.log(works);
}); //end document ready function
// work section, must add \ everywhere there is a line break
// dynamically creates a new col as a container for each image url in works array, and appends that new col to #work-samples row
for (var i = 0; i < works.length; ++i) {
$("#work-samples").append('\
<div class="col-xs-3 anchor">\
<img src="' + works[i] + '" class="image-responsive coming-soon-img" alt="Coming soon">\
'); //end append function
var images = $("#work-samples img"); // array containing the img elements from the newly created cols
if (i % 2 === 0) {
$(images[i]).css("border", "2px solid DodgerBlue"); // gives evenly indexed images in images array a blue border
} else {
$(images[i]).css("border", "2px solid salmon"); // gives oddly indexed images in images array a pink border
}; // end if/else
}; //end for loops
Raw
styles.css
/*taxi.jpg and bus.jpg have whitespace on the right when window is expanded all the way horizontally. i think repeat no repeat stuff can fix it*/
/*common styling across multiple elements starts here*/
/*width and height includes content, padding and border, but not the margin*/
* {
box-sizing: border-box;
}
/*The element with data-spy="scroll" requires position: relative*/
body {
position: relative;
background-color: #222222; /*black*/
}
/*text selection (highlighted text) color*/
::selection {
background: rgba(242,0,46,0.3); /*light red*/
}
/*styling for headings of all sections*/
.header h1 {
color: #9d9d9d; /*gray*/
text-align: center;
padding-bottom: 15px;
font-size: 60px;
font-family: 'Source Sans Pro', 'Roboto', 'Open Sans', 'Lato', sans-serif;
letter-spacing: 0.5px;
font-weight: 700;
text-shadow: 3px 3px 3px black;
}
/*makes sure links don't cover up heading of sections when clicked on*/
.anchor {
padding-top: 55px;
}
#about, #work, #faq, #contact {
margin-top: 15px;
margin-bottom: 15px;
padding-top: 27.5px;
padding-bottom: 27.5px;
}
hr {
width: 210px;
border-width: 1px;
box-shadow: 3px 3px 3px black;
border-color: #f2002e; /*red*/
}
@media only screen and (min-width: 1024px) {
body {
width: 100%;
}
}
@media only screen and (max-width: 360px) {
body {
width: 100%;
}
}
/*common styling across multiple elements ends here*/
/*navigation bar styling starts here*/
/********work dropdown link remains highlighted (:focus) until you click elsewhere. need jquery or js to fix it.*/
.navbar-brand a {
font-family: 'Allura', 'Yellowtail', 'Cedarville Cursive', 'Dancing Script', cursive;
text-shadow: 2px 2px 3px black;
letter-spacing: 2.5px;
font-size: 23px;
text-decoration: none;/*gets rid of the underline when hovered*/
color: #c3a175;/*gold*/
-webkit-transition: font-size 0.5s, color 0.5s; /*enables transition effect on navbar brand*/
}
/*specifies the transition affects for brand name*/
.navbar-brand >a:hover {
font-size: 22.5px;
color: white;
}
.navbar-nav>li>a {
font-weight: 900;
font-family: 'Roboto', 'Open Sans', 'Lato', sans-serif;
text-shadow: 2px 2px 3px black;
-webkit-transition: color 0.75s;/*enables transition effect on navbar links*/
}
/*specifies the transition affects for navbar links*/
.navbar-nav>li>a:hover {
color: white;
}
/*color of thin border line on top and bottom of dropdown menu*/
.dropdown-menu {
background-color: #080808;
}
/*matches styling properties of dropdown menu links to navbar links properties*/
.dropdown-menu>li>a {
font-weight: 900;
background-color: #222222; /*black*/
color: #9d9d9d;
font-family: 'Roboto', 'Open Sans', 'Lato', sans-serif;
text-shadow: 0.5px 0.5px 0.75px black;
-webkit-transition: background-color 1s, color 1s;/*enables transition effects on dropdown menu links*/
}
/*specifies transition affects for dropdown menu links*/
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus {
background-color: rgb(205, 205, 205);
color: #222222;
}
/*matches background color of dropdown menu links to navbar color*/
.dropdown-menu>.active>a:hover, .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-color: white;
color: #222222;
}
/*makes sures navbar doesn't cover up image carousel*/
.anchor-carousel {
padding-top: 50px;
}
/*navigation bar styling ends here*/
/*image carousel styling starts here*/
/*get rid of default left and right margins to ensure carousel covers entire width of screen*/
.carousel {
margin-left: -15px;
margin-right: -15px;
}
/*.carousel-inner img {
filter: blur(2px);
}*/
/*move up both lines of caption text to make it more close to center on carousel image*/
.carousel-caption {
margin-bottom: 185px;
}
/*first line of carousel caption*/
.carousel-caption h3 {
color: white;
font-size: 60px;
font-family: 'Source Sans Pro', 'Roboto', 'Open Sans', 'Lato', sans-serif;
letter-spacing: 0.5px;
font-weight: 700;
text-shadow: 3px 3px 3px black;
}
.carousel-caption p {
font-style: italic;
color: #c3a175;/*gold*/
font-size: 25px;
font-family: 'Source Sans Pro', 'Roboto', 'Open Sans', 'Lato', sans-serif;
letter-spacing: 1px;
text-shadow: 3px 3px 3px black;
}
/*styling for all horizontal lines between h3 and p of each carousel image's caption*/
.carousel-inner hr {
width: 210px;
border-width: 1px;
box-shadow: 3px 3px 3px black;
border-color: #f2002e; /*red*/
}
.glyphicon-chevron-down {
color: white;
opacity: 0.75;
text-shadow: 3px 3px 3px black;
font-size: 30px;
}
.glyphicon-chevron-down:hover {
opacity: 1;
}
.text-emphasis {
color: #f2002e;
font-style: italic;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
@media only screen and (max-width: 768px) {
.carousel {
margin-left: -15px;
margin-right: -15px;
}
.carousel-caption {
margin-bottom: 0px;
}
.carousel-caption h3 {
font-size: 38px;
}
.carousel-caption p {
font-size: 15px;
}
}
@media only screen and (min-width: 1024px) {
.carousel-caption h3 {
font-size: 50px;
}
}
@media only screen and (max-width: 414px) {
.carousel-caption {
margin-bottom: 0px;
padding-bottom: 0px;
}
.carousel-caption h3 {
font-size: 15px;
}
}
/*image carousel styling ends here*/
/*About page styling starts here*/
/*margin between end of image carousel and start of about*/
#about {
margin-top: 30px;
}
#coding-image {
margin-top: 20px;
width: 100%;
}
.about-column h2, .about-main-text h2 {
text-shadow: 3px 3px 3px black;
color: #c3a175;/*gold*/
}
.about-column p {
color: #9d9d9d; /*gray*/
}
.about-main-text p {
color: #9d9d9d; /*gray*/
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
}
#about li {
color: #9d9d9d; /*gray*/
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
}
#about h3 {
line-height: 1.75;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 25px;
letter-spacing: 2px;
text-align: center;
color: #9d9d9d; /*gray*/
}
.about-column h2, .main-text h2 {
text-align: center;
}
iframe {
width: 100%;
margin: 25px auto;
padding-bottom: 50px;
}
/*centers image*/
@media only screen and (max-width: 768px) {
#coding-image {
display: block;
width: 75%;
margin: 0 auto;
}
}
/*About page styling ends here*/
/*Work page starts here*/
.work-body {
width: 96%;
margin: 0 auto;
}
#work {
margin-top: 30px;
background-image: url(../img/sofa.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*/
/*Change the color of the text on top so it is readable and adjust the padding as needed.*/
height: 1700px;
}
.work-section img {
padding: 15px;
max-width: 100%;
opacity: 0.75;
}
.work-section img {
-webkit-transition: opacity 0.5s;
}
.work-section img:hover {
opacity: 1;
}
.panel-title a {
text-decoration: none;
}
.work-section h2 {
text-shadow: 3px 3px 3px black;
color: #c3a175;/*gold*/
}
#github-logo, #stackoverflow-logo {
display: block;
margin: 0 auto;
padding-bottom: 15px;
width: 25%;
background-color: #9d9d9d; /*gray*/
}
.other-links {
padding-top: 45px;
padding-bottom: 15px;
}
.other-links div {
padding: 15px;
}
.other-links-header {
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
}
.work-section p {
color: #9d9d9d; /*gray*/
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
background-color: rgba(0,0,0,0.5);
}
@media only screen and (max-width: 768px) {
#work {
height: 2000px;
}
}
@media only screen and (min-width: 1300px) {
#work {
height: 2750px;
}
}
/*Work page ends here*/
/*FAQ section starts here*/
/*Learn More section starts here*/
.learn-more {
text-align: left;
float: left;
}
.modal-button {
float: right;
padding: 15px;
}
.learn-more {
margin: 0;
padding: 15px;
}
/*Learn More section ends here*/
.panel-default>.panel-heading {
background-color: #222222; /*black*/
text-shadow: 3px 3px 3px black;
color: #c3a175;/*gold*/
}
.panel-default, .panel-default>.panel-heading+.panel-collapse>.panel-body {
border-color: #9d9d9d; /*gray*/
}
.panel-title>a {
-webkit-transition: color 0.5s;/*enables transition effect on navbar links*/
}
.glyphicon-plus {
color: #f2002e; /*red*/
}
.panel-title>a:hover {
color: #9d9d9d; /*gray*/
}
.panel-body {
background-color: black;
color: #9d9d9d; /*gray*/
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
}
.technology-logos img {
width: 100px;
margin: 0 25px;
}
.technology-logos div {
display: inline-block;
}
.technology-logos h4 {
text-align: center;
}
#faq {
margin-top: 30px;
padding-top: 27.5px;
padding-bottom: 175px;
height: 600px;
}
.panel-body a {
color: #9d9d9d; /*gray*/
-webkit-transition: color 0.5s;
}
.panel-body a:hover {
color: white;
text-decoration: none;
}
@media only screen and (max-width: 768px) {
#faq {
margin-top: 15px;
height: 600px;
}
.technology-logos img {
width: 40px;
}
}
@media only screen and (min-width: 1024px) {
.technology-logos img {
width: 70px;
}
}
@media only screen and (max-width: 414px) {
#faq {
height: 900px;
}
}
#modalembed {
height: 500px;
width: 100%;
padding: 10px;
}
/*FAQ section ends here*/
/*Contact page starts here*/
#contact {
background-image: url(../img/paris.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*/
/*Change the color of the text on top so it is readable and adjust the padding as needed.*/
height: 750px;
}
.contact-section .glyphicon {
color: #c3a175;/*gold*/
text-shadow: 2px 2px 3px black;
font-size: 20px;
}
.middle {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.contact-box {
margin-top: 5px;
}
.contact-box a, .contact-box p {
color: white;
text-shadow: 2px 2px 3px black;
font-size: 18px;
text-align: left;
-webkit-transition: color 0.5s;
}
.contact-box a:hover {
text-decoration: none;
color: #f2002e; /*red*/
}
@media only screen and (max-width: 360px) {
.contact-box a {
font-size: 20px;
}
}
#contact form {
margin-top: 20px;
}
.form-control {
width: 100%;
margin: 0 auto;
}
form p {
color: white;
width: 100%;
margin: 0 auto;
text-align: left;
padding-left: 2px;
padding-bottom: 5px;
}
#contact button {
margin-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
#contact h2 {
color: #9d9d9d; /*gray*/
text-shadow: 3px 3px 3px black;
padding-bottom: 5px;
}
.middle h2 {
padding-left: 15px;
padding-right: 15px;
}
.name-group, .phone-number-group {
width: 47.5%;
display: inline-block;
}
.name-group {
margin-right: 5%;
}
form .col-lg-4 {
padding-right: 0;
padding-left: 0;
}
/*Contact page ends here*/
/*footer starts here*/
.twitter, .facebook, .copyright {
display: inline;
}
.copyright {
float: right;
}
.linkedin-box img {
margin: 15px;
opacity: 0.8;
-webkit-transition: opacity 0.5s;
}
.linkedin-box img:hover {
opacity: 1;
}
#linkedin-logo {
padding-top: 42px;
height: 40%;
width: 100px;
}
#visible-comment {
padding: 15px;
color: white;
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
background-color: rgba(0,0,0,0.5);
}
/*running charcount of message length*/
#char-count {
font-weight: bold;
letter-spacing: 1px;
font-size: 20px;
background-color: rgba(0,0,0,0.5);
}
/*footer ends here*/
Raw
work.js
// works array contains all work samples urls (for Work section)
var works = [
"https://www.petfinder.com/wp-content/uploads/2012/09/Blog-Kitty-Cam-solo.jpg",
"http://www.animal-photography.com/thumbs/red_tabby_long_hair_kitten_~AP-0UJFTC-TH.jpg",
"http://www.animal-photography.com/thumbs/silver_tabby_kittens~AP-0JO6Y9-TH.jpg",
"http://www.animal-photography.com/thumbs/silver_tabby_kitten_looking_up~AP-0DLVMB-TH.jpg"
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment