meylis html

This commit is contained in:
ilmedova 2021-06-04 17:08:19 +05:00
parent beeb337096
commit 39bf8925dc
3 changed files with 157 additions and 169 deletions

View File

@ -1,13 +1,12 @@
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
.slick-loading .slick-list {
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face
{
@font-face {
font-family: 'slick';
font-weight: normal;
font-style: normal;
@ -15,10 +14,10 @@
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
.slick-next {
font-size: 0;
line-height: 0;
@ -41,31 +40,30 @@
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
.slick-next.slick-disabled:before {
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
.slick-next:before {
font-family: 'slick';
font-size: 20px;
line-height: 1;
@ -77,50 +75,46 @@
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
.slick-prev {
left: -25px;
}
[dir='rtl'] .slick-prev
{
[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}
.slick-prev:before
{
.slick-prev:before {
content: '←';
}
[dir='rtl'] .slick-prev:before
{
[dir='rtl'] .slick-prev:before {
content: '→';
}
.slick-next
{
.slick-next {
right: -25px;
}
[dir='rtl'] .slick-next
{
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
.slick-next:before
{
.slick-next:before {
content: '→';
}
[dir='rtl'] .slick-next:before
{
[dir='rtl'] .slick-next:before {
content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots
{
.slick-dots {
position: absolute;
bottom: -25px;
@ -134,8 +128,8 @@
text-align: center;
}
.slick-dots li
{
.slick-dots li {
position: relative;
display: inline-block;
@ -147,8 +141,8 @@
cursor: pointer;
}
.slick-dots li button
{
.slick-dots li button {
font-size: 0;
line-height: 0;
@ -165,18 +159,18 @@
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before
{
.slick-dots li button:before {
font-family: 'slick';
font-size: 6px;
line-height: 20px;
@ -197,8 +191,8 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
.slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
}

View File

@ -1,51 +1,55 @@
/* Slider */
.slick-slider {
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
.slick-list
{
position: relative;
display: block;
overflow-x: hidden;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
.slick-list:focus
{
outline: none;
}
.slick-list.dragging {
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
.slick-track
{
position: relative;
top: 0;
left: 0;
@ -54,62 +58,62 @@
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after {
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track {
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide {
.slick-slide
{
display: none;
float: left;
/* height: 100%; */
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img {
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img {
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img {
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide {
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide {
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide {
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
}

View File

@ -88,88 +88,52 @@
/* Tv slider ====================================== */
.tv__chanel {
margin: 40px 0;
margin: 40px 0px;
}
.tv__box {
display: flex !important;
align-items: stretch !important;
justify-content: center !important;
.tv_box {
display: flex;
align-items: center;
}
.tv__item {
width: 150px;
margin: 5px 10px;
/* max-height: 100px !important; */
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .3);
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100px;
margin-right: 10px;
}
.tv__item img {
width: 90%;
.tv__item a {
width: 100%;
height: 100%;
}
.tv__item a img {
width: 100%;
height: 100%;
object-fit: contain;
-o-object-fit: contain;
}
.empty {
height: 200px;
background: #000;
}
/* Tv slider end ================================== */
@media (max-width: 1450px) {
.tv__item {
/* min-height: 90px !important; */
}
}
@media (max-width: 1300px) {
}
@media (max-width: 1200px) {
.tv__chanel {
margin: 30px 0;
.container {
padding: 0 80px;
}
.tv__item a img {
width: 85%;
height: 85%;
margin: 0 auto;
object-fit: contain;
-o-object-fit: contain;
}
}
@media (max-width: 1000px) {
}
@media (max-width: 900px) {
.tv__chanel {
margin: 20px 0;
.container {
padding: 0 50px;
}
}
@media (max-width: 470px) {
.tv__item a img {
width: 95%;
height: 85%;
@media (max-width: 500px) {
.container {
padding: 0 20px;
}
}
</style>
@ -177,45 +141,71 @@
<div class="container">
<div class="tv__wrap">
<div class="tv__box">
<a href="/page/6/?from=1" class="tv__item">
<div class="tv__item">
<a href="/page/6/?from=1">
<img src="https://content.turkmentv.gov.tm/assets/img/live-imgs/asltyn-asyr.jpg" alt="TurkmenTV">
</a>
<a href="/page/6/?from=2" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/page/6/?from=2">
<img src="https://content.turkmentv.gov.tm/assets/img/live-imgs/yaslyk.jpg" alt="yaslyk">
</a>
<a href="/page/6/?from=3" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/page/6/?from=3">
<img src="https://content.turkmentv.gov.tm/assets/img/live-imgs/miras.jpg" alt="miras">
</a>
<a href="/page/6/?from=7" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/page/6/?from=7">
<img src="https://content.turkmentv.gov.tm/assets/img/live-imgs/turkmenistan.jpg" alt="turkmenistan">
</a>
<a href="/page/6/?from=5" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/page/6/?from=5">
<img src="https://content.turkmentv.gov.tm/assets/img/live-imgs/turkmen-owaz.jpg" alt="owaz">
</a>
<a href="/page/6/?from=6" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/page/6/?from=6">
<img src="https://content.turkmentv.gov.tm/assets/img/live-imgs/asgabat.jpg" alt="ashgabat">
</a>
<a href="/radio/4" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/radio/4">
<img src="https://content.turkmentv.gov.tm/static/img/radio/watan.jpg" alt="Watan">
</a>
<a href="/radio/1" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/radio/1">
<img src="https://content.turkmentv.gov.tm/static/img/radio/char.jpg" alt="Char tarapdan">
</a>
<a href="/radio/3" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/radio/3">
<img src="https://content.turkmentv.gov.tm/static/img/radio/miras.jpg" alt="Miras">
</a>
<a href="/radio/2" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/radio/2">
<img src="https://content.turkmentv.gov.tm/static/img/radio/owaz.jpg" alt="Owaz">
</a>
<a href="/page/6/?from=4" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/page/6/?from=4">
<img src="https://content.turkmentv.gov.tm/assets/img/live-imgs/sport.jpg" alt="sport">
</a>
<a href="/bukjalar" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="/bukjalar">
<img src="https://content.turkmentv.gov.tm/static/img/radio/mm.jpg" alt="Mahabat Mudirligi">
</a>
<a href="https://belet.com.tm/" class="tv__item">
</a>
</div>
<div class="tv__item">
<a href="https://belet.com.tm/">
<img src="https://content.turkmentv.gov.tm/static/img/radio/belet.png" alt="Belet Video">
</a>
</a>
</div>
</div>
</div>
</div>