HTML
xxxxxxxxxx1
<div class="container my-5">2
3
4
<!--Section: Content-->5
<section class="magazine-section dark-grey-text">6
7
<!-- Section heading -->8
<h3 class="text-center font-weight-bold mb-4 pb-2">Magazine newsfeed</h3>9
<!-- Section description -->10
<p class="text-center w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in voluptate velit11
esse cillum dolore eu fugiat nulla sint occaecat cupidatat non proident, sunt culpa12
qui officia deserunt est laborum.</p>13
14
<!-- Grid row -->15
<div class="row">16
17
<!-- Grid column -->18
<div class="col-lg-6 col-md-12">19
20
<!-- Featured news -->21
<div class="single-news mb-4">22
23
<!-- Image -->24
<div class="view overlay rounded z-depth-1-half mb-4">25
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/82.jpg" alt="Sample image">26
<a>27
<div class="mask rgba-white-slight"></div>28
</a>29
</div>30
31
<!-- Data -->32
<div class="news-data d-flex justify-content-between">33
<a href="#!" class="light-blue-text">34
<h6 class="font-weight-bold"><i class="fas fa-plane pr-2"></i>Travels</h6>35
</a>36
<p class="font-weight-bold dark-grey-text"><i class="fas fa-clock-o pr-2"></i>20/08/2018</p>37
</div>38
39
<!-- Excerpt -->40
<h3 class="font-weight-bold dark-grey-text mb-3"><a>Title of the news</a></h3>41
<p class="dark-grey-text">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil42
impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis43
dolor44
repellendus.</p>45
46
</div>47
<!-- Featured news -->48
49
<!-- Small news -->50
<div class="single-news mb-4">51
52
<!-- Grid row -->53
<div class="row">54
55
<!-- Grid column -->56
<div class="col-md-3">57
58
<!--Image-->59
<div class="view overlay rounded z-depth-1 mb-4">60
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/photo8.jpg" alt="Sample image">61
<a>62
<div class="mask rgba-white-slight"></div>63
</a>64
</div>65
66
</div>67
<!-- Grid column -->68
69
<!-- Grid column -->70
<div class="col-md-9">71
72
<!-- Excerpt -->73
<p class="font-weight-bold dark-grey-text">19/08/2018</p>74
<div class="d-flex justify-content-between">75
<div class="col-11 text-truncate pl-0 mb-3">76
<a href="#!" class="dark-grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>77
</div>78
<a><i class="fas fa-angle-double-right"></i></a>79
</div>80
81
</div>82
<!-- Grid column -->83
84
</div>85
<!-- Grid row -->86
87
</div>88
<!-- Small news -->89
90
<!-- Small news -->91
<div class="single-news mb-4">92
93
<!-- Grid row -->94
<div class="row">95
96
<!-- Grid column -->97
<div class="col-md-3">98
99
<!--Image-->100
<div class="view overlay rounded z-depth-1 mb-4">101
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/54.jpg" alt="Sample image">102
<a>103
<div class="mask rgba-white-slight"></div>104
</a>105
</div>106
107
</div>108
<!-- Grid column -->109
110
<!-- Grid column -->111
<div class="col-md-9">112
113
<!-- Excerpt -->114
<p class="font-weight-bold dark-grey-text">18/08/2018</p>115
<div class="d-flex justify-content-between">116
<div class="col-11 text-truncate pl-0 mb-3">117
<a href="#!" class="dark-grey-text">Soluta nobis est eligendi optio cumque nihil impedit118
quo119
minus</a>120
</div>121
<a><i class="fas fa-angle-double-right"></i></a>122
</div>123
124
</div>125
<!-- Grid column -->126
127
</div>128
<!-- Grid row -->129
130
</div>131
<!-- Small news -->132
133
<!-- Small news -->134
<div class="single-news mb-lg-0 mb-4">135
136
<!-- Grid row -->137
<div class="row">138
139
<!-- Grid column -->140
<div class="col-md-3">141
142
<!--Image-->143
<div class="view overlay rounded z-depth-1 mb-lg-0 mb-4">144
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" alt="Sample image">145
<a>146
<div class="mask rgba-white-slight"></div>147
</a>148
</div>149
150
</div>151
<!-- Grid column -->152
153
<!-- Grid column -->154
<div class="col-md-9">155
156
<!-- Excerpt -->157
<p class="font-weight-bold dark-grey-text">17/08/2018</p>158
<div class="d-flex justify-content-between">159
<div class="col-11 text-truncate pl-0 mb-lg-0 mb-3">160
<a href="#!" class="dark-grey-text">Voluptatem accusantium doloremque</a>161
</div>162
<a><i class="fas fa-angle-double-right"></i></a>163
</div>164
165
</div>166
<!-- Grid column -->167
168
</div>169
<!-- Grid row -->170
171
</div>172
<!-- Small news -->173
174
</div>175
<!-- Grid column -->176
177
<!-- Grid column -->178
<div class="col-lg-6 col-md-12">179
180
<!-- Featured news -->181
<div class="single-news mb-4">182
183
<!-- Image -->184
<div class="view overlay rounded z-depth-1-half mb-4">185
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/84.jpg" alt="Sample image">186
<a>187
<div class="mask rgba-white-slight"></div>188
</a>189
</div>190
191
<!-- Data -->192
<div class="news-data d-flex justify-content-between">193
<a href="#!" class="pink-text">194
<h6 class="font-weight-bold"><i class="fas fa-home pr-2"></i>Lifestyle</h6>195
</a>196
<p class="font-weight-bold dark-grey-text"><i class="fas fa-clock-o pr-2"></i>24/08/2018</p>197
</div>198
199
<!-- Excerpt -->200
<h3 class="font-weight-bold dark-grey-text mb-3"><a>Title of the news</a></h3>201
<p class="dark-grey-text">Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem202
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis203
et quasi architecto beatae.</p>204
205
</div>206
<!-- Featured news -->207
208
<!-- Small news -->209
<div class="single-news mb-4">210
211
<!-- Grid row -->212
<div class="row">213
214
<!-- Grid column -->215
<div class="col-md-3">216
217
<!--Image-->218
<div class="view overlay rounded z-depth-1 mb-4">219
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/86.jpg" alt="Sample image">220
<a>221
<div class="mask rgba-white-slight"></div>222
</a>223
</div>224
225
</div>226
<!-- Grid column -->227
228
<!-- Grid column -->229
<div class="col-md-9">230
231
<!-- Excerpt -->232
<p class="font-weight-bold dark-grey-text">23/08/2018</p>233
<div class="d-flex justify-content-between">234
<div class="col-11 text-truncate pl-0 mb-3">235
<a href="#!" class="dark-grey-text">Itaque earum rerum hic tenetur a sapiente delectus</a>236
</div>237
<a><i class="fas fa-angle-double-right"></i></a>238
</div>239
240
</div>241
<!-- Grid column -->242
243
</div>244
<!-- Grid row -->245
246
</div>247
<!-- Small news -->248
249
<!-- Small news -->250
<div class="single-news mb-4">251
252
<!-- Grid row -->253
<div class="row">254
255
<!-- Grid column -->256
<div class="col-md-3">257
258
<!--Image-->259
<div class="view overlay rounded z-depth-1 mb-4">260
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" alt="Sample image">261
<a>262
<div class="mask rgba-white-slight"></div>263
</a>264
</div>265
266
</div>267
<!-- Grid column -->268
269
<!-- Grid column -->270
<div class="col-md-9">271
272
<!-- Excerpt -->273
<p class="font-weight-bold dark-grey-text">22/08/2018</p>274
<div class="d-flex justify-content-between">275
<div class="col-11 text-truncate pl-0 mb-3">276
<a href="#!" class="dark-grey-text">Soluta nobis est eligendi optio cumque nihil impedit277
quo278
minus</a>279
</div>280
<a><i class="fas fa-angle-double-right"></i></a>281
</div>282
283
</div>284
<!-- Grid column -->285
286
</div>287
<!-- Grid row -->288
289
</div>290
<!-- Small news -->291
292
<!-- Small news -->293
<div class="single-news mb-4">294
295
<!-- Grid row -->296
<div class="row">297
298
<!-- Grid column -->299
<div class="col-md-3">300
301
<!--Image-->302
<div class="view overlay rounded z-depth-1 mb-md-0 mb-4">303
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(56).jpg"304
alt="Sample image">305
<a>306
<div class="mask rgba-white-slight"></div>307
</a>308
</div>309
310
</div>311
<!-- Grid column -->312
313
<!-- Grid column -->314
<div class="col-md-9">315
316
<!-- Excerpt -->317
<p class="font-weight-bold dark-grey-text">21/08/2018</p>318
<div class="d-flex justify-content-between">319
<div class="col-11 text-truncate pl-0">320
<a href="#!" class="dark-grey-text">Maiores alias consequatur aut perferendis</a>321
</div>322
<a><i class="fas fa-angle-double-right"></i></a>323
</div>324
325
</div>326
<!-- Grid column -->327
328
</div>329
<!-- Grid row -->330
331
</div>332
<!-- Small news -->333
334
</div>335
<!-- Grid column -->336
337
</div>338
<!-- Grid row -->339
340
</section>341
<!--Section: Content-->342
343
344
</div>CSS
1
1
JS
1
1
Console errors: 0