const handleClick(el) {
const href = el.target.getAttribute('href').replace('#', '');
document.querySelector(`[name="${href}"]`).scrollIntoView({block: "center", behavior: "smooth"});
};
document.querySelectorAll('.menu-item-text').forEach(el => el.addEventListener('click', handleClick));div{
width:100px;
height: 50px;
border: 2px dotted red;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border-bottom:none;
position:relative;
color:red;
transition: 3s all ease;
transform-origin: 50% 100%;
}
div:after{
position:absolute;
content:'▼';
bottom:-10px;
right:-11px;
transform: rotate(-38deg);
}
div:before{
position:absolute;
content:'▼';
bottom:-10px;
left:-11px;
transform: rotate(38deg);
}
div:hover {
transform: rotateZ(360deg)
}<!DOCTYPE html>
<html>
<head>
<title>JS</title>
<style>
b {
color: blue;
padding: 0 3px;
}
</style>
<script>
for (var a = 1; a <= 100; a++) {
if (a != 50) {
document.write('<b>' + a + '</b>');
}
}
</script>
</head>
<body></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;
}
.grid-item {
border: 2px black;
width: 380px;
float: left;
padding-top: 50px;
padding-left: 20px;
float: left;
}
.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">
<title>Blocks</title>
<style>
.content,
.article,
.article__content {
display: flex;
flex-wrap: wrap;
}
.article {
width: 50%;
}
.article__content {
align-content: space-between;
justify-content: flex-end;
box-sizing: border-box;
padding: 1em;
}
.article__text {
margin: 0 0 1em;
}
.article__image {
width: 50%;
}
</style>
</head>
<body>
<div class="content">
<div class="article">
<div class="article__content">
<div class="article__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore esse aperiam, deleniti suscipit illo saepe odit deserunt vero, cumque, fuga aliquid nobis. Ab tempore minima modi dolorum consectetur quisquam.</div>
<img class="article__image" src="https://ic.pics.livejournal.com/p_syutkin/64914398/5019079/5019079_original.jpg"/>
</div>
</div>
<div class="article">
<div class="article__content">
<div class="article__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore esse aperiam, deleniti suscipit illo saepe odit deserunt vero, cumque, fuga aliquid nobis. Ab tempore minima modi dolorum consectetur quisquam.</div>
<img class="article__image" src="https://ic.pics.livejournal.com/p_syutkin/64914398/5019079/5019079_original.jpg"/>
</div>
<div class="content">
<div class="article">
<div class="article__content">
<div class="article__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore esse aperiam, deleniti suscipit illo saepe odit deserunt vero, cumque, fuga aliquid nobis. Ab tempore minima modi dolorum consectetur quisquam.</div>
<img class="article__image" src="https://ic.pics.livejournal.com/p_syutkin/64914398/5019079/5019079_original.jpg"/>
</div>
</div>
<div class="article">
<div class="article__content">
<div class="article__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore esse aperiam, deleniti suscipit illo saepe odit deserunt vero, cumque, fuga aliquid nobis. Ab tempore minima modi dolorum consectetur quisquam.</div>
<img class="article__image" src="https://ic.pics.livejournal.com/p_syutkin/64914398/5019079/5019079_original.jpg"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>window.onload = () => {
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.className = 'Класс синего кружка';
observer.unobserve(entry.target);
}
})
}, { threshold: 0.5 })
document.querySelectorAll('Класс серого крцжка').forEach(item => observer.observe(item));
}