Creating a Myntra Clone using HTML, CSS & JavaScript (Source Code)

Faraz

By Faraz -

Learn how to create a Myntra clone from scratch using HTML, CSS, and JavaScript. Build your own fashion e-commerce site today!

Join us on Telegram
Creating a Myntra Clone using HTML, CSS & JavaScript.jpg
Read AlsoCrafting a Powerful NGO Website HTML, CSS, and JavaScript Essentials.jpgNGO Website Template Development using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

In this blog post, we will delve into creating a Myntra clone using HTML, CSS, and JavaScript. We will cover the essential steps to replicate the functionality and design of this popular e-commerce platform. Whether you're an aspiring web developer or just curious about how such websites work, this guide will provide valuable insights.

Getting Started

To embark on our journey of creating a Myntra clone, we need to set up our development environment properly. Here's how:

  1. Choose a Code Editor: Select a code editor like Visual Studio Code, Sublime Text, or Atom for a smooth development experience.
  2. Initialize Your Project: Create a new project folder and set up the necessary files (index.html, styles.css, script.js).
  3. Link Files: Link your HTML file to the CSS and JavaScript files using <link> and <script> tags.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our myntra clone website.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Here's a breakdown of the code:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used (HTML5).

2. <html lang="en">: The root element of the HTML document, indicating that the page is written in English ("en").

3. <head>: This section contains metadata and links to external resources that are not displayed on the page itself.

  • <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which includes support for a wide range of characters.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Instructs Internet Explorer to use its latest rendering engine.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport settings for responsive design.
  • <link rel="shortcut icon" href="" type="image/x-icon">: Specifies the favicon (the small icon displayed in the browser tab), but the href attribute is empty, so no icon is specified.
  • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">: Links to an external stylesheet for including Font Awesome icons.
  • <link rel="icon" type="image/png" href=".../Images/myntraclone/logo.png"/>: Specifies another icon, possibly for mobile devices.
  • <link rel="stylesheet" href="styles.css">: Links to an external CSS file named "styles.css."
  • <title>Online Shopping for Women, Men, Kids Fashion & Lifestyle - Myntra</title>: Sets the title of the web page displayed in the browser's title bar.

4. <body>: This section contains the visible content of the web page.

  • <nav>: Represents the website's navigation menu.
  • <div class="men-section-items visibility">: This section appears to contain categories and subcategories for men's clothing and accessories.
  • <div class="women-section-items visibility">: Similar to the men's section, but for women's clothing and accessories.
  • <div class="kids-section-items visibility">: Contains categories for kids' clothing and accessories.
  • <div class="home-section-items visibility">: Contains categories for home and living products.
  • <div class="beauty-section-items visibility">: Contains categories for beauty and personal care products.
  • Various <img> tags: These tags embed images in the page, used for product or promotional content.
  • <footer>: Contains footer content, including links, contact information, and additional information about the website.
  • <script src="script.js"></script>: Links to an external JavaScript file named "script.js."

This is the basic structure of our myntra clone website using HTML, and now we can move on to styling it using CSS.

Read Alsocreate a responsive slider with jquery (source code).jpgCreate a Responsive Slider with jQuery (Source Code)

Step 2 (CSS Code):

Once the basic HTML structure of the clone website is in place, the next step is to add styling to the website using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our myntra clone website. Let's break down the code step by step:

1. The first block of code applies some styles to all elements (denoted by '*'). It sets the margin and padding to 0 pixels for all elements, which helps to remove any default spacing that browsers apply.

2. The 'html' element is styled to enable smooth scrolling behavior. This means that when users scroll, it will scroll smoothly instead of jumping abruptly between sections.

3. The 'body' element is styled with 'overflow-x: hidden', which prevents horizontal scrolling. This is often used to ensure that the page content fits within the viewport width.

4. The 'nav' element is styled to create a fixed navigation bar at the top of the page. It has a white background color, is positioned at the top of the viewport ('top: 0px'), and includes a box shadow for a subtle drop shadow effect. The navigation items are horizontally aligned and centered within the bar.

5. Inside the 'nav' element, there is a 'left' section containing an unordered list ('ul') for navigation links. These links are styled with padding, text transformation to uppercase, font properties, and a color scheme. The logo is also present in this section, styled with a specific width and padding.

6. There is a 'container' class applied to images within the page content. These images are styled to be responsive ('width: 98.5vw') and have their background properties set.

7. Sections of the page (e.g., 'section', 'section1', 'section2', etc.) are defined and styled with flexbox properties to center their content horizontally. The images inside these sections are also given specific widths and heights, making them responsive.

8. The 'footer' element is styled to have a light gray background color, padding, and various font properties for text. Links within the footer are styled with cursor pointers and specific colors.

9. The 'right' section within the footer is styled to include an input field and some icons. The input field has specific styles for font size, padding, and border, while the icons have various styles like color, font weight, and spacing.

10. The 'footer-container' class is applied to a container within the footer. It is given a background color and padding.

11. There are several 'row' and 'row-2' classes used to define rows of content within the footer. These rows contain various text content with specific font styles.

12. The 'copyright-container' class defines a container for copyright information and separates it from other footer content with a horizontal line.

13. The 'horizontal-line' class styles a horizontal line with a light gray color and low opacity.

14. The 'office-address-content' class defines the styling for an office address section.

15. The 'other-info-heading' and 'other-info-para-content' classes are used for additional information in the footer.

16. Social media icons (e.g., 'fb-icon', 'tw-icon', 'yt-icon') are styled with margins for spacing.

17. Several classes ('men-section-items', 'women-section-items', 'kids-section-items', 'home-section-items', 'beauty-section-items') define the styling for different sections of the website. These sections appear to be positioned absolutely and have specific dimensions, padding, and font styles.

18. Various 'col-1', 'col-2', 'col-3', 'col-4', 'col-5' classes define columns within these sections. They have margin and font styles.

19. The 'category' and 'category-items' classes style category headings and items within these sections.

20. The 'horizontal-line2' class defines horizontal lines within the sections.

21. The 'visibility' class is set to 'display: none', indicating that elements with this class are hidden.

22. The 'category-heading' class styles category headings with a specific color and font weight.

This will give our myntra clone website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

* {
  margin: 0px;
  padding: 0px;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

nav {
  position: sticky;
  background-color: #ffffff;
  top: 0px;
  height: 62px;
  display: flex;
  align-items: center;
  padding: 5px 0px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.left {
  display: flex;
  align-items: center;
  width: 100%;
}

.left ul {
  display: flex;
  list-style: none;
  align-items: center;
}

.left ul li {
  padding: 0px 20px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .3px;
  color: #090909;
  line-height: 80px;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.left img {
  width: 53px;
  height: 36px;
  padding: 0px 50px;
}

.container img {
  cursor: pointer;
  width: 98.5vw;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 25px;
}

.section {
  display: flex;
  margin: 3px 2px;
  justify-content: center;
}

.section img {
  cursor: pointer;
  width: 48vw;
  background-size: cover;
}

.section1 img {
  cursor: pointer;
  width: 100vw;
  background-size: cover;
}

.section2 {
  display: flex;
  justify-content: center;
}

.section2 img {
  cursor: pointer;
  width: 285px;
  height: 380px;
}

.section3 img {
  cursor: pointer;
  width: 100vw;
  background-size: cover;
}

.section4 {
  display: flex;
  justify-content: center;
}

.section4 img {
  cursor: pointer;
  width: 290px;
  height: 345px;
}

.section5 img {
  cursor: pointer;
  width: 100vw;
  background-size: cover;
}

.section6 {
  display: flex;
  justify-content: center;
}

.section6 img {
  cursor: pointer;
  width: 291px;
  height: 375px;
}

.section7 img {
  cursor: pointer;
  width: 100vw;
  background-size: cover;
}

.section8 {
  display: flex;
  justify-content: center;
}

.section8 img {
  cursor: pointer;
  width: 261px;
  height: 351px;
}

footer {
  /* margin-top: 25px; */
  height: 55px;
  /* text-align: center; */
  background-color: #f7f7f7;
  padding-top: 28px;
  font-size: 14px;
  color: #696b79;
  text-decoration: none;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  letter-spacing: .3px;
}

footer a {
  cursor: pointer;
  color: #696b79;
  text-decoration: none;
  font-weight: 500;
}

.right {
  display: flex;
  align-items: center;
  width: 100%;
}

.right input {
  font-size: 14px;
  height: 20px;
  line-height: 24px;
  width: 60%;
  color: #696e79;
  padding: 8px 10px 10px;
  outline: 0;
  border: 1px solid #f5f5f6;
  border-radius: 4px 4px 4px 4px;
  background: #f5f5f6;
}

.icons {
  display: flex;
  margin: 0px 42px;
}

.profile,
.wish,
.bag {
  color: #000;
  font-size: 14px;
  font-weight: 800;
  padding: 0px 13px;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.footer-container{
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
  padding-left: 220px;
  padding-right: 220px;
}

.row{
  display: flex;
  margin-bottom: 20px;
}
.online-shopping{
  text-align: left;
  margin-right: 50px;
}
.customer-policies{
  text-align: left;
  margin-right: 50px;
}
.app{
  text-align: left;
  margin-right: 90px;
}
.row-2{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  
}
.content-heading{
  color: black;
  font-weight: 600;
  letter-spacing: normal;
}
.content-box{
  line-height: 1.6;
}
.para-content{
  margin-top: 25px;
  margin-bottom: 40px;
}
.copyright-container{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.horizontal-line{
  margin-bottom: 30px;
  opacity: 0.2;
  height: 0.3px;
}
.office-address-content{
  opacity: 0.9;
  margin-bottom: 30px;
}
.other-info-heading{
  font-weight: 600;
  letter-spacing: normal;
  color: black;
  font-size: 15px;
  opacity: 0.8;

}
.other-info-para-content{
  margin-top: 8px;
  margin-bottom: 30px;
  font-size: 13px;
  opacity: 0.8;
}
.Google-play{
  background-repeat: none;
  margin-right: 10px;
  
}
.App-Store{
  background-repeat: none;

}
.download-button{
  display: flex;
  margin-top: 30px;
}
.download-button img{
  width: 130px;
  height:40px;
}

.original{
  margin-bottom: 30px;
  color: black;
  opacity: 0.8;

}
.customer-satisfaction{
  margin-bottom: 30px;
}
.social-links{
  margin-top: 12px;
}

.fb-icon{
  margin-right:6px;
}
.tw-icon{
  margin-right:6px;
}
.yt-icon{
  margin-right:6px;
}

.men-section-items{
  background-color: rgb(255, 255, 255);
  display: flex;
  position: absolute; /* to be removed */
  width: 1050px;
  height: 510px;
  /*top: 232px;  to be removed */
  right: 1px;
  left: 130px;
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom: 15px;
  z-index: 10;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.women-section-items{
  background-color: rgb(255, 255, 255);
  display: flex;
  position: absolute; /* to be removed */
  width: 1050px;
  height: 510px;
  /*top: 232px;  to be removed */
  right: 1px;
  left: 130px;
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom: 15px;
  z-index: 10;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.kids-section-items{
  background-color: rgb(255, 255, 255);
  display: flex;
  position: absolute; /* to be removed */
  width: 1050px;
  height: 510px;
  /*top: 232px;  to be removed */
  right: 1px;
  left: 130px;
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom: 15px;
  z-index: 10;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.home-section-items{
  background-color: rgb(255, 255, 255);
  display: flex;
  position: absolute; /* to be removed */
  width: 1050px;
  /*top: 232px;  to be removed */
  right: 1px;
  left: 130px;
  height: 510px;
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom:15px;
  z-index: 10;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.beauty-section-items{
  background-color: rgb(255, 255, 255);
  display: flex;
  position: absolute; /* to be removed */
  width: 1050px;
  height:510px;
  /*top: 232px;  to be removed */
  right: 1px;
  left: 130px;
  padding-left: 45px;
  padding-right: 45px;
  padding-bottom: 15px;
  z-index: 10;
  font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.col-1{
  margin-right: 70px;
  margin-top: 15px;
}
.col-2{
  margin-right: 70px;
  margin-top: 15px;
}
.col-3{
  margin-right: 70px;
  margin-top: 15px;
}
.col-4{
  margin-right: 70px;
  margin-top: 15px;
}
.col-5{
  margin-right: 70px;
  margin-top: 15px;
}
.category{
  margin-bottom: 11px;
}
.category-items{
  margin-top: 8px;
  line-height: 1.6;
  font-size: 14px;
  opacity: 0.95;
}
.horizontal-line2{
  margin-bottom: 18px;
  margin-top: 15px;
  background-color: white;
}
.visibility{
  display: none;
}
.category-heading{
  color: #ee6780;
  font-weight: bold;
  font-size: 14px;
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. This JavaScript code is used to control the visibility of certain sections of a web page when the user hovers their mouse over specific navigation elements (like menu items) and removes the visibility when the mouse moves away. It appears to be designed for a website with different sections (e.g., men's, women's, kids', home and living, beauty) and corresponding item lists. Here's a breakdown of the code:

1. The code begins by selecting various HTML elements using the document.querySelector() method. These elements are selected based on their class names and are stored in variables for later use. For example:

  • men_section corresponds to an HTML element with the class name 'men'.
  • men_section_items corresponds to an HTML element with the class name 'men-section-items'.
  • Similar variables are created for the other sections and their corresponding items.

2. Event listeners are added to each of the section elements (men, women, kids, home, and beauty) using the onmouseover and onmouseout event handlers. These listeners respond to mouse hover and mouseout events for each section and its respective items. For example:

  • When the mouse hovers over the men_section, the men_section_items element's 'visibility' class is removed, making it visible.
  • When the mouse moves away from the men_section, the 'visibility' class is added back to hide men_section_items.
  • Similar event listeners are set up for the other sections.

3. The 'visibility' class appears to be used to control the visibility of the corresponding item lists. When this class is removed, the associated item list becomes visible, and when it's added, the item list is hidden.

4. The code also selects the <body> element using document.getElementsByTagName("BODY"), although it doesn't appear to use it for any specific purpose in the provided code.

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

const men_section = document.querySelector('.men');
const women_section = document.querySelector('.women');
const kids_section = document.querySelector('.kids');
const home_section = document.querySelector('.homeliving');
const beauty_section = document.querySelector('.beauty');

const men_section_items = document.querySelector('.men-section-items');
const women_section_items = document.querySelector('.women-section-items');
const kids_section_items = document.querySelector('.kids-section-items');
const home_section_items = document.querySelector('.home-section-items');
const beauty_section_items = document.querySelector('.beauty-section-items');

const container_ele = document.querySelector('.container');
var bodyele = document.getElementsByTagName("BODY");

men_section.onmouseover = () => {
    men_section_items.classList.remove('visibility');
}
men_section.onmouseout = () => {
    men_section_items.classList.add('visibility');
} /* men section ends here */

women_section.onmouseover = () => {
    women_section_items.classList.remove('visibility');
}
women_section.onmouseout = () => {
    women_section_items.classList.add('visibility');
} /* women section ends here */

kids_section.onmouseover = () => {
    kids_section_items.classList.remove('visibility');
}
kids_section.onmouseout = () => {
    kids_section_items.classList.add('visibility');
} /* kids section ends here */

home_section.onmouseover = () => {
    home_section_items.classList.remove('visibility');
}
home_section.onmouseout = () => {
    home_section_items.classList.add('visibility');
} /* home and living ends here */

beauty_section.onmouseover = () => {
    beauty_section_items.classList.remove('visibility');
}
beauty_section.onmouseout = () => {
    beauty_section_items.classList.add('visibility');
}

Final Output:

Creating a Myntra Clone using HTML, CSS & JavaScript.gif
Read AlsoCreate Music Streaming App Landing Page HTML & CSS Tutorial.webpCreate Music Streaming App Landing Page: HTML & CSS Tutorial (Source Code)

Conclusion:

Congratulations! You've reached the end of our journey into building a Myntra clone from scratch using HTML, CSS, and JavaScript. We've covered a lot of ground, from setting up your development environment to designing the user interface, adding functionality with JavaScript, and finally, testing and optimizing your creation.

As you reflect on the knowledge and skills you've acquired throughout this tutorial, remember that web development is an ever-evolving field. The Myntra clone you've built is just the beginning of your journey into the world of front-end development. You now have a solid foundation to explore more advanced concepts, such as responsive design, server-side integration, and back-end development.

But for now, take a moment to appreciate what you've accomplished. You've created a functional and visually appealing e-commerce website, similar in style to one of the fashion industry's giants. Your ability to transform code into a user-friendly interface is a valuable skill that can open doors to countless opportunities in the tech industry.

As you continue your coding journey, remember that practice makes perfect. Don't hesitate to experiment with new features, refine your design skills, and explore different web development frameworks and libraries. With dedication and continuous learning, you can reach even greater heights in the world of web development.

Thank you for joining us on this educational and creative adventure. We wish you the best of luck in all your future coding endeavors, and may your Myntra clone be just the beginning of your coding success story. Happy coding!

Code by: ZeroOctave

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: myntra clone, html, css, javascript, e-commerce website development, source code, building a myntra-like website from scratch, creating an e-commerce site with html; css; and javascript, front-end development for online fashion store, designing a user-friendly online clothing shop, myntra clone step-by-step tutorial
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post