Welcome to Black Forest
A clean, spacious single page theme with a lot of atmosphere and bite to it. Please note that not all the text areas use filler text — in various places we explain how this design was constructed. Let’s start with navigation items on the top right. They take the visitor to a specific section of the page by linking to the ID of a row. A small Javascript snippet pasted in the head section on the settings pane takes care of the smooth scrolling. (The code snippet in the footer fixed an IE 11 bug that negatively influences scrolling when using background images.) To view this in action click Preview on… in the toolbar above, which launches the default browser.
The ‘back-to-top’ button on the right bottom of the screen takes the visitor back to the navigation menu. This button uses a fixed positioning with 20px right and bottom coordinates that ‘pin’ it into position.
Activites
The images below scale up on hover. This can be done on the effects section of the design pane. A transition is used to smoothen the effect. Basically this is done for all hover related changes when possible. The stickers are put on the images using a negative margin and rotate upon hover.
Mouse hover for interactions
Location
Kolm-Saigurn is a small village near dolor sit amet, consectetur adipiscing elit. Quisque fermentum elementum lorem, vitae varius sapien lacinia ut. Nam hendrerit quam ut mi congue feugiat. Cras nisi neque, vulputate venenatis velit eget, tempor faucibus nisl. Pellentesque ut varius quam.
Tips & reservations
Please book a vacation and we will contact you as soon as possible. If you have any questions please contact at info@blackforrest.com or call at 1-866-555-5555
We're always willing to help out. Contact us if you don't see the dates you're looking for!
location
days
price
status
Romania
7
$3,000
Slovakia
4
$5,000
Serbia
5
$4,500
Latvia
7
$6,000
What our guests are saying
"What a wonderful time we had, every day brought something different! My favorite was feeding the wolves!"
Gallery
Mouse hover for interactions
This gallery was made with just some CSS simply tricks. There are three classes for large, medium and small images. Each class uses different effect settings for rotation and box-shadow, both in regular and hover state. The z-index value moves the image up on hover. A specific design was applied for smaller devices so it looks always nice. Hit the Preview button in the toolbar to see the effects in action and enjoy these amazing shots by Airwolfhound.
Keep in touch!
All images used in this theme are neatly organized in the resources manager, available through the toolbar above. Etiam mollis, dolor ac malesuada volutpat, lorem est sollicitudin nisi, a vestibulum mi diam a velit. Duis cursus, nisl eget imperdiet sodales, diam lacus ultrices nisi, a malesuada elit metus sit amet urna.
