site animation and img changed to svg

This commit is contained in:
Meylis Gazakow 2022-04-13 21:20:25 +03:00
parent 827b174d6d
commit 36ec2d5fc8
8 changed files with 3109 additions and 32 deletions

2829
shablon/css/animate.css vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -895,6 +895,10 @@ li {
display: none;
}
.pass_change.active {
display: block;
}
.pass_title {
font-size: 40px;
font-weight: 700;
@ -1022,6 +1026,49 @@ li {
-o-object-fit: contain;
}
.header_icon svg {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
}
.trend_line {
animation: trendUp 6.8s linear infinite;
animation-delay: .5s;
stroke-dasharray: 100;
pointer-events: none;
}
.trend_arrow {
animation: trendUp 6.8s linear infinite;
animation-delay: .5s;
stroke-dasharray: 120;
pointer-events: none;
}
@keyframes trendUp {
0% {
stroke-dashoffset: -31;
}
25% {
stroke-dashoffset: 31;
}
50% {
stroke-dashoffset: 31;
}
75% {
stroke-dashoffset: 31;
}
100% {
stroke-dashoffset: 31;
}
}
.head_text {
font-size: 14px;
font-weight: 400;
@ -1078,6 +1125,54 @@ li {
margin-right: 10px;
}
.header_img svg {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
}
#logo_top,
#logo_left,
#logo_right,
#logo_bottom {
animation: top 4s linear infinite;
}
#logo_right {
animation-delay: .3s;
}
#logo_bottom {
animation-delay: .5s;
}
#logo_left {
animation-delay: .8s;
}
@keyframes top {
0% {
fill: #aba17d;
}
25% {
fill: #003197;
}
50% {
fill: #0056ff;
}
75% {
fill: #003197;
}
100% {
fill: #aba17d;
}
}
.link {
margin: 30px 0 0 0;
display: flex;
@ -1622,6 +1717,26 @@ li {
height: 100%;
}
.slick-slide.slick-current .slider_item-img {
animation: slider_img 10s linear;
}
@keyframes slider_img {
0% {
transform: scale(2);
opacity: 0;
}
15% {
opacity: 1;
}
100% {
transform: scale(1);
}
}
.slider_item-img img {
width: 100%;
height: 100%;
@ -5164,6 +5279,31 @@ input::-webkit-calendar-picker-indicator {
padding: 0 50px;
}
.pass_mail,
.pass_change {
padding: 40px;
width: calc(100% - 50px);
max-width: 650px;
}
.pass_title {
font-size: 30px;
}
.pass_input input {
padding: 12px 20px;
font-size: 16px;
}
.pass_btn {
padding: 12px 0;
font-size: 16px;
}
.pass_input {
margin-bottom: 20px;
}
.acc_lang {
right: 50px;
top: 30px;
@ -6792,6 +6932,33 @@ input::-webkit-calendar-picker-indicator {
--text-20: 14px;
}
.pass_mail,
.pass_change {
padding: 30px;
}
.pass_title {
font-size: 24px;
}
.pass_input input {
padding: 12px 15px;
font-size: 14px;
}
.pass_input input::placeholder {
font-size: 14px;
}
.pass_btn {
padding: 12px 0;
font-size: 16px;
}
.pass_input {
margin-bottom: 20px;
}
.contact_title {
font-size: 18px;
}

View File

@ -0,0 +1,6 @@
<svg id="Group_14" data-name="Group 14" xmlns="http://www.w3.org/2000/svg" width="100" height="100.001" viewBox="0 0 100 100.001">
<path id="Path_2130" data-name="Path 2130" d="M12613.869,7717.147l20.387-20.38v-9.209h9.2l3.371-3.372-16.276-16.277h-15.936v20.717l-14.645,14.635Z" transform="translate(-12599.973 -7653.263)" fill="#003197" fill-rule="evenodd" />
<path id="Path_2131" data-name="Path 2131" d="M14257.869,7055.751l16.273-16.274v-15.936h-20.728l-14.622-14.645-13.891,13.886,20.389,20.4h9.215v9.209Z" transform="translate(-14188.795 -7008.896)" fill="#aba17d" fill-rule="evenodd" />
<path id="Path_2132" data-name="Path 2132" d="M13308.307,9433.256l-20.394-20.391h-9.2v-9.215l-3.371-3.357-16.274,16.274V9432.5h20.706l14.647,14.644Z" transform="translate(-13244.428 -9347.147)" fill="#0056ff" fill-rule="evenodd" />
<path id="Path_2133" data-name="Path 2133" d="M15007.646,8683.345h15.934v-20.727l14.643-14.622-13.891-13.883-20.393,20.382v9.213h-9.207l-3.361,3.371Z" transform="translate(-14938.223 -8597.992)" fill="#003197" fill-rule="evenodd" />
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24.828" height="14.828" viewBox="0 0 24.828 14.828">
<g id="trending-up" transform="translate(0.414 -4.586)">
<path id="Контур_121" data-name="Контур 121" d="M23,6l-9.5,9.5-5-5L1,18" fill="none" stroke="#01bf34" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Контур_122" data-name="Контур 122" d="M17,6h6v6" fill="none" stroke="#01bf34" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
<g id="trending-up" transform="translate(0.414 -4.586)">
<path id="Контур_121" data-name="Контур 121" d="M23,6l-9.5,9.5-5-5L1,18" fill="none" stroke="#01bf34" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Контур_122" data-name="Контур 122" d="M17,6h6v6" fill="none" stroke="#01bf34" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 527 B

After

Width:  |  Height:  |  Size: 523 B

View File

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24.828" height="14.828" viewBox="0 0 24.828 14.828">
<g id="trending-up" transform="translate(1.414 1.414)">
<path id="Контур_121" data-name="Контур 121" d="M23,18,13.5,8.5l-5,5L1,6" transform="translate(-1 -6)" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Контур_122" data-name="Контур 122" d="M17,12h6V6" transform="translate(-1)" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
<g id="trending-up" transform="translate(1.414 1.414)">
<path id="Контур_121" data-name="Контур 121" d="M23,18,13.5,8.5l-5,5L1,6" transform="translate(-1 -6)" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
<path id="Контур_122" data-name="Контур 122" d="M17,12h6V6" transform="translate(-1)" fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 575 B

After

Width:  |  Height:  |  Size: 571 B

View File

@ -10,6 +10,7 @@
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/phone_box.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/main.css">
<title>Home</title>
</head>
@ -17,7 +18,7 @@
<body>
<!-- Register ======================================================== -->
<section class="register">
<!-- <section class="register">
<div class="auto_container">
<div class="register_wrap">
<div class="register_body">
@ -3061,7 +3062,7 @@
</div>
</div>
</div>
</section>
</section> -->
<!-- Register end ==================================================== -->
<!-- Password ==================================================== -->
@ -3128,9 +3129,19 @@
<img src="images/svg/up.svg" alt="">
</a>
<div class="info_block">
<div class="header_contact">
<div class="header_contact wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".1s">
<div class="header_icon">
<img src="images/svg/trend_up.svg" alt="">
<svg xmlns="http://www.w3.org/2000/svg" width="24.828" height="14.828"
viewBox="0 0 24.828 14.828">
<g id="trend_up" transform="translate(0.414 -4.586)">
<path class="trend_line" data-name="Контур 121" d="M23,6l-9.5,9.5-5-5L1,18"
fill="none" stroke="#01bf34" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" />
<path class="trend_arrow" data-name="Контур 122" d="M17,6h6v6" fill="none"
stroke="#01bf34" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" />
</g>
</svg>
</div>
<div class="currency">
usd
@ -3139,9 +3150,19 @@
3.5000
</div>
</div>
<div class="header_contact">
<div class="header_contact wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s">
<div class="header_icon">
<img src="images/svg/trending-down.svg" alt="">
<svg xmlns="http://www.w3.org/2000/svg" width="24.828" height="14.828"
viewBox="0 0 24.828 14.828">
<g id="trending-up" transform="translate(1.414 1.414)">
<path class="trend_line" data-name="Контур 121" d="M23,18,13.5,8.5l-5,5L1,6"
transform="translate(-1 -6)" fill="none" stroke="red" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" />
<path class="trend_arrow" data-name="Контур 122" d="M17,12h6V6"
transform="translate(-1)" fill="none" stroke="red" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" />
</g>
</svg>
</div>
<div class="currency">
eur
@ -3150,9 +3171,19 @@
4.3430
</div>
</div>
<div class="header_contact">
<div class="header_contact wow fadeInRight" data-wow-duration="1s" data-wow-delay=".1s">
<div class="header_icon">
<img src="images/svg/trend_up.svg" alt="">
<svg xmlns="http://www.w3.org/2000/svg" width="24.828" height="14.828"
viewBox="0 0 24.828 14.828">
<g id="trend_up" transform="translate(0.414 -4.586)">
<path class="trend_line" data-name="Контур 121" d="M23,6l-9.5,9.5-5-5L1,18"
fill="none" stroke="#01bf34" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" />
<path class="trend_arrow" data-name="Контур 122" d="M17,6h6v6" fill="none"
stroke="#01bf34" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" />
</g>
</svg>
</div>
<div class="currency">
gbp
@ -3173,7 +3204,21 @@
<div class="header_wrap">
<a href="index.html" class="header_logo">
<div class="header_img">
<img src="images/big_logo.png" alt="logo">
<svg id="Group_14" data-name="Group 14" xmlns="http://www.w3.org/2000/svg" width="100"
height="100.001" viewBox="0 0 100 100.001">
<path id="logo_left" data-name="Path 2130"
d="M12613.869,7717.147l20.387-20.38v-9.209h9.2l3.371-3.372-16.276-16.277h-15.936v20.717l-14.645,14.635Z"
transform="translate(-12599.973 -7653.263)" fill="#003197" fill-rule="evenodd" />
<path id="logo_top" data-name="Path 2131"
d="M14257.869,7055.751l16.273-16.274v-15.936h-20.728l-14.622-14.645-13.891,13.886,20.389,20.4h9.215v9.209Z"
transform="translate(-14188.795 -7008.896)" fill="#aba17d" fill-rule="evenodd" />
<path id="logo_bottom" data-name="Path 2132"
d="M13308.307,9433.256l-20.394-20.391h-9.2v-9.215l-3.371-3.357-16.274,16.274V9432.5h20.706l14.647,14.644Z"
transform="translate(-13244.428 -9347.147)" fill="#0056ff" fill-rule="evenodd" />
<path id="logo_right" data-name="Path 2133"
d="M15007.646,8683.345h15.934v-20.727l14.643-14.622-13.891-13.883-20.393,20.382v9.213h-9.207l-3.361,3.371Z"
transform="translate(-14938.223 -8597.992)" fill="#003197" fill-rule="evenodd" />
</svg>
</div>
<div class="logo_text">
Государственная товарно-сырьевая <br>
@ -3328,7 +3373,12 @@
возможность реализации товаров не в электронной коммерции.
</div>
</div>
<div class="slider_item-img">
<img src="../shablon/images/slide.png" alt="">
</div>
</div>
<div class="slider_item">
<div class="slider_content">
<div class="slider_title">
@ -3342,7 +3392,12 @@
возможность реализации товаров коммерции.
</div>
</div>
<div class="slider_item-img">
<img src="../shablon/images/slide.png" alt="">
</div>
</div>
<div class="slider_item">
<div class="slider_content">
<div class="slider_title">
@ -3355,7 +3410,12 @@
возможность реализации коммерции.
</div>
</div>
<div class="slider_item-img">
<img src="../shablon/images/slide.png" alt="">
</div>
</div>
<div class="slider_item">
<div class="slider_content">
<div class="slider_title">
@ -3368,6 +3428,10 @@
возможность коммерции.
</div>
</div>
<div class="slider_item-img">
<img src="../shablon/images/slide.png" alt="">
</div>
</div>
</div>
<div class="advert">
@ -3387,7 +3451,7 @@
</div>
<div class="categories">
<a href="#" class="cat_item">
<a href="#" class="cat_item wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".1s">
<div class="cat_photo">
<img src="images/cat-1.png" alt="">
</div>
@ -3395,7 +3459,7 @@
Нефтехимия
</div>
</a>
<a href="#" class="cat_item">
<a href="#" class="cat_item wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".2s">
<div class="cat_photo">
<img src="images/cat-2.png" alt="">
</div>
@ -3403,7 +3467,7 @@
Машиностроение
</div>
</a>
<a href="#" class="cat_item">
<a href="#" class="cat_item wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".3s">
<div class="cat_photo">
<img src="images/cat-3.png" alt="">
</div>
@ -3411,7 +3475,7 @@
Легкая промышленность
</div>
</a>
<a href="#" class="cat_item">
<a href="#" class="cat_item wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".4s">
<div class="cat_photo">
<img src="images/cat-4.png" alt="">
</div>
@ -3419,7 +3483,7 @@
Стройматериалы
</div>
</a>
<a href="#" class="cat_item">
<a href="#" class="cat_item wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".5s">
<div class="cat_photo">
<img src="images/cat-2.png" alt="">
</div>
@ -3427,7 +3491,7 @@
Машиностроение
</div>
</a>
<a href="#" class="cat_item">
<a href="#" class="cat_item wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".6s">
<div class="cat_photo">
<img src="images/cat-3.png" alt="">
</div>
@ -3435,7 +3499,7 @@
Легкая промышленность
</div>
</a>
<a href="#" class="cat_item">
<a href="#" class="cat_item wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".7s">
<div class="cat_photo">
<img src="images/cat-4.png" alt="">
</div>
@ -3496,7 +3560,7 @@
</div>
</div>
<div class="product_box">
<div class="product_item">
<div class="product_item wow bounceInUp" data-wow-duration="1s" data-wow-delay=".1s">
<div class="item_head">
<div class="item_lot">
Лот №:
@ -3547,7 +3611,7 @@
Подробнее
</a>
</div>
<div class="product_item">
<div class="product_item wow bounceInUp" data-wow-duration="1s" data-wow-delay=".2s">
<div class="item_head">
<div class="item_lot">
Лот №:
@ -3598,7 +3662,7 @@
Подробнее
</a>
</div>
<div class="product_item">
<div class="product_item wow bounceInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="item_head">
<div class="item_lot">
Лот №:
@ -3649,7 +3713,7 @@
Подробнее
</a>
</div>
<div class="product_item">
<div class="product_item wow bounceInUp" data-wow-duration="1s" data-wow-delay=".4s">
<div class="item_head">
<div class="item_lot">
Лот №:
@ -3700,7 +3764,7 @@
Подробнее
</a>
</div>
<div class="product_item">
<div class="product_item wow bounceInUp" data-wow-duration="1s" data-wow-delay=".1s">
<div class="item_head">
<div class="item_lot">
Лот №:
@ -3751,7 +3815,7 @@
Подробнее
</a>
</div>
<div class="product_item">
<div class="product_item wow bounceInUp" data-wow-duration="1s" data-wow-delay=".2s">
<div class="item_head">
<div class="item_lot">
Лот №:
@ -3802,7 +3866,7 @@
Подробнее
</a>
</div>
<div class="product_item">
<div class="product_item wow bounceInUp" data-wow-duration="1s" data-wow-delay=".3s">
<div class="item_head">
<div class="item_lot">
Лот №:
@ -3853,7 +3917,7 @@
Подробнее
</a>
</div>
<div class="product_item">
<div class="product_item wow bounceInUp" data-wow-duration="1s" data-wow-delay=".4s">
<div class="item_head">
<div class="item_lot">
Лот №:
@ -3994,6 +4058,7 @@
<script src="js/slick.js"></script>
<script src="js/slider.js"></script>
<script src="js/custom-select.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/main.js"></script>
<script>
@ -4016,6 +4081,10 @@
})
</script>
<script>
new WOW().init();
</script>
<!-- <script src="js/extra.js"></script> -->
</body>

3
shablon/js/wow.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -19,6 +19,7 @@
<section class="password active">
<div class="auto_container">
<div class="pass_wrap">
<div class="pass_mail active">
<div class="pass_title">
Забыли пароль
@ -32,6 +33,7 @@
</button>
</form>
</div>
<div class="pass_change active">
<div class="pass_title">
Забыли пароль
@ -48,6 +50,7 @@
</button>
</form>
</div>
</div>
</div>
</section>