<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Welcome to the forest</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="scripts/slider.js" async></script>
<style>
@media (max-width: 480px) {
:root { --bg-image: url(./imgs/mobile/forest-river.jpg); }
}
@media (min-width: 481px) and (max-width: 989px) {
:root { --bg-image: url(./imgs/tablet/forest-river.jpg); }
}
@media (min-width: 990px) {
:root { --bg-image: url(./imgs/full/forest-river.jpg); }
}
</style>
</head>
<body>
<header id="top-slider" aria-hidden="true">
<div class="slider">
<div id="slide-1" class="slide img-wrap" style="background-image: var(--bg-image);">
<!-- picture>
<source media="(max-width: 480px)" srcset="./imgs/mobile/forest-river.jpg">
<source media="(orientation: landscape) and (min-width: 481px) and (max-width: 989px)" srcset="./imgs/tablet/forest-river.jpg">
<source media="(min-width: 990px)" srcset="./imgs/full/forest-river.jpg">
<img src="./imgs/tablet/forest-river.jpg" alt="">
</picture -->
</div><!--
<div id="slide-2" class="slide img-wrap" aria-hidden="true">
<picture>
<source media="(max-width: 480px)" srcset="./imgs/mobile/forest-moss.jpg">
<source media="(orientation: landscape) and (min-width: 481px) and (max-width: 989px)" srcset="./imgs/tablet/forest-moss.jpg">
<source media="(min-width: 990px)" srcset="./imgs/full/forest-moss.jpg">
<img src="./imgs/tablet/forest-moss.jpg" alt="">
</picture>
</div>
<div id="slide-3" class="slide img-wrap" aria-hidden="true">
<picture>
<source media="(max-width: 480px)" srcset="./imgs/mobile/forest-autumn.jpg">
<source media="(orientation: landscape) and (min-width: 481px) and (max-width: 989px)" srcset="./imgs/tablet/forest-autumn.jpg">
<source media="(min-width: 990px)" srcset="./imgs/full/forest-autumn.jpg">
<img src="./imgs/tablet/forest-autumn.jpg" alt="">
</picture>
</div> -->
<nav class="slider-nav">
<span class="prev"><i class="ico-circle-left"></i></span>
<span class="pause"><i class="ico-pause2"></i></span>
<span class="next"><i class="ico-circle-right"></i></span>
</nav>
</div>
</header>
<div id="slider-position">
<i class="on"></i>
<i class="ico-radio-unchecked"></i>
<i class="ico-radio-unchecked"></i>
</div>
<h1>Welcome to the forest</h1>
<p>
<!-- https://www.base64encode.net/base64-image-encoder -->
<img src="data:image/png;base64,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">
</p>
</body>
</html>