Our Problem statement is creating a pixel-perfect clone of Sugar Cosmetics.
Previously we did a clone of a few web pages but in this problem, we were supposed to make pages dynamic.
We are pursuing a Full Stack Web Development course at Masai School, At Masai School, we have been given a project to clone the Sugar Cosmetics website. It was a good project to work on. There are five members of the team. The task was to clone the pixel-perfect layout of the Sugar Cosmetics website. Let's look at how we designed it
-
Md Talib Ansari :-
-
Rohan Khurana :-
-
Rishab kumar :-
-
Harshini Usarthi :-
-
Sahid jamal :-
This is the Navbar section, Designed by Rohan Khurana. He added some functionality in this navbar section like search functionality.
This is the login and register page created by Md Talib, on clicking the login button login page will appear, there you should enter your Mobile Number. On clicking the request opt button you will receive an Otp enter that Otp at the bottom of that page. After clicking on the Verify button another page will appear there you will have to fill in some details of your.
Harshini Usarthi created this page. Truly he worked hard on this page because it had many additional functionalities like images sliding automatic as well as clicking arrow button. And this page had a streaming section where videos are playing auto on hovering.
Rohan khurana created this page. This makeup page had three subcategories like Lips , Face, Eyes . You can click any of sections you will redirect to that page.
Risab Kumar created this page. This page has the same functionality as the Makeup Page . This page is also divided into two pages Face Brushes and Eyes brushes. If you want to buy face brush-related products , simply click on that you will be redirected to that page.
This is a cart page created by Sahid Jamal, On this page, you can see all the products that you added to you bag or cart, some suggestions, Delivery Information, and Apply the "Add coupon code(sahid30)to get off" too. Here, you can see your total cart product with the total price. From here you increase quantity or you can remove the products.
This payment section was created by Rishabh Kumar. Here you can see various types of payment methods.
{"all":[
{
"id": 1048,
"brand": "colourpop",
"name": "Lippie Pencil",
"price": "5.0",
"price_sign": "$",
"currency": "CAD",
"image_link": "https://cdn.shopify.com/s/files/1/1338/0845/collections/lippie-pencil_grande.jpg?v=1512588769",
"product_link": "https://colourpop.com/collections/lippie-pencil",
"website_link": "https://colourpop.com",
"description": "Lippie Pencil A long-wearing and high-intensity lip pencil that glides on easily and prevents feathering. Many of our Lippie Stix have a coordinating Lippie Pencil designed to compliment it perfectly, but feel free to mix and match!",
"rating": null,
"category": "pencil",
"product_type": "lip_liner",
"tag_list": [
"cruelty free",
"Vegan"
],
"created_at": "2018-07-08T23:45:08.056Z",
"updated_at": "2018-07-09T00:53:23.301Z",
"product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/1048.json",
"api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/001/048/original/open-uri20180708-4-13okqci?1531093614",
"product_colors": [
{
"hex_value": "#B28378",
"colour_name": "BFF Pencil"
},
{
"hex_value": "#A36B5E",
"colour_name": "951 Pencil"
},
{
"hex_value": "#966A60",
"colour_name": "Beeper Pencil"
},
{
"hex_value": "#8F5954",
"colour_name": "Oh Snap Pencil"
},
{
"hex_value": "#975348",
"colour_name": "Curvii Pencil"
},
{
"hex_value": "#865B69",
"colour_name": "Lumiere Pencil"
},
{
"hex_value": "#8E474D",
"colour_name": "Bumble Pencil"
},
{
"hex_value": "#5F2820",
"colour_name": "BFF Pencil 3"
},
{
"hex_value": "#C095BC",
"colour_name": "Brills Pencil"
},
{
"hex_value": "#743A6A",
"colour_name": "Are N Be Pencil"
},
{
"hex_value": "#965564",
"colour_name": "Contempo Pencil"
},
{
"hex_value": "#BF2C7E",
"colour_name": "Heart On Pencil"
},
{
"hex_value": "#CE435D",
"colour_name": "Trixie Pencil"
},
{
"hex_value": "#DA6952",
"colour_name": "Chi Chi Pencil"
},
{
"hex_value": "#A33C37",
"colour_name": "Clique Pencil"
},
{
"hex_value": "#C23D3C",
"colour_name": "Frenchie Pencil"
},
{
"hex_value": "#AF4051",
"colour_name": "Bossy Pencil"
},
{
"hex_value": "#914B4C",
"colour_name": "Wild Nothing Pencil"
},
{
"hex_value": "#6D414B",
"colour_name": "Dopey Pencil"
},
{
"hex_value": "#4D2D28",
"colour_name": "Toolips Pencil"
},
{
"hex_value": "#361927",
"colour_name": "Mamacita Pencil"
},
{
"hex_value": "#714B41",
"colour_name": "Pitch Pencil"
},
{
"hex_value": "#762F50",
"colour_name": "LBB Pencil"
},
{
"hex_value": "#8C4A47",
"colour_name": "Love Bug Pencil"
},
{
"hex_value": "#702E2D",
"colour_name": "Poison Pencil"
},
{
"hex_value": "#93283C",
"colour_name": "Bichette Pencil"
},
{
"hex_value": "#653E44",
"colour_name": "Dukes Pencil"
},
{
"hex_value": "#5C3357",
"colour_name": "Leather Pencil"
},
{
"hex_value": "#242225",
"colour_name": "Bull Chic Pencil"
},
{
"hex_value": "#B5716A",
"colour_name": "Brink Pencil"
},
{
"hex_value": "#B0516F",
"colour_name": "I Heart This Pencil"
},
{
"hex_value": "#542328",
"colour_name": "Ellarie Pencil"
},
{
"hex_value": "#DFAC9B",
"colour_name": "Toy Pencil"
},
{
"hex_value": "#AB7164",
"colour_name": "BFF Pencil 2"
}
]
},
{
"id": 1047,
"brand": "colourpop",
"name": "Blotted Lip",
"price": "5.5",
"price_sign": "$",
"currency": "CAD",
"image_link": "https://cdn.shopify.com/s/files/1/1338/0845/products/brain-freeze_a_800x1200.jpg?v=1502255076",
"product_link": "https://colourpop.com/collections/lippie-stix?filter=blotted-lip",
"website_link": "https://colourpop.com",
"description": "Blotted Lip Sheer matte lipstick that creates the perfect popsicle pout! Formula is lightweight, matte and buildable for light to medium coverage.",
"rating": null,
"category": "lipstick",
"product_type": "lipstick",
"tag_list": [
"cruelty free",
"Vegan"
],
"created_at": "2018-07-08T22:01:20.178Z",
"updated_at": "2018-07-09T00:53:23.287Z",
"product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/1047.json",
"api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/001/047/original/open-uri20180708-4-e7idod?1531087336",
"product_colors": [
{
"hex_value": "#b72227",
"colour_name": "Bee's Knees"
},
{
"hex_value": "#BB656B",
"colour_name": "Brain Freeze"
},
{
"hex_value": "#8E4140",
"colour_name": "Drip"
},
{
"hex_value": "#A12A33",
"colour_name": "On a Stick"
},
{
"hex_value": "#904550",
"colour_name": "Ice Cube"
},
{
"hex_value": "#452222",
"colour_name": "Lolly"
},
{
"hex_value": "#7C3F35",
"colour_name": "Candyfloss"
}
]
},
{
"id": 97,
"brand": "maybelline",
"name": "Maybelline Color Sensational Vivid Matte Liquid Lip Colour",
"price": "12.99",
"price_sign": null,
"currency": null,
"image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/d0b6855d9b603a00f776de498c971b88_ra,w158,h184_pa,w158,h184.png",
"product_link": "https://well.ca/products/maybelline-color-sensational-vivid_114538.html",
"website_link": "https://well.ca",
"description": "Bold, vivid color glides easily onto lips for a velvety matte finish with Maybelline Color Sensational Vivid Matte Liquid Lip Colour. \nFormula is comfortable and creamy with a smooth feel upon application. \nWith full color coverage, the result is a rich, intense lip look in a \nrange of colors from Nude Flush to Electric Pink to Vivid Violet.Features: Lip color glides on smooth to a matte finishInfused with pure pigments for high-impact colorCreamy liquid base for a soft, cushiony feel",
"rating": null,
"category": "lipstick",
"product_type": "lipstick",
"tag_list": [],
"created_at": "2016-10-01T18:25:33.281Z",
"updated_at": "2017-12-23T20:50:59.331Z",
"product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/97.json",
"api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/097/original/open-uri20171223-4-128aihq?1514062259",
"product_colors": [
{
"hex_value": "#AC7773",
"colour_name": "Nude Thrill "
},
{
"hex_value": "#BD7A80",
"colour_name": "Nude Flush "
},
{
"hex_value": "#D65F84",
"colour_name": "Pink Charge "
},
{
"hex_value": "#D73D8C",
"colour_name": "Electric Pink "
},
{
"hex_value": "#B12156",
"colour_name": "Fuchsia Ecstasy "
},
{
"hex_value": "#BC2830",
"colour_name": "Orange Shot "
},
{
"hex_value": "#B7233B",
"colour_name": "Rebel Red "
},
{
"hex_value": "#8C1F48",
"colour_name": "Berry Boost "
},
{
"hex_value": "#542A71",
"colour_name": "Vivid Violet "
},
{
"hex_value": "#300B28",
"colour_name": "Possessed Plum "
}
]
},
{
"id": 96,
"brand": "revlon",
"name": "Revlon Ultra HD Lip Lacquer",
"price": "10.99",
"price_sign": null,
"currency": null,
"image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/97f6225468596320404785ab71cb1e02_ra,w158,h184_pa,w158,h184.png",
"product_link": "https://well.ca/products/revlon-ultra-hd-lip-lacquer_101023.html",
"website_link": "https://well.ca",
"description": "Lip lacquer goes HD with Revlon's innovative wax-free gel technology. Get true color clarity, vivid high-impact shine and a bouncy, lightweight feel. ",
"rating": 5.0,
"category": "lipstick",
"product_type": "lipstick",
"tag_list": [],
"created_at": "2016-10-01T18:25:31.871Z",
"updated_at": "2017-12-23T20:51:00.213Z",
"product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/96.json",
"api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/096/original/open-uri20171223-4-1buvtc3?1514062260",
"product_colors": [
{
"hex_value": "#a41c42",
"colour_name": "HD Carenelian "
},
{
"hex_value": "#d8242f",
"colour_name": "HD Fire Opal "
},
{
"hex_value": "#cc3b75",
"colour_name": "HD Garnet "
},
{
"hex_value": "#f18085",
"colour_name": "HD Petalite "
},
{
"hex_value": "#c8a0bc",
"colour_name": "HD Pink Diamond "
},
{
"hex_value": "#d9198b",
"colour_name": "HD Pink Ruby "
},
{
"hex_value": "#f07b98",
"colour_name": "HD Pink Sapphire "
},
{
"hex_value": "#b55d6d",
"colour_name": "HD Rose Quartz "
},
{
"hex_value": "#894643",
"colour_name": "HD Smoky Quartz "
},
{
"hex_value": "#ce8886",
"colour_name": "HD Smoky Topaz "
},
{
"hex_value": "#e02246",
"colour_name": "HD Strawberry Topaz "
},
{
"hex_value": "#ef5e5f",
"colour_name": "HD Sunstone "
},
{
"hex_value": "#eb4296",
"colour_name": "HD Tourmaline "
}
]
},
{
"id": 95,
"brand": "nyx",
"name": "NYX Jumbo Lip Pencil ",
"price": "5.99",
"price_sign": null,
"currency": null,
"image_link": "https://d3t32hsnjxo7q6.cloudfront.net/i/6b7a0f4f93839573bf046e149d4927df_ra,w158,h184_pa,w158,h184.png",
"product_link": "https://well.ca/products/nyx-jumbo-lip-pencil_106054.html?cat=330",
"website_link": "https://well.ca",
"description": "NYX Jumbo Lip Pencil is a radiant lip liner that also doubles as a lipstick. NYX Jumbo Lip Pencils infuse lips with alluring, nourishing color, and help you create a perfect pout. Features:Line, define and color with one jumbo pencilFormulated with mineral oil which does not dry out your lipsGoes on smoothly for easy applicationComes in a variety of seductive shades",
"rating": 4.0,
"category": "lipstick",
"product_type": "lipstick",
"tag_list": [],
"created_at": "2016-10-01T18:25:30.256Z",
"updated_at": "2017-12-23T21:08:16.260Z",
"product_api_url": "http://makeup-api.herokuapp.com/api/v1/products/95.json",
"api_featured_image": "//s3.amazonaws.com/donovanbailey/products/api_featured_images/000/000/095/original/open-uri20171223-4-e4kg6p?1514063296",
"product_colors": [
{
"hex_value": "#C1486C",
"colour_name": "Chaos (JLP724) Strawberry Pink (Cream) "
},
{
"hex_value": "#C27273",
"colour_name": "Fuschia "
},
{
"hex_value": "#C9528C",
"colour_name": "Hera (JLP722) Iridescent Soft Fuchsia (Pearl) "
},
{
"hex_value": "#BB5F60",
"colour_name": "Honey Nectar (JLP720) Soft Brown "
},
{
"hex_value": "#AA202E",
"colour_name": "Hot Red (JLP704) Bright Blue-Red (Cream) "
},
{
"hex_value": "#975D4F",
"colour_name": "Iced Coffee (JLP711) Deep Beige (Cream) "
},
{
"hex_value": "#A1605E",
"colour_name": "Pecan "
}
]
},
{
"hex_value": "#3E2829",
"colour_name": "Brown "
}
]
}
]}
• HTML • CSS • JAVASCRIPT • DOM • Local Storage • JSON Server
• VS Code • Github
