-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (154 loc) · 9.04 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BrightBlogSite</title>
</head>
<body>
<header id="main-header">
<!-- the content of the header goes here -->
<h1>BrightBlog</h1>
<nav>
<ul id="nav-ul">
<li><a href="" class="navbutton">Home</a></li>
<li><a href="" class="navbutton">About us</a></li>
<li><a href="" class="navbutton">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div id="main-content">
<div>
<article>
<header>
<!-- Article's header goes here -->
<h2>Ten Amusing Facts About Me</h2>
<h3>Read time: 5 minutes</h3>
</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quis, consectetur voluptatibus totam doloremque error repellat sint magnam, modi quo earum explicabo. Assumenda perferendis unde architecto laudantium? Quia ducimus corporis quasi dolore necessitatibus soluta error rem non quis! Minima saepe error, odio, esse consectetur repudiandae tenetur iusto sed accusamus iste accusantium repellat voluptatem maxime cum ex laudantium et assumenda molestias quibusdam laboriosam! Corrupti unde sed, rem fugit ipsum aperiam facilis in dolores dolorum optio veritatis ipsa excepturi quos iure consectetur placeat sapiente praesentium? Quo et dolore voluptas quos soluta dolorum esse quisquam alias itaque illum. Rem sit doloribus nemo velit.</p>
<blockquote>
<cite>"I love Ewuraba!" - Jesus, 24/7</cite>
</blockquote>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos, commodi? Minus tempora corporis eius magnam consectetur at cumque necessitatibus, modi quidem numquam fugiat nobis illum placeat voluptatem! Nam, est dolorum. Itaque iusto quod fugit quos a magni distinctio eum illo id. Nam possimus aperiam vel reiciendis, vero ut voluptate odio enim ducimus recusandae atque inventore. Sit ab incidunt, hic iste deleniti officia corrupti ipsum architecto repellat. Maxime quas incidunt consectetur cupiditate voluptate totam ad mollitia tempora. Qui cum nemo ducimus doloribus veniam consequuntur natus voluptates sit, sequi sint nostrum, neque, aliquid aut odit. Aspernatur quam delectus, sint optio ratione architecto!</p>
</main>
<footer>
<h2>Author: Ewuraba Dede Dick</h2>
<img src="https://placebear.com/100/100" alt="A beautiful bear">
<h3>Last posted: 01-09-2024</h3>
<a href="linkedin.com/in/ewurabadededick/" target="_blank"> Author's LinkedIn</a>
</footer>
</article>
<article>
<header>
<!-- Article's header goes here -->
<h2>Ten Amusing Facts About Me</h2>
<h3>Read time: 5 minutes</h3>
</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quis, consectetur voluptatibus totam doloremque error repellat sint magnam, modi quo earum explicabo. Assumenda perferendis unde architecto laudantium? Quia ducimus corporis quasi dolore necessitatibus soluta error rem non quis! Minima saepe error, odio, esse consectetur repudiandae tenetur iusto sed accusamus iste accusantium repellat voluptatem maxime cum ex laudantium et assumenda molestias quibusdam laboriosam! Corrupti unde sed, rem fugit ipsum aperiam facilis in dolores dolorum optio veritatis ipsa excepturi quos iure consectetur placeat sapiente praesentium? Quo et dolore voluptas quos soluta dolorum esse quisquam alias itaque illum. Rem sit doloribus nemo velit.</p>
<blockquote>
<cite>"I love Ewuraba!" - Jesus, 24/7</cite>
</blockquote>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos, commodi? Minus tempora corporis eius magnam consectetur at cumque necessitatibus, modi quidem numquam fugiat nobis illum placeat voluptatem! Nam, est dolorum. Itaque iusto quod fugit quos a magni distinctio eum illo id. Nam possimus aperiam vel reiciendis, vero ut voluptate odio enim ducimus recusandae atque inventore. Sit ab incidunt, hic iste deleniti officia corrupti ipsum architecto repellat. Maxime quas incidunt consectetur cupiditate voluptate totam ad mollitia tempora. Qui cum nemo ducimus doloribus veniam consequuntur natus voluptates sit, sequi sint nostrum, neque, aliquid aut odit. Aspernatur quam delectus, sint optio ratione architecto!</p>
</main>
<footer>
<h2>Auth0r: Ewuraba Dede Dick</h2>
<img src="https://placebear.com/100/100" alt="A beautiful bear">
<h3>Last posted: 01-09-2024</h3>
<a href="linkedin.com/in/ewurabadededick/" target="_blank"> Author's LinkedIn</a>
</footer>
</article>
</div>
<aside>
<section>
<h4>Filter by Month</h4>
<nav>
<ul>
<li><a href="">Filter for January</a></li>
<li><a href="">Filter for February</a></li>
<li><a href="">Filter for March</a></li>
</ul>
</nav>
</section>
<section>
<h4>Filter by Category</h4>
<nav>
<ul>
<li><a href="">My Career</a></li>
<li><a href="">Relationships</a></li>
<li><a href="">God</a></li>
<li><a href="">Family</a></li>
</ul>
</nav>
</section>
</aside>
</div>
<!-- main content of the website can go here -->
<hr>
<h2>Sign up for our newsletter</h2>
<form action="" method="">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required>
<br>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password">
<br>
<label for="favourite_animal">Favourite Animal</label>
<input type="radio" name="favourite_animal" id="dog" value="dog">
<label for="dog">Dog</label>
<input type="radio" name="favourite_animal" id="cat" value="cat">
<label for="cat">Cat</label>
<input type="radio" name="favourite_animal" id="hedgehog" value="hedgehog">
<label for="hedgehhog">Hedgehog</label>
<br>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="england">England</option>
<option value="scotland">Scotland</option>
<option value="wales">Wales</option>
<option value="northern_ireland">Northern Ireland</option>
<option value="ghana">Ghana</option>
</select>
<label for="bio">Biography</label>
<textarea name="bio" id="bio" cols="30" rows="10"></textarea>
<br>
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">Subscribe to out newsletter:</label>
<br>
<input type="submit" value="Send!">
</form>
<hr>
</main>
<footer>
<h2>BrightBlogSite</h2>
<section>
<nav>
<ul id="footer-ul">
<div>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Careers</a></li>
</div>
<div>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Terms & Conditions</a></li>
<li><a href="">Cookie Policy</a></li>
</div>
</ul>
</nav>
</section>
</footer>
</body>
</html>