Skip to content

Instantly share code, notes, and snippets.

@alexlevy0

alexlevy0/Remix Challenge.markdown

Created October 24, 2015 19:35
Show Gist options
  • Save alexlevy0/b08f6bd8d027521c624f to your computer and use it in GitHub Desktop.
Save alexlevy0/b08f6bd8d027521c624f to your computer and use it in GitHub Desktop.
Download ZIP
Remix 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://victory-design.ru/">
<img src="http://victory-design.ru/sandbox/codepen/profile_card/avatar.svg" />
</a>
<!-- the username -->
<h1>David Jones</h1>
<!-- and role or location -->
<h2>Web Developer</h2>
</header>
<!-- bit of a bio; who are you? -->
<div class="profile-bio">
<p>Even when everything is perfect, you can always make it better. Break barriers in your head, create something crazy and don't forget Code is Poetry...</p>
</div>
<!-- some social links to show off -->
<ul class="profile-social-links">
<!-- twitter - el clásico -->
<li>
<a href="https://www.facebook.com/v1ctory">
<svg viewBox="0 0 24 24">
<path fill="#3b5998" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
</svg>
</a>
</li>
<!-- envato – use this one to link to your marketplace profile -->
<li>
<a href="http://themeforest.net/user/Victory-Design">
<svg viewBox="0 0 24 24">
<path fill="#82B541" d="M18.334,1.909c-0.604-0.327-2.313-0.125-4.375,0.503c-3.621,2.464-6.664,6.11-6.89,11.971c-0.05,0.148-0.402-0.025-0.478-0.053c-0.981-1.859-1.358-3.846-0.554-6.688C6.189,7.39,5.686,7.089,5.611,7.165C5.435,7.34,4.681,8.145,4.178,9c-2.464,4.249-0.855,9.733,3.445,12.122c4.299,2.389,9.733,0.855,12.12-3.445C22.533,12.695,19.969,2.814,18.334,1.909z"/>
</svg>
</a>
</li>
<!-- codepen - your codepen profile-->
<li>
<a href="http://codepen.io/VictoryDesign/">
<svg viewBox="0 0 24 24">
<path fill="#000000" d="M19.45,13.29L17.5,12L19.45,10.71M12.77,18.78V15.17L16.13,12.93L18.83,14.74M12,13.83L9.26,12L12,10.17L14.74,12M11.23,18.78L5.17,14.74L7.87,12.93L11.23,15.17M4.55,10.71L6.5,12L4.55,13.29M11.23,5.22V8.83L7.87,11.07L5.17,9.26M12.77,5.22L18.83,9.26L16.13,11.07L12.77,8.83M21,9.16C21,9.15 21,9.13 21,9.12C21,9.1 21,9.08 20.97,9.06C20.97,9.05 20.97,9.03 20.96,9C20.96,9 20.95,9 20.94,8.96C20.94,8.95 20.93,8.94 20.92,8.93C20.92,8.91 20.91,8.89 20.9,8.88C20.89,8.86 20.88,8.85 20.88,8.84C20.87,8.82 20.85,8.81 20.84,8.79C20.83,8.78 20.83,8.77 20.82,8.76A0.04,0.04 0 0,0 20.78,8.72C20.77,8.71 20.76,8.7 20.75,8.69C20.73,8.67 20.72,8.66 20.7,8.65C20.69,8.64 20.68,8.63 20.67,8.62C20.66,8.62 20.66,8.62 20.66,8.61L12.43,3.13C12.17,2.96 11.83,2.96 11.57,3.13L3.34,8.61C3.34,8.62 3.34,8.62 3.33,8.62C3.32,8.63 3.31,8.64 3.3,8.65C3.28,8.66 3.27,8.67 3.25,8.69C3.24,8.7 3.23,8.71 3.22,8.72C3.21,8.73 3.2,8.74 3.18,8.76C3.17,8.77 3.17,8.78 3.16,8.79C3.15,8.81 3.13,8.82 3.12,8.84C3.12,8.85 3.11,8.86 3.1,8.88C3.09,8.89 3.08,8.91 3.08,8.93C3.07,8.94 3.06,8.95 3.06,8.96C3.05,9 3.05,9 3.04,9C3.03,9.03 3.03,9.05 3.03,9.06C3,9.08 3,9.1 3,9.12C3,9.13 3,9.15 3,9.16C3,9.19 3,9.22 3,9.26V14.74C3,14.78 3,14.81 3,14.84C3,14.85 3,14.87 3,14.88C3,14.9 3,14.92 3.03,14.94C3.03,14.95 3.03,14.97 3.04,15C3.05,15 3.05,15 3.06,15.04C3.06,15.05 3.07,15.06 3.08,15.07C3.08,15.09 3.09,15.11 3.1,15.12C3.11,15.14 3.12,15.15 3.12,15.16C3.13,15.18 3.15,15.19 3.16,15.21C3.17,15.22 3.17,15.23 3.18,15.24C3.2,15.25 3.21,15.27 3.22,15.28C3.23,15.29 3.24,15.3 3.25,15.31C3.27,15.33 3.28,15.34 3.3,15.35C3.31,15.36 3.32,15.37 3.33,15.38C3.34,15.38 3.34,15.38 3.34,15.39L11.57,20.87C11.7,20.96 11.85,21 12,21C12.15,21 12.3,20.96 12.43,20.87L20.66,15.39C20.66,15.38 20.66,15.38 20.67,15.38C20.68,15.37 20.69,15.36 20.7,15.35C20.72,15.34 20.73,15.33 20.75,15.31C20.76,15.3 20.77,15.29 20.78,15.28C20.79,15.27 20.8,15.25 20.82,15.24C20.83,15.23 20.83,15.22 20.84,15.21C20.85,15.19 20.87,15.18 20.88,15.16C20.88,15.15 20.89,15.14 20.9,15.12C20.91,15.11 20.92,15.09 20.92,15.07C20.93,15.06 20.94,15.05 20.94,15.04C20.95,15 20.96,15 20.96,15C20.97,14.97 20.97,14.95 20.97,14.94C21,14.92 21,14.9 21,14.88C21,14.87 21,14.85 21,14.84C21,14.81 21,14.78 21,14.74V9.26C21,9.22 21,9.19 21,9.16Z" />
</svg>
</a>
</li>
<!-- add or remove social profiles as you see fit -->
</ul>
</aside>
<!-- that’s all folks! -->
Raw
Remix Challenge.markdown
Raw
style.css
html {
height: 100%;
}
body {
background: #bcdee7 url("http://victory-design.ru/sandbox/codepen/profile_card/bg.png") no-repeat center center fixed;
background-size: 120% auto;
position: fixed;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
font: normal 14px/1.618em "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
}
body:before {
content: "";
height: 0px;
padding: 0px;
border: 110em solid #313440;
position: absolute;
left: 50%;
top: 100%;
z-index: 2;
display: block;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: puff_portrait 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
animation: puff_portrait 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}
h1, h2 {
font-weight: 400;
margin: 0px 0px 5px 0px;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 16px;
}
p {
margin: 0px;
}
.profile-card {
background: #FFB300;
width: 56px;
height: 56px;
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
overflow: hidden;
opacity: 0;
margin-top: 70px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0px 3px 6px rgba(0 ,0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
-webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_landscape 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_landscape 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
.profile-card header {
width: 179px;
height: 280px;
padding: 40px 20px 30px 20px;
display: inline-block;
float: left;
border-right: 2px dashed #EEEEEE;
background: #FFFFFF;
color: #000000;
margin-top: 50px;
opacity: 0;
text-align: center;
-webkit-animation: moveIn 1s 3.1s ease forwards;
animation: moveIn 1s 3.1s ease forwards;
}
.profile-card header h1 {
color: #FF5722;
}
.profile-card header a {
display: inline-block;
text-align: center;
position: relative;
margin: 25px 30px;
}
.profile-card header a:after {
position: absolute;
content: "";
bottom: 3px;
right: 3px;
width: 20px;
height: 20px;
border: 4px solid #FFFFFF;
-webkit-transform: scale(0);
transform: scale(0);
background: -webkit-linear-gradient(top, #2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);
background: linear-gradient(#2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-animation: scaleIn 0.3s 3.5s ease forwards;
animation: scaleIn 0.3s 3.5s ease forwards;
}
.profile-card header a > img {
width: 120px;
max-width: 100%;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transition: -webkit-box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
-webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
}
.profile-card header a:hover > img {
-webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
}
.profile-card .profile-bio {
width: 175px;
height: 180px;
display: inline-block;
float: right;
padding: 50px 20px 30px 20px;
background: #FFFFFF;
color: #333333;
margin-top: 50px;
text-align: center;
opacity: 0;
-webkit-animation: moveIn 1s 3.1s ease forwards;
animation: moveIn 1s 3.1s ease forwards;
}
.profile-social-links {
width: 218px;
display: inline-block;
float: right;
margin: 0px;
padding: 15px 20px;
background: #FFFFFF;
margin-top: 50px;
text-align: center;
opacity: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: moveIn 1s 3.1s ease forwards;
animation: moveIn 1s 3.1s ease forwards;
}
.profile-social-links li {
list-style: none;
margin: -5px 0px 0px 0px;
padding: 0px;
float: left;
width: 33.3%;
text-align: center;
}
.profile-social-links li a {
display: inline-block;
width: 24px;
height: 24px;
padding: 6px;
position: relative;
overflow: hidden!important;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.profile-social-links li a img {
position: relative;
z-index: 1;
}
.profile-social-links li a:before {
display: block;
content: "";
background: rgba(0, 0, 0, 0.3);
position: absolute;
left: 0px;
top: 0px;
width: 36px;
height: 36px;
opacity: 1;
-webkit-transition: transform 0.4s ease, opacity 1s ease-out;
transition: transform 0.4s ease, opacity 1s ease-out;
-webkit-transform: scale3d(0, 0, 1);
transform: scale3d(0, 0, 1);
-webkit-border-radius: 50%;
border-radius: 50%;
}
.profile-social-links li a:hover:before {
-webkit-animation: ripple 1s ease forwards;
animation: ripple 1s ease forwards;
}
.profile-social-links li a img,
.profile-social-links li a svg {
width: 24px;
}
@media screen and (min-aspect-ratio: 4/3) {
body {
background-size: 100% auto;
}
body:before {
width: 0px;
}
@-webkit-keyframes puff {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
}
}
@keyframes puff {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
}
}
}
@media screen and (min-height: 480px) {
.profile-card {
-webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_portrait 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia_portrait 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}
.profile-card header {
width: auto;
height: auto;
padding: 30px 20px;
display: block;
float: none;
border-right: none;
}
.profile-card .profile-bio {
width: auto;
height: auto;
padding: 15px 20px 30px 20px;
display: block;
float: none;
}
.profile-social-links {
width: 100%;
display: block;
float: none;
}
}
@media screen and (min-aspect-ratio: 4/3) {
body {
background-size: 100% auto;
}
body:before {
width: 0px;
-webkit-animation: puff_landscape 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
animation: puff_landscape 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}
}
@-webkit-keyframes init {
0% {
width: 0px;
height: 0px;
}
100% {
width: 56px;
height: 56px;
margin-top: 0px;
opacity: 1;
}
}
@keyframes init {
0% {
width: 0px;
height: 0px;
}
100% {
width: 56px;
height: 56px;
margin-top: 0px;
opacity: 1;
}
}
@-webkit-keyframes puff_portrait {
0% {
top: 100%;
height: 0px;
padding: 0px;
}
100% {
top: 50%;
height: 100%;
padding: 0px 100%;
}
}
@keyframes puff_portrait {
0% {
top: 100%;
height: 0px;
padding: 0px;
}
100% {
top: 50%;
height: 100%;
padding: 0px 100%;
}
}
@-webkit-keyframes puff_landscape {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
}
}
@keyframes puff_landscape {
0% {
top: 100%;
width: 0px;
padding-bottom: 0px;
}
100% {
top: 50%;
width: 100%;
padding-bottom: 100%;
}
}
@-webkit-keyframes borderRadius {
0% {
-webkit-border-radius: 50%;
}
100% {
-webkit-border-radius: 0px;
}
}
@keyframes borderRadius {
0% {
-webkit-border-radius: 50%;
}
100% {
border-radius: 0px;
}
}
@-webkit-keyframes moveDown {
0% {
top: 50%;
}
50% {
top: 40%;
}
100% {
top: 100%;
}
}
@keyframes moveDown {
0% {
top: 50%;
}
50% {
top: 40%;
}
100% {
top: 100%;
}
}
@-webkit-keyframes moveUp {
0% {
background: #FFB300;
top: 100%;
}
50% {
top: 40%;
}
100% {
top: 50%;
background: #E0E0E0;
}
}
@keyframes moveUp {
0% {
background: #FFB300;
top: 100%;
}
50% {
top: 40%;
}
100% {
top: 50%;
background: #E0E0E0;
}
}
@-webkit-keyframes materia_landscape {
0% {
background: #E0E0E0;
}
50% {
-webkit-border-radius: 4px;
}
100% {
width: 440px;
height: 280px;
background: #FFFFFF;
-webkit-border-radius: 4px;
}
}
@keyframes materia_landscape {
0% {
background: #E0E0E0;
}
50% {
border-radius: 4px;
}
100% {
width: 440px;
height: 280px;
background: #FFFFFF;
border-radius: 4px;
}
}
@-webkit-keyframes materia_portrait {
0% {
background: #E0E0E0;
}
50% {
-webkit-border-radius: 4px;
}
100% {
width: 280px;
height: 440px;
background: #FFFFFF;
-webkit-border-radius: 4px;
}
}
@keyframes materia_portrait {
0% {
background: #E0E0E0;
}
50% {
border-radius: 4px;
}
100% {
width: 280px;
height: 440px;
background: #FFFFFF;
border-radius: 4px;
}
}
@-webkit-keyframes moveIn {
0% {
margin-top: 50px;
opacity: 0;
}
100% {
opacity: 1;
margin-top: -20px;
}
}
@keyframes moveIn {
0% {
margin-top: 50px;
opacity: 0;
}
100% {
opacity: 1;
margin-top: -20px;
}
}
@-webkit-keyframes scaleIn {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes scaleIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes ripple {
0% {
transform: scale3d(0, 0, 0);
}
50%, 100% {
-webkit-transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
}
}
@keyframes ripple {
0% {
transform: scale3d(0, 0, 0);
}
50%, 100% {
transform: scale3d(1, 1, 1);
}
100% {
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment