forked from amandk5/Mentimeter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (187 loc) · 6.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home page</title>
<link rel="stylesheet" href="./styles/navbar.css" />
<link rel="stylesheet" href="./styles/footer.css" />
<link rel="stylesheet" href="./styles/index.css" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->
</head>
<body id="body">
<!-- <video width="320" height="240" controls>
<source src="Mentimeter.mp4" type="video/mp4">
<source src="mentimeter.jpg" type="image/jpg">
Your browser does not support the video tag.
</video> -->
<div id="navbar"></div>
<div id="page_data"></div>
<div id="container1">
<img src="mentimeter.jpg" alt="pic" class="img-fluid" />
<img
src="play-icon.jfif"
alt="play"
class="play-btn"
data-toggle="modal"
data-target="#exampleModalCenter"
/>
</div>
<div
class="modal fade"
id="exampleModalCenter"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<video controls>
<source src="Mentimeter.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
</div>
<div id="container2">
<h1>What is Mentimeter?</h1>
<div id="bigbox">
<div class="box">
<img
src="https://www.mentimeter.com/_next/static/media/prepare.589e36de.svg"
alt=""
/>
<h2>Prepare</h2>
<p>
Build interactive presentations with the easy-to-use online editor.
Add questions, polls, quizzes, slides, images, gifs and more to your
presentation to create fun and engaging presentations.
</p>
</div>
<div class="box">
<img
src="https://www.mentimeter.com/_next/static/media/engage.ba9959f7.svg"
alt=""
/>
<h2>Engage</h2>
<p>
Your audience uses their smartphones to connect to the presentation
where they can answer questions. Visualize their responses in
real-time to create a fun and interactive experience.
</p>
</div>
<div class="box">
<img
src="https://www.mentimeter.com/_next/static/media/followup.14994f30.svg"
alt=""
/>
<h2>Follow-Up</h2>
<p>
Once your Mentimeter presentation is over, share and export your
results for further analysis and even compare data over time to
measure the progress of your audience.
</p>
</div>
</div>
<button>Explore Features</button>
</div>
<div id="container3">
<h1>Millions of voices have already been heard</h1>
<div id="bigbox">
<div class="box">
<h1>280 M</h1>
<p>Voters</p>
</div>
<div class="box">
<h1>14 M</h1>
<p>Presenters</p>
</div>
<div class="box">
<h1>220+</h1>
<p>Countries & territories</p>
</div>
</div>
<div id="container4">
<div class="box1">
<img
src="https://www.mentimeter.com/_next/static/media/andrew-hollo.3f3b1387.png"
alt=""
/>
</div>
<div class="box2">
<h2>
"I can pose a question easily and within a minute or two, have
aggregated responses from every participant."
</h2>
<p>Andrew Hollo, Workwell Consulting</p>
<button>Explore more Stories</button>
</div>
</div>
</div>
<div id="container5">
<img
src="https://static.mentimeter.com/static/images/menti-pattern.png"
alt="designer pic"
/>
<h1>Impress with interactive presentations</h1>
<button>Get Started</button>
</div>
<div id="footer"></div>
</body>
</html>
<script type="module">
// imported navbar
import navbar from "./components/navbar.js";
document.querySelector("#navbar").innerHTML += navbar(); //+ document.querySelector("#navbar").innerHTML;
// appending heading and p tag and button sign up only in box 1
let box1 = document.createElement("div");
box1.id = "box1";
let h1 = document.createElement("h1");
h1.innerHTML = "Engage your audience & eliminate awkward silences";
let p1 = document.createElement("p");
p1.innerHTML =
"Our easy-to-build presentations, interactive Polls, Quizzes, and Word Clouds mean more participation and less stress";
let signup_a = document.createElement("a");
signup_a.href = "signup.html";
let btn_signup = document.createElement("button");
btn_signup.innerHTML = "Sign up";
let p2 = document.createElement("p");
p2.innerHTML = "No credit card needed";
signup_a.append(btn_signup);
box1.append(h1, p1, signup_a, p2);
document.querySelector("#page_data").append(box1);
// // appending video in box2 with class container text-center in body
// let box2 = document.createElement("div");
// box2.id = "container";
// // box2.classList.add("text-center");
// // let div1 = document.createElement("div");
// // div1.classList.add("col-md-4");
// // let img1 = document.createElement("img");
// // img1.classList.add("img-fliud");
// // img1.src = "mentimeter.jpg";
// // img1.alt = "video pic";
// // let img2 = document.createElement("img");
// // img2.classList.add("play-btn");
// // img2.src = "play-icon.jfif";
// // img2.alt = "play icon pic";
// let video = document.createElement("video");
// video.controls="enabled";
// let source = document.createElement("source");
// source.src = "Mentimeter.mp4";
// source.type = "video/mp4";
// video.append(source);
// // div1.append(img1, img2);
// box2.append(video);
// document.querySelector("#page_data").append(box2);
import footer from "./components/footer.js";
document.querySelector("#footer").innerHTML += footer();
</script>
<script type="module" src="scripts/navbar_functionality.js"></script>