forked from lingonsaft/hacktoberfest
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cheese.html
151 lines (136 loc) · 6.32 KB
/
cheese.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<!-- Github follow button -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<link rel="stylesheet" href="./css/cheese.css">
<link rel="stylesheet" href="./css/navbar.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hacktoberfest - Cheese</title>
</head>
<body id="cheese-body">
<!-- Background Photo by Katrin Leinfellner on Unsplash -->
<button onclick="topFunction()" class="btn btn-danger" id="myBtn" title="Go to top"><img src="https://png.icons8.com/ios/50/000000/circled-chevron-up.png"></button>
<img id="sublogo" src="./images/lingon-saft.png" />
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/">Hacktoberfest</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/helpful-material">Helpful Material</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contributors">Contributors</a>
</li>
<li class="nav-item">
<a class="nav-link" id="twist" href="#">The twist</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/cheese">Cheese!</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tools" href="/tools">Tools</a>
</li>
</ul>
</div>
</nav>
<section class="jumbotron text-center" id="cheesetron">
<div class="container" id="cheese-container">
<h1 class="jumbotron-heading">Welcome to CHEESEtoberfest!</h1>
<h2 class="lead text-muted">
<!-- Button to click for a random cheese to appear -->
<button onclick="cheeseAppearance()" class="btn btn-lg" id="click-for-cheese" name="button">click for cheese</button>
</h2>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Roquefort</h1>
<iframe class="spin" width="560" height="315" src="https://www.youtube.com/embed/Om6fN3sUJhg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="col-md-6">
<h1>Cheese Rolling</h1>
<iframe class="spin" width="560" height="315" src="https://www.youtube.com/embed/dtvG9XDtjv4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<<div class="row">
<div class="col-md-6">
<h1>Look at that cheese pull!</h1>
<iframe class="spin" width="560" height="315" src="https://www.youtube.com/embed/pU_VoyWfLfY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="row">
<div class="col-md-6">
<h1>And more!!!!</h1>
<iframe class="spin" width="560" height="315" src="https://www.youtube.com/embed/AMKDZ23DZaw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-3 offset-3">
<h1>Cheese Pleasing Me!</h1>
<iframe class="spin" width="560" height="315" src="https://www.youtube.com/embed/UWGnXkacSa4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<!-- end of cheese row -->
</div>
<footer id="footer">
<h3><span id="toggle-social-btn">Social Links <i class="fa fa-arrow-up"></i></span></h3>
<div class="social-icons row justify-content-center">
<div class="col">
<a class="github-button" href="https://github.com/lingonsaft" data-size="large" aria-label="Follow @lingonsaft on GitHub">
Follow @lingonsaft
</a>
</div>
<div class="col">
<a href="https://www.youtube.com/lingonsaft/"><img src="./images/svg/youtube.svg" alt="youtube" /></a>
</div>
<div class="col">
<a href="https://www.instagram.com/lingonsaftofficial/"><img src="./images/svg/instagram.svg" alt="instagram" /></a>
</div>
<div class="col">
<a href="https://twitter.com/lingonsaft1?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large"
data-show-count="false">Follow @lingonsaft1</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</footer>
<script src="./scripts/cheese.js"></script>
<script>
scrollFunction = () => {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
window.onscroll = () => {scrollFunction()};
topFunction = () => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<script src="./scripts/social-links.js"></script>
<script src="./scripts/scroll.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>