-
Notifications
You must be signed in to change notification settings - Fork 0
/
whatisit.html
185 lines (148 loc) · 8.84 KB
/
whatisit.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Based on Bootstrap Theme "Simply Me" - No Copyright -->
<title>Mouse and Me: What is It.</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">How does it work?</h3>
<p>Vor zog was will ehre paar des. Meinung gelernt scheint flo gefreut manchen das. Es lehrlingen da in nachtessen geschwatzt erhaltenen sonderling schuchtern. Nirgends mi gespielt zugvogel weiblein er em. Ja werkstatte an bescheiden hufschmied neidgefuhl. Ei handwerke en ernstlich kammertur barbieren. </p>
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage2" alt="Image">
</div>
<!-- Third Container (Grid) -->
<div class="container-fluid bg-3 text-center">
<h3 class="margin">Reist La Ab.</h3><br>
<div class="row">
<div class="col-sm-4">
<p class="underline"> Stand la ab etwas wo reist stamm. </p>
<img src="img/mouse3.jpg" class="img-responsive margin mouseimage3" alt="Image">
<p class="underline">Um aber also wenn wege du je. </p>
<img src="img/mouse2.jpg" class="img-responsive margin mouseimage3" alt="Image">
</div>
<div class="col-sm-8">
<p>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>
<p>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>
<p>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>
<p>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>
<p>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>
</div>
<!-- fourth 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>