Widget:Порталы

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <script> $('.portal-carousel').slick({

 slidesToShow: 4,
 slidesToScroll: 1,
 infinite: true,
 arrows: true,

prevArrow: '

', nextArrow: '

',

 responsive: [
   {
     breakpoint: 1300,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 1000,
     settings: {
       slidesToShow: 2,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 800,
     settings: {
       slidesToShow: 1,
       slidesToScroll: 1
     }
   }
 ]

});

/* Слайдер галерея*/ $('.gallery-slider').slick({

 dots: false,
 infinite: true,
 speed: 500,
 fade: true,
 cssEase: 'linear',
 arrows: false,
 asNavFor: '.gallery-slider-nav',

});

$('.gallery-slider-nav').slick({

 infinite: true,
 slidesToShow: 5,
 slidesToScroll: 1,
 asNavFor: '.gallery-slider',
 dots: false,
 centerMode: true,
 focusOnSelect: true,
 arrows: true,

prevArrow: '

', nextArrow: '

',

 responsive: [
   {
     breakpoint: 1200,
     settings: {
       slidesToShow: 4,
     }
   },
   {
     breakpoint: 992,
     settings: {
       slidesToShow: 3,
     }
   }
 ]

});

/* Слайдер сликовский на страницах порталов внизу*/ $('.friends-carousel').slick({

 slidesToShow: 5,
 slidesToScroll: 1,
 infinite: true,
 arrows: true,

prevArrow: '

', nextArrow: '

',

 responsive: [
   {
     breakpoint: 1300,
     settings: {
       slidesToShow: 4,
       slidesToScroll: 1,
     }
   },
   {
     breakpoint: 600,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 1
     }
   }
 ]

});

$(document).ready(function() {

 $(".portals-friends__card_img").mouseenter(function() {
   $(this).addClass("rotate");
 }).mouseleave(function() {
   $(this).removeClass("rotate");
 });

}); </script> <style> .sections_title { width: 100%; font-size: 25px;

       font-weight: bold;

padding: 5px; margin-top: 20px; margin-bottom: 20px; text-align: center; }

.portal-carousel {

   width: 91%;
   margin-right: auto;
   margin-left: auto;

}

.portal-card {

color: #fff;
height: 450px;
padding: 15px;
text-align: center;
margin-left: 15px;
margin-right: 15px;
outline: none;
display: flex !important;
flex-direction: column;
align-items: center;

}

.portal-card__text { margin-top: 5px;

       font-size: 0.9em;
       padding: 5px;
       overflow-y: auto;

}

.portal-card__text a { text-decoration: none; transition: all 0.2s; }

.portal-card__title {

font-weight: bold;
margin-top: 5px;

}

.portal-card img {

   width: 100%;
   height: 200px;
   object-fit: cover;

}

.slider-arrow {

 position: absolute;
 top: 38%;
 height: 60px;
 width: 60px;
 padding: 10px;
 z-index: 1;
 border-radius: 50%;

}

.slider-arrow:hover {

 opacity: 70%;

}

.slider-arrow_prod_right, .slider-arrow_gallery_right {

 right: -3em;
 background: url("https://wikiwarriors.org/images/Arrow-right.png") center no-repeat;

}

.slider-arrow_prod_left, .slider-arrow_gallery_left {

 left: -3em;
 background: url("https://wikiwarriors.org/images/Arrow-left.png") center no-repeat;

}

.slider-arrow:hover {

 cursor: pointer;

}

.period_title {

 padding: 5px;
 font-size: 1.3em;
 margin-bottom: 10px;

}

.period_title span {

 color: #fff;

}

.warriors-cards-wrap {

   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: center;
   justify-content: space-around;
   align-items: center;

}

.warriors-card {

 border-radius: 5%;
 height: 110px;
 width: 140px;
 margin-bottom: 15px;
 position: relative;
 z-index: 0;
 transition: 0.2s all ease;
 }

.warriors-card:hover {

 transform: scale3d(1.1, 1.1, 1.1);
 }

.warriors-card img {

 margin: 0;
 width: 100%; 
 height: 100%; 
 vertical-align: bottom;
 object-fit: cover;
 object-position: top;
 }

.warriors-card-descr {

 color: #fff;
 font-size: 0.8em;
 background-color: #000;
 border-radius: 0 5px 0 3px;
 padding: 4px;
 line-height: 1;
 position: absolute;
 z-index: 1;
 left: 0;
 bottom: -1px;
 } 

.gallery-slider {

   width: 90%;
   margin: auto;

}

.gallery-img {

 width: auto!important;
 height: 550px!important;
 position: relative;
 margin-bottom: 0;

}

.gallery-wrap { height: 550px;

   text-align: center;
   margin: auto;
   outline: none;
   display: flex !important;
   justify-content: space-around;
   align-items: center;

}

.gallery-img-wrap { position: relative; height: 500px; }

.gallery-descr {

   opacity: 0;
   position: absolute;
   font-size: 1em;
   direction: ltr;
   padding: 10px;
   text-align: center;
   bottom: -50px;
   height: auto;
   width: 100%;
   background: rgba(0, 0, 0, 0.6);
   color: white;
   transition: all 0.2s ease;

}

.gallery-wrap:hover .gallery-descr { opacity: 1; bottom: -25px; }

.gallery-slider-nav { width: 90%;

   margin: 20px auto;

}

.gallery-image-nav { max-width: 12rem;

 max-height: 7.8rem;
 margin-left: 0.5rem;
 margin-right: 0.5rem;
 

}

.gallery-wrap-nav { height: 100px;

   padding: 0;

outline: none;

 -webkit-filter: brightness(40%);
         filter: brightness(40%);

}

.slick-current {

 -webkit-filter: none !important;
 filter: none !important;

}

.gallery-image-nav img {

 width: 100%;
 object-fit: cover;
 height: 7.8rem;

}

.slider-arrow_gallery {

   height: 100%;
   top: 0;
   border-radius: 0;

}

/* Карточки дружественных порталов */ .friends-carousel {

  width: 91%;
   margin-right: auto;
   margin-left: auto;

}

.portals-friends__card, .portals-collections__card {

 text-align: center;
 padding: 10px;
 display: -webkit-box!important;
 display: -ms-flexbox!important;
 display: flex!important;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;

}

.portals-friends__card:focus {

 outline: none;

}

.portals-friends__card .portal-card__img {

 height: 140px;

}

.portals-friends__card_img {

 margin-bottom: 5px;

}

.portals-friends__card a, .portals-collections__card a { font-size: 1.7em; text-decoration: none; transition: all 0.2s; }

.rotate {

 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 -webkit-transition: -webkit-transform 0.5s ease;
 transition: transform 0.5s ease;

}

.mobile {

 display: none;

}

.portal-collections-cards-wrap {

   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-content: center;
   justify-content: space-around;
   align-items: center;

}

.portal-card__img_small {

   font-size: 0.6em;

}

.portals-collections__card {

    width: 150px;

}

.toc {

display: none!important;

}

@media only screen and (max-width:640px) { .slider-arrow_prod_right {

 right: -2em;

}

.slider-arrow_prod_left {

 left: -2em;

} .portal-card__text {

  font-size: 0.75em;

} .warriors-card-descr {

  font-size: 0.6em;

} .portals-friends__card {

 font-size: 0.55em;

} .period_title { text-align: center; } .gallery-wrap {

   height: 280px; 

} .gallery-slider { width: 100%; } .gallery-descr { font-size: 0.6em; padding: 5px; left: 0; bottom: 0; opacity: 1; }

.gallery-img {

   width: auto!important;
   max-height: 280px!important; 

} .gallery-wrap-nav {

      height: 45px;

} .gallery-image-nav {

   height: 3.8rem; 

} .gallery-image-nav img {

   width: 100%;

height: 2.8rem; } .gallery-img-wrap { position: initial; height: 280px; } .slider-arrow_gallery {

   height: 110%;
   top: -2px; 

}

   .friends-carousel {
   height: 100px;

}

.slider-arrow_gallery_right {

 right: -2.2em;

}

.slider-arrow_gallery_left {

 left: -2.2em;

}

.gallery-img {

 object-fit: cover;

}

.nomobile {
 display: none;

}

.mobile {
 display: inline;

}

.friends-carousel {

margin-bottom: 40px;

}

.portals-friends__card .portal-card__img {

 height: 90px;

}

.geo-portal {

 display: inline-block;

}

.category-message {

   height: auto!important;

}

} </style>