The EchoWave is a project that I built during my web dev learning journey with The Odin Project. The goal of this assignment is to create a landing page from scratch using HTML and CSS.
⚠️ Design Credit: It is important to note that the layout and design credits go entirely to Saif Sarwar. Instead of replicating the design provided by The Odin Project, I was inspired to bring this talented designer's template, which he created using Photoshop and Figma, to life. The intention of using Saif Sarwar design is purely to put my HTML and CSS skills into practice.
- Create a landing page website from scratch based on the provided reference along with the design specifications using HTML, CSS flexbox and other CSS concepts.
- Maintain a good file/folder structure for the project
- Use Git and Github for version control as much as possible
- Use CSS grid to arrange HTML elements.
- Use position properties to place the figcaptions over the images.
- Use CSS transition and transform properties on the buttons to make them interactive.
- Add media queries for responsive design.
- Add a small code of JavaScript for activating the menu toggle in the mobile version
The EchoWave is compatible with mobile devices. Please have a look at the screenshots below, or open my static website on your own mobile devices!😃
View Mobile Webpage
The design and layout of this landing page are inspired by the UX design project of Saif Sarwar on Behance.net.
- Design Credits: Saif Sarwar - UI/UX Designer
- Original Design Template: Showcased on Behance
- Hero Background - Photo by Marty O’Neill on Unsplash
- Podcaster-1 - Photo by Emmanuel Ikwuegbu on Unsplash
- Podcaster-2 - Photo by Marty O’Neill on Unsplash
- Podcaster-3 - Photo by Cottonbro Studio on Pexels
- Podcaster-4 - Photo by Marty O’Neill on Unsplash
- Newsletter Background - Photo by Gritte on Unsplash
© 2024 - This project is licensed under the MIT License.