forked from NWC2/HTML-Challenge
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjihad_HTML_3.htm
More file actions
101 lines (94 loc) · 6.7 KB
/
jihad_HTML_3.htm
File metadata and controls
101 lines (94 loc) · 6.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles-3.css">
</head>
<body>
<header class="header">
<h1>The Page Title</h1>
<p>The Site Slogan</p>
</header>
<nav class="nav-section">
<ul class="main-nav">
<li><a href="">Home</a></li>
<li><a href="">Contact</a></li>
<li><a href="">New Page 1</a></li>
<li><a href="">New Page 2</a></li>
<li><a href="">New Page 3</a></li>
<li><a href="">New Page 4</a></li>
</ul>
</nav>
<main>
<div class="sidebar">
<div class="first--sidebar">
<h2>Main Menu</h2>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
<li>Menu Item 7</li>
<li>Menu Item 8</li>
<li>Menu Item 9</li>
</ul>
</div>
<div class="second--sidebar">
<h2>Block</h2>
<p>Anything title goes here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et risus sit amet urna finibus lobortis a at ligula. Praesent lacinia mi non enim dictum, eu fringilla turpis finibus. Proin non turpis id nunc mattis accumsan ac eget felis. </p>
</div>
</div>
<div>
<article class="gallery">
<h1>Gallery</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et risus sit amet urna finibus lobortis a at ligula. Praesent lacinia mi non enim dictum, eu fringilla turpis finibus. Proin non turpis id nunc mattis accumsan ac eget felis. Praesent a nunc vel purus aliquet dapibus nec id enim. Etiam metus lorem, dictum quis ullamcorper aliquet, malesuada tincidunt sapien. Nulla felis risus, feugiat quis laoreet sit amet, elementum a nunc. Sed venenatis neque sit amet fermentum commodo. Sed eu ornare nibh. Nullam semper vitae dui vitae tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sed aliquam mauris. Phasellus volutpat nisi facilisis eros aliquet molestie.
Fusce feugiat eros a nulla lobortis maximus. Morbi metus felis, efficitur at pharetra in, tincidunt at est. Nam non lectus tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ut turpis in ante sodales gravida. Vestibulum ut neque vitae leo vulputate imperdiet eget vel.
</p>
</article>
<div class="flex-template">
<div class="subscription">
<h1>Subscription</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et risus sit amet urna finibus lobortis a at ligula. Praesent lacinia mi non enim dictum, eu fringilla turpis finibus. Proin non turpis id nunc mattis accumsan ac eget felis. Praesent a nunc vel purus aliquet dapibus nec id enim. Etiam metus lorem, dictum quis ullamcorper aliquet, malesuada tincidunt sapien. Nulla felis risus, feugiat quis laoreet sit amet, elementum a nunc. Sed venenatis neque sit amet fermentum commodo. Sed eu ornare nibh. Nullam semper vitae dui vitae tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sed aliquam mauris. Phasellus volutpat nisi facilisis eros aliquet molestie.
Fusce feugiat eros a nulla lobortis maximus. Morbi metus felis, efficitur at pharetra in, tincidunt at est. Nam non lectus tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ut turpis in ante sodales gravida. Vestibulum ut neque vitae leo vulputate imperdiet eget vel.
</p>
<button class="read-more">Read more</button>
</div>
<div class="services">
<h1>other Services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et risus sit amet urna finibus lobortis a at ligula. Praesent lacinia mi non enim dictum, eu fringilla turpis finibus. Proin non turpis id nunc mattis accumsan ac eget felis. Praesent a nunc vel purus aliquet dapibus nec id enim. Etiam metus lorem, dictum quis ullamcorper aliquet, malesuada tincidunt sapien. Nulla felis risus, feugiat quis laoreet sit amet, elementum a nunc. Sed venenatis neque sit amet fermentum commodo. Sed eu ornare nibh. Nullam semper vitae dui vitae tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sed aliquam mauris. Phasellus volutpat nisi facilisis eros aliquet molestie.
Fusce feugiat eros a nulla lobortis maximus. Morbi metus felis, efficitur at pharetra in, tincidunt at est. Nam non lectus tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ut turpis in ante sodales gravida. Vestibulum ut neque vitae leo vulputate imperdiet eget vel.
</p>
<button class="read-more">Read more</button>
</div>
</div>
</div>
</main>
<div class="contact-us">
<h1>Contact us</h1>
<form action="#" method="get"><br><br>
<label for="name">Name</label>
<input type="text" id="name" name="name">
<label for="email">Email</label>
<input type="text" id="email" name="email">
<label for="message">message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<h3>Message type</h3>
<label for="complaint"><input type="radio" name="mess-type" id="complaint" value="complaint"> Complaint</label>
<label for="suggestion"><input type="radio" name="mess-type" id="suggestion" value="suggestion"> Suggestion</label>
<br>
<button class="submit-btn">Submit</button>
</form>
</div>
<footer class="footer">
<p>Copy Right © 2023.</p>
</footer>
</body>
</html>