fantaic commited on
Commit
5318b9a
1 Parent(s): 17650af

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +233 -0
  2. whoismostlikelyto.jpg +0 -0
index.html ADDED
@@ -0,0 +1,233 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>QUIZMAKER</title>
8
+ <style>
9
+
10
+
11
+ *
12
+ {
13
+ margin:0;
14
+ padding:0;
15
+ box-sizing:border-box;
16
+ }
17
+
18
+ ul
19
+ {
20
+ list-style:none;
21
+ }
22
+ a
23
+ {
24
+ text-decoration:none;
25
+ }
26
+ /*---Header---*/
27
+ .header
28
+ {
29
+ height:100vh;
30
+ width:100vw;
31
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url('whoismostlikelyto.jpg');
32
+ background-size:cover;
33
+ }
34
+ /*---Navbar---*/
35
+ .navbar
36
+ {
37
+ position:absolute;
38
+ width:100%;
39
+ padding:50px;
40
+ display:flex;
41
+ justify-content:space-between;
42
+ align-items:center;
43
+ }
44
+ .navbar .logo
45
+ {
46
+ font-size:2em;
47
+ font-weight:bold;
48
+ }
49
+ .navbar .nav-links ul
50
+ {
51
+ display:flex;
52
+ }
53
+ .navbar .nav-links ul li
54
+ {
55
+ margin:0 25px;
56
+ }
57
+ .navbar .nav-links ul li.active a
58
+ {
59
+ color:#ed3c57;
60
+ font-weight:600;
61
+ }
62
+ .navbar a
63
+ {
64
+ color:black;
65
+ }
66
+ .navbar .menu-hamburger
67
+ {
68
+ display:none;
69
+ color: black;
70
+ position:absolute;
71
+ top:50px;
72
+ right:50px;
73
+ font-size:35px;
74
+ cursor:pointer;
75
+ }
76
+
77
+ @media screen and (max-width:900px)
78
+ {
79
+ .navbar
80
+ {
81
+ padding:0;
82
+ }
83
+ .navbar .logo
84
+ {
85
+ display:none;
86
+ }
87
+ .navbar .menu-hamburger
88
+ {
89
+ display:block;
90
+ }
91
+ .nav-links
92
+ {
93
+ top:0;
94
+ left:-100%;
95
+ position:absolute;
96
+ display:flex;
97
+ justify-content:center;
98
+ align-items:center;
99
+ background-color:rgba(0,0,0,0.5);
100
+ backdrop-filter:blur(8px);
101
+ width:100%;
102
+ height:100vh;
103
+ transition: left 0.5s ease;
104
+
105
+ }
106
+ .nav-links.mobile-menu
107
+ {
108
+ left:0;
109
+
110
+ }
111
+
112
+ .nav-links ul
113
+ {
114
+ display:flex;
115
+ flex-direction:column;
116
+ align-items:center;
117
+ }
118
+ .navbar .nav-links ul li
119
+ {
120
+ margin:25px 0;
121
+ font-size:1.2em;
122
+ }
123
+ .menu-hamburger
124
+ {
125
+ display:block;
126
+ }
127
+ }
128
+ body {
129
+ margin: 0;
130
+ padding: 10px;
131
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
132
+ }
133
+
134
+ .button {
135
+ background: #0d0d0d;
136
+ color: white;
137
+ border: none;
138
+ outline: none;
139
+ padding: 10px;
140
+ }
141
+ </style>
142
+ </head>
143
+ <body>
144
+
145
+ <nav class="navbar">
146
+ <a href="#" class="logo">Quizmadeetle</a>
147
+ <div class="nav-links">
148
+ <ul class="nav-menu">
149
+ <li class="active"><a href="">Home</a></li>
150
+ <li><a href="">About Us</a></li>
151
+ <li><a href="">Create a quiz +</a></li>
152
+ <li><a href="">Careers</a></li>
153
+ <li><a href="">Sign up</a></li>
154
+ </ul>
155
+ </div>
156
+ <i class='bx bx-grid-alt menu-hamburger'></i>
157
+
158
+ </nav>
159
+ <header class="header"></header>
160
+
161
+ <h1>Quiz Title</h1>
162
+ <p>Quiz by username123456</p>
163
+ <br>
164
+
165
+ <h2>1. Question name 1</h2>
166
+ <input type="radio" id="html" name="fav_language" value="HTML">
167
+ <label for="html">Option 1</label><br>
168
+ <input type="radio" id="html" name="fav_language" value="HTML">
169
+ <label for="html">Option 2</label><br>
170
+ <input type="radio" id="html" name="fav_language" value="HTML">
171
+ <label for="html">Option 3</label><br>
172
+ <input type="radio" id="html" name="fav_language" value="HTML">
173
+ <label for="html">Option 4</label><br>
174
+ <input type="radio" id="html" name="fav_language" value="HTML">
175
+ <label for="html">Option 5</label><br>
176
+ <input type="radio" id="html" name="fav_language" value="HTML">
177
+ <label for="html">Option 6</label><br>
178
+ <input type="radio" id="html" name="fav_language" value="HTML">
179
+ <label for="html">Option 7</label><br>
180
+
181
+ <h2>2. Question name 2</h2>
182
+ <input type="radio" id="html" name="fav_language" value="HTML">
183
+ <label for="html">Option 1</label><br>
184
+ <input type="radio" id="html" name="fav_language" value="HTML">
185
+ <label for="html">Option 2</label><br>
186
+ <input type="radio" id="html" name="fav_language" value="HTML">
187
+ <label for="html">Option 3</label><br>
188
+ <input type="radio" id="html" name="fav_language" value="HTML">
189
+ <label for="html">Option 4</label><br>
190
+ <input type="radio" id="html" name="fav_language" value="HTML">
191
+ <label for="html">Option 5</label><br>
192
+ <input type="radio" id="html" name="fav_language" value="HTML">
193
+ <label for="html">Option 6</label><br>
194
+ <input type="radio" id="html" name="fav_language" value="HTML">
195
+ <label for="html">Option 7</label><br>
196
+
197
+ <h2>3. Question name 3</h2>
198
+ <input type="radio" id="html" name="fav_language" value="HTML">
199
+ <label for="html">Option 1</label><br>
200
+ <input type="radio" id="html" name="fav_language" value="HTML">
201
+ <label for="html">Option 2</label><br>
202
+ <input type="radio" id="html" name="fav_language" value="HTML">
203
+ <label for="html">Option 3</label><br>
204
+ <input type="radio" id="html" name="fav_language" value="HTML">
205
+ <label for="html">Option 4</label><br>
206
+ <input type="radio" id="html" name="fav_language" value="HTML">
207
+ <label for="html">Option 5</label><br>
208
+ <input type="radio" id="html" name="fav_language" value="HTML">
209
+ <label for="html">Option 6</label><br>
210
+ <input type="radio" id="html" name="fav_language" value="HTML">
211
+ <label for="html">Option 7</label><br>
212
+
213
+ <h2>4. Question name 4</h2>
214
+ <input type="radio" id="html" name="fav_language" value="HTML">
215
+ <label for="html">Option 1</label><br>
216
+ <input type="radio" id="html" name="fav_language" value="HTML">
217
+ <label for="html">Option 2</label><br>
218
+ <input type="radio" id="html" name="fav_language" value="HTML">
219
+ <label for="html">Option 3</label><br>
220
+ <input type="radio" id="html" name="fav_language" value="HTML">
221
+ <label for="html">Option 4</label><br>
222
+ <input type="radio" id="html" name="fav_language" value="HTML">
223
+ <label for="html">Option 5</label><br>
224
+ <input type="radio" id="html" name="fav_language" value="HTML">
225
+ <label for="html">Option 6</label><br>
226
+ <input type="radio" id="html" name="fav_language" value="HTML">
227
+ <label for="html">Option 7</label><br>
228
+
229
+ <br>
230
+
231
+ <button class="button"><a style="color: white; text-decoration: none;" href="https://youtu.be/xvFZjo5PgG0">Submit!</a></button>
232
+ </body>
233
+ </html>
whoismostlikelyto.jpg ADDED