-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
119 lines (95 loc) · 4.85 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
<!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">
<link rel="stylesheet" href="css/bootstrap.min.css" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash|Rochester" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" text="text/css">
<script src="https://use.fontawesome.com/b646d66b3b.js"></script>
<title>Bubble Blaster</title>
</head>
<body>
<div class="container">
<div class="colorOverlay">
<header>
<nav class="navbar navbar-default" id="headingNavbar">
<div class="navbar-header">
<img src="assets/images/logo1.jpg" alt="" class="logo">
<a class="navbar-brand" href="index.html">Bubble Blaster</a>
</div>
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
<a href="index.html">Home</a>
<a href="#" class="about">About</a>
</div>
</div>
<ul class="nav navbar-nav">
<li><a href="index.html" id="big-home">Home</a></li>
<li><a href="#" class="about" id="big-about">About</a></li>
</ul>
<select class="nav navbar-nav bg-colors" name="bg-colors">
<option value="default">Background</option>
<option value="blue">Han Blue</option>
<option value="violet">Indigo Dye</option>
<option value="aqua">Liberty</option>
<option value="lilac">Space Cadet</option>
</select>
</nav>
<div id="about" class="overlay">
<a href="javascript:void(0)" class="closebtn closeNav">×</a>
<div class="overlay-content">
<div id="text">
<h2 id="aboutHeader">What is Bubble Blaster?</h2>
<p>Bubble blaster is a fun game where a player pops bubbles. When a player clicks 'Start', bubbles of different sizes rise up from the bottom of the page at different speeds.</p>
<p>Each game is allocated a 30 second span within which you, the player have to pop as many bubbles as you can. When time runs out, the bubbles stop rising and your score is displayed. You can then choose to start a new game. </p>
<p>Enjoy!!!</p>
</div>
</div>
</div>
</header>
<p class="actionCall">Blast Away the Bubbles!</p>
<!--carousel-->
<!--Controls/Next and Prev buttons-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="assets/images/console-page.png" alt="Game Console Page">
</div>
<div class="item">
<img src="assets/images/pop-bubbles.png" alt="Game running">
</div>
<div class="item">
<img src="assets/images/score-modal.png" alt="Score">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
<span class="sr-only">Next</span>
</a>
</div>
<form class="player">
<button type="submit" class="playButton">
<i class="fa fa-play-circle-o fa-5x" aria-hidden="true" id="playbtn"></i></button>
</form>
</div>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>