Skip to content

Instantly share code, notes, and snippets.

@averonesis

averonesis/happy-birthday-chadi.markdown

Created November 12, 2018 09:07
Show Gist options
  • Save averonesis/1c0d97bd6c9717ab80c1fae73072cd61 to your computer and use it in GitHub Desktop.
Save averonesis/1c0d97bd6c9717ab80c1fae73072cd61 to your computer and use it in GitHub Desktop.
Download ZIP
Happy Birthday, Chadi!
Raw
happy-birthday-chadi.markdown
Raw
index.pug
.outer-container
h1.wish - Wishing you -
.container
.arrow
.wheel
.inner-wheel#wheel
.section
span.b-day Happy Birthday!
.section
span.vertical.joy O
.section#love
span.fa.fa-heart.pulse
.section
span.adventure New Adventures
.section
span.vertical.fun U
.section
span.lots lots of
span.fa.fa-birthday-cake
.spin-button
.overlay
h1
| I love
br
| you berrrry
br
| much
.cherry-container-1
.cherry
.leaf
.cherry-container-2
.cherry
.leaf
.cherry-container-3
.cherry
.leaf
.cherry-container-4
.cherry
.leaf
.cherry-container-5
.cherry
.leaf
.cherry-container-6
.cherry
.leaf
.cherry-container-7
.cherry
.leaf
.cherry-container-8
.cherry
.leaf
.cherry-container-9
.cherry
.leaf
Raw
script.js
$(document).ready(function() {
var spins = 0;
$('.spin-button').click(function() {
spins++;
var randDegree = Math.floor(Math.random() * 1800) + 1;
var totalDegree = spins * 1800 + randDegree;
$('#wheel').css({'transform' : 'rotate(' + totalDegree + 'deg)'});
});
$('.fa-heart').click(function() {
$('.overlay').fadeIn();
})
$('.overlay').click(function() {
$(this).fadeOut();
})
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
style.sass
body
background-color: #4e4d4a
position: relative
width: 100vw
height: 100vh
min-height: 550px
.wish
text-align: center
margin: 0
padding: 25px
font-family: 'Rajdhani'
text-transform: uppercase
font-size: 40px
font-weight: bold
color: #5a6b65
background-color: #FFE5D9
.container
margin: 0 auto 50px
width: 400px
height: 100%
.arrow
width: 90px
height: 20px
background-color: #FFE5D9
margin: auto
margin-bottom: 30px
position: relative
&:after
content: ''
width: 0
height: 0
border-style: solid
border-width: 30px 55px 0
border-color: #FFE5D9 transparent
position: absolute
top: 20px
left: -10px
.wheel
width: 400px
height: 400px
border-radius: 50%
position: relative
overflow: hidden
.inner-wheel
border-radius: 50%
width: 400px
display: block
height: 400px
position: relative
overflow: hidden
transition: transform 1.2s ease-out
transform: rotate(0deg)
.spin-button
position: absolute
width: 60px
height: 60px
background-color: #373B44
border-radius: 50%
top: calc(50% - 30px)
left: calc(50% - 30px)
z-index: 9999999999
cursor: pointer
&:after
content: 'SPIN'
position: absolute
top: 22px
left: 10px
color: white
.section
position: absolute
text-align: center
z-index: -1
width: 0
height: 0
border-style: solid
border-width: 200px 116px 0
left: 84px
top: 0px
opacity: 1
transform-origin: 116px 200px
border-color: #5a6b65 transparent
&:nth-child(2)
transform: rotate(60deg)
border-color: #c9b7b0 transparent
&:nth-child(3)
transform: rotate(120deg)
border-color: #5a6b65 transparent
&:nth-child(4)
transform: rotate(180deg)
border-color: #d5a5a0 transparent
&:nth-child(5)
transform: rotate(240deg)
border-color: #c9b1b2 transparent
&:nth-child(6)
transform: rotate(300deg)
border-color: #BD9391 transparent
span
position: relative
z-index: 999
display: inline-block
text-align: center
margin-left: -67px
top: -185px
.b-day
font-family: 'Berkshire Swash'
text-shadow: 1px 1px rgba(50,50,50,0.5)
color: rgba(0,0,0,0.7)
font-size: 31px
.vertical
font-family: 'Rajdhani'
top: -150px
text-transform: uppercase
text-shadow: 3px 1px rgba(0, 0, 0, 0.4)
font-size: 55px
margin-left: -18px
transform: rotate(-1.5deg)
font-weight: bold
&:before
position: absolute
top: -40px
left: 0
&:after
position: absolute
top: 40px
left: 0
.joy:before
content: 'J'
.joy:after
content: 'Y'
.fun:before
content: 'F'
.fun:after
content: 'N'
.fa
font-size: 70px
margin-left: -35px
top: -155px
.fa-heart
color: #d5a5a0
cursor: pointer
.fa-birthday-cake
color: #5a6b65
.lots
font-family: 'League Script'
font-size: 12px
position: absolute
margin-top: 10px
padding-left: 25px
.pulse
animation-name: pulse
-webkit-animation-name: pulse
animation-duration: 1.5s
-webkit-animation-duration: 1.5s
animation-iteration-count: infinite
-webkit-animation-iteration-count: infinite
@keyframes pulse
0%
transform: scale(0.9)
50%
transform: scale(1)
100%
transform: scale(0.9)
.adventure
font-family: 'Rajdhani'
font-size: 28px
margin-left: -63px
&:after
content: '_'
position: absolute
bottom: -20px
font-size: 50px
left: 50px
.overlay
display: none
width: 100%
height: 100%
background-color: #b7b6a5
z-index: 9999999999
position: absolute
top: 0
left: 0
text-align: center
overflow: hidden
cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym49.cur), progress !important
h1
color: #D5AD6D
margin-top: 150px
font-size: 70px
background: -webkit-linear-gradient(transparent, transparent), -webkit-linear-gradient(top, rgba(213,173,109,1) 0%, rgba(213,173,109,1) 5%, rgba(226,186,120,1) 15%, rgba(163,126,67,1) 25%, rgba(145,112,59,1) 61%, rgba(213,173,109,1) 100%)
background: -o-linear-gradient(transparent, transparent)
-webkit-background-clip: text
-webkit-text-fill-color: transparent
font-family: 'Lilita One'
.cherry
width: 55px
height: 50px
background-color: #d65456
margin-top: 100px
border-radius: 45% 45% 50% 50%
box-shadow: 65px 2px 0px 1.5px #d75456
position: relative
&:before
content: ''
width: 17px
height: 100px
border-radius: 50%
border: 5px solid
border-color: transparent #26312b transparent transparent
position: absolute
bottom: 38px
left: 25px
z-index: -1
transform: rotate(20deg)
&:after
content: ''
width: 17px
height: 100px
border-radius: 50%
border: 5px solid transparent
border-left-color: #26312b
position: absolute
bottom: 38px
right: -40px
z-index: -1
transform: rotate(-20deg)
.leaf
position: absolute
top: -100px
left: 20px
background-color: #26312b
width: 50px
height: 30px
border-radius: 50%
width: 30px
height: 50px
background-image: linear-gradient(to top left, #26312b 49%, #26312b 51%)
border-radius: 100% 0 / 50px 0px
transform: rotate(240deg)
.cherry-container-1
position: absolute
top: 30px
left: 50px
transform: rotate(-30deg)
.cherry-container-2
position: absolute
top: 30px
right: 100px
transform: rotate(30deg)
.cherry-container-3
position: absolute
top: 250px
left: 200px
transform: rotate(-50deg)
.cherry-container-4
position: absolute
top: 220px
right: 300px
transform: rotate(20deg)
.cherry-container-5
position: absolute
top: -35px
right: 400px
transform: rotate(20deg)
.cherry-container-6
position: absolute
top: 370px
left: 400px
transform: rotate(20deg)
.cherry-container-7
position: absolute
top: -20px
left: 340px
transform: rotate(-5deg)
.cherry-container-8
position: absolute
bottom: -20px
right: 400px
transform: rotate(-5deg)
.cherry-container-9
position: absolute
bottom: -40px
left: 40px
transform: rotate(-5deg)
#love
z-index: 99999
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Rajdhani:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=League+Script" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lilita+One" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment