body {
background: #1BBC9B;
font-family: 'Montserrat', sans-serif;
}
.container {
text-align: center;
}
h1 {
color: #117964;
font-weight: 400;
font-size: 2em;
margin: 1em 0;
}
/**
* iPhone
* Credits: Flat, Scaleable CSS iPhone Illustration by Tom Hergenreter
* http://codepen.io/TomHergenreter/details/qDywF/
*/
.iphone {
width: 16.06em;
height: 30.6em;
border-radius: 1.875em;
margin: 2em;
position: relative;
display: inline-block;
background: #fff;
}
.iphone__item {
width: 16.06em;
height: 1em;
position: absolute;
bottom: -2em;
color: #158f76;
text-align: center;
}
.iphone__power-btn {
width: 2.188em;
height: .188em;
background: #e0e0e0;
position: absolute;
right: 2.5em;
top: -0.188em;
}
.iphone__left-btn {
width: .188em;
height: 1.250em;
top: 3.250em;
left: -0.188em;
position: absolute;
background: #e0e0e0;
}
.iphone__left-btn:before {
content: '';
width: .188em;
height: .875em;
position: absolute;
top: 3em;
background: #e0e0e0;
}
.iphone__left-btn:after {
content: '';
width: .188em;
height: .875em;
position: absolute;
top: 5.5em;
background: #e0e0e0;
}
.iphone__details {
width: .438em;
height: .438em;
border-radius: 100%;
position: relative;
top: 1.313em;
left: 8em;
background: #7c7c7c;
}
.iphone__details:before {
content: '';
width: 2.5em;
height: .25em;
border-radius: .25em;
position: absolute;
top: 1em;
left: -1em;
background: #7c7c7c;
}
.iphone__home-btn {
width: 2.25em;
height: 2.25em;
border-radius: 100%;
position: absolute;
bottom: 1em;
right: 6.75em;
background: #f7f7f7;
}
.iphone__home-btn:before {
content: '';
width: .813em;
height: .813em;
border: .15em solid #a8a8a8;
border-radius: .2em;
position: absolute;
top: .6em;
left: .57em;
}
.iphone__screen {
width: 14.5em;
height: 22.938em;
position: absolute;
top: 3.75em;
left: .750em;
overflow: hidden;
}
.iphone__content {
position: relative;
background-color: #D2527F;
width: 100%;
height: 100%;
}
/**
* Navigation Defaults
*/
.nav {
position: absolute;
z-index: 100;
opacity: 0;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
}
.nav--active .nav {
opacity: 1;
background-color: #333;
}
.nav__list {
margin: 0;
padding: 10px;
}
.nav__item {
list-style-type: none;
text-align: left;
}
.nav__link {
font-size: 1.3em;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
opacity: 1;
-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
/* Default navigation icon */
.nav__trigger {
display: block;
position: absolute;
width: 30px;
height: 25px;
right: 10px;
top: 10px;
z-index: 200;
}
.nav--active .nav__trigger {
opacity: 0.5;
}
.nav__icon {
display: inline-block;
position: relative;
width: 30px;
height: 5px;
background-color: #FFFFFF;
-webkit-transition-property: background-color, -webkit-transform;
transition-property: background-color, -webkit-transform;
transition-property: background-color, transform;
transition-property: background-color, transform, -webkit-transform;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
}
.nav__icon:before,
.nav__icon:after {
content: '';
display: block;
width: 30px;
height: 5px;
position: absolute;
background: #FFFFFF;
-webkit-transition-property: margin, -webkit-transform;
transition-property: margin, -webkit-transform;
transition-property: margin, transform;
transition-property: margin, transform, -webkit-transform;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
}
.nav__icon:before {
margin-top: -10px;
}
.nav__icon:after {
margin-top: 10px;
}
/* Don't nest if you don't have to. */
/**
* Style #3
*/
.style-3 .nav {
width: 100%;
height: 100%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.style-3 .nav--active .nav {
-webkit-transform: translateX(20%);
transform: translateX(20%);
}
.style-3 .iphone__content {
-webkit-transform: scale(1) translateX(0);
transform: scale(1) translateX(0);
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.style-3 .iphone__screen {
background-color: #333;
}
.style-3 .nav--active .iphone__content {
-webkit-transform: scale(0.9) translateX(-90%);
transform: scale(0.9) translateX(-90%);
}
.style-3 .nav__icon {
background: rgba(0, 0, 0, 0);
}
.style-3 .nav__icon:before {
margin-top: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.style-3 .nav__icon:after {
margin-top: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.style-3 .nav--active .nav__icon {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 229