<video class="main-section__bg autoplay" preload="auto" loop muted="muted" playsinline preload="yes" poster="img/video-poster.jpg">
<source src="img/bg-video.webm" type="video/webm">
<source src="img/bg-video.mp4" type="video/mp4">
</video>$(document).ready(function(){
$('.autoplay').trigger("play");
});<div class="ratio">
<div class="ratio-inner ratio-1-1">
<div class="ratio-content">
Это содержимое блока 1/1
</div>
</div>
</div>.ratio {
width: 150px; /* здесь можно установить любую нужную ширину */
}
.ratio-inner {
position: relative;
height: 0;
border: none;
}
.ratio-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #eee;
}
.ratio-1-1 {
padding-top: 100%; /* здесь можно установить пропорцию высоты в % отношении от ширины */
}<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script><script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script><div class="my-slider">
<div class="item-slide">SLIDE 1</div>
<div class="item-slide">SLIDE 2</div>
<div class="item-slide">SLIDE 2</div>
</div><script type="text/javascript">
$(document).ready(function(){
$('.my-slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 2000,
});
});
</script><div class="tab_block">
<div class="tab">Content#1</div>
<div class="tab">Content#2</div>
<div class="tab">Content#3</div>
</div>
<div class="nav_block">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
</div>.d-none{
display: none;
}
.tab{
display: none;
}
.tab.selected{
display: block;
}$(document).ready(function(){
$('.tab:first').addClass('selected');
$('.nav_block a').click(function(e){
e.preventDefault();
let this_selected_tab = $('.tab.selected');
if($(this).hasClass('prev')){
if(this_selected_tab.prev('.tab').length > 0){
this_selected_tab.prev('.tab').addClass('selected');
}else{
$('.tab:last').addClass('selected');
}
}
if($(this).hasClass('next')){
if(this_selected_tab.next('.tab').length > 0){
this_selected_tab.next('.tab').addClass('selected');
}else{
$('.tab:first').addClass('selected');
}
}
this_selected_tab.removeClass('selected');
});
});<div class="slider slick">
<div>
<h3>Понедельник</h3>
<div class="d-flex">
<div><img src="" alt=""><p>Блюдо 1</p></div>
<div><img src="" alt=""><p>Блюдо 2</p></div>
<div><img src="" alt=""><p>Блюдо 3</p></div>
<div><img src="" alt=""><p>Блюдо 4</p></div>
<div><img src="" alt=""><p>Блюдо 5</p></div>
</div>
</div>
<div>
<h3>Вторник</h3>
<div class="d-flex">
<div><img src="" alt=""><p>Блюдо 1</p></div>
<div><img src="" alt=""><p>Блюдо 2</p></div>
<div><img src="" alt=""><p>Блюдо 3</p></div>
<div><img src="" alt=""><p>Блюдо 4</p></div>
<div><img src="" alt=""><p>Блюдо 5</p></div>
</div>
</div>
...
<div>
<h3>Воскресение</h3>
<div class="d-flex">
<div><img src="" alt=""><p>Блюдо 1</p></div>
<div><img src="" alt=""><p>Блюдо 2</p></div>
<div><img src="" alt=""><p>Блюдо 3</p></div>
<div><img src="" alt=""><p>Блюдо 4</p></div>
<div><img src="" alt=""><p>Блюдо 5</p></div>
</div>
</div>
</div>$(function(){
$('.some_product').addClass('hide');
$('.some_product.hide:lt(5)').removeClass('hide');
$('.show-else').click(function(){
$('.some_product.hide:lt(5)').removeClass('hide');
});
});div.some_product {
display: inline-block;
}
div.some_product.hide {
display: none;
}
div.some_product:nth-child(-n+5) {
background: pink;
}$('.projects__card-7').hover(
function() {$('.projects-paths #path-1').show(); },
function() {$('.projects-paths #path-1').hide();}
);
*... если много элементов на которые придётся наводить*
$('.project__card-*...*').hover(
function() {$('.project__paths #path_id*...*').show(); },
function() {$('.project__paths #path_id*...*').hide();}
);<div class="col-12 projects__cards">
<svg class="projects-paths" width="740" height="405" viewBox="0 0 740 405" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="path-1" d="M220 103V1........" fill="#00AAFF"></path></svg>
<div class="projects__card text-center" data-pathid="path-1"></div>
</div>$('.projects__card').hover(
let path_id = $(this).data('pathid');
function() {$('.projects__card #'+path_id ).show(); },
function() {$('.projects__card #'+path_id ).hide();}
);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class='d-flex'>
<div class='container d-flex flex-wrap'>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="other">5</button>
<button>6</button>
</div>
<div class='d-flex flex-wrap'>
<button>4</button>
</div>
<div class='container'>
</body>
</html>.d-flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.container {
width: auto;
max-width: 240px;
}
button {
width: 80px;
}
.other {
width: 160px;
}<section class="mainmenu">
<div class="menu">
<a href="#"><h3>Меню</h3></a>
<div class="submenu">
<a href="#"><p>Субменю</p></a>
<a href="#"><p>Субменю</p></a>
<a href="#"><p>Субменю</p></a>
</div>
</div>
<div class="menu">
<a href="#"><h3>Меню</h3></a>
<div class="submenu">
<a href="#"><p>Субменю</p></a>
<a href="#"><p>Субменю</p></a>
<a href="#"><p>Субменю</p></a>
</div>
</div>
</section>*{
padding: 0;
margin: 0;
}
body{
background: white;
padding-top: 50px;
padding-left: 200px;
font-family: 'Montserrat Alternates', sans-serif;
}
.mainmenu .menu .submenu{
display: none;
}
.mainmenu .menu:hover .submenu{
border-top: 2px solid #E5E2E2;
background: gray;
display: block;
}
.mainmenu .menu:hover .submenu a:hover{
color: #FFF
}
.menu a{
text-decoration: none;
color: #E5E2E2;
}
.mainmenu .menu{
border: 2px solid #B18552;
width: 300px;
overflow: hidden;
text-align: center;
background: blue;
}
.mainmenu div:first-child{
border-radius: 30px 30px 0 0;
}
.mainmenu div:last-child{
border-radius: 0 0 30px 30px;
}
.mainmenu h3{
transition: all 4s;
padding: 25px 0 25px 0;
font-size: 25px;
}
.mainmenu p{
font-size: 20px;
padding: 25px 0 25px 0;
}.tip::before {
content: '';
background: transparent;
border: 0px solid transparent;
border-top: 10px solid #bdbdbd;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
right: 20px;
top: -10px;
}<video autoplay="" loop="" muted="" playsinline="" preload="yes" poster="poster/1.jpg">
<source src="video/1-test.m4v" type="video/mp4">
</video>