forked from fikrcamp/HTML-Blog
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (132 loc) · 6.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>My Blog</title>
<link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML here -->
<div class="container">
<div class="nav">
<img src="/img/logo.png" alt="blog logo">
<h1>zayid blog</h1>
<ul>
<input type="text" placeholder="search">
<li>
<a href="#article">Article</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li><a href="#">Service</a></li>
<li>
<a href="#location"> About </a>
</li>
</ul>
</div>
<div class="header">
<h2>zayid mohamedy blog</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat totam suscipit expedita. Molestiae, eligendi
cum nihil illum molestias exercitationem consequatur esse quisquam natus aut, sit nesciunt quae facere nulla
doloremque.</p>
</div>
<div class="main">
<h1>🚩Posts</h1>
<div id="article" class="article article1">
<h2> 🥇 deliver your order</h2>
<img src="/img/img2.png" alt="article1 image">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et
veniam deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod
vel suscipit. <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus
repudiandae distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea?
Eius vero mollitia possimus omnis?
, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et veniam
deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod vel
suscipit. <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus repudiandae
distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea? Eius vero
mollitia possimus omnis?</p>
</div>
<div class="article article2">
<h2>🥈customize your design</h2>
<img src="/img/article2-img.jpg" alt="article2 image">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et
veniam deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod
vel suscipit. <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus
repudiandae distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea?
Eius vero mollitia possimus omnis?
, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ipsam distinctio odio incidunt et veniam
deserunt adipisci dolore architecto? Eos illum neque corporis laboriosam asperiores, facilis dicta quod vel
suscipit. <br>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem quasi temporibus repudiandae
distinctio. Minus rerum inventore sed nesciunt vitae quo vel exercitationem provident sapiente ea? Eius vero
mollitia possimus omnis?</p>
</div>
<div>
<button class="btn1">Read more</button>
</div>
<hr>
<hr>
<h1 id="location"> 💧location</h1>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3934.2625146994715!2d44.028599313758875!3d9.572624582875598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1628bfb3d91cb0d7%3A0x94716fd2eb28822!2sFikrcamp!5e0!3m2!1sbn!2sbd!4v1666256676292!5m2!1sbn!2sbd" width="800" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<h1> 📞contact</h1>
<hr>
<div id="contact" class="form">
<h2> Fill this form</h2>
<label for="name">Name</label>
<input type="text" placeholder="enter your name" >
<label for="name">Number</label>
<input type="text" placeholder="enter your number" >
<label for="name">Comment</label>
<input type="text" placeholder="add you comment here" >
<div class="btn">
<button>submit</button>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="blog-info">
<img src="/img/logo.png" alt="blog logo">
<h2>zayid mohamedy blog </h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat totam suscipit expedita. Molestiae, eligendi cum nihil illum molestias exercitationem consequatur esse quisquam natus aut, sit nesciunt quae facere nulla doloremque.
</p>
</div>
<div class="section">
<div class="sub sub2">
<h4><u>Posts</u></h4>
<ul>
<li>article1</li>
<li>article2</li>
<li>article3</li>
</ul>
</div>
<div class="sub sub3">
<h4><u>Service</u></h4>
<ul>
<li>web design</li>
<li>customizing design</li>
<li>more ...</li>
</ul>
</div>
<div class="sub4 sub">
<h4><u>location</u></h4>
<p>
Cecilia Chapman
711-2880 Nulla St.
Mankato Mississippi 96522
(257) 563-7401
</p>
</div>
</div>
</div>
<center>
<h3>zayidmohamedy All right reserved © 2022</h3>
</center>
</footer>
</body>
</html>