Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/devwars-week-10-business-card.markdown

Last active August 1, 2019 01:27
Show Gist options
  • Save harunpehlivan/9aa137b1f3bf2d58be43e0b48b8d07e5 to your computer and use it in GitHub Desktop.
Save harunpehlivan/9aa137b1f3bf2d58be43e0b48b8d07e5 to your computer and use it in GitHub Desktop.
Download ZIP
Week 10: Business card
Raw
index.html
<div id="rolodex">
<div id="prev" class="controllers"><span class="fa">&#xf064;</span></div>
<div id="next" class="controllers"><span class="fa">&#xf064;</span></div>
</div>
<div class="a7" id="card-1">
<div class="front">
<div class="ribbon"></div>
<div id="photo">
<img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1508690340" />
</div>
<div id="my-info">
<h2>HARUN PEHLİVAN</h2>
<span><p><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></span>
<p><a href="http://hpitgroupwebdesignstudio.bitballoon.com" target="_blank">HP IT GROUP Web Design Studio</a></p>
<button id="contact-me">Contact me</button>
</div>
</div>
<div class="back"></div>
</div>
<div class="a7" id="card-2">
<div class="front">
<div class="ribbon"></div>
<h2>My Web</h2>
<div id="portfolio-imgs">
<div>
<a target="_blank" href="http://tebimtebitagem.ticiz.com "><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebimtebitagem.ticiz.com?w=360" /></a>
<a target="_blank" href="http://harunpehlivan.thefanbase.net/"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.thefanbase.net?w=360" /></a>
<a target="_blank" href="https://harunpehlivan.jimdo.com/"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.jimdo.com?w=360" /></a>
<br />
<a target="_blank" href="http://harunpehlivantebimtebitagem.business.site/"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.business.site?w=360" /></a>
<a target="_blank" href="https://tebm.wordpress.com/"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebm.wordpress.com?w=360" /></a>
<a target="_blank" href="https://onlinecv.glitch.me/"><img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fonlinecv.glitch.me?w=360" /></a>
</div>
<div>
<a target="_blank" href="http://harunpehlivantebimtebitagem.bitballoon.com/"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.bitballoon.com?w=360" /></a>
<a target="_blank" href="http://founderceobloggerbusinesscardchallenge.bitballoon.com/"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ffounderceobloggerbusinesscardchallenge.bitballoon.com?w=360" /></a>
<a target="_blank" href="https://harunpehlivanizyon.glitch.me/"><img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fharunpehlivanizyon.glitch.me?w=360" /></a>
<br />
<a target="_blank" href="http://hptube.bitballoon.com/"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fhptube.bitballoon.com?w=360" /></a>
<a target="_blank" href="http://cssresponsivegridofhexagons.bitballoon.com/"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fcssresponsivegridofhexagons.bitballoon.com?w=360" /></a>
<a target="_blank" href="http://harunpehlivanresumeflexbox.bitballoon.com/"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivanresumeflexbox.bitballoon.com?w=360" /></a>
</div>
</div>
<div id="port-prev" class="port-ctrl fa">&#xf053;</div>
<div id="port-next" class="port-ctrl fa">&#xf054;</div>
</div>
<div class="back"></div>
</div>
<div class="a7" id="card-3">
<div class="front">
<div class="ribbon"></div>
<h2>Contact me!</h2>
<form>
<label for="name">Your name:<input type="text" name="name" id="name" placeholder="What's your name?" /></label>
<label for="subject">Subject:<input type="text" name="subject" id="subject" placeholder="Here we go!" /></label>
<label for="text">Subject:<textarea placeholder="Remember, be nice!" name="text" rows="1" id="text"></textarea></label>
<button>Send!</button>
</form>
</div>
<div class="back"></div>
</div>
<div class="a7" id="card-4">
<div class="front">
<div class="ribbon"></div>
<h2>You can also find me here:</h2>
<ul>
<li class="fa"><a href="https://www.facebook.com/profile.php?id=100008152065270">&#xf230;</a></li>
<li class="fa"><a href="https://twitter.com/HTERCUMANP">&#xf099;</a></li>
<li class="fa"><a href="http://plus.google.com/111320383727376607540/">&#xf0d5;</a></li>
<li class="fa"><a href="https://pinterest.com/harunpehlivan/">&#xf0d2;</a></li>
</ul>
</div>
<div class="back"></div>
</div>
<div class="a7 base">
</div>
Raw
script.js
$(document).ready( function() {
var showing = 1;
var prev;
var next;
var isShowing = false;
var total = $('.a7').length;
// Rotate: 12deg to -135deg.
setNextPrev();
$('#card-' + showing).show().css({zIndex: '2'});
$('#card-' + prev).css({ zIndex: '1', transform: 'perspective(1000px) rotateX(-135deg)' }).show();
$('#prev').click(function() {
showing--;
if (showing == 0)
showing = total-1;
setNextPrev();
$('#card-' + prev).css({ zIndex: '1', transform: 'perspective(1000px) rotateX(-135deg)' }).show();
$('#card-' + showing)
.show()
.css({ zIndex: 2 })
.animate(
{ zIndex: 137 },
{ duration: 500,
step: function(now, fx) { $(this).css({ transform: 'perspective(1000px) rotateX(' + (-135+now-2) + 'deg)' }); },
complete: function() {
$(this)
.css({ zIndex: '0' });
$('#card-' + next).css({zIndex: '0'}).hide();
}
});
});
$('#next').click(function() {
setNextPrev();
$('#card-' + next).css({zIndex: '1', transform: 'perspective(1000px) rotateX(12deg)'}).show();
$('#card-' + showing)
.css({ zIndex: 12 })
.animate(
{ zIndex: 147 },
{ duration: 500,
step: function(now, fx) { $(this).css({ transform: 'perspective(1000px) rotateX(-' + (now-12) + 'deg)' }); },
complete: function() {
$(this)
.css({ zIndex: '1' });
$('#card-' + next).css({zIndex: '2'});
showing = next;
}
});
});
function setNextPrev() {
prev = showing-1;
next = showing+1;
if (prev == 0)
prev = total-1;
if (next == total)
next = 1;
};
$('#port-prev').click(function() {
$('#portfolio-imgs').css({marginLeft: '0%'});
$(this).hide(500);
$('#port-next').show(500);
});
$('#port-next').click(function() {
$('#portfolio-imgs').css({marginLeft: '-100%'});
$(this).hide(500);
$('#port-prev').show(500);
});
$('.a7').click(function(event) {
event.stopPropagation();
});
var selected;
$('.base').click(function() {
selected = $('#card-' + showing);
selected
.addClass('zoom')
.animate(
{ zIndex: '25' },
{ duration: 500,
step: function(now, fx) {
$(this).css({
transform: 'scale(' + (now/10) + ',' + (now/10) + ')',
top: (now*2) + '%'
});
},
complete: function() {
isShowing = true;
}
});
});
$('body').click(function() {
if( isShowing ) {
selected
.animate(
{ zIndex: '2' },
{ duration: 500,
step: function(now, fx) {
$(this).css({
transform: 'scale(' + ((now*2.5/24)+1) + ',' + ((now*2.5/24)+1) + ') perspective(1000px) rotateX(12deg)',
top: (now/2.5) + '%'
});
},
complete: function() {
$(this)
.css({
transform: 'scale(1,1) perspective(1000px) rotateX(12deg)',
top: 'auto'
})
.removeClass('zoom');
isShowing = false;
}
});
}
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.scss
@import url(https://fonts.googleapis.com/css?family=Roboto:400;700);
@font-face {
font-family: 'awesomeFont';
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/fontawesome-webfont.woff2') format('woff2'),
url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/fontawesome-webfont.woff') format('woff'),
url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf') format('truetype');
}
$text-color: #656565;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
color: $text-color;
background: url(https://d29i1yqmtf7te0.cloudfront.net/upload/a9d31cf8-c1df-4a1d-b431-3436ef47f5f9/photo144131195616078a471e0638d.jpg);
background-size: cover;
height: 100vh;
}
a {
color: $text-color;
text-decoration: none;
transition: color 0.2s;
&:hover {
color: darken($text-color, 10%);
}
}
.fa {
font-family: 'awesomeFont';
}
#rolodex {
background: url() no-repeat;
width: 581px;
height: 447px;
position: absolute;
top: calc(50% - 223px);
left: calc(50% - 290px);
.controllers {
position: absolute;
top: calc(50% - 120px);
height: 135px;
width: 180px;
cursor: pointer;
&:hover {
color: darken($text-color, 15%);
}
span {
font-size: 80px;
margin-top: 20px;
transition: color 0.2s;
}
}
#prev {
left: -90px;
span {
float: left;
transform: rotate(-90deg);
}
}
#next {
right: -90px;
span {
float: right;
transform: rotate(90deg);
}
}
}
.a7 {
display: none;
position: absolute;
width: 334px;
height: 175px;
bottom: calc(50% + 64px);
left: calc(50% - 166px);
border-radius: 10px;
transform: perspective(1000px) rotateX(12deg);
transform-origin: 50% calc(100% + 11px);
transform-style: preserve-3d;
cursor: pointer;
.front, .back {
height: 100%;
width: 100%;
background-color: #eee;
border: 1px solid #C0C0C0;
border-radius: 10px;
padding: 0 10px;
backface-visibility: hidden;
position: absolute;
overflow: hidden;
}
.back {
transform: rotateX(-180deg);
background: url(http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png) no-repeat;
background-color: #eee;
background-size: 100px;
background-position: center;
}
.ribbon {
height: 15px;
width: 200%;
margin-left: -50%;
}
h2 {
margin-top: 3px;
font-size: 20px;
border-bottom: 1px solid lighten($text-color, 30%);
}
&.base {
background: none !important;
border: none !important;
display: block !important;
z-index: 100;
transition: background 0.2s;
&:hover {
background-color: rgba(255,255,255,0.15) !important;
}
}
&.zoom {
box-shadow: 5px 5px 3px #555;
cursor: auto;
overflow: hidden;
transform: none;
transform-origin: none;
}
&.next {
transform: perspective(1000px) rotateX(-135deg);
}
}
#card-1 {
.ribbon {
background-color: #A73CA5;
}
h2 {
margin-bottom: -5px;
}
#photo {
width: 100px;
height: 100%;
margin-right: 10px;
display: inline-block;
vertical-align: top;
img {
margin-top: 30px;
width: 100%;
}
}
#my-info {
width: calc(100% - 125px);
display: inline-block;
span {
display: inline-block;
font-size: 10px;
font-style: italic;
}
p {
font-size: 12px;
margin-top: 4px;
}
button {
position: absolute;
right: 20px;
bottom: 10px;
padding: 5px 10px;
background-color: #ddd;
color: $text-color;
border: 1px solid #ccc;
cursor: pointer;
transition: background 0.2s;
&:hover {
background-color: #eee;
}
}
}
}
#card-2 {
.ribbon {
background-color: #54B43C;
}
h2 {
margin-bottom: 5px;
}
.port-ctrl {
position: absolute;
bottom: 10px;
font-size: 20px;
cursor: pointer;
}
#port-prev {
display: none;
}
#port-next {
right: 10px;
}
#portfolio-imgs {
width: 200%;
transition: margin 1s;
& > div {
text-align: center;
display: inline-block;
width: 49%;
}
img {
display: inline-bock;
margin: 2px 10px;
width: 70px;
border-radius: 5px;
}
}
}
#card-3 {
.ribbon {
background-color: #FFB129;
}
label {
margin-top: 3px;
display: block;
font-size: 12px;
float: left;
width: 45%;
&:nth-child(2) {
float: right;
margin-left: 10%;
}
&:nth-child(3) {
width: 100%;
resize: none;
outline: none;
}
textarea,
input {
display: block;
width: 100%;
font-size: 10px;
padding: 2px 3px;
}
}
button {
float: right;
margin-top: 5px;
padding: 3px 10px;
background-color: #ddd;
color: $text-color;
border: 1px solid #ccc;
cursor: pointer;
transition: background 0.2s;
&:hover {
background-color: #eee;
}
}
}
#card-4 {
.ribbon {
background-color: #3B6EFF;
}
ul {
list-style: none;
width: 100%;
text-align: center;
li {
display: inline-block;
font-size: 40px;
margin: 40px 10px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment