Your challenge is to build out a Tesla's Landing Pages and get it to look as close to the design as possible.
This project focuses on your React and CSS skills, but you can use any tools you like to help you complete the project. So if you've got something you'd like to practice, feel free to give it a go.
The website should have
<ul>
<li>
6 landing pages for each product apart from the default landing page
</li>
<li>
the website should have mobile responsive
</li>
<li>
the website should have a mobile menu in the form sidebar
</li>
</ul>
All the designs can be found in the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">designs</code> folder and the assets in the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">public</code> folder. The default boilerplate code is based on Vite and React. If you want to use a different framework, feel free to change the files and install your own framework.
<h3>Get involved with the community</h3>
Join our <a href="https://discord.gg/codedamn" target="_blank" rel="noopener nofollow">discord server</a> and explore the <a href="https://codedamn.com/forum" target="_blank" rel="noopener nofollow">community forum</a> to share your feedback with others. Ask questions, help others and learn in public to make the best use of codedamn.
Also check out the <a href="https://codedamn.com/learning-paths/fullstack" target="_blank" rel="noopener nofollow">frontend learning path</a> to learn how to build such projects completely on your own.

Build the tesla clone website with smooth transitions and scroll snaps

Welcome to the first step of creating a Tesla homepage clone! Your task in this step is to construct the landing page to resemble Tesla's official homepage.
You can view the final appearance of the landing page at the following link:
<img loading="lazy" alt="Tesla landing page" src="https://wsrv.nl/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcodedamn-projects%2Ftesla-clone%2Fmaster%2Fdesigns%2FLanding%2520Page%2520%255BDesktop%255D.png&amp;w=1920&amp;q=75&amp;output=webp">
As you work on this page, pay careful attention to these specific elements:
<ul>
<li>Navbar Style: Ensure that the navigation bar has the correct styling.</li>
<li>Spacing Between Items: Observe the space between various elements and make sure they align with the design.</li>
<li>Background Images and Buttons: Choose the right images for the background and style the buttons appropriately.</li>
</ul>
<img loading="lazy" alt="elements image" src="https://wsrv.nl/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcodedamn-projects%2Ftesla-clone%2Fmaster%2Fdesigns%2FLanding%2520Page%2520-%2520Elements.png&amp;w=1920&amp;q=75&amp;output=webp">
Follow the challenges and mark them as done to proceed to the next challenge

Create the Landing Page

In this step, your challenge is to create a responsive mobile menu that seamlessly adapts to different mobile devices.
Here's what you need to focus on:
<ul>
<li>Menu Structure: Define a clear and intuitive menu structure that ensures easy navigation.</li>
<li>Responsive Design: Ensure that the menu is fully responsive, adjusting smoothly to various screen sizes and orientations.</li>
<li>Visual Consistency: Maintain consistency with the overall design theme, keeping in line with the colors, fonts, and styling already established in the landing page.</li>
</ul>
Here's how it looks:
<img loading="lazy" alt="Tesla Menu" src="https://wsrv.nl/?url=https%3A%2F%2Fraw.githubusercontent.com%2Fcodedamn-projects%2Ftesla-clone%2Fmaster%2Fdesigns%2FLanding%2520Page%2520%255BMobile%255D.png&amp;w=1920&amp;q=75&amp;output=webp">
Remember, the mobile menu is an essential part of the user experience, so it's vital to make it user-friendly and aesthetically pleasing. Take your time to test the responsiveness on different devices and adjust as needed.

Mobile Menu

Make sure all the elements of the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">&lt;nav&gt;</code> element have a separate html page of their own. You have to create a separate page for all of them and include the default header component by copy pasting it from the <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">index.html</code> file.
You have to create the following html files.
<ul>
<li>Model 3 : <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">/model-3</code></li>
<li>Model S : <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">/model-s</code></li>
<li>Model X: <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">/model-x</code></li>
<li>Model Y: <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">/model-y</code></li>
<li>Solar Roof: <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">/solar-roof</code></li>
<li>Solar Panels: <code class="rounded dark:bg-gray-800 dark:text-white text-black bg-gray-100 px-[0.25rem] py-[0.1rem] text-sm font-normal font-mono" data-prestyled="true">/solar-panels</code></li>
</ul>

Tesla Landing Page Clone

Project Description

Get involved with the community

Get involved with the community

Ready? Start Building

Milestones