-
Notifications
You must be signed in to change notification settings - Fork 0
/
product_concept.html
81 lines (70 loc) · 3.76 KB
/
product_concept.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
<head>
<!-- Set the viewport so the website is acting responsively. -->
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" type="text/css" href="product_concept.css">
<!-- Import a awesome Google font, the website is otherwise boring as hell. -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/synaptic/1.1.4/synaptic.js"></script>
<title>Product Concept</title>
</head>
<body>
<img class="clippy" src="/clippy.png">
<div class="clippy-balloon">Hi, I'm Clippy! I'm the browser assistant and my job is to help you navigate this page. I won't offer you assistance.</div>
<nav>
<h1>Productnaam</h1>
<ul>
<a href="#block-1"><li>Superman</li></a>
<a href="#block-2"><li>Batman</li></a>
<a href="#block-3"><li>Thorman</li></a>
<a href="#contact"><li>Contact</li></a>
</ul>
</nav>
<a id="game-section" name="block-1">
<section class="block block-white">
<h1>Superman</h1>
<p>
Lorem ipsum dolor sit amet, euismod detracto omnesque id pro, ad quo quis possim, ea tempor postea impetus per. Maiorum interpretaris has in. Eos id sumo ubique habemus. Mei malis putant utroque te. Pri te tale admodum gubergren. Duo utinam tempor menandri at, natum affert melius cum ex. No quando semper delectus per, mollis dolorem vis at, maiestatis inciderint ad sea.
</p>
</section>
<div style="text-align:center;">
<h2>Boter kaas en eieren</h2>
<p>Speler 1: Geel<br />
Speler 2: Orange</p>
</div>
</a>
<a name="block-2">
<section class="block block-blue">
<h1>Batman</h1>
<div>
<p>
Lorem ipsum dolor sit amet, euismod detracto omnesque id pro, ad quo quis possim, ea tempor postea impetus per. Maiorum interpretaris has in. Eos id sumo ubique habemus. Mei malis putant utroque te. Pri te tale admodum gubergren. Duo utinam tempor menandri at, natum affert melius cum ex. No quando semper delectus per, mollis dolorem vis at, maiestatis inciderint ad sea.
Lorem ipsum dolor sit amet, euismod detracto omnesque id pro, ad quo quis possim, ea tempor postea impetus per. Maiorum interpretaris has in. Eos id sumo ubique habemus. Mei malis putant utroque te. Pri te tale admodum gubergren. Duo utinam tempor menandri at, natum affert melius cum ex. No quando semper delectus per, mollis dolorem vis at, maiestatis inciderint ad sea.
</p>
<img src="https://www.thewrap.com/wp-content/uploads/2018/09/DC-Comics-Batman-Robin.png" alt="someImageNameForSeo">
</div>
</section>
</a>
<a name="block-3">
<section class="block block-white">
<h1>Thorman</h1>
<p>
Lorem ipsum dolor sit amet, euismod detracto omnesque id pro, ad quo quis possim, ea tempor postea impetus per. Maiorum interpretaris has in. Eos id sumo ubique habemus. Mei malis putant utroque te. Pri te tale admodum gubergren. Duo utinam tempor menandri at, natum affert melius cum ex. No quando semper delectus per, mollis dolorem vis at, maiestatis inciderint ad sea.
</p>
</section>
</a>
<footer>
<a name="contact">
<section class="block block-orange">
<h1>Contact</h1>
<form action="#" method="post">
<input id="name" type="text" name="name" value="" placeholder="Voer je naam in">
<input id="email" type="text" name="email" value="" placeholder="Voer je e-mailadres in">
<textarea id="message" name="message" rows="8" cols="80" placeholder="Voer je berichtje snel in, want wij wachten er op!"></textarea>
<input onclick="setCookie();" type="button" name="submit" value="Verstuur">
</form>
</section>
</a>
</footer>
</body>
<!-- Load JS files when DOM is loaded, otherwise it might not find the elements. -->
<script type="text/javascript" src="product_concept.js"></script>