Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vibrate (White)
<div class="container lt-blue">
<div class="block__tab dk-blue">
&ldquo;I tend to lose track of time
when I’m on my phone.&rdquo;
</div>
</div>
<div class="container lt-yellow">
<div class="block__left">
<span class="eyebrow">#02</span>
<h1>
&ldquo;I feel an urge to check my phone right away if it vibrates or makes a sound.&rdquo;
</h1>
</div>
<div class="block__right">
<div class="phone">
<div class="screen">
<div class="heart"></div>
</div>
</div>
</div>
</div>
<div class="container lt-green">
<div class="block__tab">
&ldquo;I get distracted by my phone when I’m with friends or family.&rdquo;
</div>
</div>
<div class="container pink">
<div class="block__tab red">
&ldquo;I look at social media more often than I’d like.&rdquo;
</div>
</div>
<div class="container lt-grey">
<div class="block__tab dk-grey">
&ldquo;I'll use my phone instead of going to sleep when I intend to.&rdquo;
</div>
</div>
<div class="container lt-blue">
<div class="block__tab dk-blue">
&ldquo;I flip through different apps when I’m bored or killing time.&rdquo;
</div>
</div>
<div class="container pink">
<div class="block__tab red">
&ldquo;I feel overwhelmed by the amount of unread emails I have.&rdquo;
</div>
</div>
<div class="container lt-grey">
<div class="block__left">
<span class="eyebrow dk-grey">#02</span>
<h1 class="dk-grey">
&ldquo;I'll use my phone instead of going to sleep when I intend to.&rdquo;
</h1>
</div>
<div class="block__right">
<div class="phone__sleep">
<div class="screen__sleep">
</div>
</div>
</div>
</div>
// COLOURS
$white: #FFFFFF;
$lt-grey: #BDC1C6;
$grey: #202124;
$dk-grey: #3C4043;
$lt-blue: #AECBFA;
$blue: #3e83f9;
$dk-blue: #174EA6;
$lt-yellow: #FDE293;
$yellow: #fcbe00;
$dk-yellow: #A25800;
$pink: #FAD2CF;
$red: #A50E0E;
$lt-green: #A8DAB5;
.dk-yellow {
color: $dk-yellow;
}
.dk-blue {
color: $dk-blue;
}
.lt-yellow {
// background-color: $lt-yellow;
border-left: 10px $yellow solid;
}
.lt-green {
// background-color: $lt-green;
border-left: 5px green solid;
}
.lt-grey {
background-color: $lt-grey;
border-left: 5px $green solid;
}
.dk-green {
color: #0D652D;
}
.lt-blue {
background-color: $lt-blue;
}
.pink {
background-color: $pink;
}
.red {
color: $red;
}
.lt-grey {
background-color: lt-grey;
}
body {
font-size: 16px;
font-family: 'Google Sans';
}
.container {
padding: 2em 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-row-gap: 1em;
}
.block__left {
grid-column: 2 / 7;
padding-top: 3em;
}
.block__right {
grid-column: 10 / 11;
}
.block__tab {
grid-column: 2 / span 7;
transition: all .2s ease;
}
.block__tab:hover {
// padding: 10px 0;
}
.eyebrow {
font-family: 'Google Sans Display';
font-weight: 100;
text-transform: capitalize;
}
h1 {
font-family: 'Google Sans Display';
font-weight: 200;
font-size: 50px;
}
.phone {
border: 3px solid $dk-yellow;
padding: 25px;
border-radius: 20px;
width: 200px;
height: 330px;
position: relative;
animation: vibrate 4s infinite ease-in-out;
}
.phone__sleep {
border: 3px solid $dk-grey;
padding: 25px;
border-radius: 20px;
width: 200px;
height: 330px;
position: relative;
// animation: vibrate 4s infinite ease-in-out;
}
.screen {
background: $yellow;
width: 140px;
height: 270px;
padding: 30px;
border-radius: 20px;
text-align: center;
overflow: hidden;
}
.screen__sleep {
background: $white;
width: 140px;
height: 270px;
padding: 30px;
border-radius: 20px;
text-align: center;
overflow: hidden;
box-shadow: 0 0 40px 20px #fff;
}
.heart {
margin: 70% auto;
background-color: $red;
height: 60px;
transform: rotate(-45deg);
width: 60px;
animation: heartShow 2s infinite ease-in-out;
animation-delay: 100ms;
}
.heart:before,
.heart:after {
content: "";
background-color: $red;
border-radius: 50%;
height: 60px;
position: absolute;
width: 60px;
}
.heart:before {
top: -30px;
left: 0;
}
.heart:after {
top: 0px;
right: -30px;
}
@keyframes vibrate {
1% {
transform: translate(1px, -1px) rotate(1deg) }
2% {
transform: translate(-1px, 2px) rotate(-1deg) }
3% {
transform: translate(-2px, 1px) rotate(0deg)}
4% {
transform: translate(2px, 1px) rotate(-1deg)}
5% {
transform: translate(-1px, -1px) rotate(1deg)}
6% {
transform: translate(2px, 2px) rotate(0deg)}
7% {
transform: translate(1px, -1px) rotate(1deg)}
9% {
transform: translate(-1px, 2px) rotate(-1deg)}
10% {
transform: translate(-2px, 1px) rotate(0deg)}
// 11% {
// transform: translate(2px, 1px) rotate(-1deg)}
// 12% {
// transform: translate(-1px, -1px) rotate(1deg)}
// 13% {
// transform: translate(2px, 2px) rotate(0deg)}
// 14% {
// transform: translate(1px, -2px) rotate(-1deg)}
// 15% {
// transform: translate(0px, 0px) rotate(0deg)}
// 16% {
// transform: translate(1px, -1px) rotate(1deg)}
// 17% {
// transform: translate(-1px, 2px) rotate(-1deg)}
// 18% {
// transform: translate(-2px, 1px) rotate(0deg)}
// 19% {
// transform: translate(2px, 1px) rotate(-1deg)}
// }
// 20% {
// transform: translate(-1px, -1px) rotate(1deg)}
// 21% {
// transform: translate(2px, 2px) rotate(0deg)}
// 22% {
// transform: translate(1px, -1px) rotate(1deg)}
// 23% {
// transform: translate(-1px, 2px) rotate(-1deg)}
// 24% {
// transform: translate(-2px, 1px) rotate(0deg)}
// 25% {
// transform: translate(2px, 1px) rotate(-1deg) }
// 26% {
// transform: translate(1px, -1px) rotate(1deg)}
// 27% {
// transform: translate(0px, 0px) rotate(0deg);}
}
@keyframes heartShow {
0% { opacity: 100%; }
100% { opacity: 0; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.