You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
2.6 KiB
61 lines
2.6 KiB
<!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>
|
|
</body>
|
|
</html> |