Skip to content

Instantly share code, notes, and snippets.

@khan-hasan

khan-hasan/embedded youtube video code (from index.html)

Created September 24, 2017 22:34
Show Gist options
  • Save khan-hasan/3ad5cdc5de151a1defea3968f2ff845c to your computer and use it in GitHub Desktop.
Save khan-hasan/3ad5cdc5de151a1defea3968f2ff845c to your computer and use it in GitHub Desktop.
Download ZIP
CF 2.1 (incomplete, failed at completing) | footer with twitter follow button, facebook share button, and copyright. youtube embedded (iframe) video at bottom of about section
Raw
embedded youtube video code (from index.html)
<div class="embed-responsive embed-responsive-16by9"><!-- makes iframe responsive --><!-- 16:9 aspect ratio -->
<iframe width="560" height="315" src="//www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
</div>
Raw
embedded youtube video styling (from styles.css)
iframe {
width: 100%;
margin: 25px auto;
padding-bottom: 50px;
}
Raw
index.html (entire file)
<!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 -->
<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">
<!-- Twitter -->
<script>!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');</script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- Facebook -->
<div id="fb-root"></div>
<script>(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'));</script>
<!-- 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]-->
</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="brand-name navbar-brand"><!-- The navbar brand, which can be text or a logo image. -->
<a href="index.html">Hasan Khan</a>
</div><!-- end brand-name 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 carousel-section"><!-- 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">vibrant,</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>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> --><!-- end col-md-4 -->
<!-- <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> --><!-- end col-md-4 -->
<!-- <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> --><!-- 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 about-section" 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 Skill s&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 CareerFoundry. 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="//www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
</div>
</div><!-- end .about-section -->
<!-- About section ends here. -->
<!-- Work section starts here -->
<div class="container-fluid anchor work-section " id="work">
<div class="work-body">
<div class="header header-work">
<h1>Work</h1>
<hr>
</div>
<div class="row">
<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">
<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 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>
<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">
<div class="middle">
<div class="header contact-header">
<h1>Let's get in touch!</h1>
<hr>
</div><!-- end header -->
<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 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="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><!-- 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="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 -->
<!-- smooth scroll JS -->
<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><!-- end smooth scroll JS -->
<!-- dropdown toggle effect on navbar -->
<script type="text/javascript">
$('.dropdown-toggle').dropdown()
</script>
</body>
</html>
Raw
styles.css (entire file)
/*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*/
/*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%;
}
}
/*navigation bar styling starts here*/
/********work dropdown link remains highlighted (:focus) until you click elsewhere. need jquery or js to fix it.*/
.brand-name 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*/
.brand-name>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-section li {
color: #9d9d9d; /*gray*/
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
}
.about-section 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;
}
.header-work h1 {
text-align: center;
}
.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*/
.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;
}
}
/*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;
text-align: center;
}
.contact-box {
margin-top: 3em;
}
.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: 40%;
}
.contact-box a, .contact-box p {
color: white;
text-shadow: 2px 2px 3px black;
font-size: 24px;
-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 page ends here*/
/*footer starts here*/
.twitter, .facebook, .copyright {
display: inline;
}
.copyright {
float: right;
}
/*footer ends here*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment