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, In Masai school, we have given a project to clone the Sugar Cosmatics website. It was a pretty good project to work on. We are five members of the team. The task was to clone the pixel-perfect layout of the Sugar Cosmatics website. Let's look at how we designed it
-
Md Talib Ansari :-
-
Rohan Khurana :-
-
Rishab kumar :-
-
Harshini Usarthi :-
-
Sahid jamal :-
This is Navbar section , Designed by Rohan khurana. He added some functionality in this navbar section like search functionality.
This is login and register page created by Md Talib , on clicking login button login page will appear , there you should have to enter your Mobile Number . On clicking request opt button you will receive Otp enter that otp in bottom of that page. After clicking on Verify button another page will appear there you will have to fill some details of your .
This page was created by Harshini Usarthi . Truly he worked hard on this page because in this page had many additional functionality like images are slide automatic as well as on clicking arrow button . And this page had streaming section where videos are play auto on hovering .
This page was created by Rohan khurana . This makeup page had three sub catagory like Lips , Face , Eyes . You can click any of section you will redirect to that page .
This page was created by Risab Kumar . This page has same functionality as Makeup Page . This page also divided into two pages like Face Brushes and Eyes brushes . If you want to buy face brush related products , simply click on that you will redirect to that page .
This is cart page created by Sahid jamal, In this page you can see all products that you added in you bag or cart , some suggestioin ,Delivery Information and Apply "Add coupon code(sahid30)to get off" too. Here , you can see your total cart product with total price . From here you increase quantity or you can remove the products .
This payment section was created by Risab kumar. Here you can see various type of payment method .
{"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
