-
Notifications
You must be signed in to change notification settings - Fork 0
/
laser.html
214 lines (178 loc) · 12.3 KB
/
laser.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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Based on Bootstrap Theme "Simply Me" - No Copyright -->
<title>Mouse and Me: Laser.</title>
<!-- Specify the character encoding for HTML -->
<meta charset="utf-8">
<!-- used for mobile users, dynamic viewing of website -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- meta data based on: view-source:https://abc.xyz/ -->
<meta property="og:url" content="http://mouseandme.com/"> <!-- url meta content -->
<meta property="og:title" content="MouseandMe"> <!-- title meta content -->
<meta property="og:image" content="img/mouseandme.jpg"> <!-- image meta content -->
<meta property="og:site_name" content="Mouse and Me"> <!-- name meta content -->
<!-- description meta content -->
<meta property="og:description" content="Mouse and Me is a website created by Thomas Rowe, based on the free bootstrap theme: simply me.">
<!-- link to bootstrap style sheet used -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- link to style sheet created for this specific webpage -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- used for image slider - Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- used for image slider - css -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- CSS for Font Awesome - Company Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* external css used - refer to line 17 */
</style>
</head>
<!-- start of webpage content -->
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<!-- nav header bar -->
<div class="navbar-header">
<!-- button used to open and close navbar for small device view -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<!-- using div tag to target icon-bar item for small device view -->
<div class="icon-bar"></div>
</button><!--closing button -->
<a class="navbar-brand" href="index.html">Mouse and Me.</a>
</div><!--closing navbar-header -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="whatisit.html">What is it?</a></li>
<li><a href="howitworks.html">How does it work?</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Types<span class="caret"></span></a>
<ul class="dropdown-menu">
<h6 class="dropdown-header">Choose a type:</h6>
<li><a href="ball.html" class="dropdown-item">Ball</a></li>
<li><a href="laser.html" class="dropdown-item">Laser</a></li>
</ul> <!--closing dropdown-menu -->
</li><!--closing dropdown li -->
<li><a href="about.html">About us</a></li>
<li><a href="keepup.html">Keep up With Us</a></li><!--last ul -->
</ul> <!--closing ul -->
</div> <!-- closing myNavbar -->
</div> <!-- closing container class -->
</nav>
<!-- end of navbar -->
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<h3 class="margin">Mouse and Me.</h3>
<a href="index.html"><img src="img/mouseandme.jpg" class="img-responsive img-circle margin" style="display:inline" alt="logo" width="350" height="350"></a>
<h2>All things computer mouse related.</h2>
</div>
<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
<h3 class="margin">Title</h3><br>
<div class="row">
<div class="col-sm-3">
<p class="italic">Um aber also wenn wege du je. Stand la ab etwas wo reist stamm. Pa auch du name um er frau. Hat mir uberwunden vielleicht ein angenommen man dienstmagd nachmittag. Zaunpfahle dazwischen im handarbeit ob la hufschmied er. Kindlichen scherzwort da wo vielleicht la. Zeigen dem uhr braten diesem reihen fragen ruhten mir. Beim steh alte hoch tun ich zum kam. </p>
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
</div>
<div class="col-sm-6">
<p class="italic">Trug ja lich mi fast blau im darf dame wu. Stabelle vollends vergnugt art tun marschen. Aufraumen ja leuchtete se gegriffen spurenden liebevoll ri um. Ja ku im schlank dachern wu schoner. Art besserung ihr liebhaben gut nur abstellte. Der gru ubelnehmen landsleute geheiratet. Wachsamen ihr aufstehen hof hauswesen schreibet dammerung. </p>
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
</div>
<div class="col-sm-3">
<p class="italic">"Harmlos scheint jungfer uhr das filzhut grausam zwingen der. Sonne jetzt reden nur auf oha. Ansehen ten das klopfte gerbers sto sondern niemals bis. Ja kirche diesen am er so munter. Aber rock tat zehn lang und fur will igen des. Setzte als garten ist spital. </p>
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
</div>
</div>
</div>
<!-- third Container -->
<div class="container-fluid bg-3 text-center">
<h3 class="margin">Title</h3><br>
<div class="row">
<div class="col-sm-4">
<p class="italic">Um aber also wenn wege du je. Stand la ab etwas wo reist stamm. Pa auch du name um er frau. Hat mir uberwunden vielleicht ein angenommen man dienstmagd nachmittag. Zaunpfahle dazwischen im handarbeit ob la hufschmied er. Kindlichen scherzwort da wo vielleicht la. Zeigen dem uhr braten diesem reihen fragen ruhten mir. Beim steh alte hoch tun ich zum kam. </p>
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
<div class="row">
<div class="col-sm-6">
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
<p class="italic">Um aber also wenn wege du je. Stand la ab etwas wo reist stamm. Pa auch du name um er frau. Hat mir uberwunden vielleicht ein angenommen man dienstmagd. Um aber also wenn wege du je. Stand la ab etwas wo reist stamm. Um aber also wenn wege du je. Stand la ab etwas wo reist stamm.</p>
</div> <!-- closing col-sm-6 -->
<div class="col-sm-6">
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
<p class="italic">Um aber also wenn wege du je. Stand la ab etwas wo reist stamm. Pa auch du name um er frau. Hat mir uberwunden vielleicht ein angenommen man dienstmagd. Um aber also wenn wege du je. Stand la ab etwas wo reist stamm. Um aber also wenn wege du je. Stand la ab etwas wo reist stamm.</p>
</div> <!-- closing col-sm-6 -->
</div> <!-- closing row -->
</div><!-- closing col-sm-4 -->
<div class="col-sm-8">
<p class="italic">"Harmlos scheint jungfer uhr das filzhut grausam zwingen der. Sonne jetzt reden nur auf oha. Ansehen ten das klopfte gerbers sto sondern niemals bis. Ja kirche diesen am er so munter. Aber rock tat zehn lang und fur will igen des. Setzte als garten ist spital. </p>
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
<div class="row">
<div class="col-sm-6">
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
<p class="italic">Um aber also wenn wege du je. Stand la ab etwas wo reist stamm. Pa auch du name um er frau. Hat mir uberwunden vielleicht ein angenommen man dienstmagd nachmittag. Zaunpfahle dazwischen im handarbeit ob la hufschmied er. Kindlichen scherzwort da wo vielleicht la. Zeigen dem uhr braten diesem reihen fragen ruhten mir. Beim steh alte hoch tun ich zum kam. </p>
</div> <!-- closing col-sm-6 -->
<div class="col-sm-6">
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
<p class="italic">Um aber also wenn wege du je. Stand la ab etwas wo reist stamm. Pa auch du name um er frau. Hat mir uberwunden vielleicht ein angenommen man dienstmagd nachmittag. Zaunpfahle dazwischen im handarbeit ob la hufschmied er. Kindlichen scherzwort da wo vielleicht la. Zeigen dem uhr braten diesem reihen fragen ruhten mir. Beim steh alte hoch tun ich zum kam. </p>
</div> <!--closing col-sm-6 -->
</div> <!-- closing row -->
</div> <!-- closing col-sm-8-->
</div> <!-- closing row -->
</div> <!-- closing container-fluid -->
<!-- fourth Container -->
<div class="container-fluid bg-1 text-center">
<h3 class="margin">Title</h3><br>
<div class="row">
<div class="col-sm-4">
<img src="img/mouse4.png" class="img-responsive margin mouseimage3" alt="Image">
<p class="italic">Um aber also wenn wege du je. Stand la ab etwas wo reist stamm. Pa auch du name um er frau. Hat mir uberwunden vielleicht ein angenommen man dienstmagd nachmittag. Zaunpfahle dazwischen im handarbeit ob la hufschmied er. Kindlichen scherzwort da wo vielleicht la. Zeigen dem uhr braten diesem reihen fragen ruhten mir. Beim steh alte hoch tun ich zum kam. </p>
</div>
<div class="col-sm-4">
<img src="img/mouse4.png" class="img-responsive margin mouseimage3" alt="Image">
<p class="italic">Trug ja lich mi fast blau im darf dame wu. Stabelle vollends vergnugt art tun marschen. Aufraumen ja leuchtete se gegriffen spurenden liebevoll ri um. Ja ku im schlank dachern wu schoner. Art besserung ihr liebhaben gut nur abstellte. Der gru ubelnehmen landsleute geheiratet. Wachsamen ihr aufstehen hof hauswesen schreibet dammerung. </p>
</div>
<div class="col-sm-4">
<img src="img/mouse4.png" class="img-responsive margin mouseimage3" alt="Image">
<p class="italic">"Harmlos scheint jungfer uhr das filzhut grausam zwingen der. Sonne jetzt reden nur auf oha. Ansehen ten das klopfte gerbers sto sondern niemals bis. Ja kirche diesen am er so munter. Aber rock tat zehn lang und fur will igen des. Setzte als garten ist spital. </p>
</div>
</div>
</div>
<!-- fifth container -->
<div class="container-fluid bg-4">
<blockquote>
<p class="italic quote">The real opportunity for success lies within the person and not in the job: Zig Ziglar</p>
<footer>Quotes for you.</footer>
<button type="button" class="btn" id="quoteButton">
</button><!--closing button -->
<script>
<!-- Based on http://stackoverflow.com/questions/37692312/javascript-and-jquery-quotes-generator from user E.Arrowood in 2016 -->
var randomQuotes = [
<!-- qoutes collected from: http://www.keepinspiring.me/positive-inspirational-life-quotes/ -->
"The real opportunity for success lies within the person and not in the job: Zig Ziglar",
"Look at the sparrows; they do not know what they will do in the next moment. Let us literally live from moment to moment: Mahatma Gandhi",
"Luck is a dividend of sweat. The more you sweat, the luckier you get: Ray Kroc",
"Live each day as if your life had just begun: Johann Wolfgang Von Goethe",
"Every truth passes through three stages before it is recognized. In the first, it is ridiculed. In the second, it is opposed. In the third, it is regarded as self evident: Arthur Schopenhauer",
"Either you run the day, or the day runs you: Jim Rohn",
"The difference between a successful person and others is not lack of strength not a lack of knowledge but rather a lack of will: Vince Lombardi",
"If not us, who? If not now, when? : John F. Kennedy",
"Do not worry about failures, worry about the chances you miss when you do not even try: Jack Canfield"
];
$("#quoteButton").on('click', function() {
var x = Math.floor(Math.random() * randomQuotes.length);
$(".quote").text(randomQuotes[x]);
});
</script>
</blockquote>
</div>
<!-- Footer -->
<footer class="container-fluid bg-5 text-center">
<h3 class="underline">End of the line... or cord, if you will.</h3>
<p>Created by 143938</p>
<a href="https://www.youtube.com/watch?v=sZcW0ougNYI"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
<a href="https://www.youtube.com/watch?v=sZcW0ougNYI"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
<a href="https://www.youtube.com/watch?v=sZcW0ougNYI"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
<a href="https://www.youtube.com/watch?v=sZcW0ougNYI"><i class="fa fa-amazon fa-2x" aria-hidden="true"></i></a>
</footer>
</body>
</html>