<div class="container">
<div class="phone-header">
<div class="left"><i class="fa fa-circle" aria-hidden="true"></i> <i class="fa fa-circle" aria-hidden="true"></i> <i class="fa fa-circle" aria-hidden="true"></i> <i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle-o" aria-hidden="true"></i> VIRGIN <i class="fa fa-wifi" aria-hidden="true"></i></div>
<time datetime="2011-01-12">2:45 pm</time>
<div class="right"><i class="fa fa-bluetooth-b" aria-hidden="true"></i> 22% <i class="fa fa-battery-full" aria-hidden="true"></i></div>
</div>
<header>
<h3><i class="fa fa-times" aria-hidden="true"></i>RESULTS<i class="fa fa-comment-o" aria-hidden="true"></i></h3>
<div class="user"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt=""></div>
<div class="bolt"><i class="fa fa-flash" aria-hidden="true"></i></div>
<div class="user"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/fbmore/128.jpg" alt=""></div>
</header><!-- /header -->
<main>
<h1>YOU WON!</h1>
<h4>-You won and are the best!-</h4>
<div class="badges">
<div class="badge-yellow">
<span>COINS <br><span>250</span></span>
</div>
<div class="badge-white">
<span>FLASHES <br><span>2 <i class="fa fa-flash" aria-hidden="true"></i></span></span>
</div>
</div>
<div class="score">
4 <span>:</span> 2
<div class="footer"><i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle" aria-hidden="true"></i> </div>
</div>
</main><!-- /main -->
<footer>
<button class="upload"><i class="fa fa-upload" aria-hidden="true"></i></button>
<button class="btn btn-right-align challenge">CHALLENGE <i class="fa fa-flash" aria-hidden="true"></i></button>
</footer>
</div>@function base-color($key) {
@return unquote(map-get($base-colors, $key));
}
@mixin clearfix {
&:after {
display: table;
clear: both;
content: '';
}
}
$base-colors: (
dark: '#201822',
PastelGreen: '#6be162',
Saffron: '#f7cd34',
BurningOrange: '#fe6d3c',
Scarlet: '#FF3612'
);
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{
font-size: 62.5%;
/*
set font size to this percentage so we can use rems more easily
EXAMPLE
font-size: 1.4rem;
font-size: 2.4rem;
*/
}
html,
body {
font-family: sans-serif;
font-weight: 400;
overflow: visible;
height: 100%;
margin: 0;
padding: 0;
background-color: #201822;
}
body {
font-size: 16px;
font-size: 1.6rem;
position: relative;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:before {
position: absolute;
z-index: 1;
top: -415px;
left: 50%;
width: 2104px;
content: '';
transform: translateX(-50%);
border-radius: 50%;
background-color: base-color('Saffron');
animation: bubble 0.75s cubic-bezier(.17, .88, .32, 1.27) both;
}
}
@keyframes bubble{
from {
height:0px;
}
to {
height: 646px;
}
}
@keyframes fadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container {
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
max-width: 480px;
margin: 0 auto;
background-color: #281c26;
-webkit-box-shadow: 0 0 61px -4px rgba(0,0,0,.58);
-moz-box-shadow: 0 0 61px -4px rgba(0,0,0,.58);
box-shadow: 0 0 61px -4px rgba(0,0,0,.58);
&:before{
position: absolute;
z-index: 1;
top: -90px;
left: 50%;
width: 255%;
//height: 326px;
content: '';
transform: translateX(-50%);
border-radius: 50%;
background-color: base-color('Saffron');
animation: bubbletwo 0.75s cubic-bezier(.17, .88, .32, 1.27) both;
}
}
@keyframes bubbletwo{
from {
height:0px;
}
to {
height: 326px;
}
}
.btn{
font-family: 'source_sans_probold';
font-size: 14px;
line-height: 1;
position: relative;
display: inline-block;
overflow: hidden;
width: 70%;
margin: 0;
padding: 18px 25px ;
-moz-user-select: none;
transition: background-color .3s ease 0s;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;
text-transform: uppercase;
color: #fff;
border: none;
border-radius: 5px;
background-color: base-color('BurningOrange');
background-image: none;
&:hover{
text-decoration: none;
}
&-right-align{
float: right;
clear: all;
}
}
.user {
position: relative;
z-index: 2;
display: inline-block;
vertical-align: middle;
&:before {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 108px;
height: 108px;
content: '';
transform: translate(-50%,-52%);
border: 4px solid #ebbe1d;
border-radius: 50%;
}
&:after {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
content: '';
transform: translate(-50%,-52%);
border: 1px solid #ebbe1d;
border-radius: 50%;
}
&-name {
}
img {
position: relative;
z-index: 2;
max-width: 100px;
//border-radius: 50%;
animation: round 1.2s cubic-bezier(.17, .88, .32, 1.27) both;
}
&-points {
}
}
//structures
.phone-header {
font-size: 1.2rem;
position: relative;
z-index: 2;
padding: 5px ;
text-align: center;
.left {
display: inline-block;
float: left;
}
.right {
display: inline-block;
float: right;
}
time {
display: inline-block;
}
.fa-circle,
.fa-circle-o {
font-size: .7rem;
display: inline-block;
vertical-align: middle;
}
}
header {
height: 211px;
padding: 0 16px;
text-align: center;
h3 {
font-size: 1.5rem;
font-weight: normal;
position: relative;
z-index: 2;
margin-bottom: 30px;
}
.fa.fa-times {
float: left;
}
.fa.fa-comment-o {
float: right;
}
.bolt {
font-size: 2rem;
position: relative;
z-index: 2;
display: inline-block;
margin: 0 30px;
vertical-align: middle;
color: base-color('Scarlet');
}
}
main {
h1 {
font-size: 7.0rem;
margin-top: 20px;
margin-bottom: 0;
text-align: center;
color: base-color('PastelGreen');
}
h4 {
font-size: 1.1rem;
margin-top: 5px;
text-align: center;
color: #fff;
}
.badges {
padding-top: 20px;
text-align: center;
}
.badge {
&-yellow,
&-white {
line-height: 114px;
position: relative;
display: inline-block;
//width: 90px;
//height: 90px;
vertical-align: middle;
//border-radius: 50%;
animation: round 0.75s cubic-bezier(.17, .88, .32, 1.27) both;
&:before {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 104px;
height: 104px;
content: '';
transform: translate(-50%,-50%);
//border: 4px solid #ebbe1d;
border-radius: 50%;
}
span {
font-size: 1.1rem;
line-height: 1;
display: inline-block;
span {
font-size: 2.5rem;
padding-top: 2px;
}
}
}
&-yellow {
margin-right: 20px;
background-color: base-color('Saffron');
&:before {
border: 4px dotted base-color('Saffron');
}
}
&-white {
margin-left: 20px;
background-color: #fff;
&:before {
border: 4px solid #fff;
}
span {
span {
color: base-color('Scarlet');
}
}
}
}
@keyframes round{
from {
width: 0;
height: 0;
border-radius: 0;
}
to {
width: 90px;
height: 90px;
border-radius: 50%;
}
}
.score {
font-size: 13rem;
padding-top: 30px;
text-align: center;
color: #fff;
span {
font-size: 6rem;
display: inline-block;
margin: 0 30px;
vertical-align: middle;
}
.footer{
font-size: 1.2rem;
}
}
}
footer {
display: block;
padding-top: 20px;
@include clearfix();
.upload {
line-height: 1;
display: inline-block;
float: left;
width: 25%;
padding: 18px 25px;
-moz-user-select: none;
transition: background-color .3s ease 0s;
text-align: center;
white-space: nowrap;
text-decoration: none;
text-transform: uppercase;
color: #645461;
border: 1px solid #645461;
border-radius: 5px;
background-color: base-color('dark');
&:hover{
text-decoration: none;
}
}
}
(function($) {
'use strict';
var config = {
debug: false,
istouch:false,
touchOrClick: ''
};
var log= {
debug: function(content){
if ((window.console && window.console.log) && config.debug){
console.log(content);
}
}
};
var app = {
init: function(){
var _this = this;
var json = '';
}
};
app.init();
}(jQuery));
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.