yqni13 clone (Heavens Edge)

$\texttt{\color{teal}{v1.1.2}}$

Screenshot navigation options

Technology

Google Fonts

Official Semantic Versioning Specifications (SemVer) applied to project versioning.

TRY LIVE DEMO

MOTIVATION:

To experiment with wallpapers, parallax effects, shaped images, sliders responsive design I decided to clone/redesign a webpage for the greek suite & villa Heavens Edge (original).

HOW TO:

The webpage uses a svg-file to shape displayed images. To do so, the "mask-" properties are necessary to use which is forbidden to use in a browser when loaded by "file://" instead of "http://" thanks to CORS. Therefore, this project needs to be run by server which I personally do by apache server thanks to XAMPP. To do this, copy project folder into xampp>htdocs, start xampp control panel, run apache server and navigate in browser to "localhost/foldername/index.html".

SPECIALTIES:

1. Images shaped by form of svg via mask- properties

2. Image slideshow to change automatically or can be navigated by dots with timer reset

3. responsive design $\textsf{\color{red}smartphone}$ | $\textsf{\color{lime}tablet}$ & manual image slideshow

4. Leaflet maps imported to display location of hotel

Updates

list of all updates

$\textsf{{\color{pink}{last}} update\ 1.1.1\ >>\ {\color{pink}1.1.2}}$

• $\textsf{\color{red}Bugfix:}$ Map for component 'location' shows satelite picture. [Before: Due to missing api key the map wasn't displayed and error 401 occured.]

Aimed objectives for next $\textsf{\color{green}minor}$ update:

- scroll hint animation

- error handling for images failing to load

- form submit logic

- additional full page resolution option in gallery slider

- control gallery slider with keys (exit, previous, next)

Aimed objectives for next $\textsf{\color{cyan}major}$ update:

- additional component [newsletter]

- additional component [reviews]

- parallax effect

- responsive design > 1440px width