-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (117 loc) · 4.16 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
125
126
127
128
129
130
131
132
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dan and Kathryn's Kitchen</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<header>
<h1>Dan and Kathryn's Kitchen</h1>
<h2>Easy, everyday recipes that are tested and tasted</h2>
</header>
<nav>
<ul>
<li><a href="about.html">about</a></li>
<li><a href="videos.html">videos</a></li>
<li><a href="recipes.html">recipes</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
<section id="Featured-video">
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'O2u0n30ZuLE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
<caption>This is the featured video caption.</caption>
</section>
<section id="Intro">
<h3>Hi, we're Dan and Kathryn.</h3>
<p>Here's a paragraph about us and why we like to cook and stuff! Here's a paragraph about us and why we like to cook and stuff! Here's a paragraph about us and why we like to cook and stuff! Here's a paragraph about us and why we like to cook and stuff! Here's a paragraph about us and why we like to cook and stuff!</p>
</section>
<section id="Top-videos">
<h3>Top Videos</h3>
<article class="small-video">
<!--add video-->
<h4>Video Name</h4>
<caption>video description</caption>
</article>
<article class="small-video">
<!--add video-->
<h4>Video Name</h4>
<caption>video description</caption>
</article>
<article class="small-video">
<!-- add video-->
<h4>Video Name</h4>
<caption>video description</caption>
</article>
</section>
<section id="instagram">
<h3>Photostream</h3>
<!--automatically adds top 3 instagram images-->
<article class="small-photo">
<!-- add photo-->
<caption>photo description</caption>
</article>
<article class="small-photo">
<!-- add photo-->
<caption>photo description</caption>
</article>
<article class="small-photo">
<!-- add photo-->
<caption>photo description</caption>
</article>
</section>
<footer>
<p>Copyright 2015 Kathryn McElroy</p>
<a href="http://www.youtube.com/kemcelroy">Youtube</a>
<a href="http://www.twitter.com/kemcelroy">Twitter</a>
<a href="http://www.facebook.com">Facebook</a>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>