помогите надо что бы кнопки были около видео а не внизу
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="main.js">
<link href="https://fonts.cdnfonts.com/css/tt-norms-pro" rel="stylesheet">
<title>gevabramyan</title>
</head>
<body>
<!--обо мне-->
<center>
<h1 class="about">обо мне</h1>
<p class="about-text">
<b>
Привет, меня зовут Геворк Абрамян. Я Родился в 1990 году в городе Ташир республика Армения. В возрасте 14 лет семья переехала в Сибирь, в город Новокузнецк! В своих выступлениях я рассказываю об Армении, традициях, и курьезных ситуациях которые происходили со мной, а также делюсь впечатлениями о жизни в России и в Сибири в частности. Выступаю на ТНТ (stand up), на Youtube канале наш сайт, roast battle labelcom
</b>
</p>
<!--видео со мной-->
<h1 class="video-so-mnoy">видео со мной</h1>
<!-- Основной блок слайдера -->
<div class="slider">
<!-- Первый слайд -->
<div class="item">
<iframe width="1440" height="720" src="https://www.youtube.com/embed/CvHb-5bxLGw" title="оф не знаю I денис гвоздев" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Второй слайд -->
<div class="item">
<iframe width="1440" height="720" src="https://www.youtube.com/embed/bSf1eAv3R8U" title="оф не знаю I вадим постильный" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Третий слайд -->
<div class="item">
<iframe width="1440" height="720" src="https://www.youtube.com/embed/e1HgTbZ8s5w" title="ДУЭЛИ ХА-ХА 3 РАЗА х АБРАМЯН х ТАРЖУМАНЯН" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Кнопки-стрелочки -->
<a class="previous">❮</a>
<a class="next">❯</a>
</div>
<style>
/* Слайдер: */
.slider{
max-width: 90%;
width: 1440px;
/* Положение элемента устанавливается относительно его исходной позиции: */
position: relative;
/* Центрируем по горизонтали: */
margin: auto;
height: 850px;
}
/* Картинка масштабируется по отношению к родительскому элементу: */
.slider .item img {
/* Элемент меняет размер так, чтобы заполнить блок и сохранить пропорции: */
object-fit: cover;
width: 100%;
height: 300px;
}
/* Кнопки назад и вперёд: */
.slider .previous, .slider .next {
/* Добавляет курсору иконку, когда тот оказывается над кнопкой: */
cursor: pointer;
/* Положение элемента задаётся относительно границ браузера: */
top: 35%;
width: auto;
margin-top: -22px;
padding: 16px;
/* Оформление самих кнопок: */
color: white;
font-weight: bold;
font-size: 100px;
left: 500px;
/* Плавное появление фона при наведении курсора: */
transition: 0.6s ease;
/* Скругление границ: */
border-radius: 0 3px 3px 0;
}
.slider .next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* При наведении курсора на кнопки добавляем фон кнопок: */
.slider .previous:hover,
.slider .next:hover {
background-color: rgba(0, 0, 0, 0.2);
}
/* Анимация слайдов: */
.slider .item {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
/* Устанавливаем и изменяем степень прозрачности: */
from {
opacity: 0.4
}
to {
opacity: 1
}
}
</style>
<script>
/* Устанавливаем стартовый индекс слайда по умолчанию: */
let slideIndex = 1;
/* Вызываем функцию, которая реализована ниже: */
showSlides(slideIndex);
/* Увеличиваем индекс на 1 — показываем следующий слайд: */
function nextSlide() {
showSlides(slideIndex += 1);
}
/* Уменьшаем индекс на 1 — показываем предыдущий слайд: */
function previousSlide() {
showSlides(slideIndex -= 1);
}
/* Устанавливаем текущий слайд: */
function currentSlide(n) {
showSlides(slideIndex = n);
}
/* Функция перелистывания: */
function showSlides(n) {
/* Обращаемся к элементам с названием класса "item", то есть к картинкам: */
let slides = document.getElementsByClassName("item");
/* Проверяем количество слайдов: */
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
/* Проходим по каждому слайду в цикле for: */
for (let slide of slides) {
slide.style.display = "none";
}
/* Делаем элемент блочным: */
slides[slideIndex - 1].style.display = "block";
}
</script>
<!--контакты-->
<h1 class="contacts">контакты</h1>
<p class="number"><b>(менеджер) Ильясова Роза </b>
<a href="+7(962)518-54-57" class="num"><b>+7(962)518-54-57</a></b></p>
<p class="mail"><b>gevorkabramyn1990@mail.ru</b></p>
</center>
<br>
<center>
<div style="position:relative;overflow:hidden;"><a href="https://yandex.ru/maps/org/dizayn_zavod/1732662883/?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:0px;">Дизайн завод</a><a href="https://yandex.ru/maps/213/moscow/category/entertainment_center/184106372/?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:14px;">Развлекательный центр в Москве</a><a href="https://yandex.ru/maps/213/moscow/category/rental_of_venues_for_cultural_events/15215599314/?utm_medium=mapframe&utm_source=maps" style="color:#eee;font-size:12px;position:absolute;top:28px;">Аренда площадок для культурно-массовых мероприятий в Москве</a><iframe src="https://yandex.ru/map-widget/v1/?ll=37.585289%2C55.805073&mode=search&oid=1732662883&ol=biz&z=14.31" width="1400" height="600" frameborder="1" allowfullscreen="true" style="position:relative;"></iframe></div>
</center>
<div class="ss">
<a href="https://vk.com/gevabramyan" class="vk"><img class="vkimg" src="https://cdn-icons-png.flaticon.com/512/145/145813.png" alt=""></a>
<a href="https://instagram.com/gev_abramyan?igshid=NTc4MTIwNjQ2YQ==" class="inst"><img class="instimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/2048px-Instagram_icon.png" alt=""></a>
<a href="https://t.me/GevAbramyan" class="tg"><img class="tgimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Telegram_2019_Logo.svg/800px-Telegram_2019_Logo.svg.png" alt=""></a>
</div>
<br>
<br>
<br>
<center>
<a href="https://t.me/+pJZUq07C1wYzOTUy" class="eg"><b>разработчик сайта - E/G44</b></a>
<br>
<a href="#" class="inst44"><b>instagram erik_gevorgyan44</b></a>
</center>
<div class="btn-up btn-up_hide"></div>
<style>
html{
scroll-behavior: smooth;
}
body{
background-color: black;
}
.about{
color: white;
font-size: 120px;
font-family: 'TT Norms Pro', sans-serif;
margin-top: -0.1vh;
}
.about-text{
color: gold;
font-size: 55px;
font-family: 'TT Norms Pro', sans-serif;
width: 1300px;
height: 400px;
margin-top: -5vh;
}
.aa{
text-decoration: none;
color: gold;
}
.video-so-mnoy{
color: white;
font-size: 120px;
font-family: 'TT Norms Pro', sans-serif;
margin-top: 35vh;
}
.contacts{
color: white;
font-size: 120px;
font-family: 'TT Norms Pro', sans-serif;
margin-top: 5vh;
}
.number{
color: white;
font-size: 50px;
font-family: 'TT Norms Pro', sans-serif;
margin-top: -2vh;
}
.num{
text-decoration: none;
color: white;
}
.ss{
text-align: center;
}
.vp{
color: white;
font-size: 50px;
font-family: 'TT Norms Pro', sans-serif;
}
.mail{
color: white;
font-size: 50px;
font-family: 'TT Norms Pro', sans-serif;
}
.vkimg{
width: 150px;
margin-right: 10vh;
margin-top: 3vh;
}
.instimg{
width: 150px;
margin-left: 10vh;
margin-top: 3vh;
}
.tgimg{
width: 150px;
margin-left: 20vh;
margin-top: 3vh;
}
.eg{
text-decoration: none;
font-family: 'TT Norms Pro', sans-serif;
font-size: 50px;
color: wheat;
}
.inst44{
text-decoration: none;
font-family: 'TT Norms Pro', sans-serif;
font-size: 50px;
color: wheat;
}
.btn-up {
/* фиксированное позиционирование */
position: fixed;
/* цвет фона */
background-color: wheat;
/* расстояние от правого края окна браузера */
right: 30px;
/* расстояние от нижнего края окна браузера */
bottom: 0;
/* скругление верхнего левого угла */
border-top-left-radius: 8px;
/* скругление верхнего правого угла */
border-top-right-radius: 8px;
/* вид курсора */
cursor: pointer;
/* отображение элемента как flex */
display: flex;
/* выравниваем элементы внутри элемента по центру вдоль поперечной оси */
align-items: center;
/* выравниваем элементы внутри элемента по центру вдоль главной оси */
justify-content: center;
/* ширина элемента */
width: 110px;
/* высота элемента */
height: 80px;
}
.btn-up::before {
content: "";
width: 40px;
height: 40px;
background: transparent no-repeat center center;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3E%3C/svg%3E");
}
.btn-up_hide {
display: none;
}
@media (hover: hover) and (pointer: fine) {
.btn-up:hover {
background-color: wheat; /* цвет заднего фона при наведении */
}
}
</style>
<script>
const btnUp = {
el: document.querySelector('.btn-up'),
show() {
this.el.classList.remove('btn-up_hide');
},
hide() {
this.el.classList.add('btn-up_hide');
},
addEventListener() {
window.addEventListener('scroll', () => {
const scrollY = window.scrollY || document.documentElement.scrollTop;
scrollY > 400 ? this.show() : this.hide();
});
document.querySelector('.btn-up').onclick = () => {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
}
}
btnUp.addEventListener();
</script>
</body>
</html>Источник: Stack Overflow на русском