-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathblogs.html
executable file
·299 lines (290 loc) · 11.3 KB
/
blogs.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
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-50M47KHK7T"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-50M47KHK7T");
</script>
<title>Blog</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/loader.css" />
<link rel="stylesheet" href="css/blogs.css" />
<link rel="stylesheet" href="css/nav.css" />
<link rel="stylesheet" href="css/fonts.css" />
<link rel="icon" href="assets/img/1x/Asset prev.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="./js/fontfaceobserver.standalone.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Jquery for checking if images are loaded-->
</head>
<body>
<div class="loader">
<img src="./assets/img/loader.gif" class="loader-video"/>
</div>
<nav class="navbar">
<!-- <div class="brand">
DVM
</div> -->
<div class="section-nav"></div>
<h1 class="brand">
<span class="text-wrapper">
<!-- <span class="line line1"></span> -->
<span class="letters" onclick="location.href='index.html'">DVM</span>
<!-- <span class="line line2"></span> -->
</span>
</h1>
<div class="ham" onclick="openCloseNav()">
<div class="ham-line"></div>
<div class="ham-line"></div>
</div>
</nav>
<div id="navContainer">
<div class="followContainer">
<h3 class="smallLinksHeader">Follow</h3>
<a
href="https://www.facebook.com/DVMBITSPilani"
class="smallLinks"
target="_blank"
>
<div class="smallLinksText">Facebook</div>
<div class="smallLinksIcons">
<img src="assets/icons/facebook (2)[email protected]" />
</div>
</a>
<a
href="https://www.instagram.com/dvmbitspilani/"
class="smallLinks"
target="_blank"
>
<div class="smallLinksText">Instagram</div>
<div class="smallLinksIcons">
<img src="assets/icons/[email protected]" />
</div>
</a>
<a
href="https://github.com/dvm-bitspilani"
class="smallLinks"
target="_blank"
>
<div class="smallLinksText">Github</div>
<div class="smallLinksIcons">
<img src="assets/icons/github.png" />
</div>
</a>
<a
href="https://www.linkedin.com/company/dvm-bitspilani/"
class="smallLinks"
target="_blank"
>
<div class="smallLinksText">LinkedIn</div>
<div class="smallLinksIcons">
<img src="assets/icons/linkedin.png" />
</div>
</a>
</div>
<div class="elementsContainer">
<div class="largeLinkContainer1">
<span class="text-wrapper">
<a class="largeLink1" href="index.html?about" target="_blank"
>About</a
>
</span>
</div>
<div class="largeLinkContainer2">
<span class="text-wrapper">
<a class="largeLink2" href="all-projects.html" target="_blank"
>Projects</a
>
</span>
</div>
<div class="largeLinkContainer3">
<span class="text-wrapper">
<a class="largeLink3" href="all-blogs.html" target="_blank"
>Blogs</a
>
</span>
</div>
<div class="largeLinkContainer4">
<span class="text-wrapper">
<a class="largeLink4" href="artworks.html" target="_blank"
>Artworks</a
>
</span>
</div>
<div class="largeLinkContainer5">
<span class="text-wrapper">
<a class="largeLink5" href="team.html" target="_blank">Team</a>
</span>
</div>
<div class="largeLinkContainer6">
<span class="text-wrapper">
<a class="largeLink6" href="index.html?contact" target="_blank"
>Contact Us</a
>
</span>
</div>
<!-- <a href="">About</a>
<a href="">Work</a>
<a href="">Blogs</a>
<a href="">Artworks</a>
<a href="">Achievements</a>
<a href="">Contact Us</a> -->
</div>
</div>
<div class="wrapper">
<div class="blog-title">
How to start coding and which language is the best
</div>
<div class="blog-details-container">
<div class="author-container">
<div class="author">by Name Surname</div>
<div class="blog-details">4th May 2021 * 3 min read</div>
</div>
<div class="social-media" style="display: none">
<!-- <div class="icon-holder"><i class="fa fa-instagram" aria-hidden="true"></i></div>
<div class="icon-holder"><i class="fa fa-dribbble" aria-hidden="true"></i></i></div>
<div class="icon-holder"><i class="fa fa-facebook" aria-hidden="true"></i></div>
-->
<div>
<img src="assets/icons/facebook (2)[email protected]" class="icon" />
</div>
<div>
<img src="assets/icons/[email protected]" class="icon" />
</div>
<div><img src="assets/icons/[email protected]" class="icon" /></div>
</div>
</div>
<div class="blog-image">
<img
src="content-blogs/blog1/[email protected]"
/>
</div>
<div class="active-recent">
<div class="active-blog">
<div class="intro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a
interdum magna. Donec interdum tellus arcu, elementum maximus elit
lobortis sed. Maecenas placerat id ligula eu dignissim. Duis eget
malesuada turpis. Nunc tempus laoreet est, id consequat tellus
scelerisque id. Ut pulvinar eros augue, et tempor leo facilisis sed.
Nulla at metus quis odio pellentesque dignissim ut vitae sapien.
</div>
<div class="content">
<h1>FIRST HEADING</h1>
Proin fringilla efficitur felis eu vestibulum. Maecenas cursus
imperdiet ante sed tempor. Phasellus eget lacus dui. Nullam accumsan
turpis quam, sed sollicitudin mi convallis a. Nulla iaculis arcu sit
amet libero vulputate, non cursus tortor mattis. Ut mi nunc, varius
vel aliquet vitae, ultricies non tellus. Vivamus ornare, augue in
fringilla ornare, magna magna dignissim mi, nec molestie dolor elit
at leo. Proin bibendum interdum convallis. Donec gravida sit amet
eros in rutrum.
<h1>SECOND HEADING</h1>
In hac habitasse platea dictumst. Duis ante enim, pretium a
ullamcorper suscipit, placerat nec ex. In pharetra erat nisi, eu
finibus eros vestibulum a. Mauris cursus interdum purus, in tempor
lectus rutrum quis. Integer ac dapibus eros, quis consequat magna.
Praesent semper congue cursus. Sed egestas ante dolor, nec aliquet
augue commodo dictum.
<h1>THIRD HEADING</h1>
Aenean urna metus, tempus sed efficitur a, lobortis nec nulla. Fusce
nec tincidunt tellus. Duis mollis lectus ex, ut tempor nisi pulvinar
nec. Praesent eget tempus sem. Pellentesque rhoncus justo sed leo
hendrerit ultricies. Fusce at lorem in velit molestie posuere. Etiam
vel ullamcorper leo. Vivamus fringilla ex ut nisi pellentesque, id
porta nisl tempor. Morbi tincidunt, lacus at efficitur vehicula,
neque urna ultricies sapien, et luctus lorem metus in justo. Nullam
in lectus magna. Ut scelerisque a tellus et dapibus. Vestibulum
sodales placerat erat, a viverra felis convallis sed. Phasellus
ullamcorper odio erat, eu feugiat ante malesuada ac. Fusce eu arcu
enim. Aliquam pulvinar neque quis purus congue, vitae finibus risus
faucibus. Mauris efficitur ut mauris placerat sollicitudin. Donec
justo lectus, facilisis nec erat rhoncus, suscipit molestie ipsum.
In at lorem ante. Cras nulla sapien, vulputate id pulvinar ut,
porttitor nec quam. Sed pharetra, augue at luctus vulputate, ante mi
volutpat nunc, vitae posuere ligula enim nec nisi. Curabitur odio
arcu, cursus a malesuada nec, pharetra ac purus. Donec imperdiet
risus ut sollicitudin rhoncus. Maecenas tempus efficitur mauris, sit
amet vulputate velit euismod pretium. Phasellus egestas lacus at
justo fermentum vulputate.
</div>
</div>
<div class="recent-blogs">
<div class="recent-blog-heading">
<div class="">Recent Blogs</div>
<div class="underline"></div>
</div>
<div>
<div class="recent-blogs-post">
<div class="other-post-image">
<img
src="content-blogs/blog2/joshua-reddekopp-GkFQEOubrCo-unsplash.png"
/>
</div>
<div class="other-post-heading">other-post-heading</div>
<div class="other-post-details">
<div class="other-post-author">Name surname</div>
<div class="dot"></div>
<div class="other-post-date">3rd May 2021</div>
</div>
</div>
<div class="recent-blogs-post">
<div class="other-post-image">
<img
src="content-blogs/blog3/kevin-ku-w7ZyuGYNpRQ-unsplash.png"
/>
</div>
<div class="other-post-heading">other-post-heading</div>
</div>
<div class="recent-blogs-post">
<div class="other-post-image">
<img
src="content-blogs/blog4/markus-spiske-hvSr_CVecVI-unsplash.png"
/>
</div>
<div class="other-post-heading">otherPostHeading</div>
</div>
</div>
</div>
</div>
<div class="left-right-container">
<a href="#">
<div class="left-blog">
<div class="circle">
<div class="arrow">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</div>
</div>
</div>
</a>
<a href="#">
<div class="right-blog">
<div class="circle">
<div class="arrow">
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</a>
</div>
</div>
<script src="js/navbar.js"></script>
<script src="js/recent-blogs.js"></script>
<script src="js/blogs.js"></script>
<script src="js/imageLoaded.js"></script>
</body>
</html>