.container
.profile
.profile__avatar
%h1 Jack Thomson
%h2 A stylishly creative Frontend Web Developer who strives to create a better front for the modern web
.profile__social
%a{:href => 'https://twitter.com/Jackthomsonn', :target => '_blank'}
%i{:class => 'fa fa-twitter', :dataName => 'Twitter'}
%a{:href => 'https://uk.linkedin.com/in/jackthomsonn', :target => '_blank'}
%i{:class => 'fa fa-linkedin', :dataName => 'Linkedin'}
%a{:href => 'https://codepen.io/Jackthomsonn', :target => '_blank'}
%i{:class => 'fa fa-codepen', :dataName => 'Codepen'}
-(1..5).each do |b|
.bubbles
View Compiled
// Variables
$opacity: 1;
$primary: rgba(016, 63, 111, 0.8);
$secondary: rgba(112, 193, 179, 1);
$t: .65s;
$bezan: cubic-bezier(0.175, 0.885, 0.320, 1.275);
$bubbles: 5;
$social: 3;
* {
box-sizing: border-box;
margin: 0; padding: 0;
font-family: 'Nunito', sans-serif;
transform: translate3d(0,0,0);
}
html, body:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(-120deg, $primary 65%, $secondary);
}
html, body {
background: url('http://www.vectorfree.com/media/vectors/modern-cartoon-city.jpg') no-repeat;
background-size: cover;
overflow: hidden;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 90vw;
height: 100vh;
margin: 0 auto;
perspective: 1000px;
transform-style: preserve-3d;
}
.profile {
background: rgba(255, 255, 255, 0.9);
width: 20em;
border-radius: 0.2em;
border-bottom: 5px solid $secondary;
&__avatar {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/profile.jpg');
background-size: cover;
border: 5px solid $secondary;
width: 6em;
height: 6em;
border-radius: 100%;
margin: 0 auto;
opacity: 0;
animation: avatarFadeIn $t $t $bezan forwards;
transform: translateY(-45px);
}
%text {
color: $secondary;
text-align: center;
margin: 0 auto;
width: 80%;
opacity: 0;
}
h1 {
@extend %text;
font-size: 1.7em;
animation: fadeIn $t $t $bezan forwards;
}
h2 {
@extend %text;
font-size: 0.75em;
font-weight: 400;
animation: fadeIn $t $t * 2 $bezan forwards;
}
&__social {
margin: 2em auto;
text-align: center;
display: block;
color: $secondary;
font-size: 1em;
a {
text-decoration: none;
}
}
}
i {
background: $secondary;
color: #FFF;
border: 5px solid $secondary;
border-radius: 100%;
padding: 0.7em;
margin: 1.5em 1.8em;
opacity: 0;
cursor: pointer;
&:hover:after {
content: attr(dataName);
background: $secondary;
color: #FFF;
padding: 0.7em;
border-radius: 3px;
position: absolute;
margin: -6em -3em;
font-size: 0.7em;
width: 70px;
text-align: center;
display: block;
}
}
%bubbles {
background: url('http://www.taftpubliclibrary.org/wp-content/uploads/2015/06/bubble_mania.jpg') rgba(255, 255, 255, 0.7);
background-size: cover;
border-radius: 100%;
width: 1em;
height: 1em;
position: absolute;
z-index: -1;
}
@for $b from 1 through $bubbles {
.bubbles:nth-of-type(#{$b}) {
left: $b * random(50) + vw;
top: 200px / $b * 4;
animation: float 17s 0s linear infinite forwards;
@extend %bubbles;
}
}
@for $s from 1 through $social {
i:nth-of-type(#{$s}) {
animation: fadeIn $t * 2 $bezan forwards;
animation-delay: $s * 1.7 + s;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}}
@keyframes avatarFadeIn {
from {
transform: translateY(-500px);
opacity: 0;
}
to {
transform: translateY(-45px);
opacity: 1;
}
}
@keyframes float {
from {
transform: translateY(500px);
}
to {
transform: translateY(-1500px);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.