Tinder app made in CSS

HTML
<div class="phone"> <div class="app"> <div class="header"> <span class="settings"></span> <img src="http://web.arjentienkamp.com/codepen/tinder/logo.jpg"/> <span class="chat"></span> </div> <div class="content"> </div> <div class="footer"> <div id="swipe_dislike" class="rate"></div> <div class="info"></div> <div id="swipe_like" class="rate"></div> </div> </div> </div>
CSS
.phone { width: 350px; height: 600px; font-family: 'Noto Sans', sans-serif; background: url(http://web.arjentienkamp.com/codepen/tinder/iphone.png); background-size: 382px; background-repeat: no-repeat; margin-left: auto; margin-right: auto; margin-top: 4em; padding-top: 7em; padding-left: 3.2em; padding-right: 3.7em; } .app { width: 285px; height: 490px; background-color: #FFF; padding-top: 12px; } .content { padding: 10px; padding-top: 0px; } .header { background-color: #FFF; width:100%; height:40px; border-bottom: 1px solid #e2e2e2; text-align: center; margin-bottom: 10px; } .header img { width:70px; } div.photo { position:absolute; display: block; margin-left: auto; margin-right: auto; width:265px; height:315px; border:1px solid #a6a9aa; border-radius: 8px; background-size: cover; background-repeat: no-repeat; box-shadow: 0px 1px 7px 0px #cfcfcf; } span.meta { display: block; height:48px; background-color: #FFF; margin-top: 267px; border-radius: 0px 0px 8px 8px; font-size: 18px; box-sizing:border-box; padding: 12px; } span.meta span { float: right; color:#cfcfcf; } .users { display: block; width: 20px; background: url(http://web.arjentienkamp.com/codepen/tinder/users.png); background-size: 20px; background-repeat: no-repeat; padding-left: 30px; background-position: 5px; } .moments { display: block; width: 14px; background: url(http://web.arjentienkamp.com/codepen/tinder/moments.png); background-size: 26px; background-repeat: no-repeat; padding-left: 35px; background-position: 5px; } .chat { display: block; width: 34px; height: 30px; background: url(http://web.arjentienkamp.com/codepen/tinder/chat.png); background-size: 30px; background-repeat: no-repeat; padding-left: 4px; background-position: 5px; float: right; margin-top: 0px; } .settings { display: block; width: 34px; height: 30px; background: url(http://web.arjentienkamp.com/codepen/tinder/settings.png); background-size: 30px; background-repeat: no-repeat; padding-left: 4px; background-position: 5px; float: left; margin-top: 0px; } .footer { margin-left: auto; margin-right: auto; margin-top: 318px; width: 100%; padding-left: 40px; padding-top: 6px; } .rate { width: 70px; height:70px; border-radius: 70px; background: #FFF; border: 5px solid #f0f0f0; float: left; box-shadow: 1px 1px 1px 0px #e9e9e9; } .rate:nth-child(1) { margin-left: 4px; background: url(http://web.arjentienkamp.com/codepen/tinder/delete.png); background-size: 25px; background-position: center; background-repeat: no-repeat; } .rate:nth-child(3) { margin-left: -4px; background: url(http://web.arjentienkamp.com/codepen/tinder/heart.png); background-size: 25px; background-position: center; background-repeat: no-repeat; } .info { width: 40px; height: 40px; border-radius: 40px; background: #FFF; border: 5px solid #f0f0f0; float: left; box-shadow: 1px 1px 1px 0px #e9e9e9; margin-top: 14px; margin-left: -4px; background: url(http://web.arjentienkamp.com/codepen/tinder/info.png); background-size: 15px; background-position: center; background-repeat: no-repeat; } p { padding:0; margin:0; float: left; }
JAVASCRIPT
$(document).ready(function(event) { $("div#swipe_like").on( "click", function() { swipeLike(); }); $("div#swipe_dislike").on( "click", function() { swipeDislike(); }); addNewProfile(); function swipe() { Draggable.create("#photo", { throwProps:true, onDragEnd:function(endX) { if(Math.round(this.endX) > 0 ) { swipeLike(); } else { swipeDislike(); } console.log(Math.round(this.endX)); } }); } function swipeLike() { var $photo = $("div.content").find('#photo'); var swipe = new TimelineMax({repeat:0, yoyo:false, repeatDelay:0, onComplete:remove, onCompleteParams:[$photo]}); swipe.staggerTo($photo, 0.8, {bezier:[{left:"+=400", top:"+=300", rotation:"60"}], ease:Power1.easeInOut}); addNewProfile(); } function swipeDislike() { var $photo = $("div.content").find('#photo'); var swipe = new TimelineMax({repeat:0, yoyo:false, repeatDelay:0, onComplete:remove, onCompleteParams:[$photo]}); swipe.staggerTo($photo, 0.8, {bezier:[{left:"+=-350", top:"+=300", rotation:"-60"}], ease:Power1.easeInOut}); addNewProfile(); } function remove(photo) { $(photo).remove(); } function addNewProfile() { var names = ['Lieke', 'Christina', 'Sanne', 'Soraya', 'Chanella', 'Larissa', 'Michelle'][Math.floor(Math.random() * 7)]; var ages = ['19','22','18','27','21', '18', '24'][Math.floor(Math.random() * 7)] var photos = ['1', '2', '3', '4', '5', '6', '7'][Math.floor(Math.random() * 7)] $("div.content").prepend('<div class="photo" id="photo" style="background-image:url(http://web.arjentienkamp.com/codepen/tinder/photo'+photos+'.jpg)">' + '<span class="meta">' + '<p>'+names+', '+ages+'</p>' + '<span class="moments">0</span>' + '<span class="users">0</span>' + '</span>' + '</div>'); swipe(); } });
Expand for more options Login