Мобильная версия
А также мой полный код на Codepen.
Код: Выделить всё
$(".clothes_js").click(function() {
$(".cl-item").hide();
$(".clothes").show("fast");
$(".boots").show("fast");
});
$(".hzt_js").click(function() {
$(".cl-item").hide();
$(".cl-item.ph").show("fast");
$(".cl-item.sl").show("fast");
$(".cl-item.tr").show("fast");
});
$(".pled_js").click(function() {
$(".cl-item").hide();
$(".cl-item.pled").show("fast");
});
function catalog() {
document.getElementById("cg").style.display = "grid";
document.getElementById("cl").style.display = "grid";
document.getElementById("back-btn").style.visibility = "visible";
};
$(".back-btn").click(function() {
$('html,body').animate({
scrollTop: $(".cg-dummy").offset().top},
'slow');
});
// FLickity Start
$('.slideshow').flickity({
// options
cellAlign: 'center',
contain: true,
wrapAround: true,
autoPlay: 5000,
prevNextButtons: false,
cellSelector: '.ss-item'
});Код: Выделить всё
/*----------------------------------------*\
#ESSENTIALS
\*----------------------------------------*/
:root {
--dark-blue: #34495e;
--green: #27ae60;
--shadow: 0 0 30px 1px rgba(104, 104, 104, 0.8);
--b_green: 3px solid var(--green);
--orange: #e67e22;
--gradient : linear-gradient(to bottom right, #00e5ff, #2ecc71);
--gradient_shadow: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3))
}
/*------------------
!COLORS
------------------*/
.blue { background-color: #1078A4; }
.biruza { background-color: #00939A; }
.siren { background-color: #C13C8D; }
.malina { background-color: #E76F77; }
.corall { background-color: #E44440; }
.an-dark-blue { background-color: #24204A; }
.olive { background-color: #635836; }
.baklajan { background-color: #503944; }
.grey { background-color: grey; }
.cream {
background-color: #E9C4AA;
color: var(--dark-blue);
}
.gradient {
background: var(--gradient);
color: var(--dark-blue);
}
.white {
background-color: white;
color: var(--dark-blue);
}
.yellow {
background-color: #FFCE65;
color: var(--dark-blue);
}
/*------------------
!ANIMATIONS
------------------*/
@-webkit-keyframes pulse {
0% {
border: 3px solid rgba(39, 174, 96, 1)
}
50% {
border: 3px solid rgba(39, 174, 96, 0);
}
100% {
border: 3px solid rgba(39, 174, 96, 1);
}
}
@-o-keyframes pulse {
0% {
border: 3px solid rgba(39, 174, 96, 1)
}
50% {
border: 3px solid rgba(39, 174, 96, 0);
}
100% {
border: 3px solid rgba(39, 174, 96, 1);
}
}
@-moz-keyframes pulse {
0% {
border: 3px solid rgba(39, 174, 96, 1)
}
50% {
border: 3px solid rgba(39, 174, 96, 0);
}
100% {
border: 3px solid rgba(39, 174, 96, 1);
}
}
@keyframes pulse {
0% {
border: 3px solid rgba(39, 174, 96, 1)
}
50% {
border: 3px solid rgba(39, 174, 96, 0);
}
100% {
border: 3px solid rgba(39, 174, 96, 1);
}
}
/*------------------
!MAIN
------------------*/
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
/*font-family: 'Pacifico', cursive;*/
text-align: center;
}
html, body {
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
img {
max-width:100%;
max-height:100%;
}
.dummy {
visibility: hidden;
}
/*----------------------------------------*\
#ESSENTIALS
\*----------------------------------------*/
.navbar {
position : relative;
top : 0;
display : grid;
grid-template-columns: 1fr 1fr 1fr;
justify-items : center;
align-items : center;
width : 100%;
padding : 10px;
background-color : var(--dark-blue);
}
.home-btn a img {
margin : 0;
border : 3px solid white;
min-width : 180px;
min-height: 80px;
}
tr > td {
padding : 3px 0;
text-align : left;
color : var(--green);
font-weight: bold;
}
td img {
float : right;
margin-right: 5px;
width : 20px;
height : 20px;
}
/*------------------
!SLIDESHOW
------------------*/
.slideshow {
background: var(--dark-blue);
position : relative;
}
.ss-item {
width : 100%;
height : 80vh;
margin-right: 0;
background : var(--green);
font-size : 1.25em;
}
.ss-item:nth-child(1) {
background : url(../img/ss1.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item:nth-child(2) {
background : url(../img/ss2.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item:nth-child(3) {
background : url(../img/ss3.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item:nth-child(4) {
background : url(../img/ss4.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item:nth-child(5) {
background : url(../img/ss5.jpg) no-repeat;
background-size : cover;
background-position: center center;
}
.ss-item__text {
position: absolute;
left : 50px;
bottom : 50px;
width : 90%;
}
.ss-item__h1 {
margin : 0;
padding: 10px;
float : left;
display: inline-block;
color : white/*var(--green)*/;
/*background: var(--dark-blue);*/
}
.ss-item__p {
margin : 0;
padding : 10px;
width : 80%;
float : left;
clear : left;
display : inline-block;
color : white/*var(--green)*/;
text-align : left;
/*background: var(--dark-blue);*/
}
.slideshow .flickity-page-dots {
bottom : 0.5em;
opacity: 1;
}
.slideshow .flickity-page-dots .dot {
width : 10px;
height : 10px;
background: #ccc;
border : 2px solid transparent;
}
.slideshow .flickity-page-dots .dot.is-selected {
background: #76ff03;
}
/*------------------
!INFO
------------------*/
.info {
display :grid;
grid-template-rows: 1fr 1fr;
margin : 20px;
box-shadow : var(--shadow);
}
.info__text {
background : var(--dark-blue);
color : var(--green);
text-align : center;
font-size : 1.2em;
border-top : 3px solid var(--green);
margin : 0;
padding : 20px;
/*box-shadow: var(--shadow);*/
}
.info__map iframe {
height: 100%;
width : 100%;
}
/*----------------------------------------*\
#CATALOG STUFF
\*----------------------------------------*/
/*------------------
!DUMMY
------------------*/
.cg-dummy {
position : relative;
width : 100%;
height : 500px;
background : url(../img/catalog.jpg);
background-size : cover;
background-position: center center;
background-color : #000;
box-shadow : var(--shadow);
box-sizing : border-box;
display : -webkit-flex;
display : -moz-flex;
display : -ms-flex;
display : -o-flex;
display : flex;
justify-content : center;
align-items : center;
margin : 30px auto;
cursor : pointer;
transition : opacity .7s ease-in-out;
}
.cg-dummy:hover {
opacity: 0.8;
}
.cg-dummy h1 {
font-weight: bold;
color : var(--green);
padding : 10px;
border : 3px solid var(--green);
transition : opacity 1s ease-in-out;
}
.cg-dummy:hover h1 { opacity: .7; }
/*------------------
!CATEGORIES
------------------*/
.cg {
display: none;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(382px, 1fr));
grid-template-rows: 1fr;
margin: 0 20px;
}
.cg-h1 {
display : none;
text-align : center;
font-size : 2.5em;
color : var(--green);
margin : 20px auto;
cursor : pointer;
padding : 5px;
border-radius: 5px;
}
.cg-item {
background: var(--dark-blue);
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100px;
border: none;
outline: none;
border-bottom: 3px solid var(--green);
box-shadow: 0 0 5px 1px rgba(104, 104, 104, 0.8)/*var(--shadow)*/;
}
.cg-item:focus {
border-right: var(--b_green);
border-left: var(--b_green);
border-top: var(--b_green);
}
.cg-item h1 {
position: relative;
font-size: 2.3em;
color: var(--green);
}
.cg-item:nth-child(1) h1::before {
content: "";
position: absolute;
margin: 0 auto;
left: -70px;
top: 50%;
transform: translateY(-50%);
background: url(../svg/fashion.svg);
-webkit-background-size: 50px 50px;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
.cg-item:nth-child(2) h1::before {
content: "";
position: absolute;
margin: 0 auto;
left: -70px;
top: 50%;
transform: translateY(-50%);
background: url(../svg/dish.svg);
-webkit-background-size: 50px 50px;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
.cg-item:nth-child(3) h1::before {
content: "";
position: absolute;
margin: 0 auto;
left: -70px;
top: 50%;
transform: translateY(-50%);
background: url(../svg/armchair.svg);
-webkit-background-size: 50px 50px;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
.back-btn {
position: fixed;
bottom: 5%;
right: 5%;
width: 50px;
height: 50px;
border-radius: 50px;
border: 2px solid var(--green);
background: var(--dark-blue);
z-index: 160;
cursor: pointer;
color: var(--orange);
visibility: hidden;
}
/*------------------
!CATALOG
------------------*/
.cl {
display: none;
grid-template-columns: repeat(auto-fit, 340px);
grid-template-rows: 1fr;
grid-gap: 20px;
justify-items: center;
align-items: center;
justify-content: space-evenly;
align-content: center;
margin: 20px 0;
}
.cl::after {
content: "";
display: table;
clear: both;
}
.cl-item {
display: grid;
grid-template-rows: repeat(4, 70px) 70px 15px;
grid-template-columns: 320px;
box-shadow: var(--shadow);
width: 320px;
height: 364px;
/*float: left;*/
}
.cl-item::after {
content: "";
display: table;
clear: both;
}
.cl-item img {
grid-row: 1/5;
display: block;
height: 100%;
width: 100%;
object-fit: fill;
}
.cl-item__info {
grid-row: 6/7;
display: grid;
grid-template-columns: 1fr 1fr;
}
.cl-item__color {
display: block;
height: 100%;
width: 100%;
text-align: center;
color: white /*var(--orange)*/;
font-size: 12px;
font-style: italic;
}
.cl-item__size {
display: block;
height: 100%;
width: 100%;
background-color: var(--dark-blue);
text-align: center;
color: var(--orange);
font-size: 12px;
font-style: italic;
}
.cl-item p {
/*display: inline;*/
grid-row: 5/6;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-color: var(--dark-blue);
border-top: 4px solid var(--green);
box-sizing: border-box;
font-size: 19.2px;
color: var(--green);
height: 100%;
margin: 0;
}
.clothes img, .boots img {
/*width: 70%;*/
object-fit: contain;
}
/*----------------------------------------*\
#ESSENTIALS
\*----------------------------------------*/
/*------------------
!MEDIA
------------------*/
@media (min-width: 1280px) {
.info {
display:grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
}
.info__text {
border-top: none;
border-left: 3px solid var(--green);
}
}
@media (max-width: 990px) {
body {
font-size: 12px;
}
.ss-item__text {
position: absolute;
bottom : 30px;
left : 30px;
width : 90%;
font-size: .8em;
}
.info {
display :grid;
grid-template-rows: 300px 1fr;
margin : 20px;
box-shadow : var(--shadow);
}
.cg {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin: 0;
}
.cg-item h1 {
font-size: 1.4em;
}
.cg-item:nth-child(3) h1::before {
content: "";
position: absolute;
margin: 0 auto;
left: -60px;
top: 50%;
transform: translateY(-50%);
background: url(../svg/armchair.svg);
-webkit-background-size: 50px 50px;
background-size: 50px 50px;
width: 50px;
height: 50px;
}
}
@media (max-width: 500px) {
.navbar {
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
}
.dummy {
display: none;
}
}
@media (max-width: 361px) {
.navbar-number {
margin: 20px auto;
}
.cg-dummy {
height: 200px;
}
.ss-item__text {
position: absolute;
bottom : 30px;
left : 20px;
width : 90%;
font-size: .7em;
}
.cg-item {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
font-size: 1.2em;
}
.cg-item img {
width: 30px;
height: 30px;
}
.cl-item {
margin: 20px auto;
}
}Код: Выделить всё
TextileToday
[img]https://picsum.photos/20/20[/img]
84955100075
[img]https://picsum.photos/20/20[/img]
@Textile2day
[img]https://picsum.photos/20/20[/img]
info.torgservice@bk.ru
[url=#home]
[img]img/logo.png[/img]
[/url]
[img]svg/telephone.svg[/img]
84955100075
[img]svg/instagram.svg[/img]
@Textile2day
[img]svg/email.svg[/img]
info.torgservice@bk.ru
Новое поколение
Велсофт — это синтетика нового поколения. Ткань называют также микрофиброй. Страна рождения – Япония. Именно здесь, на островах высоких технологий, в 1976 году был разработан способ изготовления уникальных, ультратонких волокон, диаметр которых не превышает 0,06 мм
Комфорт
Велсофт создан для домашнего комфорта и уюта. Её пушистый, мягкий ворс напоминает велюр, но отличается особой шелковистостью и нежностью. Изделия из этого материала дарят и взрослым, и детям ощущения особого домашнего тепла и покоя
Дышащая ткань
Наличие достаточно длинного и воздушного ворса, необыкновенно тёплого и приятного на ощупь, приводит к тому, что изделие почти мгновенно достигает температуры человеческого тела, в последующем сохраняя полученное тепло. Одежда из велсофта препятствует перегреву даже в очень тёплом помещении
Безопасность
Велсофт производят в полном соответствии с нормами международной системы сертификации и тестирования изделий из текстиля Эко Текс, что делает его пригодным для производства домашней и детской одежды
Гипоалергенность
Микрофибра — гипоаллергенная ткань, состоящая из полимерных и натуральных волокон, в том числе нейлона, полиэстера, хлопка или вискозы. Ткань широко применяется при производстве одежды, мебели, в промышленности. В ее основе — ультратонкие волокна, в 10 раз меньше диаметра волокна натурального шелка
Каталог
Одежда
Хозтовары
Товары для дома
[img]svg/upload.svg[/img]
[img]img/dpled/dpled1.jpg[/img]
Кремовый
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled2.jpg[/img]
Голубой
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled3.jpg[/img]
Бирюза
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled4.jpg[/img]
Сирень
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled5.jpg[/img]
Малина
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled6.jpg[/img]
Коралл
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled7.jpg[/img]
Малина
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled8.jpg[/img]
Коралл
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled9.jpg[/img]
Бирюза
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled10.jpg[/img]
Сирень
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled11.jpg[/img]
Кремовый
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled12.jpg[/img]
Голубой
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled13.jpg[/img]
Коралл
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled14.jpg[/img]
Малина
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled15.jpg[/img]
Голубой
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled16.jpg[/img]
Сирень
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled17.jpg[/img]
Бирюза
150x200cm, 200x220cm
Плед из велсофта
[img]img/dpled/dpled18.jpg[/img]
Кремовый
150x200cm, 200x220cm
Плед из велсофта
[img]img/opled/opled1.jpg[/img]
Темно-Голубой
150x200cm, 200x220cm
Плед из велсофта
[img]img/opled/opled2.jpg[/img]
Оливковый
150x200cm, 200x220cm
Плед из велсофта
[img]img/opled/opled3.jpg[/img]
Баклажан
150x200cm, 200x220cm
Плед из велсофта
[img]img/opled/opled4.jpg[/img]
Баклажан
150x200cm, 200x220cm
Плед из велсофта
Подробнее здесь: https://stackoverflow.com/questions/515 ... element-id
