Skip to content

Instantly share code, notes, and snippets.

@rbannal86

rbannal86/wireframes

Created September 24, 2019 11:24
Show Gist options
  • Save rbannal86/ff309765a73b4c1336045928328abb19 to your computer and use it in GitHub Desktop.
Save rbannal86/ff309765a73b4c1336045928328abb19 to your computer and use it in GitHub Desktop.
Download ZIP
Quiz App html wireframes
Raw
wireframes
<!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">
<title>Document</title>
</head>
<body>
<header role="banner" class="header">
<section class="logo">
<a href="index.html">
<img class="rickMorty" src="" alt="rick and morty logo"/>
</a>
</section>
<section class="score">
<ul>
<li class="questionCount">Question:
<span class="questionNum">0</span>/5</li>
<li class ="scoreCount">Score:
<span class="scoreNum">0</span></li>
</ul>
</section>
</header>
<main role ="main" class="container">
<form class="questions">
<fieldset>
<legend class="questionText">QUESTION 1</legend>
<input type="radio" name="answer 1"> Answer 1<br>
<input type="radio" name="answer 2"> Answer 2<br>
<input type="radio" name="answer 3"> Answer 3<br>
<input type="radio" name="answer 4"> Answer 4<br>
<input type="submit" value="Submit">
</fieldset>
</form>
</main>
</body>
</html>
<!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">
<title>Document</title>
</head>
<body>
<header role="banner" class="header">
<section class="logo">
<a href="index.html">
<img class="rickMorty" src="" alt="rick and morty logo"/>
</a>
</section>
<section class="score">
<ul>
<li class="questionCount">Question:
<span class="questionNum">0</span>/5</li>
<li class ="scoreCount">Score:
<span class="scoreNum">0</span></li>
</ul>
</section>
</header>
<main role ="main" class="container">
<section class="startQuiz">
<h1>Rick and Morty Quiz</h1>
<img>
<button type="button" class="startButton js-button">Start</button>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment