-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
94 lines (86 loc) · 5.5 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
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: bisque;">
<div class="col-100">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
</div>
<div class="row" style="background-color: bisque;">
<div class="col-100 col--sm-50 col--md-33 col--lg-25" style="background-color: aqua;">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore quisquam cumque laudantium et exercitationem nihil ut ipsum dolor saepe dolores hic modi obcaecati, numquam perspiciatis nostrum accusamus rerum? Consequatur deleniti soluta fugiat ipsam fugit! Dicta corrupti numquam quidem omnis maxime minus! Consectetur eligendi molestias doloribus similique harum itaque tempora quibusdam!</p>
</div>
<div class="col-100 col--sm-50 col--md-66 col--lg-25" style="background-color: aqua;"">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore quisquam cumque laudantium et exercitationem nihil ut ipsum dolor saepe dolores hic modi obcaecati, numquam perspiciatis nostrum accusamus rerum? Consequatur deleniti soluta fugiat ipsam fugit! Dicta corrupti numquam quidem omnis maxime minus! Consectetur eligendi molestias doloribus similique harum itaque tempora quibusdam!</p>
</div>
<div class="col-100 col--sm-50 col--md-40 col--lg-25" style="background-color: aqua;"">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore quisquam cumque laudantium et exercitationem nihil ut ipsum dolor saepe dolores hic modi obcaecati, numquam perspiciatis nostrum accusamus rerum? Consequatur deleniti soluta fugiat ipsam fugit! Dicta corrupti numquam quidem omnis maxime minus! Consectetur eligendi molestias doloribus similique harum itaque tempora quibusdam!</p>
</div>
<div class="col-100 col--sm-50 col--md-60 col--lg-25" style="background-color: aqua;"">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore quisquam cumque laudantium et exercitationem nihil ut ipsum dolor saepe dolores hic modi obcaecati, numquam perspiciatis nostrum accusamus rerum? Consequatur deleniti soluta fugiat ipsam fugit! Dicta corrupti numquam quidem omnis maxime minus! Consectetur eligendi molestias doloribus similique harum itaque tempora quibusdam!</p>
</div>
</div>
<div class="row" style="background-color: bisque;">
<div class="col-100" style="display: flex; flex-direction: row;margin-top: 1rem;">
<a href="#">Link</a>
<a class="btn" href="#">Link - Button</a>
<button>Button</button>
<button id="message-btn">Display message</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col--md-33"></div>
<div class="col-100 col--md-33">
<form class="form" id="form">
<div class="form__element form__element--required">
<label for="username">username</label>
<input type="text" name="username" id="username">
<span class="form__error-msg">error message</span>
</div>
<div class="form__element form__element--required">
<label for="email">email</label>
<input class="form__input-email" type="text" name="email" id="email">
<span class="form__error-msg">error message</span>
</div>
<div class="form__element form__element--required">
<label for="password-1">password</label>
<input type="password" name="password-1" id="password-1">
<span class="form__error-msg">error message</span>
</div>
<div class="form__element form__element--required">
<label for="password-2">confirm password</label>
<input type="password" name="password-2" id="password-2">
<span class="form__error-msg">error message</span>
</div>
<div class="form__element">
<label for="short-message">short message</label>
<textarea name="short-message" id="short-message"></textarea>
<span class="form__error-msg">error message</span>
</div>
<span>Fields with * are required</span>
<button class="btn" type="submit">Submit</button>
</form>
</div>
<div class="col-100 col--md-33"></div>
</div>
</div>
<script type="module" src="script/form.js"></script>
<script src="script/_alert.js"></script>
<script src="script/app.js"></script>
</body>
</html>