MyHyvesBookPlus/WebDB
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Added masonry grid to profile and group pages.

Browse Source
This commit is contained in:
K. Nobel
2017-01-17 12:25:09 +01:00
parent 44e20fba75
commit 0ef81a376a
5 changed files with 240 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
website/public/js/masonry.js Normal file
View File

@@ -0,0 +1,76 @@
margin = 20;
$(window).on("load", function() {
console.log("LOADED");
container = $("div.posts");
posts = container.children();
posts.remove();
column = $('<div class="column"></div>').append(posts);
container.append(column);
mansonry();
mansonry();
});
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizeFinished = setTimeout(function() {
mansonry();
}, 250);
});
function mansonry() {
columnCount = Math.floor($(".posts").width() / 250);
console.log("columns: " + columnCount);
/*
* Initialise columns.
*/
var columns = new Array(columnCount);
for (i = 0; i < columnCount; i++) {
columns[i] = [0, []];
console.log(columns[i]);
}
/*
* Function will find the column with the shortest height.
*/
function getShortestColumn(columns) {
column = columns[0];
for (i = 1; i < columnCount; i++) {
if (column[0] > columns[i][0]) {
column = columns[i];
}
}
return column;
}
/*
* Rearange the objects.
*/
j = 0;
posts.each(function(i) {
post = posts[i];
shortestColumn = getShortestColumn(columns);
shortestColumn[0] = shortestColumn[0] + $(post).height() + margin;
shortestColumn[1].push(post);
});
container.children().remove();
/*
* Display the objects again in the correct order.
*/
for (i = 0; i < columnCount; i++) {
column = $('<div class="column"></div>').append(columns[i][1]);
console.log(column);
container.append(column);
}
$("div.posts div.column").width(100/columnCount + "%");
}

49
website/public/styles/profile.css
View File

@@ -14,24 +14,47 @@
padding-top: 50px; padding-top: 50px;
} }
.posts { div.posts {
z-index: -1; padding-top: 20px;
margin-right: 0; width: calc(100% + 20px);
width: calc(100% + 15px);
}
.post-box {
display: inline-flex; display: inline-flex;
margin: 20px 15px 0 0;
padding: 25px;
background-color: #FFFFFF;
} }
/* fullscreen */ div.posts div.post {
.post-box { display: block;
width: calc(25% - 69px); margin: 20px 0 0 0;
padding: 10px;
width: calc(100% - 40px);
} }
div.posts div.post img {
width: 100%;
height: auto;
}
div.posts .post p.subscript {
text-align: right;
font-size: 8pt;
}
/*.posts {*/
/*z-index: -1;*/
/*margin-right: 0;*/
/*width: calc(100% + 15px);*/
/*}*/
/*.post-box {*/
/*display: inline-flex;*/
/*margin: 20px 15px 0 0;*/
/*padding: 25px;*/
/*background-color: #FFFFFF;*/
/*}*/
/*!* fullscreen *!*/
/*.post-box {*/
/*width: calc(25% - 69px);*/
/*}*/
@media only screen and (max-width: 1500px) { @media only screen and (max-width: 1500px) {
.post-box { .post-box {
width: calc(50% - 68px); width: calc(50% - 68px);

153
website/views/group.php
View File

@@ -42,85 +42,80 @@
</div> </div>
<div class="posts"> <div class="posts">
<div class="post-box platform"> <div class="post platform">
<div class="post"> <h2>Lorem</h2>
<h2>Tekst</h2> <p>Lorem ipsum dolor sit amet, consectetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> <p class="subscript">Enkele minuten geleden geplaatst</p>
<p class="post-date">Enkele minuten geleden geplaatst</p> </div>
</div> <div class="post platform">
</div> <h2>Image</h2>
<img src="http://i.imgur.com/ypIQKjE.jpg" alt="Olympic Mountains, Washington">
<div class="post-box platform"> <p class="subscript">Gisteren geplaatst</p>
<div class="post"> </div>
<h2>Tekst</h2> <div class="post platform">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> <h2>Ipsum</h2>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
</div> <p class="subscript">Maandag geplaatst</p>
</div> </div>
<div class="post platform">
<div class="post-box platform"> <h2>Dolor</h2>
<div class="post"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h2>Tekst</h2> <p class="subscript">4 Januari geplaatst</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> </div>
<p class="post-date">Enkele minuten geleden geplaatst</p> <div class="post platform">
</div> <h2>Sit</h2>
</div> <p>Lorem ipsum dolor sit.</p>
<p class="subscript">4 Januari geplaatst</p>
<div class="post-box platform"> </div>
<div class="post"> <div class="post platform">
<h2>Tekst</h2> <h2>Image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.</p> <img src="https://i.redditmedia.com/EBWWiEojgkRrdn89R7qF7tBZjJszJaIqgkWUH23s11A.jpg?w=576&s=ba4fe1f02485cb2327305924ef869a66" alt="Nunobiki Falls, Kobe Japan">
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="subscript">4 Januari geplaatst</p>
</div> </div>
</div> <div class="post platform">
<h2>Amet</h2>
<div class="post-box platform"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
<div class="post"> <p class="subscript">4 Januari geplaatst</p>
<h2>Tekst</h2> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> <div class="post platform">
<p class="post-date">Enkele minuten geleden geplaatst</p> <h2>Consectetur</h2>
</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
</div> <p class="subscript">4 Januari geplaatst</p>
</div>
<div class="post-box platform"> <div class="post platform">
<div class="post"> <h2>Adipisicing</h2>
<h2>Tekst</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> <p class="subscript">4 Januari geplaatst</p>
<p class="post-date">Enkele minuten geleden geplaatst</p> </div>
</div> <div class="post platform">
</div> <h2>Elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
<div class="post-box platform"> <p class="subscript">4 Januari geplaatst</p>
<div class="post"> </div>
<h2>Tekst</h2> <div class="post platform">
<p>Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> <h2>Geen error</h2>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
</div> <p class="subscript">4 Januari geplaatst</p>
</div> </div>
<div class="post platform">
<div class="post-box platform"> <h2>Image</h2>
<div class="post"> <img src="https://i.reddituploads.com/82c1c4dd0cfb4a4aa1cfa16f93f5dbfa?fit=max&h=1536&w=1536&s=dd629d407f3646ee6e3adb4da78c93f2" alt="Oregon cliffs are no joke.">
<h2>Afbeelding</h2> <p class="subscript">4 Januari geplaatst</p>
<img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]"> </div>
<p class="post-date">Gisteren geplaatst</p> <div class="post platform">
</div> <h2>Aliquid</h2>
</div> <p>Lorem ipsum dolor sit amet, consectetur.</p>
<p class="subscript">4 Januari geplaatst</p>
<div class="post-box platform"> </div>
<div class="post"> <div class="post platform">
<h2>Post</h2> <h2>Odit</h2>
<video width="250" controls> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
<source src="http://i.imgur.com/ujAO1Dl.mp4" type="video/mp4"> <p class="subscript">4 Januari geplaatst</p>
</video> </div>
<p class="post-date">Maandag geplaatst</p> <div class="post platform">
</div> <h2>Accusamus</h2>
</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
<p class="subscript">4 Januari geplaatst</p>
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<p class="post-date">4 Januari geplaatst</p>
</div>
</div> </div>
</div> </div>

1
website/views/head.php
View File

@@ -4,6 +4,7 @@
<script src="js/jquery.js"></script> <script src="js/jquery.js"></script>
<script src="js/header.js"></script> <script src="js/header.js"></script>
<script src="js/menu.js"></script> <script src="js/menu.js"></script>
<script src="js/masonry.js"></script>
<style> <style>
/* Add your css files here. */ /* Add your css files here. */
@import url("styles/main.css"); @import url("styles/main.css");

177
website/views/profile.php
View File

@@ -33,109 +33,80 @@
</div> </div>
<div class="posts"> <div class="posts">
<div class="post-box platform"> <div class="post platform">
<div class="post"> <h2>Lorem</h2>
<h2>Tekst</h2> <p>Lorem ipsum dolor sit amet, consectetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> <p class="subscript">Enkele minuten geleden geplaatst</p>
<p class="post-date">Enkele minuten geleden geplaatst</p> </div>
</div> <div class="post platform">
</div> <h2>Image</h2>
<img src="http://i.imgur.com/ypIQKjE.jpg" alt="Olympic Mountains, Washington">
<div class="post-box platform"> <p class="subscript">Gisteren geplaatst</p>
<div class="post"> </div>
<h2>Glitterzz :3</h2> <div class="post platform">
<img src="https://s-media-cache-ak0.pinimg.com/originals/5d/ab/86/5dab8634abeded269f4c456b3b7a6a90.gif" alt="Foto van [gebruikersnaam]"> <h2>Ipsum</h2>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
</div> <p class="subscript">Maandag geplaatst</p>
</div> </div>
<div class="post platform">
<div class="post-box platform"> <h2>Dolor</h2>
<div class="post"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h2>Tekst</h2> <p class="subscript">4 Januari geplaatst</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> </div>
<p class="post-date">Enkele minuten geleden geplaatst</p> <div class="post platform">
</div> <h2>Sit</h2>
</div> <p>Lorem ipsum dolor sit.</p>
<p class="subscript">4 Januari geplaatst</p>
<div class="post-box platform"> </div>
<div class="post"> <div class="post platform">
<h2>woooow</h2> <h2>Image</h2>
<img src="http://31.media.tumblr.com/5227ca92d5d028bae64060d3f32315c2/tumblr_myt7mjJahV1qimzy6o3_250.gif" alt="Foto van [gebruikersnaam]"> <img src="https://i.redditmedia.com/EBWWiEojgkRrdn89R7qF7tBZjJszJaIqgkWUH23s11A.jpg?w=576&s=ba4fe1f02485cb2327305924ef869a66" alt="Nunobiki Falls, Kobe Japan">
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="subscript">4 Januari geplaatst</p>
</div> </div>
</div> <div class="post platform">
<h2>Amet</h2>
<div class="post-box platform"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
<div class="post"> <p class="subscript">4 Januari geplaatst</p>
<h2>0.0</h2> </div>
<img src="https://68.media.tumblr.com/7b2da43b98c43016261831c240381fba/tumblr_o6ol996fHJ1tcu68no1_400.gif" alt="Foto van [gebruikersnaam]"> <div class="post platform">
<p class="post-date">Enkele minuten geleden geplaatst</p> <h2>Consectetur</h2>
</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
</div> <p class="subscript">4 Januari geplaatst</p>
</div>
<div class="post-box platform"> <div class="post platform">
<div class="post"> <h2>Adipisicing</h2>
<h2>Tekst</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> <p class="subscript">4 Januari geplaatst</p>
<p class="post-date">Enkele minuten geleden geplaatst</p> </div>
</div> <div class="post platform">
</div> <h2>Elit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
<div class="post-box platform"> <p class="subscript">4 Januari geplaatst</p>
<div class="post"> </div>
<h2>Tekst</h2> <div class="post platform">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.</p> <h2>Geen error</h2>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
</div> <p class="subscript">4 Januari geplaatst</p>
</div> </div>
<div class="post platform">
<div class="post-box platform"> <h2>Image</h2>
<div class="post"> <img src="https://i.reddituploads.com/82c1c4dd0cfb4a4aa1cfa16f93f5dbfa?fit=max&h=1536&w=1536&s=dd629d407f3646ee6e3adb4da78c93f2" alt="Oregon cliffs are no joke.">
<h2>Tekst</h2> <p class="subscript">4 Januari geplaatst</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> </div>
<p class="post-date">Enkele minuten geleden geplaatst</p> <div class="post platform">
</div> <h2>Aliquid</h2>
</div> <p>Lorem ipsum dolor sit amet, consectetur.</p>
<p class="subscript">4 Januari geplaatst</p>
<div class="post-box platform"> </div>
<div class="post"> <div class="post platform">
<h2>Tekst</h2> <h2>Odit</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="subscript">4 Januari geplaatst</p>
</div> </div>
</div> <div class="post platform">
<h2>Accusamus</h2>
<div class="post-box platform"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
<div class="post"> <p class="subscript">4 Januari geplaatst</p>
<h2>Tekst</h2>
<p>Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Afbeelding</h2>
<img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
<p class="post-date">Gisteren geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<video width="250" controls>
<source src="http://i.imgur.com/ujAO1Dl.mp4" type="video/mp4">
</video>
<p class="post-date">Maandag geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<p class="post-date">4 Januari geplaatst</p>
</div>
</div> </div>
</div> </div>