Kevin prototype #16
21
website/group.php
Normal file
21
website/group.php
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<?php
|
||||
include("views/head.php");
|
||||
?>
|
||||
<body>
|
||||
<?php
|
||||
/*
|
||||
* This view adds the main layout over the screen.
|
||||
* Header, menu, footer.
|
||||
*/
|
||||
include("views/main.php");
|
||||
|
||||
/* Add your view files here. */
|
||||
include("views/group.php");
|
||||
|
||||
/* This adds the footer. */
|
||||
include("views/footer.php");
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
BIN
website/img/leave-group.png
Normal file
BIN
website/img/leave-group.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 B |
@@ -1,4 +1,4 @@
|
||||
.profile-box, .item-box, .post-box {
|
||||
.profile-box, .item-box, .item-box-full-width, .post-box {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.profile-box .profile-picture {
|
||||
.profile-box .profile-picture, .profile-box .group-picture {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: 0 20px 20px 0;
|
||||
@@ -18,13 +18,20 @@
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
width: calc(50% - 60px);
|
||||
.item-box, .item-box-full-width {
|
||||
margin: 20px 0 0 0;
|
||||
padding: 25px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
width: calc(50% - 60px);
|
||||
}
|
||||
|
||||
.item-box-full-width {
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.posts {
|
||||
z-index: -1;
|
||||
}
|
||||
@@ -47,7 +54,7 @@
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.friend-request {
|
||||
.profile-button {
|
||||
float: right;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
@@ -56,6 +63,6 @@
|
||||
transition-duration: 250ms;
|
||||
}
|
||||
|
||||
.friend-request:hover {
|
||||
.profile-button:hover {
|
||||
background-color: #B78996;
|
||||
}
|
||||
127
website/views/group.php
Normal file
127
website/views/group.php
Normal file
@@ -0,0 +1,127 @@
|
||||
<div class="content">
|
||||
<div class="profile-box">
|
||||
<img class="left group-picture" src="http://i.imgur.com/afjEUx2.jpg">
|
||||
<div class="profile-button">
|
||||
<p><img src="../website/img/leave-group.png"> Groep verlaten</p>
|
||||
</div>
|
||||
<h1 class="profile-username">[groepnaam]</h1>
|
||||
<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>
|
||||
|
||||
<div class="item-box-full-width">
|
||||
<h2>Leden</h2>
|
||||
<p>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
|
||||
|
||||
<a href="#vrienden">...en nog 25 anderen!</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="posts">
|
||||
<div class="post-box">
|
||||
<div class="post">
|
||||
<h2>Tekst</h2>
|
||||
<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="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-box">
|
||||
<div class="post">
|
||||
<h2>Tekst</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. 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">
|
||||
<div class="post">
|
||||
<h2>Tekst</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. 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">
|
||||
<div class="post">
|
||||
<h2>Tekst</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>
|
||||
<p class="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-box">
|
||||
<div class="post">
|
||||
<h2>Tekst</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. 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">
|
||||
<div class="post">
|
||||
<h2>Tekst</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 class="post-date">Enkele minuten geleden geplaatst</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-box">
|
||||
<div class="post">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<div class="post">
|
||||
<h2>Post</h2>
|
||||
<p class="post-date">4 Januari geplaatst</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="content">
|
||||
<div class="profile-box">
|
||||
<img class="left profile-picture" src="http://i.imgur.com/afjEUx2.jpg">
|
||||
<div class="friend-request">
|
||||
<div class="profile-button">
|
||||
<p><img src="../website/img/add-friend.png"> Als vriend toevoegen</p>
|
||||
</div>
|
||||
<h1 class="profile-username">[gebruikersnaam]</h1>
|
||||
|
||||
Reference in New Issue
Block a user