Skip to content

Instantly share code, notes, and snippets.

@Sammykhaleel

Sammykhaleel/index.html

Created March 24, 2016 17:58
Show Gist options
  • Save Sammykhaleel/2393102485e665ec4cb5 to your computer and use it in GitHub Desktop.
Save Sammykhaleel/2393102485e665ec4cb5 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 -->
<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'/>
<!-- Typography -->
<link href='https://fonts.googleapis.com/css?family=Raleway|Goudy+Bookletter+1911' rel='stylesheet' type='text/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">
<!--NAV BAR -->
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#Home">Melissa Brady</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--/navbar-header-->
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Work<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#work1">Work 1</a></li>
<li><a href="#work2">Work 2 </a></li>
</ul>
</li>
<li><a href="#about">About Me</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#video-size">Media</a></li>
<li><a href="#contact">Reach Me</a></li>
</ul>
</div><!--/collapse navbar-collapse-menubuilder-->
</div><!--/container-fluid-->
</div><!--/custom-bootstrap-menu-->
<!-- END NAV BAR-->
<!-- MAIN CAROUSEL for a primary marketing message or call to action -->
<div id="home">
<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="http://bitballoon.scdn4.secure.raxcdn.com/b2d92b90e0d4c4311be5a7a51243d13cf0f06193/a1513/img/portfolioheroimage3.jpg" alt="home office 2">
<div class="carousel-caption">
<h3>Headline</h3>
<p>description</p>
</div><!-- /carousel-caption -->
</div><!-- /item-active -->
<div class="item">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/937433cd20f5bd774852830818c11fe989414207/704ea/img/portfolioheroimage.jpg" alt="home office">
<div class="carousel-caption">
<h3>Headline</h3>
<p>description</p>
</div><!-- /carousel-caption -->
</div><!-- /item -->
<div class="item">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/img/ad525a57a6515891c59f4843dc2b68370c29d398/lesson8-portfolioheroimage2.jpg" alt="typewriter">
<div class="carousel-caption">
<h3>Headline</h3>
<p>description</p>
</div><!-- /carousel-caption -->
</div><!-- /item -->
<!-- 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><!-- /carousel-inner -->
</div><!-- /carousel-example-generic -->
<div class="container-fluid" id="intro">
<h1>John</h1>
<h2>I'm learning web development.</h2>
<p><a href="#about"><button type="button"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Learn more">About</button></a></p>
<!-- <a class="btn btn-default" href="#about" role="button">About &raquo;</a></p> -->
</div><!-- /container-fluid -->
<!--END MAIN CAROUSEL-->
<hr>
<div class="container-fluid" id="intro-col">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concepts</h2>
<h2>Portfolio Concept</h2>
<p>For my portfolio website i would like a simple page with a Home , Portfolio, About and Contact page. I have messed around a bit in the past with Wordpress. These are two websites i have created while experimenting. One for <a href="http://www.olympicdeals.net" target="_blank">rental appartments</a> and another one for a <a href="http://www.olympicdeals.eu" target="_blank">software product</a> in my work(tried to copy the original site. Both two sites are unfinished</p>
<p><a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip Number 1" href="http://www.facebook.com" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>I can commit 2-3 hours from Monday to Friday as i have a full time work and even more on Weekends </p>
<p><a class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip2" href="#about" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>The goal is to change career and have a better life. It would be great if i could have a standard income working as a freelancer</p>
<p><a class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip3" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container-fluid -->
</div><!--/home-->
<!--END HOME -->
<hr>
<div class="container anchor">
<h1> Work </h1>
<div class="row" id="work1">
<!--works.js links here-->
</div><!--end row class-->
</div>
<hr>
<div class="container-anchor" id="work2">
<h1>Work 2</h1>
<br>
<div class="portfolio-section">
<div class="row" id="portfolio2">
<div class = "col-lg-3 col-md-3 col-xs-6"><img src="http://bitballoon.scdn4.secure.raxcdn.com/df85c05b826d07e4f32d615cb95e4a179a6a3795/a9c7c/img/sandheartssmall.png" class="img-responsive"></div>
<div class = "col-lg-3 col-md-3 col-xs-6"><img src="http://bitballoon.scdn4.secure.raxcdn.com/df85c05b826d07e4f32d615cb95e4a179a6a3795/a9c7c/img/sandheartssmall.png" class="img-responsive"></div>
<div class = "col-lg-3 col-md-3 col-xs-6"><img src="http://bitballoon.scdn4.secure.raxcdn.com/df85c05b826d07e4f32d615cb95e4a179a6a3795/a9c7c/img/sandheartssmall.png" class="img-responsive"></div>
<div class = "col-lg-3 col-md-3 col-xs-6"><img src="http://bitballoon.scdn4.secure.raxcdn.com/df85c05b826d07e4f32d615cb95e4a179a6a3795/a9c7c/img/sandheartssmall.png" class="img-responsive"></div>
<div class = "col-lg-3 col-md-3 col-xs-6"><img src="http://bitballoon.scdn4.secure.raxcdn.com/df85c05b826d07e4f32d615cb95e4a179a6a3795/a9c7c/img/sandheartssmall.png" class="img-responsive"></div>
<div class = "col-lg-3 col-md-3 col-xs-6"><img src="http://bitballoon.scdn4.secure.raxcdn.com/df85c05b826d07e4f32d615cb95e4a179a6a3795/a9c7c/img/sandheartssmall.png" class="img-responsive"></div>
<div class = "col-lg-3 col-md-3 col-xs-6"><img src="http://bitballoon.scdn4.secure.raxcdn.com/df85c05b826d07e4f32d615cb95e4a179a6a3795/a9c7c/img/sandheartssmall.png" class="img-responsive"></div>
<div class = "col-lg-3 col-md-3 col-xs-6"><img src="http://bitballoon.scdn4.secure.raxcdn.com/df85c05b826d07e4f32d615cb95e4a179a6a3795/a9c7c/img/sandheartssmall.png" class="img-responsive"></div>
</div><!-- /row -->
</div><!-- /portfolio-section -->
</div><!--/anchor-->
</div><!-- /container-fluid -->
<!-- END PORTFOLIO SECTION -->
<hr>
<!--ABOUT-->
<div class="container-fluid" id="about">
<div class="header-about">
<h1>Who I Am</h1>
</div> <!--/header-->
<div class="section-about-me">
<div class="row" id="about">
<div class = "col-lg-4 col-md-4 col-xs-12"><img src="img/dog.jpg" height="226px" width="200px" alt="profile picture"><class="img-responsive"></div>
<div class = "col-lg-4 col-md-4 col-xs-12"><h2>art geek. dreamer extraordinaire.</h2><class="img-responsive"></div>
<div class = "col-lg-4 col-md-4 col-xs-12">
<h3>My Skills</h3>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>JQuery</li>
</ul> <!-- /list -->
<class="img-responsive">
</div><!-- /col-lg-4 col-md-4 col-xs-12 -->
</div><!-- /row -->
</div><!-- /section-about-me -->
<div class="section-about-more" id="main-text">
<h3>More About Me</h3>
<p>Irony trust fund salvia brooklyn <a href="http://www.google.com" title="More information" id="item1">DIY</a>. Freegan kale chips hashtag beard, cray synth ugh blog pinterest. Bespoke artisan whatever, scenester mumblecore poutine semiotics cronut marfa.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View More.</button>
</div> <!-- /section-about-more -->
</div> <!-- /container-fluid -->
<!--END ABOUT-->
<hr>
<!--FAQ-->
<div class="container-fluid" id="faq">
<div class="col-lg-8 col-md-12">
<h1>Frequently Asked Questions</h1>
</div><!--/col-lg-8-->
<!--MODAL BUTTON-->
<div class="col-lg-4 col-md-12">
<button type="button" id="modal-button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Resume</button>
</div><!--/col-lg-4-->
</div><!--/container-fluid-->
<!--END MODAL BUTTON -->
<!--LARGE MODAL-->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" class="modal" 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><!--/modal-header-->
<div class="modal-body">
<embed id="resume" src="img/evalotta_lamm.pdf">
</div><!--/modal-body-->
</div><!--/modal-content-->
</div><!--/modal-dialog-->
</div><!--/modal fade-->
<!--END LARGE MODAL-->
<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>
Why did you decide to become a web developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</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-ok"></span>
What is your design process?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</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-off"></span>
What is your average project turnaround?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<!--END FAQ-->
<hr>
<div class="container-fluid video"> <!-- VIDEO -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/DcHKOC64KnE" frameborder="0" allowfullscreen></iframe>
</div> <!-- END VIDEO -->
<hr>
<!--REACH ME-->
<div class="container-fluid" id="container-contact">
<div class="contact-me" id="contact" data-stellar-background-ratio="9">
<h1>Get In Touch</h1>
<div class="col-lg-6 col-md-12">
<h2>Contact</h2>
<h4><span class="glyphicon glyphicon-phone-alt"> 6984986512</span></h4>
<h4><span class="glyphicon glyphicon-home"> PlateiaKaritsi 52</span></h4>
</div><!--/col-lg-6 col-md-12-->
<div class="col-lg-6 col-md-12">
<h2>Send a message</h2>
<form method='post'><input type='hidden' name='form-name' value='form 1' />
<div class="form-group">
<label for="name" class="sr-only">Name</label>
<input type="textBox" id="name" placeholder="Name*" class="form-control" required="required">
</div><!--/form-group-->
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" id="email" placeholder="Email*" class="form-control" required="required">
</div><!--form-group-->
<div class="form-group">
<label for="phone" class="sr-only">Phone</label>
<input type= "phoneNumber" id="phone" placeholder="Phone" class="form-control" maxlenght="10">
</div><!--/form-group-->
<div class="form-group">
<label for="message" class="sr-only">Message *</label>
<textarea class="form-control message-box" id="message" style="resize: none" required="required" placeholder="Your message here" cols="40" rows="5"></textarea>
<p id="visible-comment"></p>
<p id="char-count"></p>
</div><!--/form-group-->
<button type="submit" class="btn btn-default" id="button">Submit</button>
</form>
</div><!--/col-lg-6 col-md-12-->
</div> <!-- end contact-me -->
</div> <!-- /container-fluid -->
<!--END REACH ME -->
<hr>
<footer>
<div id="copyright">&copy;John 2016</div>
<div id="twitterbutton"><a href="https://twitter.com/aptbs" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @aptbs</a></div>
<div class="fb-like" data-href="https://www.facebook.com/QOTSA/?fref=ts" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
</footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<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 src="js/jquery.stellar.min.js"></script>
<script src="js/work.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
Raw
jquery.stellar.min.js
!function(a,b,c,d){function e(b,c){this.element=b,this.options=a.extend({},g,c),this._defaults=g,this._name=f,this.init()}var f="stellar",g={scrollProperty:"scroll",positionProperty:"position",horizontalScrolling:!0,verticalScrolling:!0,horizontalOffset:0,verticalOffset:0,responsive:!1,parallaxBackgrounds:!0,parallaxElements:!0,hideDistantElements:!0,hideElement:function(a){a.hide()},showElement:function(a){a.show()}},h={scroll:{getLeft:function(a){return a.scrollLeft()},setLeft:function(a,b){a.scrollLeft(b)},getTop:function(a){return a.scrollTop()},setTop:function(a,b){a.scrollTop(b)}},position:{getLeft:function(a){return-1*parseInt(a.css("left"),10)},getTop:function(a){return-1*parseInt(a.css("top"),10)}},margin:{getLeft:function(a){return-1*parseInt(a.css("margin-left"),10)},getTop:function(a){return-1*parseInt(a.css("margin-top"),10)}},transform:{getLeft:function(a){var b=getComputedStyle(a[0])[k];return"none"!==b?-1*parseInt(b.match(/(-?[0-9]+)/g)[4],10):0},getTop:function(a){var b=getComputedStyle(a[0])[k];return"none"!==b?-1*parseInt(b.match(/(-?[0-9]+)/g)[5],10):0}}},i={position:{setLeft:function(a,b){a.css("left",b)},setTop:function(a,b){a.css("top",b)}},transform:{setPosition:function(a,b,c,d,e){a[0].style[k]="translate3d("+(b-c)+"px, "+(d-e)+"px, 0)"}}},j=function(){var b,c=/^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,d=a("script")[0].style,e="";for(b in d)if(c.test(b)){e=b.match(c)[0];break}return"WebkitOpacity"in d&&(e="Webkit"),"KhtmlOpacity"in d&&(e="Khtml"),function(a){return e+(e.length>0?a.charAt(0).toUpperCase()+a.slice(1):a)}}(),k=j("transform"),l=a("<div />",{style:"background:#fff"}).css("background-position-x")!==d,m=l?function(a,b,c){a.css({"background-position-x":b,"background-position-y":c})}:function(a,b,c){a.css("background-position",b+" "+c)},n=l?function(a){return[a.css("background-position-x"),a.css("background-position-y")]}:function(a){return a.css("background-position").split(" ")},o=b.requestAnimationFrame||b.webkitRequestAnimationFrame||b.mozRequestAnimationFrame||b.oRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,1e3/60)};e.prototype={init:function(){this.options.name=f+"_"+Math.floor(1e9*Math.random()),this._defineElements(),this._defineGetters(),this._defineSetters(),this._handleWindowLoadAndResize(),this._detectViewport(),this.refresh({firstLoad:!0}),"scroll"===this.options.scrollProperty?this._handleScrollEvent():this._startAnimationLoop()},_defineElements:function(){this.element===c.body&&(this.element=b),this.$scrollElement=a(this.element),this.$element=this.element===b?a("body"):this.$scrollElement,this.$viewportElement=this.options.viewportElement!==d?a(this.options.viewportElement):this.$scrollElement[0]===b||"scroll"===this.options.scrollProperty?this.$scrollElement:this.$scrollElement.parent()},_defineGetters:function(){var a=this,b=h[a.options.scrollProperty];this._getScrollLeft=function(){return b.getLeft(a.$scrollElement)},this._getScrollTop=function(){return b.getTop(a.$scrollElement)}},_defineSetters:function(){var b=this,c=h[b.options.scrollProperty],d=i[b.options.positionProperty],e=c.setLeft,f=c.setTop;this._setScrollLeft="function"==typeof e?function(a){e(b.$scrollElement,a)}:a.noop,this._setScrollTop="function"==typeof f?function(a){f(b.$scrollElement,a)}:a.noop,this._setPosition=d.setPosition||function(a,c,e,f,g){b.options.horizontalScrolling&&d.setLeft(a,c,e),b.options.verticalScrolling&&d.setTop(a,f,g)}},_handleWindowLoadAndResize:function(){var c=this,d=a(b);c.options.responsive&&d.bind("load."+this.name,function(){c.refresh()}),d.bind("resize."+this.name,function(){c._detectViewport(),c.options.responsive&&c.refresh()})},refresh:function(c){var d=this,e=d._getScrollLeft(),f=d._getScrollTop();c&&c.firstLoad||this._reset(),this._setScrollLeft(0),this._setScrollTop(0),this._setOffsets(),this._findParticles(),this._findBackgrounds(),c&&c.firstLoad&&/WebKit/.test(navigator.userAgent)&&a(b).load(function(){var a=d._getScrollLeft(),b=d._getScrollTop();d._setScrollLeft(a+1),d._setScrollTop(b+1),d._setScrollLeft(a),d._setScrollTop(b)}),this._setScrollLeft(e),this._setScrollTop(f)},_detectViewport:function(){var a=this.$viewportElement.offset(),b=null!==a&&a!==d;this.viewportWidth=this.$viewportElement.width(),this.viewportHeight=this.$viewportElement.height(),this.viewportOffsetTop=b?a.top:0,this.viewportOffsetLeft=b?a.left:0},_findParticles:function(){{var b=this;this._getScrollLeft(),this._getScrollTop()}if(this.particles!==d)for(var c=this.particles.length-1;c>=0;c--)this.particles[c].$element.data("stellar-elementIsActive",d);this.particles=[],this.options.parallaxElements&&this.$element.find("[data-stellar-ratio]").each(function(){var c,e,f,g,h,i,j,k,l,m=a(this),n=0,o=0,p=0,q=0;if(m.data("stellar-elementIsActive")){if(m.data("stellar-elementIsActive")!==this)return}else m.data("stellar-elementIsActive",this);b.options.showElement(m),m.data("stellar-startingLeft")?(m.css("left",m.data("stellar-startingLeft")),m.css("top",m.data("stellar-startingTop"))):(m.data("stellar-startingLeft",m.css("left")),m.data("stellar-startingTop",m.css("top"))),f=m.position().left,g=m.position().top,h="auto"===m.css("margin-left")?0:parseInt(m.css("margin-left"),10),i="auto"===m.css("margin-top")?0:parseInt(m.css("margin-top"),10),k=m.offset().left-h,l=m.offset().top-i,m.parents().each(function(){var b=a(this);return b.data("stellar-offset-parent")===!0?(n=p,o=q,j=b,!1):(p+=b.position().left,void(q+=b.position().top))}),c=m.data("stellar-horizontal-offset")!==d?m.data("stellar-horizontal-offset"):j!==d&&j.data("stellar-horizontal-offset")!==d?j.data("stellar-horizontal-offset"):b.horizontalOffset,e=m.data("stellar-vertical-offset")!==d?m.data("stellar-vertical-offset"):j!==d&&j.data("stellar-vertical-offset")!==d?j.data("stellar-vertical-offset"):b.verticalOffset,b.particles.push({$element:m,$offsetParent:j,isFixed:"fixed"===m.css("position"),horizontalOffset:c,verticalOffset:e,startingPositionLeft:f,startingPositionTop:g,startingOffsetLeft:k,startingOffsetTop:l,parentOffsetLeft:n,parentOffsetTop:o,stellarRatio:m.data("stellar-ratio")!==d?m.data("stellar-ratio"):1,width:m.outerWidth(!0),height:m.outerHeight(!0),isHidden:!1})})},_findBackgrounds:function(){var b,c=this,e=this._getScrollLeft(),f=this._getScrollTop();this.backgrounds=[],this.options.parallaxBackgrounds&&(b=this.$element.find("[data-stellar-background-ratio]"),this.$element.data("stellar-background-ratio")&&(b=b.add(this.$element)),b.each(function(){var b,g,h,i,j,k,l,o=a(this),p=n(o),q=0,r=0,s=0,t=0;if(o.data("stellar-backgroundIsActive")){if(o.data("stellar-backgroundIsActive")!==this)return}else o.data("stellar-backgroundIsActive",this);o.data("stellar-backgroundStartingLeft")?m(o,o.data("stellar-backgroundStartingLeft"),o.data("stellar-backgroundStartingTop")):(o.data("stellar-backgroundStartingLeft",p[0]),o.data("stellar-backgroundStartingTop",p[1])),h="auto"===o.css("margin-left")?0:parseInt(o.css("margin-left"),10),i="auto"===o.css("margin-top")?0:parseInt(o.css("margin-top"),10),j=o.offset().left-h-e,k=o.offset().top-i-f,o.parents().each(function(){var b=a(this);return b.data("stellar-offset-parent")===!0?(q=s,r=t,l=b,!1):(s+=b.position().left,void(t+=b.position().top))}),b=o.data("stellar-horizontal-offset")!==d?o.data("stellar-horizontal-offset"):l!==d&&l.data("stellar-horizontal-offset")!==d?l.data("stellar-horizontal-offset"):c.horizontalOffset,g=o.data("stellar-vertical-offset")!==d?o.data("stellar-vertical-offset"):l!==d&&l.data("stellar-vertical-offset")!==d?l.data("stellar-vertical-offset"):c.verticalOffset,c.backgrounds.push({$element:o,$offsetParent:l,isFixed:"fixed"===o.css("background-attachment"),horizontalOffset:b,verticalOffset:g,startingValueLeft:p[0],startingValueTop:p[1],startingBackgroundPositionLeft:isNaN(parseInt(p[0],10))?0:parseInt(p[0],10),startingBackgroundPositionTop:isNaN(parseInt(p[1],10))?0:parseInt(p[1],10),startingPositionLeft:o.position().left,startingPositionTop:o.position().top,startingOffsetLeft:j,startingOffsetTop:k,parentOffsetLeft:q,parentOffsetTop:r,stellarRatio:o.data("stellar-background-ratio")===d?1:o.data("stellar-background-ratio")})}))},_reset:function(){var a,b,c,d,e;for(e=this.particles.length-1;e>=0;e--)a=this.particles[e],b=a.$element.data("stellar-startingLeft"),c=a.$element.data("stellar-startingTop"),this._setPosition(a.$element,b,b,c,c),this.options.showElement(a.$element),a.$element.data("stellar-startingLeft",null).data("stellar-elementIsActive",null).data("stellar-backgroundIsActive",null);for(e=this.backgrounds.length-1;e>=0;e--)d=this.backgrounds[e],d.$element.data("stellar-backgroundStartingLeft",null).data("stellar-backgroundStartingTop",null),m(d.$element,d.startingValueLeft,d.startingValueTop)},destroy:function(){this._reset(),this.$scrollElement.unbind("resize."+this.name).unbind("scroll."+this.name),this._animationLoop=a.noop,a(b).unbind("load."+this.name).unbind("resize."+this.name)},_setOffsets:function(){var c=this,d=a(b);d.unbind("resize.horizontal-"+this.name).unbind("resize.vertical-"+this.name),"function"==typeof this.options.horizontalOffset?(this.horizontalOffset=this.options.horizontalOffset(),d.bind("resize.horizontal-"+this.name,function(){c.horizontalOffset=c.options.horizontalOffset()})):this.horizontalOffset=this.options.horizontalOffset,"function"==typeof this.options.verticalOffset?(this.verticalOffset=this.options.verticalOffset(),d.bind("resize.vertical-"+this.name,function(){c.verticalOffset=c.options.verticalOffset()})):this.verticalOffset=this.options.verticalOffset},_repositionElements:function(){var a,b,c,d,e,f,g,h,i,j,k=this._getScrollLeft(),l=this._getScrollTop(),n=!0,o=!0;if(this.currentScrollLeft!==k||this.currentScrollTop!==l||this.currentWidth!==this.viewportWidth||this.currentHeight!==this.viewportHeight){for(this.currentScrollLeft=k,this.currentScrollTop=l,this.currentWidth=this.viewportWidth,this.currentHeight=this.viewportHeight,j=this.particles.length-1;j>=0;j--)a=this.particles[j],b=a.isFixed?1:0,this.options.horizontalScrolling?(f=(k+a.horizontalOffset+this.viewportOffsetLeft+a.startingPositionLeft-a.startingOffsetLeft+a.parentOffsetLeft)*-(a.stellarRatio+b-1)+a.startingPositionLeft,h=f-a.startingPositionLeft+a.startingOffsetLeft):(f=a.startingPositionLeft,h=a.startingOffsetLeft),this.options.verticalScrolling?(g=(l+a.verticalOffset+this.viewportOffsetTop+a.startingPositionTop-a.startingOffsetTop+a.parentOffsetTop)*-(a.stellarRatio+b-1)+a.startingPositionTop,i=g-a.startingPositionTop+a.startingOffsetTop):(g=a.startingPositionTop,i=a.startingOffsetTop),this.options.hideDistantElements&&(o=!this.options.horizontalScrolling||h+a.width>(a.isFixed?0:k)&&h<(a.isFixed?0:k)+this.viewportWidth+this.viewportOffsetLeft,n=!this.options.verticalScrolling||i+a.height>(a.isFixed?0:l)&&i<(a.isFixed?0:l)+this.viewportHeight+this.viewportOffsetTop),o&&n?(a.isHidden&&(this.options.showElement(a.$element),a.isHidden=!1),this._setPosition(a.$element,f,a.startingPositionLeft,g,a.startingPositionTop)):a.isHidden||(this.options.hideElement(a.$element),a.isHidden=!0);for(j=this.backgrounds.length-1;j>=0;j--)c=this.backgrounds[j],b=c.isFixed?0:1,d=this.options.horizontalScrolling?(k+c.horizontalOffset-this.viewportOffsetLeft-c.startingOffsetLeft+c.parentOffsetLeft-c.startingBackgroundPositionLeft)*(b-c.stellarRatio)+"px":c.startingValueLeft,e=this.options.verticalScrolling?(l+c.verticalOffset-this.viewportOffsetTop-c.startingOffsetTop+c.parentOffsetTop-c.startingBackgroundPositionTop)*(b-c.stellarRatio)+"px":c.startingValueTop,m(c.$element,d,e)}},_handleScrollEvent:function(){var a=this,b=!1,c=function(){a._repositionElements(),b=!1},d=function(){b||(o(c),b=!0)};this.$scrollElement.bind("scroll."+this.name,d),d()},_startAnimationLoop:function(){var a=this;this._animationLoop=function(){o(a._animationLoop),a._repositionElements()},this._animationLoop()}},a.fn[f]=function(b){var c=arguments;return b===d||"object"==typeof b?this.each(function(){a.data(this,"plugin_"+f)||a.data(this,"plugin_"+f,new e(this,b))}):"string"==typeof b&&"_"!==b[0]&&"init"!==b?this.each(function(){var d=a.data(this,"plugin_"+f);d instanceof e&&"function"==typeof d[b]&&d[b].apply(d,Array.prototype.slice.call(c,1)),"destroy"===b&&a.data(this,"plugin_"+f,null)}):void 0},a[f]=function(){var c=a(b);return c.stellar.apply(c,Array.prototype.slice.call(arguments,0))},a[f].scrollProperty=h,a[f].positionProperty=i,b.Stellar=e}(jQuery,this,document);var works=["img/portland-cityscapetowers.jpg","img/oldbarnroof.jpg","img/mountaincountry.jpg","img/yellowwallbike.jpg"];!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");(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.5";fjs.parentNode.insertBefore(js,fjs)})(document,"script","facebook-jssdk");
Raw
scripts.js
//document.ready
$(document).ready(function(){
//smooth scrolling
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function(){
window.location.hash = href;
});
return false;
}); //closes smooth scrolling
//stellar
$('#contact').stellar();
//tooltip
$(function() {
$('#item1').tooltip();
});//closes tool tip
//works
for(var i = 0; i < works.length; ++i) {
//script for array goes here
$('#work1').append('\
<div class="col-xs-6 col-md-6 col-md-3">\
<img class="img-responsive" src="' + works[i] + '">\
');//append closes
var images = $('#work1 img');
if (i%2===0){
$(images[i]).css('border', '2px solid DodgerBlue');
}else{
$(images[i]).css('border', '2px solid salmon');
}
}; //close array for works
});//closes document ready
Raw
styles.css
.jumbotron {
background-image: url("../img/landscape.jpg");
background-size: cover;
}
.jumbotron p {
color: white;
}
.footer {
clear: both;
text-align: center;
padding-top: 50px;
}
.nav ul li {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nav {
background-color: black;
position: fixed;
width: 100%;
top: 0;
padding: 20px 10px 20px ;
z-index: 1;
}
.container-fluid {
padding: 0px 0px;
}
.nav ul li a {
color: white;
}
.nav ul {
float: right;
}
.nav a:hover {
color: #ff0;
text-decoration: none;
}
.nav a {
transition: color 600ms;
}
/**** Contact page ****/
.header h1 {
text-align: center;
}
.map img{
width: 100%;
height: 100%;
}
.logo {
display: inline-block;
float: left;
}
.logo img {
display: block;
margin: auto;
}
.info {
padding: 5px ;
display: inline-block;
float: left;
background-color: #c0dfd9
}
.column1 {
width: 45%;
}
body {
position: relative;
background-color: #e9ece5
}
.info p {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 2.5em;
}
.footer {
clear: both;
text-align: center;
padding-top: 50px;
}
#carousel-example-generic {
margin-top: 70px;
}
.panel-group {
margin-top: 80px;
}
.panel-title {
background-color: #a8b6bf;
}
.panel-title a {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 2.3em;
color: white;
}
.panel-body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1.5em;
color: white;
background-color: #c9d8c5
}
.col-md-3 img {
margin: 5px;
}
/*Typography*/
#contactheader {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 5em;
font-weight: 500;
}
/* ABOUT */
* {box-sizing: border-box;}
body {
background-color: #fffeea;
color: #34495e;
}
.container {
width: 80%;
margin: 0 auto;
}
.main-text {
padding-top: 60px;
padding-left: 250px;
}
#skill-list {
margin-left: 50px;
}
.skills {
background-color: #5AD4C2;
color: #FFF;
padding: 50px 0px;
}
#introid p {
font-family: Futura, Helvetica, Arial, sans-serif;
font-size: 1.8em;
font-weight: 100;
-webkit-margin-before: 0em;
}
#aboutrow {
margin-top: 200px;
}
/*Typography*/
h1,
h2,
h3 {
font-family: Futura, Helvetica, Arial, sans-serif;
}
p,
li {
font-family: Georgia, Times New Roman, serif;
}
.intro p {
font-family: Futura, Helvetica, Arial, sans-serif;
font-size: 1.8em;
font-weight: 100;
-webkit-margin-before: 0em;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
Raw
work.js
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