fantaic/rickroll
0
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 18ul19{20 list-style:none;21}22a23{24 text-decoration:none;25}26/*---Header---*/27.header28{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.navbar36{37 position:absolute;38 width:100%;39 padding:50px;40 display:flex;41 justify-content:space-between;42 align-items:center;43}44.navbar .logo45{46 font-size:2em;47 font-weight:bold;48}49.navbar .nav-links ul50{51 display:flex;52}53.navbar .nav-links ul li54{55 margin:0 25px;56}57.navbar .nav-links ul li.active a58{59 color:#ed3c57;60 font-weight:600;61}62.navbar a 63{64 color:black;65}66.navbar .menu-hamburger67{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 .navbar80 {81 padding:0;82 }83 .navbar .logo84 {85 display:none;86 }87 .navbar .menu-hamburger88 {89 display:block;90 }91 .nav-links92 {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-menu107 {108 left:0;109 110 }111 112 .nav-links ul113 {114 display:flex;115 flex-direction:column;116 align-items:center;117 }118 .navbar .nav-links ul li119 {120 margin:25px 0;121 font-size:1.2em;122 }123 .menu-hamburger124 {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>