├── fotos
    ├── img1.avif
    ├── img2.avif
    ├── img3.avif
    ├── img4.avif
    ├── img5.avif
    ├── img6.avif
    ├── img7.avif
    ├── img8.avif
    └── img9.avif
├── preview
    ├── n1.avif
    ├── n2.avif
    ├── n3.avif
    ├── n4.avif
    ├── n5.avif
    ├── n6.avif
    ├── n7.avif
    ├── n8.avif
    └── n9.avif
├── assets
    └── favicon.png
├── README.md
├── license.txt
├── index.html
├── script.js
└── style.css


/fotos/img1.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/fotos/img1.avif


--------------------------------------------------------------------------------
/fotos/img2.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/fotos/img2.avif


--------------------------------------------------------------------------------
/fotos/img3.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/fotos/img3.avif


--------------------------------------------------------------------------------
/fotos/img4.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/fotos/img4.avif


--------------------------------------------------------------------------------
/fotos/img5.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/fotos/img5.avif


--------------------------------------------------------------------------------
/fotos/img6.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/fotos/img6.avif


--------------------------------------------------------------------------------
/fotos/img7.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/fotos/img7.avif


--------------------------------------------------------------------------------
/fotos/img8.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/fotos/img8.avif


--------------------------------------------------------------------------------
/fotos/img9.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/fotos/img9.avif


--------------------------------------------------------------------------------
/preview/n1.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/preview/n1.avif


--------------------------------------------------------------------------------
/preview/n2.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/preview/n2.avif


--------------------------------------------------------------------------------
/preview/n3.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/preview/n3.avif


--------------------------------------------------------------------------------
/preview/n4.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/preview/n4.avif


--------------------------------------------------------------------------------
/preview/n5.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/preview/n5.avif


--------------------------------------------------------------------------------
/preview/n6.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/preview/n6.avif


--------------------------------------------------------------------------------
/preview/n7.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/preview/n7.avif


--------------------------------------------------------------------------------
/preview/n8.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/preview/n8.avif


--------------------------------------------------------------------------------
/preview/n9.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/preview/n9.avif


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/20essentials/project-000-010/HEAD/assets/favicon.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ![n1](preview/n1.avif)
2 | ![n2](preview/n2.avif)
3 | ![n3](preview/n3.avif)
4 | ![n4](preview/n4.avif)
5 | ![n5](preview/n5.avif)
6 | ![n6](preview/n6.avif)
7 | ![n7](preview/n7.avif)
8 | ![n8](preview/n8.avif)
9 | ![n9](preview/n9.avif)


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 20essentials
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Hotel Serenità del Mare</title>
 7 |   <link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon">
 8 |   <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 |   <aside class="theIndex">
12 |       <a href="#container-1" data-scroll-spy class="dot-0"></a>
13 |       <a href="#container-2" data-scroll-spy class="dot-1"></a>
14 |       <a href="#container-3" data-scroll-spy class="dot-2"></a>
15 |       <a href="#container-4" data-scroll-spy class="dot-3"></a>
16 |       <a href="#container-5" data-scroll-spy class="dot-4"></a>
17 |       <a href="#container-6" data-scroll-spy class="dot-5"></a>
18 |       <a href="#container-7" data-scroll-spy class="dot-6"></a>
19 |       <a href="#container-8" data-scroll-spy class="dot-7"></a>
20 |       <a href="#container-9" data-scroll-spy class="dot-8"></a>
21 |   </aside>
22 |   <section id="container-1" data-scroll-spy class="container-001 container">
23 |     <div class="box-top-left box">
24 |       <h2>Hotel Serenità del Mare</h2>
25 |     </div>
26 |     <div class="box-bottom-left box">
27 |       <h2>reservation@hotelseren.ita</h2>
28 |     </div>
29 |     <div class="box-top-right box">
30 |       <h2>Via Aurelia 3, 4321 - City Z</h2>
31 |     </div>
32 |     <div class="box-bottom-right box">
33 |       <h2>+39 960 960 960</h2>
34 |     </div>
35 |   </section>
36 |   <section id="container-2" data-scroll-spy class="container-002 container"></section>
37 |   <section id="container-3" data-scroll-spy class="container-003 container"></section>
38 |   <section id="container-4" data-scroll-spy class="container-004 container"></section>
39 |   <section id="container-5" data-scroll-spy class="container-005 container"></section>
40 |   <section id="container-6" data-scroll-spy class="container-006 container"></section>
41 |   <section id="container-7" data-scroll-spy class="container-007 container"></section>
42 |   <section id="container-8" data-scroll-spy class="container-008 container"></section>
43 |   <section id="container-9" data-scroll-spy class="container-009 container"></section>
44 | 
45 |   <script src="script.js"></script>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | console.groupCollapsed("REFERENCE");
 2 | console.log("Based in: ", "https://www.hotelrivieradeifiori.it/#to-suites-sul-mare");
 3 | console.log("VIDEO 1 ->", "https://www.hotelrivieradeifiori.it/images/slider-home/hrf-inverno.mp4");
 4 | console.log("img1 ->", "https://www.hotelrivieradeifiori.it/media/zoo/images/aregai-dreamhome_a6b4d125d712bc421336c199a2bf1383.jpg");
 5 | console.log("img2 ->", "https://www.hotelrivieradeifiori.it/media/zoo/images/bike-hotel-riviera-dei-fiori_355b20029f755235c55f6e82850c0bde.jpg");
 6 | console.log("img3 ->", "https://www.hotelrivieradeifiori.it/media/zoo/images/camere-hotel-riviera-dei-fiori_15af5be4bebd7157e4bdd0785d2aa500.jpg");
 7 | console.log("img4 ->", "https://www.hotelrivieradeifiori.it/media/zoo/images/montecarlo_08233279635e3a0fef45467bc35d1722.jpg");
 8 | console.log("img5 ->", "https://www.hotelrivieradeifiori.it/media/zoo/images/offerta-the-mall-sanremo_8e05074197d3d7868316c7b6981a969e.jpg");
 9 | console.log("img6 ->", "https://www.hotelrivieradeifiori.it/media/zoo/images/prenota-prima-riviera-dei-fiori_8260f6ad1acb990eead7152dab4fb4d9.jpg");
10 | console.log("img7 ->", "https://www.hotelrivieradeifiori.it/media/zoo/images/ristorante-hotel-riviera-dei-fiori_090ccabb3a8ac4453019a7d0fb4b98ca.jpg");
11 | console.log("img8 ->", "https://www.hotelrivieradeifiori.it/media/zoo/images/santuario-dei-cetacei_dfb6b12218b2a2d3aa40173b497e871d.jpg");
12 | console.log("img9 ->", "https://www.hotelrivieradeifiori.it/media/zoo/images/spa-hotel-riviera-dei-fiori_3946fb55465d7718c674393375adad58.jpg");
13 | console.groupEnd();
14 | 
15 | const d = document;
16 | 
17 | d.addEventListener("DOMContentLoaded", e => {
18 |   scrollSpy();
19 | });
20 | 
21 | 
22 | function scrollSpy() {
23 |   let $imgs = d.querySelectorAll("section[data-scroll-spy]");
24 | 
25 |   let observador = new IntersectionObserver(cb, {threshold: 0.5});
26 | 
27 |   function cb(entries) {
28 |     entries.forEach(entry => {
29 |       const id = entry.target.getAttribute("id");
30 | 
31 |       if (entry.isIntersecting) {
32 |         d.querySelector(`a[data-scroll-spy][href='#${id}']`).classList.add("active");
33 |       }
34 |       else {
35 |         d.querySelector(`a[data-scroll-spy][href='#${id}']`).classList.remove("active");
36 |       }
37 |     })
38 |   }
39 | 
40 |   $imgs.forEach(img => observador.observe(img));
41 | }
42 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | body, html {
  2 |   width: 100%;
  3 |   height: 100%;
  4 |   margin: 0;
  5 |   scroll-snap-type: y mandatory;
  6 | }
  7 | 
  8 | body {
  9 |   overflow-y: scroll;
 10 | }
 11 | 
 12 | .theIndex {
 13 |   font-size: 18px;
 14 |   position: fixed;
 15 |   right: 2em;
 16 |   height: 100%;
 17 |   display: flex;
 18 |   z-index: 999;
 19 |   flex-direction: column;
 20 |   row-gap: 1em;
 21 |   justify-content: center;
 22 | 
 23 |   a[data-scroll-spy] {
 24 |     display: block;
 25 |     margin-inline: auto;
 26 |     width: .5em;
 27 |     height: .5em;
 28 |     background-color: transparent;
 29 |     box-shadow: inset 3px 3px 5px greenyellow, inset -3px -3px 5px greenyellow;
 30 |     border-radius: 50%;
 31 |     transition: all .1s ease;
 32 |   }
 33 | 
 34 |   a.active {
 35 |     width: 1em;
 36 |     height: 1em;
 37 |   }
 38 | }
 39 | .container {
 40 |   min-height: 100vh;
 41 |   background-position: center;
 42 |   background-size: cover;
 43 |   scroll-snap-align: start;
 44 |   background-attachment: fixed;
 45 | }
 46 | 
 47 | .container-001 {
 48 |   background-image: url('fotos/img4.avif');
 49 |   position: relative;
 50 | 
 51 |   .box {
 52 |     position: absolute;
 53 |     width: fit-content;
 54 |     border-top: 2px solid white;
 55 |     border-left: 2px solid white;
 56 | 
 57 |     * {
 58 |       padding: 0;
 59 |       margin: 0;
 60 |       font-family: cursive;
 61 |       color: white;
 62 |     }
 63 | 
 64 |     h2 {
 65 |       padding: 2rem;
 66 |       font-size: 1.3rem;
 67 |       font-family:Helvetica, sans-serif;
 68 | 
 69 |     }
 70 |   }
 71 | 
 72 |   .box-top-left {
 73 |     left: 3rem;
 74 |     top: 3rem;
 75 |   }
 76 | 
 77 |   .box-top-right {
 78 |     right: 3rem;
 79 |     top: 3rem;
 80 |   }
 81 | 
 82 |   .box-top-right,
 83 |   .box-bottom-right {
 84 |     border-left: none;
 85 |     border-right: 2px solid white;
 86 |   }
 87 | 
 88 |   .box-bottom-left {
 89 |     left: 3rem;
 90 |   }
 91 | 
 92 |   .box-bottom-right {
 93 |     right: 3rem;
 94 |   }
 95 | 
 96 |   .box-bottom-left,
 97 |   .box-bottom-right {
 98 |     bottom: 3rem;
 99 |     border-top: none;
100 |     border-bottom: 2px solid white;
101 |   }
102 | }
103 | .container-002 {
104 |   background-image: url('fotos/img2.avif');
105 | }
106 | .container-003 {
107 |   background-image: url('fotos/img3.avif');
108 | }
109 | .container-004 {
110 |   background-image: url('fotos/img1.avif');
111 | }
112 | .container-005 {
113 |   background-image: url('fotos/img5.avif');
114 | }
115 | .container-006 {
116 |   background-image: url('fotos/img6.avif');
117 | }
118 | .container-007 {
119 |   background-image: url('fotos/img7.avif');
120 | }
121 | .container-008 {
122 |   background-image: url('fotos/img8.avif');
123 | }
124 | .container-009 {
125 |   background-image: url('fotos/img9.avif');
126 | }
127 | 
128 | @media (width <= 1000px) {
129 |   html {
130 |     font-size: 12px;
131 |   }
132 |   .theIndex {
133 |     right: 28px;
134 |   }
135 | }
136 | 
137 | @media (width <= 600px) and (orientation: portrait){
138 |   .container-001 {
139 |     .box-bottom-left,
140 |     .box-top-right {
141 |       display: none;
142 |     }
143 |     .box-bottom-right {
144 |       bottom: 5rem;
145 |     }
146 |   }
147 |   .container {
148 |     background-attachment: scroll;
149 |   }
150 |   .theIndex {
151 |     width: fit-content;
152 |     right: 1.5rem;
153 |   }
154 | }
155 | 


--------------------------------------------------------------------------------