LandingPage-Hopwtr-clone

• 

  1

• 

  2

• 

  3

• 

  4

• 

  5

• 

  6

• 

  7

Inspiration

The inspiration behind this project was to create a landing page clone for the brand HOP WTR, which offers hop-infused non-alcoholic beverages. The goal was to replicate the design and layout of the existing HOP WTR website to practice frontend development skills.

We referred to the original website of HOP WTR for design inspiration and aimed to recreate its visual elements and user experience.

What it does

The landing page provides information about the HOP WTR brand, its products, an about section, contact form, and social media links. It also includes smooth scrolling navigation and a preloader animation.

How we built it

The landing page was built using HTML for the structure, CSS for styling, and JavaScript for interactivity. We utilized Google Fonts for typography, Font Awesome for icons, and FormSubmit.co for handling form submissions. The layout was designed to be responsive using media queries for different screen sizes.

GitHub Repository

Link--> https://github.com/CHETANKVERMA/Devpost-LandingPage.git

No private data was used in the development of this project; all resources were publicly available.

Challenges we ran into

Some of the challenges we faced included aligning elements correctly, ensuring cross-browser compatibility, and implementing smooth scrolling functionality. Additionally, integrating the form submission feature and handling its success message required some troubleshooting.

Accomplishments that we're proud of

We're proud of successfully replicating the design of the original website and making it responsive across different devices. Additionally, implementing smooth scrolling and the preloader animation added a polished touch to the user experience.

What we learned

Through this project, we gained hands-on experience in frontend web development, including working with HTML, CSS, and JavaScript. We learned about responsive design principles, CSS animations, form handling, and integrating external resources into a web page.

What's next for LandingPage-Hopwtr-clone

In the future, we could enhance the landing page by adding more interactive elements, such as animations or sliders, improving accessibility features, and optimizing performance for faster loading times. Additionally, integrating backend functionality for user authentication or e-commerce capabilities could further enhance the user experience.

About the Team

Frontend Developer: Chetan Kumar Verma

As the frontend developer for this project, I was responsible for translating the design concepts into a functional website. I implemented the structure, styling, and interactivity using HTML, CSS, and JavaScript. My goal was to ensure that the landing page closely resembled the original HOP WTR website while also making it responsive across various devices.

Figma Designer: Jafar Khan

Jafar Khan played a crucial role as the Figma designer, crafting the visual elements and layouts for the landing page. Using Figma, Jafar meticulously designed the user interface, including the placement of elements, color schemes, and overall aesthetic. His designs served as the blueprint for my frontend development work, guiding the implementation process and ensuring fidelity to the original design.

Disclaimer

This project was created solely for educational purposes. No private data was used; all resources were publicly available. The project is not affiliated with HOP WTR or its official website.

Credits

We give credit to the original website of HOP WTR for providing inspiration and reference for our project. The design elements and content of our landing page were modeled after those found on the original website.

Built With

• css
• figma
• github
• html
• javascript
• vscode