Skip to content

Instantly share code, notes, and snippets.

@Iqlaas

Iqlaas/fccpersonalwebpage.markdown

Last active September 10, 2015 06:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Iqlaas/32439e9eacb4ad4c9590 to your computer and use it in GitHub Desktop.
Save Iqlaas/32439e9eacb4ad4c9590 to your computer and use it in GitHub Desktop.
Download ZIP
Free Code Camp Personal Webpage
Raw
fccpersonalwebpage.markdown
Raw
index.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">
<meta name="description" content="">
<meta name="author" content="">
<title>My Portfolio</title>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">Kamal Iqlaas</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
<a class="page-scroll" href="#page-top">Home</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>My Portfolio</h1>
<br/>
<br/>
<br/>
<div class="row center-block">
<a class="btn btn-social btn-facebook col-md-3 col-md-offset-1" href="https://www.facebook.com/iqlaa.ism">
<i class="fa fa-facebook"></i>Facebook
</a>
<a class="btn btn-social btn-github col-md-3 col-md-offset-1" href="https://github.com/Iqlaas">
<i class="fa fa-github"></i>Github
</a>
<a class="btn btn-social btn-linkedin col-md-3 col-md-offset-1" href="https://my.linkedin.com/in/iqlaas">
<i class="fa fa-linkedin"></i>LinkedIn
</a>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Portfolio Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
</body>
</html>
Raw
script.js
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
Raw
style.css
/*!
* Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
@media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(http://www.publicdomainpictures.net/view-image.php?image=39406&picture=cyclist-black-silhouette-clipart&large=1);
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(http://www.uuson.co/wp-content/uploads/2015/03/home-office-with-a-great-view-and-black-swivel-chair-also-black-work-desk-and-black-drawer-white-table-lamp-and-vinyl-flooring-design.jpg);
}
.portfolio-section {
height: 100%;
padding-top: 150px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(http://www.cgarchitect.com/content/portfolioitems/2013/06/80718/Office_05_large.jpg);
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(http://img.mehve.net/2015/08/12/modern-office-view-l-ac6bad1e87056f48.jpg);
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.9.1/bootstrap-social.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment