*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; }
body {
font-family: 'Roboto Mono', monospace;
background: #f7f5ed;
color: #d6856d;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
.section {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.section--nav {
position: relative;
overflow: hidden;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.section__title {
font-size: 0.65em;
font-weight: 700;
-webkit-flex: none;
flex: none;
margin: 3em 0 15em;
text-indent: 3px;
letter-spacing: 3px;
text-transform: uppercase;
color: #d1d1d1;
}
.section.section--intro {
font-size: 1.6em;
position: relative;
min-height: 100vh;
text-align: center;
color: #fff;
background: #333;
}
.section--intro p {
max-width: 1000px;
margin: 0 auto;
padding: 1em;
}
/* Mockup Slider */
.mockup-slider {
position: relative;
width: calc(100% - 12em);
margin: 0 0 0 2em;
max-width: 600px;
}
.mockup-slider::before,
.mockup-slider::after {
content: '';
width: 100%;
background: rgba(0,0,0,0.05);
height: 100px;
position: absolute;
top: 0;
}
.mockup-slider::after {
top: auto;
bottom: 0;
}
.mockup-slider img {
position: relative;
display: block;
max-width: 100%;
margin: 150px 0;
box-shadow: 0 10px 20px -4px rgba(0,0,0,0.6);
}
.mockup-slider__title {
position: absolute;
font-size: 3em;
bottom: 30%;
left: -0.5em;
font-weight: normal;
margin: 0;
}
.mockup-slider__subtitle {
position: absolute;
top: 70%;
left: -1em;
background: #1b3050;
margin: 0;
color: #fff;
font-size: 1.05em;
padding: 0.25em 0.5em;
z-index: 100;
}
/* General styles */
.nav {
position: relative;
width: 8em;
margin: 0 0 0 3em;
}
.nav__item {
line-height: 1;
position: relative;
display: block;
margin: 0;
padding: 0;
letter-spacing: 0;
color: currentColor;
border: 0;
background: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.nav__item:focus {
outline: none;
}
/* Individual styles */
/* Aman */
.nav--aman {
font-size: 1.5em;
margin: 0 0 0 1em;
padding: 0 0 0 1em;
}
.nav--aman .nav__item {
width: 48px;
height: 48px;
opacity: 0.8;
background: url(image.svg) no-repeat 50% 50%;
background-size: auto 50%;
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
-webkit-animation-timing-function: cubic-bezier(0.2,1,0.3,1);
animation-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.nav--aman .nav__item:not(.nav__item--current):focus,
.nav--aman .nav__item:not(.nav__item--current):hover {
opacity: 1;
-webkit-transform: scale3d(1.25,1.25,1);
transform: scale3d(1.25,1.25,1);
}
.nav--aman .nav__item--current {
pointer-events: none;
opacity: 1;
-webkit-transform: scale3d(1.85,1.85,1);
transform: scale3d(1.85,1.85,1);
}
.nav--aman .nav__pointer {
position: absolute;
top: 0;
left: 0;
width: 2em;
height: 2em;
margin: 0.45em 0 0 1.25em;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-animation-timing-function: cubic-bezier(0.2,1,0.3,1);
animation-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.nav--aman .nav__item--current:nth-child(2) ~ .nav__pointer {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.nav--aman .nav__item--current:nth-child(3) ~ .nav__pointer {
-webkit-transform: translate3d(0,200%,0);
transform: translate3d(0,200%,0);
}
.nav--aman .nav__item--current:nth-child(4) ~ .nav__pointer {
-webkit-transform: translate3d(0,300%,0);
transform: translate3d(0,300%,0);
}
.nav--aman .nav__item--current:nth-child(5) ~ .nav__pointer {
-webkit-transform: translate3d(0,400%,0);
transform: translate3d(0,400%,0);
}
.nav--aman .nav__icon {
display: block;
width: 90%;
height: 90%;
fill: #94938a;
}
سون لرن • آموزش...برچسب : استایل زیبا برای فتوشاپ,استایل زیبا برای نظرات وردپرس,استایل زیبا برای پاورپوینت,استایل زیبا برای جدول,استایل زیبا برای سایت,استایل زیبا برای جدول در css,استایل های زیبا برای فتوشاپ,دانلود استایل زیبا برای فتوشاپ,کد استایل زیبا برای سایت,دانلود استایل های زیبا برای فتوشاپ, نویسنده : استخدام کار 7learn بازدید : 351