-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstory.html
203 lines (145 loc) · 6.74 KB
/
story.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!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>Unilab Level 2 Project</title>
<link rel="stylesheet" href="./css/header.css" >
<link rel="stylesheet" href="./css/story.css" >
<link rel="stylesheet" href="./css/tablet.css">
<link rel="stylesheet" href="./css/mobile.css">
</head>
<body>
<!-- Menu Header -->
<header class=" story_header_none fcs">
<div class="logo"><a href="#">LOGO</a></div>
<div id="menu" class="fcs" >
<ul class="fcs">
<li class="menu"><a href="#">HOME</a></li>
<li class="menu"><a href="#">DISCOVERY</a></li>
<li class="menu"><a href="#">PHOTOS</a></li>
<li class="menu"><a href="#">CONTACT</a></li>
</ul>
<div class="profile"><img src="./img/profile.png" alt="profile image"></div>
</div>
</header>
<div class="story story_header_none fcs">
<div class="story_home fcs">
<a href="./index.html"><img src="./svg/home.svg" alt="Home"></a>
<a href="#"><h5>STORY</h5></a>
<h5>/</h5>
<a href="#"><h5>WORLD NEWS</h5></a>
</div>
<a class="filter" href="#"><img src="./svg/filter.svg" alt="Filter"></a>
</div>
<div class="story_header_mobile">
<a href="./index.html"><img src="./svg/Arrow_Back.svg" alt=""></a>
<a class="filter" href="#"><img src="./svg/filter.svg" alt="Filter"></a>
</div>
<div class="worldnews fcs">
<div id="story_main1" class="fcs">
<div id="main_cont" class="fcs">
<h1>WORLD NEWS</h1>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet.</p>
<a class="fcs" href="#"><img src="./img/avatar.png" alt="Avatar"></a>
</div>
</div>
<div id="main2" class="fcs">
<form class="main2_form" action="" method="post">
<div class="select_date">
<p class="label">Select a date</p>
<select class="gray" name="date1" id="date1" aria-placeholder="Select...">
<option value="date">Select...</option>
<option value="march">March</option>
</select>
</div>
<div>
<p class="label">Enter the first keywords</p> <input class="search_form gray" type="search" placeholder="Search"></label>
</div>
<input class="submit_search" type="submit" value="SEARCH">
</form>
</div>
</div>
<div class="cont2">
<div class="cont2_1">
<a href="#"><img src="./img/avatar.png" alt="Avatar"></a>
<h4>Lorem ipsum dolor sit Lorem, ipsum dolor. amelorem3t.</h4>
</div>
<div class="column">
<p >
Lorem ipsum dolor sit amet consectetur, Lorem ipsum dolor sit amet consectetur adipisicing.adipisicing elit. Deserunt, vitae quae. Nesciunt incidunt molestiae laboriosam deleniti, quasi voluptatum harum tenetur sint obcaecati veritatis, rerum dolore et est eos fugit similique dolorum ipsam ab repudiandae ea delectus cupiditate dolor quos. Molestias in nihil modi quo repellat tempore velit ducimus id! Enim.
</p>
<p class="timestamp">2m ago</p>
</div>
</div>
<div class="cont3">
<img src="./img/eleph.png" alt="elephant">
<div class="text">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum ab neque quos dolorum ducimus quod inventore aperiam nulla, debitis quasi est aliquam officia! Quisquam, commodi sunt. Aliquid, explicabo quasi! Possimus dignissimos ipsum ratione. Nemo, beatae cupiditate? Maxime amet magni, sed perspiciatis est voluptatum at in? Nobis temporibus ipsum cumque quo adipisci. Eveniet provident, ipsum soluta aspernatur sint magni facilis dignissimos eos architecto! Dolor
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab, commodi esse. Porro, delectus error illum dignissimos libero tenetur a vero amet? Aperiam fugiat cumque repellendus,
<br>
<br>
aspernatur reprehenderit magni quam sint voluptate eos provident odio animi exercitationem commodi. Eveniet quidem id ea! Voluptatibus asperiores veniam, reiciendis quisquam neque placeat cumque magnam?
amet voluptates cum minus ratione quasi explicabo incidunt ipsam officia quisquam? Quae laboriosam, fugiat hic, nobis eum porro sed aperiam excepturi, laudantium aliquam numquam? Aliquid nostrum temporibus, aperiam cum quasi nam aliquam doloribus eos esse excepturi laudantium!</p>
</div>
</div>
<footer>
<div class="footer_content">
<table class="footer_menu">
<tr>
<td><a class="logo_footer" href="#">LOGO</a></td>
<td><a href="#">home</a></td>
<td><a href="#">about</a></td>
<td><a href="#">testimonials</a></td>
</tr>
<tr>
<td></td>
<td><a href="#">discovery</a></td>
<td><a href="#">help</a></td>
<td><a href="#">advertise</a></td>
</tr>
<tr>
<td></td>
<td><a href="#">photos</a></td>
<td><a href="#">terms</a></td>
<td><a href="#">integrations</a></td>
</tr>
<tr>
<td></td>
<td><a href="#">contact</a></td>
<td><a href="#">guidlines</a></td>
<td><a href="#">careers</a></td>
</tr>
</table>
<form class="email_form" action="/test-button" method="POST">
<input class="email_footer" type="email" name="email" id="email" placeholder="Email">
<button class="test-button">
<svg id="send" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path id="send-2" data-name="send" d="M10,16,8,8,0,6,16,0Z" fill="#fff"/>
</svg>
</button>
<br>
<p class="email">Stay in touch with us for the freshest products!</p>
</form>
<div class="grid-container">
<a href="#"><img src="./svg/instagram.svg" alt="Instagram"></a>
<a href="#"><img src="./svg/twitter.svg" alt="Twitter"></a>
<a href="#"><img src="./svg/facebook.svg" alt="Facebook"></a>
<a href="#"><img src="./svg/web.svg" alt="Web"></a>
</div>
</div>
</footer>
<div></div>
<div class="pagination numbering">
<a class="active" href="#">01</a>
<a href="#">02</a>
<a href="#">03</a>
<a href="#">04</a>
<a href="#">05</a>
<a href="#">06</a>
<a href="#">07</a>
</div>
</body>
</html>