.body-wrapper
.wrapper
.header
.tray
.tray-btns
.exit-btn
.big-btn
.small-btn
.clear-fix
.logo
.info
.username Mahmoud Aslan
.search
input(type="text" placeholder="Search")
.view
.name View
.value
input(type="checkbox" id="check" class="view-input")
.show
.item Card
.item Grid
label(for="check" class="view-label")
.view-btn Card
.clear-fix
.sort
.name Sort
.value
input(type="checkbox" id="check2" class="sort-input")
.show
.item Name
.item Date
label(for="check2" class="sort-label")
.sort-btn Name
.clear-fix
.options
.clear-fix
.content
.arrows
.left-arrow
|<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
| <path fill="#cfd8dc" d="M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"></path></svg>
.right-arrow
|<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
| <path fill="#cfd8dc" d="M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z"></path></svg>
.clear-fix
.card.left.l4
.avatar(style="background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/l4.jpeg')")
.info
.name Dan Jordan
.status Status: At work
.missed-msg
.num
.value 100
.desc Hey Dude <br>
|How it's going ? <br>
|I need your help in something Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.clear-fix
.setting
.last-seen Last seen at 2:00 am
.options
.clear-fix
.card.left.l3
.avatar(style="background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/l3.jpg')")
.info
.name Dan Jordan
.status Status: At work
.missed-msg
.num
.value 100
.desc Hey Dude <br>
|How it's going ? <br>
|I need your help in something Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.clear-fix
.setting
.last-seen Last seen at 2:00 am
.options
.clear-fix
.card.left.l2
.avatar(style="background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/l2.jpg')")
.info
.name Dan Jordan
.status Status: At work
.missed-msg
.num
.value 100
.desc Hey Dude <br>
|How it's going ? <br>
|I need your help in something Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.clear-fix
.setting
.last-seen Last seen at 2:00 am
.options
.clear-fix
.card.left.l1
.avatar(style="background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/l1.jpg')")
.info
.name Dan Jordan
.status Status: At work
.missed-msg
.num
.value 100
.desc Hey Dude <br>
|How it's going ? <br>
|I need your help in something Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.clear-fix
.setting
.last-seen Last seen at 2:00 am
.options
.clear-fix
.card.active
.avatar(style="background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/a.jpeg')")
.info
.name Dan Jordan
.status Status: At work
.missed-msg
.num
.value 100
.desc Hey Dude <br>
|How it's going ? <br>
|I need your help in something Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.clear-fix
.setting
.last-seen Last seen at 2:00 am
.options
.clear-fix
.card.right.l1
.avatar(style="background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/r1.jpeg')")
.info
.name Dan Jordan
.status Status: At work
.missed-msg
.num
.value 100
.desc Hey Dude <br>
|How it's going ? <br>
|I need your help in something Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.clear-fix
.setting
.last-seen Last seen at 2:00 am
.options
.clear-fix
.card.right.l2
.avatar(style="background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/r2.jpg')")
.info
.name Dan Jordan
.status Status: At work
.missed-msg
.num
.value 100
.desc Hey Dude <br>
|How it's going ? <br>
|I need your help in something Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.clear-fix
.setting
.last-seen Last seen at 2:00 am
.options
.clear-fix
.card.right.l3
.avatar(style="background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/r3.jpeg')")
.info
.name Dan Jordan
.status Status: At work
.missed-msg
.num
.value 100
.desc Hey Dude <br>
|How it's going ? <br>
|I need your help in something Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.clear-fix
.setting
.last-seen Last seen at 2:00 am
.options
.clear-fix
.card.right.l4
.avatar(style="background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/r4.jpeg')")
.info
.name Dan Jordan
.status Status: At work
.missed-msg
.num
.value 100
.desc Hey Dude <br>
|How it's going ? <br>
|I need your help in something Lorem ipsum dolor sit amet, consectetur adipisicing elit.
.clear-fix
.setting
.last-seen Last seen at 2:00 am
.options
.clear-fix
body
background-image: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/bg-1.jpg')
background-size: cover
color: #3e3e3e
font-family: 'raleway', sans-serif
.body-wrapper
position: relative
width: 100%
height: 100vh
//background: red
.wrapper
width: 950px
height: 550px
background: #f6f6f6
position: absolute
//margin: auto
top: 50%
left: 50%
transform: translate(-50%, -50%)
border-radius: 10px
box-shadow: 0px 0px 42.32px 3.68px rgba(0, 1, 1, 0.122)
overflow: hidden
&:before
content: ''
display: block
position: absolute
top: calc(-1 * calc(calc(100vh - 550px) / 2))
left: calc(-1 * calc(calc(100vw - 950px) / 2))
width: 100vw
height: 100vh
background: url('https://raw.githubusercontent.com/mhmoodlan/Spread-Messenger/master/assets/img/bg-1.jpg')
background-size: cover
z-index: -1
opacity: 0.4
-webkit-filter: blur(10px)
.header
position: relative
width: 100%
height: 90
.tray
width: 100%
height: 25px
background: white
position: relative
.tray-btns
width: 15%
height: 25px
//background: pink
padding-left: 15px
box-sizing: border-box
.exit-btn,
.big-btn,
.small-btn
width: 10px
height: 10px
border-radius: 50%
background: red
position: relative
top: 7.5px
float: left
.big-btn
background: orange
left: 5px
.small-btn
background: green
left: 10px
.logo
position: absolute
width: 70px
height: 25px
background: url('')
background-position: center
background-repeat: no-repeat
background-size: contain
left: 50%
top: 0
transform: translate(-50%, 0)
.info
width: 100%
height: 65px
background: rgba(255, 255, 255, 0.5)
font-size: 11px
.username
width: 25%
height: 65px
//background: pink
line-height: 65px
color: #206b96
//font-size: 12px
text-align: left
padding-left: 30px
box-sizing: border-box
float: left
.search
width: 45%
height: 65px
//background: yellow
float: left
position: relative
input[type="text"]
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
border: 0
border-bottom: 1px solid rgba(0, 0, 0, 0.15)
background: transparent
width: 85%
//font-size: 12px
&:focus
outline: none
border-bottom: 1px solid rgba(0, 0, 0, 0.3)
.view,
.sort
width: 12.5%
height: 65px
//background: blue
float: left
line-height: 65px
//font-size: 12px
.name,
.value
float: left
.name
width: 30%
//background: pink
.view
.value
position: relative
.view-input
display: none
.view-input:checked ~ .view-label .view-btn
border-radius: 5px 5px 0px 0px
.view-input:checked ~ .show
display: block
.show
position: absolute
width: 55px
height: auto
display: none
background: white
top: 42.5px
border-radius: 0px 0px 5px 5px
z-index: 1000
box-shadow: 0px 0px 10px 1px rgba(106, 106, 106, 0.25)
.item
width: 55px
height: auto
text-align: left
cursor: pointer
padding: 5px
box-sizing: border-box
line-height: 20px
&:hover
background: rgba(246, 246, 246, 1)
.view-label
position: relative
width: 55px
height: 20px
cursor: pointer
.view-btn
position: relative
width: 55px
height: 20px
background: #6a6a6a
margin-top: 32.5px
transform: translate(0, -50%)
border-radius: 5px
color: white
text-align: left
padding-left: 5px
box-sizing: border-box
line-height: 20px
.sort
.value
position: relative
.sort-input
display: none
.sort-input:checked ~ .sort-label .sort-btn
border-radius: 5px 5px 0px 0px
.sort-input:checked ~ .show
display: block
.show
position: absolute
width: 55px
height: auto
display: none
background: white
top: 42.5px
border-radius: 0px 0px 5px 5px
z-index: 1000
box-shadow: 0px 0px 10px 1px rgba(106, 106, 106, 0.25)
.item
width: 55px
height: auto
text-align: left
cursor: pointer
padding: 5px
box-sizing: border-box
line-height: 20px
&:hover
background: rgba(246, 246, 246, 1)
.sort-label
position: relative
width: 55px
height: 20px
cursor: pointer
.sort-btn
position: relative
width: 55px
height: 20px
background: #6a6a6a
margin-top: 32.5px
transform: translate(0, -50%)
border-radius: 5px
color: white
text-align: left
padding-left: 5px
box-sizing: border-box
line-height: 20px
.options
width: 5%
height: 65px
//background: cyan
float: left
line-height: 65px
//font-size: 12px
.content
position: relative
width: 100%
height: 510px
//background: pink
top: -25px
.arrows
position: absolute
top: 50%
left: 0
transform: translate(0,-50%)
height: auto
width: 100%
//background: pink
padding: 0 25px
box-sizing: border-box
.left-arrow,
.right-arrow
cursor: pointer
position: relative
width: 20px
height: 20px
//background: red
float: left
transform: scale(1.2)
filter: drop-shadow(0 0px 3.5px rgba(0, 0, 0, 0.55))
svg
path
fill: white
.right-arrow
float: right
transform: scale(1.2) rotateZ(180deg)
.card
position: absolute
min-width: 300px
min-height: 400px
max-width: 300px
max-height: 400px
background: rgba(246, 246, 246, 1)
box-shadow: 0px 0px 51.87px 5.13px rgba(0, 1, 1, 0.153)
top: 50%
left: 50%
transform: translate(-50%, -50%)
background: cover
border-radius: 5px
transition: all 0.3s ease-in-out
.info
text-align: center
margin-top: 30px
.name
font-size: 24px
font-weight: 500
.status
font-size: 12px
.missed-msg
margin-top: 30px
height: 75px
//background: yellow
.num
position: relative
color: white
min-width: 20%
min-height: 75px
//background: pink
float: left
text-align: center
overflow: hidden
.value
width: auto
min-width: 25px
height: 25px
border-radius: 25px
background: #c62828
padding: 0px 5px
box-sizing: border-box
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
line-height: 25px
font-size: 12px
&::after
content: ''
display: block
width: 1px
height: 100%
background: #bccbd5
position: absolute
right: 0
top: 0
.desc
position: relative
width: 80%
max-height: 75px
padding: 15px
box-sizing: border-box
//background: red
float: left
font-size: 10px
color: #206b96
overflow: hidden
&::after
content: ''
display: block
width: 100%
height: 50px
position: absolute
bottom: 0
left: 0
background: linear-gradient(transparent, rgba(246, 246, 246, 0.7), rgba(246, 246, 246, 1))
.setting
margin-top: 40px
.last-seen
float: left
width: calc(90% - 20px)
height: 20px
line-height: 20px
//background: pink
font-size: 10px
color: #6a6a6a
padding: 0px 20px
box-sizing: border-box
.options
width: 10%
//background: red
float: left
height: 20px
.avatar
position: relative
width: 100%
height: 150px
border-radius: 5px
background-size: cover
&:after
content: ''
display: block
width: 100%
height: 40px
position: absolute
bottom: 0
left: 0
background: linear-gradient(transparent ,rgba(246, 246, 246, 1))
&.left.l1,
&.right.l1
left: 40%
//min-width: 225px
//min-height: 275px
transform: translate(-50%, -50%) scale(0.95)
-webkit-filter: blur(1px)
&.left.l2,
&.right.l2
left: 33%
//min-width: 215px
//min-height: 265px
transform: translate(-50%, -50%) scale(0.85)
opacity: 0.9
-webkit-filter: blur(2px)
&.left.l3,
&.right.l3
left: 28%
//min-width: 205px
//min-height: 255px
transform: translate(-50%, -50%) scale(0.75)
opacity: 0.8
-webkit-filter: blur(3px)
&.left.l4,
&.right.l4
left: 25%
//min-width: 200px
//min-height: 250px
transform: translate(-50%, -50%) scale(0.65)
opacity: 0.7
-webkit-filter: blur(7px)
&.right.l1
left: 60%
z-index: 13
&.right.l2
left: 67%
z-index: 12
&.right.l3
left: 72%
z-index: 11
&.right.l4
left: 75%
z-index: 10
&.active
left: 50%
transform: translate(-50%, -50%) scale(1)
-webkit-filter: blur(0px)
z-index: 50
&.slideLeft
animation: slideLeft 0.3s ease-in-out forwards
&.slideRight
animation: slideRight 0.3s ease-in-out forwards
.clear-fix
clear: both
@keyframes slideLeft
0%
left: 50%
transform: translate(-50%, -50%) scale(1)
50%
transform: translate(-50%, -50%) scale(0.975) rotateY(45deg)
100%
left: 40%
transform: translate(-50%, -50%) scale(0.95)
//-webkit-filter: blur(1px)
@keyframes slideRight
0%
left: 50%
transform: translate(-50%, -50%) scale(1)
50%
transform: translate(-50%, -50%) scale(0.975) rotateY(45deg)
100%
left: 60%
transform: translate(-50%, -50%) scale(0.95)
//-webkit-filter: blur(1px)
.zindexed
z-index: 20 !important
$( document ).ready(function() {
var rightCardsNotInPlace = 0;
var leftCardsNotInPlace = 0;
var classes = ["l1", "l2", "l3", "l4"];
var cards = $('.card').toArray();
var activeIndx = Math.floor($(cards).length/2);
$('.left-arrow').on('click', function() {
if(activeIndx < $(cards).length -1 ) {
active = $(cards[activeIndx]);
if(activeIndx < Math.floor($(cards).length/2)) {
var leftCards = $('.left').toArray();
leftCards.reverse();
for(var i = 0; i < leftCards.length; i++) {
$(leftCards[i]).removeClass("l"+(i+1)).addClass("l"+(i+2));
}
}
active.addClass('slideLeft').addClass('left').addClass('l1');
active.removeClass('slideLeft');
next = $(cards[activeIndx+1]);
next.removeClass('right').removeClass('l1');
if(activeIndx >= Math.floor($(cards).length/2)) {
var rightCards = $('.right').toArray();
for(var i = 0; i < rightCards.length; i++) {
$(rightCards[i]).removeClass("l"+(i+2)).addClass("l"+(i+1));
}
}
active.removeClass('active');
next.addClass('active');
activeIndx++;
}
});
$('.right-arrow').on('click', function() {
if(activeIndx > 0) {
active = $(cards[activeIndx]);
if(activeIndx > Math.floor($(cards).length/2)) {
var rightCards = $('.right').toArray();
for(var i = 0; i < rightCards.length; i++) {
$(rightCards[i]).removeClass("l"+(i+1)).addClass("l"+(i+2));
}
}
active.addClass('slideRight').addClass('right').addClass('l1');
active.removeClass('slideRight');
next = $(cards[activeIndx-1]);
next.removeClass('left').removeClass('l1');
if(activeIndx <= Math.floor($(cards).length/2)) {
var leftCards = $('.left').toArray();
leftCards.reverse();
for(var i = 0; i < leftCards.length; i++) {
$(leftCards[i]).removeClass("l"+(i+2)).addClass("l"+(i+1));
}
}
active.removeClass('active');
next.addClass('active');
activeIndx--;
}
});
// handling chat contacts
var chatContacts = $('.contact').toArray();
var chatActiveIndx = Math.floor($(chatContacts).length/2);
$('.chat-top-arrow').on('click', function() {
if(chatActiveIndx < $(chatContacts).length -1 ) {
active = $(chatContacts[chatActiveIndx]);
if(chatActiveIndx < Math.floor($(chatContacts).length/2)) {
var topCards = $('.top').toArray();
topCards.reverse();
for(var i = 0; i < topCards.length; i++) {
$(topCards[i]).removeClass("l"+(i+1)).addClass("l"+(i+2));
}
var sss = $('.contact.bottom.l1.base'+(3 - chatActiveIndx)).removeClass('faded');
}
if(chatActiveIndx >= Math.floor($(chatContacts).length/2)) {
$('.contact.top.l1').addClass('faded');
}
active.addClass('slideTop').addClass('top').addClass('l1').addClass('base'+(chatActiveIndx-1));
active.removeClass('slideTop');
next = $(chatContacts[chatActiveIndx+1]);
next.removeClass('bottom').removeClass('l1');
if(chatActiveIndx >= Math.floor($(chatContacts).length/2)) {
var bottomCards = $('.bottom').toArray();
for(var i = 0; i < bottomCards.length; i++) {
$(bottomCards[i]).removeClass("l"+(i+2)).addClass("l"+(i+1));
}
}
active.removeClass('active');
next.addClass('active');
chatActiveIndx++;
}
});
$('.chat-bottom-arrow').on('click', function() {
if(chatActiveIndx > 0) {
active = $(chatContacts[chatActiveIndx]);
if(chatActiveIndx > Math.floor($(chatContacts).length/2)) {
var bottomCards = $('.bottom').toArray();
for(var i = 0; i < bottomCards.length; i++) {
$(bottomCards[i]).removeClass("l"+(i+1)).addClass("l"+(i+2));
}
var sss = $('.contact.top.l1.base'+(chatActiveIndx - 3)).removeClass('faded');
}
if(chatActiveIndx <= Math.floor($(chatContacts).length/2)) {
$('.contact.bottom.l1').addClass('faded');
}
active.addClass('slideBottom').addClass('bottom').addClass('l1').addClass('base'+(5 - chatActiveIndx));
active.removeClass('slideBottom');
next = $(chatContacts[chatActiveIndx-1]);
next.removeClass('top').removeClass('l1');
if(chatActiveIndx <= Math.floor($(chatContacts).length/2)) {
var topCards = $('.top').toArray();
topCards.reverse();
for(var i = 0; i < topCards.length; i++) {
$(topCards[i]).removeClass("l"+(i+2)).addClass("l"+(i+1));
}
}
active.removeClass('active');
next.addClass('active');
chatActiveIndx--;
}
});
});
External CSS
This Pen doesn't use any external CSS resources.