-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
259 lines (208 loc) · 11.4 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
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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Based on Bootstrap Theme "Simply Me" - No Copyright -->
<title>Mouse and Me: Homepage.</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 - Javascript -->
<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>
<!-- image slider -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators - three dots in the slider, to see which item user is on -->
<!-- ol with carousel-indicators class - three dots -->
<ol class="carousel-indicators">
<!-- targeting myCarousel id, data slide with numerical value for Javascript to change images with animation -->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <!-- making active - will use this slide first on page load -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- images for slider -->
<!-- make image 1 active -->
<div class="item active">
<img src="img/mouse1.jpg" alt="Computer Mouse">
<div class="carousel-caption">
<h3>Mouse and Me</h3>
<p>Mouse and Me,the number 1 site for computer mouse information.</p>
</div>
</div> <!-- close item active -->
<div class="item">
<img src="img/mouse2.jpg" alt="Computer Mouse">
<div class="carousel-caption">
<!-- adding captions to slides -->
<h3>Check Us Out on Social Media</h3>
<p>Links can be found on our - Keep Us - page.</p>
</div>
</div> <!-- close item -->
<div class="item">
<img src="img/mouse3.jpg" alt="Computer Mouse">
<div class="carousel-caption">
<!-- adding captions to slides -->
<h3>Why We Use?</h3>
<p>Find out why we use them here.</p>
</div>
</div> <!-- close item -->
<div class="item">
<img src="img/mouse4.png" alt="Computer Mouse">
<div class="carousel-caption">
<!-- adding captions to slides -->
<h3>Laser vs. Ball.</h3>
<p>Find out how the battle of ball and mouse was concluded here.</p>
</div>
</div> <!-- close item -->
</div> <!-- close carousel-inner -->
<!-- Left and right controls -->
<!-- left control --> <!-- glyphicon is right and left icon -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<!-- icon for left -->
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!-- right control --> <!-- glyphicon is right and left icon -->
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<!-- icon for right -->
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- close carousel -->
<!-- Second Container -->
<div class="container-fluid bg-2 text-center">
<h3 class="margin">What is it?</h3>
<p>A computer mouse is a pointing device (hand control) that detects two-dimensional motion relative to a surface. This motion is typically translated into the motion of a pointer on a display, which allows a smooth control of the graphical user interface.</p>
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage2" alt="Image">
</div> <!-- close container-fluid -->
<!-- Third Container (Grid - 4+4+4 = 12(12=max size)) -->
<div class="container-fluid bg-3 text-center">
<h3 class="margin">What it does?</h3><br>
<div class="row">
<!-- col-sm-4 refers to 'column' 'small - for mobile' and 4 columns out of 12 possable' -->
<div class="col-sm-4">
<p class="italic">"The standard mouse has two buttons toward the front (to left-click and right-click) and a scroll wheel in the center (to quickly move the screen up and down). However, a computer mouse can have anywhere from one to six or more buttons to provide a wide variety of other functions." - Tim Fisher.</p>
</div> <!-- close col-sm-4 -->
<div class="col-sm-4">
<p class="italic">"Whether the mouse uses a laser or ball, or is wired or wireless, a movement detected from the mouse sends instructions to the computer to move the cursor on the screen in order to interact with files, windows, and other software elements." - Tim Fisher. </p>
</div><!-- close col-sm-4 -->
<div class="col-sm-4">
<p class="italic">"The mouse was originally referred to as an "X-Y position indicator for a display system" and was nicknamed a "mouse" because of the tail-like cord that came out the end of it." - Tim Fisher.</p>
</div><!-- close col-sm-4 -->
</div><!-- close row -->
</div><!-- close container-fluid -->
<!-- Third Container (Grid - 4+4+4 = 12(12=max size)) -->
<div class="container-fluid bg-3 text-center">
<div class="row">
<!-- col-sm-4 refers to 'column' 'small - for mobile' and 4 columns out of 12 possable' -->
<div class="col-sm-4">
<img src="img/mouse2.jpg" class="img-responsive margin mouseimage3" alt="Image">
</div> <!-- close col-sm-4 -->
<div class="col-sm-4">
<img src="img/mouse3.jpg" class="img-responsive margin mouseimage3" alt="Image">
</div> <!-- close col-sm-4 -->
<div class="col-sm-4">
<img src="img/mouse1.jpg" class="img-responsive margin mouseimage3" alt="Image">
</div><!-- close col-sm-4 -->
</div><!-- close row -->
</div><!-- close container-fluid -->
<!-- fourth container -->
<div class="container-fluid bg-4">
<!-- define quoting in html -->
<blockquote>
<p class="italic quote"> “The real opportunity for success lies within the person and not in the job.” – Zig Ziglar</p>
<!-- footer for quote -->
<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 -->
<!-- creating var for displaying a quote at 'random' -->
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"
];
<!-- when id element of 'quoteButton' is clicked, run the following function -->
$("#quoteButton").on('click', function() {
<!-- var 'x' has value of a quote from var 'randomQuotes' -->
var x = Math.floor(Math.random() * randomQuotes.length);
<!-- write text from var 'randomQuotes' in class '.quote' -->
$(".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, Based on the free Bootstrap Theme Made By: <a href="https://www.w3schools.com">www.w3schools.com</a> Known as <a href="https://www.w3schools.com/bootstrap/bootstrap_theme_me.asp">"Simply Me"</a>.
</p> <!-- close p;
declaring the use of bootstrap template, though is not required-->
</footer><!-- close footer -->
</body>
</html>