<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top .down {
width: 100%;
border: 2px black;
}
.top {
top: 50%;
background: #C4C4C4;
}
.top-el {
border: 2px black;
text-align: center;
}
.items {
border: 2px black;
text-align: center;
}
.grid-item {
display: inline-block;
text-align: center;
border: 2px black;
width: 380px;
padding-top: 50px;
padding-left: 20px;
}
.img {
width: 100%;
height: 200px;
background: #C4C4C4;
}
.controls {
text-align: center;
}
</style>
<title>Document</title>
</head>
<body>
<div class="top">
<h3 class="top-el">Тестовое задание ione</h3>
<h1 class="top-el">Заголовок</h1>
<h3 class="top-el">Подзаголовок</h3>
<div class="controls">
<input class="top-el" type="text" placeholder="Ваш телефон">
<button class="top-el">Push me</button>
</div>
</div>
<div class="down">
<div class="items">
<div class="grid-item">
<div class="img"></div>
<h2>Заголовок</h5>
<p>Важный текст поясняющий суть тезиса</p>
</div>
<div class="grid-item">
<div class="img"></div>
<h2>Заголовок</h5>
<p>Важный текст поясняющий суть тезиса</p>
</div>
<div class="grid-item">
<div class="img"></div>
<h2>Заголовок</h5>
<p>Важный текст поясняющий суть тезиса</p>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top .down {
width: 100%;
border: 2px black;
}
.top {
top: 50%;
background: #C4C4C4;
}
.top-el {
border: 2px black;
text-align: center;
}
.items {
border: 2px black;
display: flex;
justify-content: center;
}
.grid-item {
text-align: center;
border: 2px black;
width: 380px;
padding-top: 50px;
padding-left: 20px;
}
.img {
width: 100%;
height: 200px;
background: #C4C4C4;
}
.controls {
text-align: center;
}
</style>
<title>Document</title>
</head>
<body>
<div class="top">
<h3 class="top-el">Тестовое задание ione</h3>
<h1 class="top-el">Заголовок</h1>
<h3 class="top-el">Подзаголовок</h3>
<div class="controls">
<input class="top-el" type="text" placeholder="Ваш телефон">
<button class="top-el">Push me</button>
</div>
</div>
<div class="down">
<div class="items">
<div class="grid-item">
<div class="img"></div>
<h2>Заголовок</h5>
<p>Важный текст поясняющий суть тезиса</p>
</div>
<div class="grid-item">
<div class="img"></div>
<h2>Заголовок</h5>
<p>Важный текст поясняющий суть тезиса</p>
</div>
<div class="grid-item">
<div class="img"></div>
<h2>Заголовок</h5>
<p>Важный текст поясняющий суть тезиса</p>
</div>
</div>
</div>
</body>
</html>class Slider {
constructor(el) {
this.nextButton = el.querySelector('.next-arrow');
this.prevtButton = el.querySelector('.prev-arrow');
},
initEvents() {
this.nextButton.addEventListener('click', this.clickNext);
},
...
clickNext() {
...
},
}
const slider = new Slider(document.querySelector('.my-slider'));var modal = document.getElementById("mymodal");
var btn = document.getElementById("close");
btn.onclick = function() {
modal.style.display = "none";
}
if (document.URL.indexOf("/testurl/") != -1) {
modal.style.display = "block";
}
.