-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
124 lines (117 loc) · 6.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>One Page Websites</title>
<!-- First, add your CSS Reset -->
<link rel="stylesheet" href="css/reset.css">
<!-- Then, add any libraries or Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://use.fontawesome.com/afbaf11c2f.js"></script>
<link rel="stylesheet" href="css/animate.css">
<!-- Bootstrap's grid framework, without the rest of the Bootstrap stuff - downloaded from https://raw.githubusercontent.com/zirafa/bootstrap-grid-only/master/css/grid12.css -->
<link rel="stylesheet" href="css/grid12.css">
<!-- Lastly, add your own CSS -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav>
<ul>
<li class="current"><a href="#section1">Home</a></li>
<li><a href="#section2">Requirements</a></li>
<li><a href="#section3">Image Gallery</a></li>
<li><a href="#section4">Resources</a></li>
</ul>
</nav>
<button id="menu-icon"><i class="fa fa-bars" aria-hidden="true"></i></button>
<section id="section1" data-stellar-background-ratio="0.5">
<h1>One Page Websites!</h1>
<h2>This section demonstrates <a href="http://markdalgleish.com/projects/stellar.js/">Stellar.js</a></h2>
<h2>(Stock photo from <a href="https://www.pexels.com">pexels.com</a>)</h2>
</section>
<section id="section2">
Your one page website should include:
<div class="row">
<div class="col-sm-4 blurb">
<div class="wow bounceInUp">
<i class="fa fa-bars fa-5x" aria-hidden="true"></i>
</div>
A responsive nav:
<ul>
<li>Built using the <a href="https://github.com/davist11/jQuery-One-Page-Nav"> jQuery-One-Page-Nav</a> plugin</li>
<li>That switches to a menu icon on smaller screens</li>
</ul>
</div>
<div class="col-sm-4 blurb">
<div class="wow bounceInUp">
<i class="fa fa-th fa-5x" aria-hidden="true"></i>
</div>
Additional responsiveness (besides your nav) that:
<ul>
<li>Uses either media queries and/or the Bootstrap grid framework</li>
<li>Uses at least one breakpoint</li>
<li>For example, you could do something like the image gallery below.</li>
</ul>
</div>
<div class="col-sm-4 blurb">
<div class="wow bounceInUp">
<i class="fa fa-plug fa-5x" aria-hidden="true"></i>
</div>
Makes use of at least one other JavaScript plugin. Some examples (feel free to choose one not on this list):
<ul>
<li>Stellar.js (parallax effect) http://markdalgleish.com/projects/stellar.js/</li>
<li>Fancybox (lightbox) http://fancyapps.com/fancybox/ (Links to an external site.)</li>
<li>bxSlider (responsive image/content slider) http://bxslider.com/</li>
</ul>
</div>
</div>
</section>
<section id="section3" class="container-fluid">
<h1>Image Gallery</h1>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 thumb"><a href="" class="thumbnail"><img src="http://placehold.it/300x200" alt="" class="img-responsive"></a></div>
</div>
</section>
<footer id="section4">
<div class="container">
<h1>Resources</h1>
<div class="row">
<div class="col-sm-4">
<ul>
<li>Parallax Effect - <a href="http://markdalgleish.com/projects/stellar.js/" target="_blank">Stellar.js</a></li>
<li>CSS Animations - <a href="https://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
<li>CSS Animations on Scroll - <a href="http://mynameismatthieu.com/WOW/" target="_blank">wow.js</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul>
<li>Icons - <a href="http://fontawesome.io">Font Awesome</a></li>
<li>Free Fonts - <a href="https://fonts.google.com/">Google Fonts</a></li>
</ul>
</div>
<div class="col-sm-4"></div>
</div>
</div>
</footer>
<!-- <img id="rocket" src="images/rocket.png" data-stellar-ratio="2"> -->
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Plugins -->
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/wow.min.js"></script>
<!-- Your code -->
<script src="js/main.js"></script>
</body>
</html>