cslylla / tea-lover-landing-page

SheCodes Plus Add-on Project - Responsive design

Tea Lover Landing Page

Project Description

I created this project for the SheCodes Responsive Add-on workshop. This project is a responsive landing page which can be accessed through any web browser: desktop or mobile.

---

1. Key features

• The single-site landing page is built with vanilla JavaScript, HTML and CSS
• Dark and light modes are available in the app
• The responsive design re-organizes the layout the landing page to better fit smaller screens
• Hover effect on images for user interactivity
• The landing page uses video and social media embeds

2. Usage

• You can access the landing page in any browser with an internet connection.
• You can open the landing page in any device: mobile, tablet or desktop. Try to resize the window to see how the layout changes.
• The landing page displays information about different tea types.
• You can use the Dark mode or Light mode button in the top right corner to switch between light and dark modes.
• Hover over the images, they will enlarge for better visibility
• Click on the videos to watch the YouTube videos. Click on the Instagram icons to view the posts on Instagram.

3. Links

• Visit the Landing Page here
• Further info about SheCodes
• The tea-inspiration is from Bird&Blend💙
• Photos are from Usplash
• The used fonts are from Google Fonts