[我在观看Intersection Observer
tutorial时遇到了这个问题。我的是一个div而不是一个图像,因此我不必指定视频中的属性,并且我相信在获得10个控制台日志时几乎一切正确,因为我有10个带有“ box”类的div,被用作JS文件中的变量。如CSS所示,我对动画使用了[[opacity和transformation。非常感谢我做错了什么,使我看不到滚动动画的发生。
const targets = document.querySelectorAll('.box');
const lazyLoad = target => {
const io = new IntersectionObserver((entries,observer) => {
entries.forEach(entry => {
console.log('hello World');
if(entry.isIntersecting) {
const div = entry.target;
div.classList.add('fade');
observer.disconnect();
}
});
});
io.observe(target);
};
targets.forEach(lazyLoad);
:root {
--primary-color:#425b84;
--secondary-color:#5b7bb4;
--max-width:1100px;
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font:normal 1rem/1.5 'Arial', sans-serif;
background:var(--primary-color);
color:#fff;
overflow-x:hidden;
padding-bottom:50px;
}
#main-header {
background:var(--secondary-color);
padding:4rem 0;
}
.container {
max-width:var(--max-width);
margin:0 auto;
text-align:center;
}
h1 {
font-size:2.3rem;
}
#timeline ul {
background:var(--primary-color);
padding:50px 0;
}
/* Create Line */
#timeline ul li {
list-style:none;
position: relative;
width:6px;
margin:0 auto;
padding-top:50px;
background:#fff;
}
/* Boxes */
#timeline ul li div {
position: relative;
bottom:0;
width:400px;
padding:1rem;
background:var(--secondary-color);
transition:all 0.5s ease-in-out;
opacity:0;
}
.fade {
opacity:1;
transition:all 0.5s ease-in-out;
transform:translateX(0);
}
/* Right Side */
#timeline ul li:nth-child(odd) div {
left:40px;
transform:translateX(1100px);
}
/* Left Side */
#timeline ul li:nth-child(even) div {
left:-434px;
transform:translateX(-1100px);
}
/* Dots */
#timeline ul li:after {
content:'';
position: absolute;
left:50%;
bottom:0;
width:25px;
height:25px;
background:var(--secondary-color);
transform:translateX(-50%);
border-radius:50%;
transition:background 0.5s ease-in-out;
}
/* Arrows Base */
#timeline div:before {
content:'';
position: absolute;
bottom:5px;
width:0;
height:0;
border-style:solid;
}
/* Right Side Arrows */
#timeline ul li:nth-child(odd) div:before {
left:-15px;
border-width:8px 16px 8px 0;
border-color:transparent var(--secondary-color) transparent transparent;
}
/* Left Side Arrows */
#timeline ul li:nth-child(even) div:before {
right:-15px;
border-width:8px 0 8px 16px;
border-color:transparent transparent transparent var(--secondary-color);
}
@media(max-width:900px){
#timeline ul li div {
width:250px;
}
#timeline ul li:nth-child(even) div {
left:-284px;
}
}
@media(max-width:600px) {
#timeline ul li {
margin-left:20px;
}
#timeline ul li div {
width:calc(100vw - 90px);
}
#timeline ul li:nth-child(even) div {
left:40px;
}
/* Right Side Arrows */
#timeline ul li:nth-child(even) div:before {
left:-15px;
border-width:8px 16px 8px 0;
border-color:transparent var(--secondary-color) transparent transparent;
}
}
<!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">
<script src="https://kit.fontawesome.com/bbb16afe05.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/aos.css">
<link rel="stylesheet" href="./css/style.css">
<title>Knowledge Timeline</title>
</head>
<body>
<header id="main-header">
<div class="container">
<h1><i class="fas fa-brain"></i> Knowledge Resume</h1>
<h3><div class="fas fa-user"></div> Jun Jung</h3>
</div>
</header>
<section id="timeline">
<ul>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2007: HTML & CSS</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2009: JavaScript & jQuery</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2010: PHP & Wordpress</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2011: Ruby on Rails</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2012: Python</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box"
>
<h3><i class="fas fa-chevron-right"></i> 2013: Node.js & React</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2014: Angular & React Native</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2015: Vue.js </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2016:GraphQL & Apollo</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2017: Machine Learning</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
</ul>
</section>
<script src="./js/main.js"></script>
</body>
</html>
.box
元素,该元素会触发最初的10个控制台日志,因为它们存在于DOM上,但不会滚动触发,因为它们不在屏幕上(视口外)。此外,如另一个答案中所述,您应该对所有实例使用一个公共观察器。
但是,如果要为每个实例使用单独的观察者,则可以将.box
元素的父对象作为目标,即<li>
元素,并且当<li>
元素滚动到视图中时,只需将类添加到它是子元素,它是您之前使用.box
属性定位的ParentNode.children元素,如下所示:
const targets = document.querySelectorAll('#timeline li');
const lazyLoad = target => {
const io = new IntersectionObserver((entries,observer) => {
entries.forEach(entry => {
console.log('hello World');
if(entry.isIntersecting) {
const div = entry.target.children[0];
div.classList.add('fade');
observer.disconnect();
}
});
});
io.observe(target);
};
targets.forEach(lazyLoad);
而且,您的css#timeline ul li:nth-child(odd) div
样式属性将覆盖新的.fade
属性,因为它的定位更加精确。您将需要新的.fade
属性以精确定位.box
元素,就像使用初始样式一样:
#timeline ul li:nth-child(odd) div.fade { opacity:1; transition:all 0.5s ease-in-out; transform:translateX(0) !important; } #timeline ul li:nth-child(even) div.fade { opacity:1; transition:all 0.5s ease-in-out; transform:translateX(0) !important; }
或者您也可以像这样组合上面的css:
#timeline ul li:nth-child(odd) div.fade, #timeline ul li:nth-child(even) div.fade { opacity:1; transition:all 0.5s ease-in-out; transform:translateX(0) !important; }
检查并运行以下代码片段,或打开此JSFiddle链接以获取上述示例:const targets = document.querySelectorAll('#timeline li'); const lazyLoad = target => { const io = new IntersectionObserver((entries,observer) => { entries.forEach(entry => { console.log('hello World'); if(entry.isIntersecting) { const div = entry.target.children[0]; div.classList.add('fade'); observer.disconnect(); } }); }); io.observe(target); }; targets.forEach(lazyLoad);
:root { --primary-color:#425b84; --secondary-color:#5b7bb4; --max-width:1100px; } * { margin:0; padding:0; box-sizing:border-box; } body { font:normal 1rem/1.5 'Arial', sans-serif; background:var(--primary-color); color:#fff; overflow-x:hidden; padding-bottom:50px; } #main-header { background:var(--secondary-color); padding:4rem 0; } .container { max-width:var(--max-width); margin:0 auto; text-align:center; } h1 { font-size:2.3rem; } #timeline ul { background:var(--primary-color); padding:50px 0; } /* Create Line */ #timeline ul li { list-style:none; position: relative; width:6px; margin:0 auto; padding-top:50px; background:#fff; } /* Boxes */ #timeline ul li div { position: relative; bottom:0; width:400px; padding:1rem; background:var(--secondary-color); transition:all 0.5s ease-in-out; opacity:0; } #timeline ul li:nth-child(odd) div.fade, #timeline ul li:nth-child(even) div.fade { opacity:1; transition:all 0.5s ease-in-out; transform:translateX(0) !important; } /* Right Side */ #timeline ul li:nth-child(odd) div { left:40px; transform:translateX(1100px); } /* Left Side */ #timeline ul li:nth-child(even) div { left:-434px; transform:translateX(-1100px); } /* Dots */ #timeline ul li:after { content:''; position: absolute; left:50%; bottom:0; width:25px; height:25px; background:var(--secondary-color); transform:translateX(-50%); border-radius:50%; transition:background 0.5s ease-in-out; } /* Arrows Base */ #timeline div:before { content:''; position: absolute; bottom:5px; width:0; height:0; border-style:solid; } /* Right Side Arrows */ #timeline ul li:nth-child(odd) div:before { left:-15px; border-width:8px 16px 8px 0; border-color:transparent var(--secondary-color) transparent transparent; } /* Left Side Arrows */ #timeline ul li:nth-child(even) div:before {
<header id="main-header"> <div class="container"> <h1><i class="fas fa-brain"></i> Knowledge Resume</h1> <h3><div class="fas fa-user"></div> Jun Jung</h3> </div> </header> <section id="timeline"> <ul> <li> <div class="box"> <h3><i class="fas fa-chevron-right"></i> 2007: HTML & CSS</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> <li> <div class="box"> <h3><i class="fas fa-chevron-right"></i> 2009: JavaScript & jQuery</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> <li> <div class="box"> <h3><i class="fas fa-chevron-right"></i> 2010: PHP & Wordpress</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> <li> <div class="box"> <h3><i class="fas fa-chevron-right"></i> 2011: Ruby on Rails</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> <li> <div class="box"> <h3><i class="fas fa-chevron-right"></i> 2012: Python</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> <li> <div class="box" > <h3><i class="fas fa-chevron-right"></i> 2013: Node.js & React</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> <li> <div class="box"> <h3><i class="fas fa-chevron-right"></i> 2014: Angular & React Native</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> <li> <div class="box"> <h3><i class="fas fa-chevron-right"></i> 2015: Vue.js </h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> <li> <div class="box"> <h3><i class="fas fa-chevron-right"></i> 2016:GraphQL & Apollo</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> <li> <div class="box"> <h3><i class="fas fa-chevron-right"></i> 2017: Machine Learning</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p> </div> </li> </ul> </section>
.box
元素将不是相交,因为它们不在视口中。这是由于这些元素上的transform
属性将它们放置在视图之外。删除transform
属性将对其进行修复。您可以通过在.box
元素内添加另一个div来解决此问题,该元素在视图外部转换。这样,就可以观察到父级(.box
)并在视图中将.box
的子级转换到外部,并且每当.box
相交时都可以将其动画化。淡入
.fade
类由于在.box
div上的特殊性而无法正常工作。 #timeline ul li div
比.fade
更具体,因此.fade
将始终被#timeline ul li div
的ID选择器覆盖。为了解决这个问题,可以通过使用.box { ... }
和.box.fade { ... }
来降低选择器的特定性,或者将.fade
添加到特定的选择器中,如下所示:#timeline ul li div.fade
。单个实例
IntersectionObserver
的实例。一个观察者可以观察多个元素。仅当callback
参数变化时,才应创建多个实例。就您而言,所有.box
元素都必须以相同的方式处理。const targets = document.querySelectorAll('.box');
const onObserve = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const div = entry.target;
div.classList.add('fade');
observer.unobserve(div);
}
});
}
const io = new IntersectionObserver(onObserve);
const observeTargets = targets => targets.forEach(target => {
io.observe(target);
});
observeTargets(targets);
:root {
--primary-color: #425b84;
--secondary-color: #5b7bb4;
--max-width: 1100px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: normal 1rem/1.5 'Arial', sans-serif;
background: var(--primary-color);
color: #fff;
overflow-x: hidden;
padding-bottom: 50px;
}
#main-header {
background: var(--secondary-color);
padding: 4rem 0;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 2.3rem;
}
#timeline ul {
background: var(--primary-color);
padding: 50px 0;
}
/* Create Line */
#timeline ul li {
list-style: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
/* Boxes */
#timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 1rem;
background: var(--secondary-color);
transition: all 0.5s ease-in-out;
opacity: 0;
}
#timeline ul li div.fade {
opacity: 1;
transition: all 0.5s ease-in-out;
transform: translateX(0);
}
/* Right Side */
#timeline ul li:nth-child(odd) div {
left: 40px;
/* transform: translateX(1100px); */
}
/* Left Side */
#timeline ul li:nth-child(even) div {
left: -434px;
/* transform: translateX(-1100px); */
}
/* Dots */
#timeline ul li:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 25px;
height: 25px;
background: var(--secondary-color);
transform: translateX(-50%);
border-radius: 50%;
transition: background 0.5s ease-in-out;
}
/* Arrows Base */
#timeline div:before {
content: '';
position: absolute;
bottom: 5px;
width: 0;
height: 0;
border-style: solid;
}
/* Right Side Arrows */
#timeline ul li:nth-child(odd) div:before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent var(--secondary-color) transparent transparent;
}
/* Left Side Arrows */
#timeline ul li:nth-child(even) div:before {
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent var(--secondary-color);
}
@media(max-width:900px) {
#timeline ul li div {
width: 250px;
}
#timeline ul li:nth-child(even) div {
left: -284px;
}
}
@media(max-width:600px) {
#timeline ul li {
margin-left: 20px;
}
#timeline ul li div {
width: calc(100vw - 90px);
}
#timeline ul li:nth-child(even) div {
left: 40px;
}
/* Right Side Arrows */
#timeline ul li:nth-child(even) div:before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent var(--secondary-color) transparent transparent;
}
}
<!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">
<script src="https://kit.fontawesome.com/bbb16afe05.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/aos.css">
<link rel="stylesheet" href="./css/style.css">
<title>Knowledge Timeline</title>
</head>
<body>
<header id="main-header">
<div class="container">
<h1><i class="fas fa-brain"></i> Knowledge Resume</h1>
<h3>
<div class="fas fa-user"></div> Jun Jung</h3>
</div>
</header>
<section id="timeline">
<ul>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2007: HTML & CSS</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2009: JavaScript & jQuery</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2010: PHP & Wordpress</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2011: Ruby on Rails</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2012: Python</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2013: Node.js & React</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2014: Angular & React Native</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2015: Vue.js </h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2016:GraphQL & Apollo</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
<li>
<div class="box">
<h3><i class="fas fa-chevron-right"></i> 2017: Machine Learning</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque animi at, dolorum tempora labore exercitationem sapiente voluptate possimus necessitatibus quos cum, voluptatibus maiores voluptates quam illum consequatur nemo est dolores.</p>
</div>
</li>
</ul>
</section>
<script src="./js/main.js"></script>
</body>
</html>