-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (85 loc) · 4.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Architecture Challenge</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- HEADER -->
<header class="row">
<!-- BRAND -->
<div class="brand col-2">
<h1 class="text">CSS Architecture Challenge</h1>
</div>
<!-- Menu -->
<nav class="menu col-2">
<a class="link is-active" href="javascript:;">home</a>
<a class="link" href="javascript:;">about</a>
<a class="link" href="javascript:;">contacts</a>
</nav>
</header>
<div class="row">
<!-- Side nav -->
<aside class="side-nav col-1">
<!-- Menu -->
<nav class="menu">
<a class="link" href="#intro">Intro</a>
<a class="link" href="#form">Form</a>
</nav>
</aside>
<!-- Content Section -->
<main class="content col-3">
<!-- Intro Section -->
<section class="mb-40" id="intro">
<h2 class="headline">Welcome to the ultimate test!</h2>
<div class="row">
<p class="text col-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel varius lorem. Sed vel enim vel enim varius convallis. Maecenas ipsum ligula, imperdiet sit amet suscipit a, euismod eget mi. Proin blandit dapibus sodales. Donec ac volutpat tellus. Maecenas dignissim purus eu iaculis luctus. Vivamus suscipit tortor ac posuere fermentum. Vivamus eget tempor ligula. Nullam et congue libero, vitae iaculis magna. Nulla blandit ligula vitae mi tempor molestie. In leo magna, cursus sit amet urna at, dapibus consequat felis. Pellentesque dictum lacus et elit sollicitudin interdum. Nunc mollis sit amet purus a consectetur. Vestibulum ipsum est, tincidunt ut urna vel, gravida hendrerit sem. Phasellus luctus feugiat faucibus.
</p>
<p class="text col-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel varius lorem. Sed vel enim vel enim varius convallis. Maecenas ipsum ligula, imperdiet sit amet suscipit a, euismod eget mi. Proin blandit dapibus sodales. Donec ac volutpat tellus. Maecenas dignissim purus eu iaculis luctus. Vivamus suscipit tortor ac posuere fermentum. Vivamus eget tempor ligula. Nullam et congue libero, vitae iaculis magna. Nulla blandit ligula vitae mi tempor molestie. In leo magna, cursus sit amet urna at, dapibus consequat felis. Pellentesque dictum lacus et elit sollicitudin interdum. Nunc mollis sit amet purus a consectetur. Vestibulum ipsum est, tincidunt ut urna vel, gravida hendrerit sem. Phasellus luctus feugiat faucibus.
</p>
<a href="javascript:;" class="link mt-20 capitalize col-4">Know more --></a>
</div>
</section>
<!-- Form Section -->
<form class="mb-40" id="form">
<h2 class="headline">Fill out your personal data and we promise we won't save it at all!</h2>
<fieldset>
<legend>Personalia:</legend>
<div class="group">
<label class="label" for="fname">First name:</label>
<input class="field" type="text" id="fname" name="fname">
</div>
<div class="group">
<label class="label" for="fname">Last name:</label>
<input class="field" type="text" id="lname" name="lname">
</div>
<div class="group">
<label class="label" for="email">Email:</label>
<input class="field" type="email" id="email" name="email">
</div>
<div class="group">
<label class="label" for="birthday">Birthday:</label>
<input class="field" type="date" id="birthday" name="birthday">
</div>
<span class="btn">Submit</span>
</fieldset>
</form>
</main>
</div>
<!-- Footer Section -->
<footer class="row">
<div class="copyrights col-2">
<span class="text">All copyrights non existing.</span>
</div>
<nav class="menu col-2">
<a class="link" href="javascript:;">privacy</a>
<a class="link" href="javascript:;">cookies</a>
<a class="link" href="javascript:;">contacts</a>
</nav>
</footer>
</body>
</html>