mirror of
https://github.com/Llloooggg/Jarvis.git
synced 2026-03-06 20:16:23 +03:00
450 lines
7.9 KiB
CSS
450 lines
7.9 KiB
CSS
@import "layout/base.css";
|
||
@import "layout/fonts.css";
|
||
@import "layout/normalize.css";
|
||
@import "components/footer.css";
|
||
@import "components/header.css";
|
||
|
||
/* главная-- */
|
||
|
||
.hero_con {
|
||
padding-top: 100px;
|
||
}
|
||
.ava_logo {
|
||
float: right;
|
||
width: 350px;
|
||
height: 350px;
|
||
background : #000;
|
||
border-radius: 30px;
|
||
}
|
||
.rotateblock_orenge {
|
||
float: right;
|
||
width: 350px;
|
||
height: 350px;
|
||
background : #f89513;
|
||
border-radius: 30px;
|
||
}
|
||
.content_form {
|
||
float: left;
|
||
width: 50%;
|
||
text-align: center;
|
||
margin-left: 65px;
|
||
margin-top: 35px;
|
||
}
|
||
|
||
.ava {
|
||
width: 100%;
|
||
|
||
}
|
||
.h_content {
|
||
font-family: 'OpenSans';
|
||
font-weight: bold;
|
||
text-transform: uppercase;
|
||
font-size: 49px;
|
||
margin-top: 25px;
|
||
margin-bottom: 45px;
|
||
|
||
}
|
||
.text_content {
|
||
font-family: 'OpenSans';
|
||
font-size: 26px;
|
||
margin-top: 25px;
|
||
margin-bottom: 45px;
|
||
}
|
||
.welcome__btn {
|
||
padding: 15px 20px;
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 40px;
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
color: #f1f1f1;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
transition: .3s;
|
||
-webkit-transition: .3s;
|
||
background: #131415;
|
||
border: 0;
|
||
cursor: pointer;
|
||
margin: 0 auto;
|
||
}
|
||
.welcome__btn:hover {
|
||
background: #f89513;
|
||
}
|
||
|
||
|
||
/* анимации */
|
||
.animate_text {
|
||
animation: bounceInDown 1.1s;
|
||
}
|
||
|
||
@keyframes bounceInDown {
|
||
from,
|
||
60%,
|
||
75%,
|
||
90%,
|
||
to {
|
||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
}
|
||
|
||
0% {
|
||
opacity: 0;
|
||
transform: translate3d(0, -3000px, 0);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translate3d(0, 25px, 0);
|
||
}
|
||
|
||
75% {
|
||
transform: translate3d(0, -10px, 0);
|
||
}
|
||
|
||
90% {
|
||
transform: translate3d(0, 5px, 0);
|
||
}
|
||
|
||
to {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
.bounceInDown {
|
||
animation-name: bounceInDown;
|
||
}
|
||
|
||
.input {
|
||
text-decoration: none;
|
||
}
|
||
.content_form-text {
|
||
animation: bounceInRight .7s;
|
||
}
|
||
@keyframes bounceInRight {
|
||
from,
|
||
60%,
|
||
75%,
|
||
90%,
|
||
to {
|
||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
}
|
||
|
||
from {
|
||
opacity: 0;
|
||
transform: translate3d(3000px, 0, 0);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translate3d(-25px, 0, 0);
|
||
}
|
||
|
||
75% {
|
||
transform: translate3d(10px, 0, 0);
|
||
}
|
||
|
||
90% {
|
||
transform: translate3d(-5px, 0, 0);
|
||
}
|
||
|
||
to {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
.bounceInRight {
|
||
animation-name: bounceInRight;
|
||
}
|
||
.input-button {
|
||
animation: bounceInLeft .7s;
|
||
}
|
||
@keyframes bounceInLeft {
|
||
from,
|
||
60%,
|
||
75%,
|
||
90%,
|
||
to {
|
||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
}
|
||
|
||
0% {
|
||
opacity: 0;
|
||
transform: translate3d(-3000px, 0, 0);
|
||
}
|
||
|
||
60% {
|
||
opacity: 1;
|
||
transform: translate3d(25px, 0, 0);
|
||
}
|
||
|
||
75% {
|
||
transform: translate3d(-10px, 0, 0);
|
||
}
|
||
|
||
90% {
|
||
transform: translate3d(5px, 0, 0);
|
||
}
|
||
|
||
to {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
.bounceInLeft {
|
||
animation-name: bounceInLeft;
|
||
}
|
||
|
||
.rotateblock {
|
||
animation: rotate 10s linear;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
.rotateblock_orenge {
|
||
animation: rotateor 10s linear;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
@keyframes rotate {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(-360deg);
|
||
}
|
||
}
|
||
@keyframes rotateor {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(-360deg);
|
||
}
|
||
}
|
||
|
||
.ava_logo {
|
||
animation: rotatenone 10s linear;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
@keyframes rotatenone {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(720deg);
|
||
}
|
||
}
|
||
|
||
|
||
/*
|
||
* контент
|
||
*/
|
||
.form_content {
|
||
display: flex;
|
||
}
|
||
/* условия */
|
||
.condition {
|
||
width: 35%;
|
||
margin-right: 20px;
|
||
}
|
||
.events {
|
||
width: 45%;
|
||
margin-right: 20px;
|
||
}
|
||
.telegram {
|
||
width: 20%;
|
||
}
|
||
|
||
|
||
|
||
.form {
|
||
|
||
background: #f5f5f5;
|
||
border-radius: 3px;
|
||
padding: 45px 20px;
|
||
margin: 0 auto;
|
||
margin-top: 35px;
|
||
margin-bottom: 35px;
|
||
}
|
||
|
||
.form__title {
|
||
color: #221f1f;
|
||
font-size: 23px;
|
||
font-weight: bold;
|
||
margin-bottom: 25px;
|
||
}
|
||
.form__cell {
|
||
display: block;
|
||
float: left;
|
||
width: 270px;
|
||
}
|
||
.form__log {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
/* только в списках к первому элементу добавить справа 20р */
|
||
.form__cell:first-child {
|
||
margin-right: 20px;
|
||
}
|
||
.form__field-title {
|
||
color: #221f1f;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.form__input-text {
|
||
width: 100%;
|
||
height: 45px;
|
||
padding: 13px 10px;
|
||
font-size: 14px; /*размерр текста*/
|
||
font-weight: 300px; /*шрифт*/
|
||
border: 1px solid transparent;
|
||
border-radius: 3px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.form__input-text::-webkit-input-placeholder {
|
||
color:#908f8f; /*цвет текста в input*/
|
||
}
|
||
.form__input-text::-moz-placeholder {
|
||
color:#908f8f;
|
||
}
|
||
.form__input-text:focus, .form__texterea:focus, .form__submit:focus { /*цвет окантовки*/
|
||
border-color: #f89513;
|
||
outline: none;
|
||
}
|
||
.form__texterea {
|
||
height: 90px;
|
||
width: 100%;
|
||
border: none;
|
||
border-radius: 3px;
|
||
padding: 13px 10px;
|
||
resize: none;
|
||
font-size: 14px;
|
||
border: 1px solid transparent;
|
||
border-radius: 3px;
|
||
font-weight: 300px; /*шрифт*/
|
||
margin-bottom: 20px;
|
||
}
|
||
.form__container-left {
|
||
display: inline-block;
|
||
width: 50%;
|
||
}
|
||
|
||
.form__radio-elem{
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
display: none;
|
||
}
|
||
.form__radio-elem:checked+.form__radio-fake {
|
||
border: 1px solid #f89513;
|
||
}
|
||
.form__radio-elem:checked + .form__radio-fake:after {
|
||
display: block;
|
||
}
|
||
.form__radio-elem:checked+.form__radio-fake+.form__radio-text {
|
||
/*color: blue;*/
|
||
font-weight: bold;
|
||
}
|
||
.form__radio-fake {
|
||
width: 20px;
|
||
height: 20px;
|
||
display: inline-block;
|
||
border-radius: 50%;
|
||
border: 1px solid #cbcbcb;
|
||
position: relative;
|
||
background: -webkit-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
|
||
/* Chrome10-25,Safari5.1-6 */
|
||
background: linear-gradient(to bottom, #fdfdfd 0%, #efefef 100%);
|
||
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||
}
|
||
.form__radio-fake:after {
|
||
content: "";
|
||
display: none;
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #f89513;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 5px;
|
||
}
|
||
.form__radio-text {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
padding-bottom: 12px;
|
||
}
|
||
|
||
.form__controls-left{
|
||
float: left;
|
||
}
|
||
.form__controls-right{
|
||
float: right;
|
||
}
|
||
.form__submit {
|
||
margin-top: 22px;
|
||
background: #1c1f1d;
|
||
border-radius: 3px;
|
||
width: 125px;
|
||
height: 45px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
border: 0;
|
||
cursor: pointer;
|
||
/* border: none; */
|
||
|
||
}
|
||
.form__submit:hover {
|
||
background: #f89513;
|
||
}
|
||
/* евенты
|
||
*/
|
||
|
||
.events_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
/* крест */
|
||
|
||
.cl-btn-7 {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 40px;
|
||
position: relative;
|
||
z-index: 1;
|
||
cursor: pointer;
|
||
}
|
||
.cl-btn-7:before {
|
||
content: '+';
|
||
color: #535557;
|
||
position: absolute;
|
||
z-index: 2;
|
||
transform: rotate(45deg);
|
||
font-size: 50px;
|
||
line-height: 1;
|
||
top: -5px;
|
||
left: 6px;
|
||
transition: all 0.3s cubic-bezier(0.77, 0, 0.2, 0.85);
|
||
}
|
||
.cl-btn-7:after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 100%;
|
||
background: #535557;
|
||
z-index: 1;
|
||
transition: all 0.3s cubic-bezier(0.77, 0, 0.2, 0.85);
|
||
transform: scale(0.01);
|
||
}
|
||
.cl-btn-7:hover:after {
|
||
transform: scale(1);
|
||
}
|
||
.cl-btn-7:hover:before {
|
||
transform: scale(0.8) rotate(45deg);
|
||
color: #fff;
|
||
}
|
||
|