Skip to content

Instantly share code, notes, and snippets.

@eliortabeka

eliortabeka/Remix CodePen Challenge.markdown

Created July 13, 2015 09:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eliortabeka/d81ace5c2ddf79660e03 to your computer and use it in GitHub Desktop.
Save eliortabeka/d81ace5c2ddf79660e03 to your computer and use it in GitHub Desktop.
Download ZIP
Remix CodePen Challenge
Raw
index.html
<!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! -->
<aside class="profile-card">
<header>
<!-- here’s the avatar -->
<a href="http://codepen.io/eliorshalev">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/250758/profile/profile-512_1.jpg">
</a>
<!-- the username -->
<h1>Elior Shalev Tabeka</h1>
<!-- and role or location -->
<h2>UX/UI Desinger & Front End Developer</h2>
</header>
<!-- bit of a bio; who are you? -->
<div class="profile-bio">
<p>I have great passion for design and code, which started when I was in my teens. Since then, I've been through a lot. I've been working and studying a lot. My abilities as an autodidact have helped me to turn my favourite hobby into what has been my profession for the last fourteen years.</p>
</div>
<!-- some social links to show off -->
<ul class="profile-social-links">
<!-- twitter - el clásico -->
<li>
<a href="https://twitter.com/EliorShalev">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="40" height="40" viewBox="-249 151 100 100" enable-background="new -249 151 100 100" xml:space="preserve" class="twitter"><path stroke-linecap="round" d="M-160.5 177.1c-2.8 1.3-5.9 2.1-9.1 2.5 3.3-2 5.8-5.1 6.9-8.7 -3.1 1.8-6.4 3.1-10 3.8 -2.9-3.1-7-5-11.5-5 -8.7 0-15.8 7.1-15.8 15.8 0 1.2 0.1 2.4 0.4 3.6 -13.1-0.7-24.8-6.9-32.6-16.5 -1.4 2.3-2.1 5-2.1 7.9 0 5.5 2.8 10.3 7 13.1 -2.6-0.1-5-0.8-7.2-2 0 0.1 0 0.1 0 0.2 0 7.7 5.4 14 12.7 15.5 -1.3 0.4-2.7 0.6-4.2 0.6 -1 0-2-0.1-3-0.3 2 6.3 7.8 10.8 14.8 11 -5.4 4.2-12.2 6.8-19.6 6.8 -1.3 0-2.5-0.1-3.8-0.2 7 4.5 15.3 7.1 24.2 7.1 29.1 0 44.9-24.1 44.9-44.9 0-0.7 0-1.4 0-2C-165.3 183.1-162.6 180.3-160.5 177.1z"/></svg>
</a>
</li>
<!-- envato – use this one to link to your marketplace profile -->
<li>
<a href="http://themeforest.net/user/EliorShalev">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="40" height="40" viewBox="-249 151 100 100" enable-background="new -249 151 100 100" xml:space="preserve" class="evanto"><path stroke-linecap="round" d="M-173.7 159.7c-2.4-1.3-9.2-0.5-17.4 2 -14.4 9.8-26.5 24.3-27.4 47.6 -0.2 0.6-1.6-0.1-1.9-0.2 -3.9-7.4-5.4-15.3-2.2-26.6 0.6-1-1.4-2.2-1.7-1.9 -0.7 0.7-3.7 3.9-5.7 7.3 -9.8 16.9-3.4 38.7 13.7 48.2 17.1 9.5 38.7 3.4 48.2-13.7C-157 202.6-167.2 163.3-173.7 159.7z"/></svg>
</a>
</li>
<!-- codepen - your codepen profile-->
<li>
<a href="http://codepen.io/eliorshalev">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="40" height="40" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve" class="codepen"><path stroke-linecap="round" d="M249.5 15C120 15 15 120 15 249.5s105 234.5 234.5 234.5c129.5 0 234.5-105 234.5-234.5S379.1 15 249.5 15zM249.5 445.6c-108.1 0-196-87.9-196-196s87.9-196 196-196c108.1 0 196 87.9 196 196S357.6 445.6 249.5 445.6zM394.5 203.7c0-0.2-0.1-0.4-0.1-0.5 -0.1-0.4-0.1-0.7-0.2-1 -0.1-0.2-0.1-0.4-0.2-0.6 -0.1-0.3-0.2-0.6-0.3-0.9 -0.1-0.2-0.2-0.4-0.3-0.6 -0.1-0.3-0.3-0.6-0.4-0.8 -0.1-0.2-0.2-0.4-0.4-0.6 -0.2-0.3-0.3-0.5-0.5-0.8 -0.1-0.2-0.3-0.4-0.4-0.5 -0.2-0.2-0.4-0.5-0.6-0.7 -0.2-0.2-0.3-0.3-0.5-0.5 -0.2-0.2-0.5-0.4-0.7-0.6 -0.2-0.1-0.4-0.3-0.6-0.4 -0.1 0-0.1-0.1-0.2-0.2l-132.6-88.4c-4.2-2.8-9.6-2.8-13.8 0L110.1 195c-0.1 0-0.1 0.1-0.2 0.2 -0.2 0.1-0.4 0.3-0.6 0.4 -0.2 0.2-0.5 0.4-0.7 0.6 -0.2 0.2-0.3 0.3-0.5 0.5 -0.2 0.2-0.4 0.4-0.6 0.7 -0.1 0.2-0.3 0.4-0.4 0.5 -0.2 0.2-0.4 0.5-0.5 0.8 -0.1 0.2-0.2 0.4-0.4 0.6 -0.2 0.3-0.3 0.5-0.4 0.8 -0.1 0.2-0.2 0.4-0.3 0.6 -0.1 0.3-0.2 0.6-0.3 0.9 -0.1 0.2-0.1 0.4-0.2 0.6 -0.1 0.3-0.2 0.7-0.2 1 0 0.2-0.1 0.4-0.1 0.5 -0.1 0.5-0.1 1.1-0.1 1.6v88.4c0 0.5 0 1.1 0.1 1.6 0 0.2 0.1 0.4 0.1 0.5 0.1 0.4 0.1 0.7 0.2 1 0.1 0.2 0.1 0.4 0.2 0.6 0.1 0.3 0.2 0.6 0.3 0.9 0.1 0.2 0.2 0.4 0.3 0.6 0.1 0.3 0.3 0.6 0.4 0.8 0.1 0.2 0.2 0.4 0.4 0.6 0.2 0.3 0.3 0.5 0.5 0.8 0.1 0.2 0.3 0.4 0.4 0.5 0.2 0.2 0.4 0.5 0.6 0.7 0.2 0.2 0.3 0.3 0.5 0.5 0.2 0.2 0.5 0.4 0.7 0.6 0.2 0.1 0.4 0.3 0.6 0.4 0.1 0 0.1 0.1 0.2 0.2l132.6 88.4c2.1 1.4 4.5 2.1 6.9 2.1 2.4 0 4.8-0.7 6.9-2.1L389 304.1c0.1 0 0.1-0.1 0.2-0.2 0.2-0.1 0.4-0.3 0.6-0.4 0.2-0.2 0.5-0.4 0.7-0.6 0.2-0.2 0.3-0.3 0.5-0.5 0.2-0.2 0.4-0.4 0.6-0.7 0.1-0.2 0.3-0.4 0.4-0.5 0.2-0.2 0.4-0.5 0.5-0.8 0.1-0.2 0.2-0.4 0.4-0.6 0.2-0.3 0.3-0.5 0.4-0.8 0.1-0.2 0.2-0.4 0.3-0.6 0.1-0.3 0.2-0.6 0.3-0.9 0.1-0.2 0.1-0.4 0.2-0.6 0.1-0.3 0.2-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.5 0.1-0.5 0.1-1.1 0.1-1.6v-88.4C394.6 204.8 394.5 204.3 394.5 203.7zM262 140.3l97.7 65.1L316 234.6l-54-36.1V140.3zM237.1 140.3v58.1l-54 36.1 -43.6-29.2L237.1 140.3zM129.5 228.7l31.2 20.9 -31.2 20.9V228.7zM237.1 358.8l-97.7-65.1 43.6-29.2 54 36.1V358.8zM249.5 279l-44.1-29.5 44.1-29.5 44.1 29.5L249.5 279zM262 358.8v-58.1l54-36.1 43.6 29.2L262 358.8zM369.6 270.4l-31.2-20.9 31.2-20.9V270.4z"/></svg>
</a>
</li>
<!-- add or remove social profiles as you see fit -->
</ul>
</aside>
<!-- that’s all folks! -->
Raw
Remix CodePen Challenge.markdown
Raw
style.css
/* go on then, styles go here.. knock yourself out! */
/* fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
/* variables */
$background: hsl(166,70%,50%);
$container-width: 500px;
$elements: html, body, header, h1, h2, div, ul, li;
$count: length($elements);
$bio-background: #242423;
$twitter: #55ACEE;
$evanto: #82B541;
$codepen: #000000;
/* mixins */
// transforms
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin transform-origin($origin) {
-moz-transform-origin: $origin;
-o-transform-origin: $origin;
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
@mixin rotate($deg) {
@include transform(rotate(#{$deg}deg));
}
@mixin scale($scale) {
@include transform(scale($scale));
}
// animation delay
@mixin delay($time) {
-webkit-animation-delay: $time + s;
animation-delay: $time + s;
}
// pseudo elements
@mixin psedu-element($element, $width, $height) {
&:#{$element} {
content: '';
position: absolute;
width: $width;
height: $height;
@content;
}
}
// border radius
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
background-clip: padding-box;
}
@mixin border-top-radius($radius) {
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
-webkit-border-top-left-radius: $radius;
border-top-left-radius: $radius;
background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
border-bottom-right-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
background-clip: padding-box;
}
/* loop */
// bubbles background
@each $e in $elements {
#{$e} {
@include psedu-element(before, 220px, 220px) {
@include scale(1);
@include delay(random(20));
@include border-radius(100%);
transition: transform 10s ease;
animation: scaleUpAndFade 15s ease infinite;
background: $background + random(255);
top: random(800) + px;
right: random(1400) + px;
}
@include psedu-element(after, 120px, 120px) {
@include scale(1);
@include delay(random(20));
@include border-radius(100%);
transition: transform 10s ease;
animation: scaleDownAndFade 15s ease infinite;
background: $background + random(255);
bottom: random(800) + px;
left: random(1400) + px;
}
$count: $count + random(300);
}
}
/* Styles */
*,
*:before,
*:after {
box-sizing: border-box;
}
*:before,
*:after {
z-index: -1;
}
p {
margin: 0;
}
html, body {
height: 100%;
overflow: hidden;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
// container
aside {
@include border-radius(20px);
max-width: $container-width;
margin: 80px auto 0 auto;
position: relative;
text-align: center;
@include psedu-element(before, 220px, 220px) {
background: #fff;
bottom: 0;
right: 0;
width: 100%;
z-index: 999;
height: 0;
animation: slideUp .8s ease;
}
}
// header
header {
position: relative;
padding: 20px 0 0 0;
cursor: default;
img {
@include border-radius(100%);
animation: floating 3s ease infinite;
width: 220px;
min-height: 220px;
background: #ffffff;
padding: 10px;
box-shadow: 0 0 20px #efeeec;
}
h1{
@include border-top-radius(20px);
width: 100%;
line-height: 24px;
font-size: 24px;
margin: -20px 0 0 0;
color: #ffffff;
padding: 40px 0 20px 0;
background: #26d9af;
}
h2 {
font-size: 16px;
}
}
// content
.profile-bio {
@include border-bottom-radius(20px);
cursor: default;
border-top: 2px solid $bio-background;
color: $bio-background;
padding: 20px 20px 15px 20px;
transition: all .8s ease;
text-align: justify;
margin-bottom: 20px;
&:hover {
border-top: 2px solid $bio-background;
background: $bio-background;
padding: 10px 20px 15px 20px;
color: #26d9af;
}
}
// Social Icons
ul {
margin: 0;
padding: 0;
width: $container-width;
li {
list-style: none;
display: inline-block;
width: 32.6%;
text-align: center;
padding: 0;
svg {
width: 50px;
transition: all .8s ease;
}
}
}
.profile-social-links {
.twitter {
fill: $twitter;
stroke: $twitter;
stroke-width: 2px;
stroke-dasharray: 0;
stroke-dashoffset: 0;
&:hover {
animation: dash 2s ease;
}
}
.evanto {
stroke: $evanto;
fill: $evanto;
stroke-width: 2px;
stroke-dasharray: 0;
stroke-dashoffset: 0;
&:hover {
animation: dash 2s ease;
}
}
.codepen {
stroke: $codepen;
fill: $codepen;
stroke-width: 2px;
stroke-dasharray: 0;
stroke-dashoffset: 0;
&:hover {
animation: dash 2s ease;
}
}
}
// keyframes
@keyframes scaleDownAndFade {
0% {
@include scale(1);
opacity: 1;
}
40% {
@include scale(.7);
opacity: 0;
}
100% {
@include scale(1);
opacity: 1;
}
}
@keyframes floating {
0% {
transform:translateY(0);
}
60% {
transform:translateY(15px);
}
100% {
transform:translateY(0);
}
}
@keyframes scaleUpAndFade{
0% {
@include scale(1);
opacity: 1;
}
60% {
@include scale(1.3);
opacity: 0.3;
}
100% {
@include scale(1);
opacity: 1;
}
}
@keyframes slideUp {
from {
height: 100%;
}
to {
height: 0;
}
}
@keyframes dash {
0% {
stroke-width: 2px;
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
50% {
fill: transparent;
stroke-width: 4px;
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
85% {
stroke-width: 5px;
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
100% {
stroke-width: 2px;
}
}
// responsive
@media screen and (max-width: 460px) {
aside {
zoom: 0.5;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment