bedimcode / responsive-travel-website

Responsive Travel Website Design Using HTML CSS and JavaScript

Responsive Travel Website 🌊

Watch it on youtube

Responsive Travel Website 🌊

• Travel website to the most beautiful beaches, using HTML, CSS & JAVASCRIPT.
• Contains animations when scrolling.
• Includes a dark and light mode.
• Developed first with the Mobile First methodology, then for desktop.
• Compatible with all mobile devices and with a beautiful and pleasant user interface.

Join the channel to see more videos like this. Bedimcode

responsive-travel-website's Issues

make the footer links into center for better view and readability in mobile devices..

Slow Image Transition Loading

The image transition time ( image animation ) is a bit more , that's why the website appears to be blank when scrolling downwards .

Solution :-
In the style.css file, make the following changes:

--img-transition: 0.1s;
--img-hidden: hidden;
--img-scale: scale(1.1);
}

@media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
background-color: var(--body-color);
top: 0;
right: -100%;
width: 70%;
height: 100%;
box-shadow: -1px 0 4px rgba(14, 55, 63, 0.15);
padding: 3rem;
transition: .2s;
}
}

Decreased the image transtion time from 0.3s to 0.1s & Media screen loading time from 0.4s to 0.2s.