diff --git a/amazon-clone-by-suraj-ray.css b/amazon-clone-by-suraj-ray.css new file mode 100644 index 0000000..cde7007 --- /dev/null +++ b/amazon-clone-by-suraj-ray.css @@ -0,0 +1,447 @@ +* { + margin: 0; + padding: 0; + box-sizing: content-box; + font-family: Arial, Helvetica, sans-serif; + color: white; + cursor: pointer; + list-style-type: none; +} + +/* White Border when Hovered */ + +.cart:hover, +.login:hover, +.language:hover, +.return:hover, +#logo:hover, +.location:hover { + border: 1px solid white; +} + +/*Navigation Tab*/ + +.nav { + background-color: #131921; + height: 3.8rem; + justify-content: space-evenly; + display: flex; + align-items: center; +} + +/* Logo outer div*/ + +#logo { + height: 60%; + border: 1px solid transparent; + border-radius: 2px; + display: flex; + align-items: center; + justify-content: center; + padding-top: 0.85rem; +} + +/* logo background inner div */ + +.logo { + background-image: url("https://pngimg.com/d/amazon_PNG11.png"); + background-size: contain; + background-repeat: no-repeat; + width: 6rem; + height: 100%; + margin: 0.4rem 0.5rem; +} + +/* Location */ + +.deliver { + color: #cccccc; + margin-left: 16px; + font-size: 12px; +} + +/* for same Font sizes for language and location */ + +b, +.lang { + font-size: 14px; +} + +/* Invisible Border to all divs so that when hovered border appears, the divs don't change their sizes to apply a border, same height and padding to all divs */ + +.language, +.cart, +.return, +.login, +.location { + padding: 0.5rem 0.4rem 0.3rem 0.4rem; + height: 60%; + border: 1px solid transparent; + border-radius: 2px; +} + +/* Search Bar */ + +.search { + display: flex; + height: 65%; + border: 3px solid transparent; + border-radius: 8px; +} + +.search:hover { + border: orange 3px solid; +} + +/* Drop down menu for choosing categories to search into */ + +#option { + border: none; + width: 3rem; + text-align: center; +} + +.option { + + background-color: #ebecec; + color: #5c5b5b; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + font-size: 12px; +} + +.option:hover { + background-color: #c6c7c7; +} + +/* Input text box for entering search item */ + +input { + padding-left: 7px; + font-size: 13px; + border: none; + width: 42vw; +} + +/* magnifier sign to represent search */ + +.magnifier { + width: 2.85rem; + /* curved borders */ + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: rgb(253, 190, 72); + display: flex; + justify-content: center; + align-items: center; + + i { + color: #333333; + font-size: 1.3rem; + } + +} + +.magnifier:hover { + background-color: rgb(225, 148, 4); +} + +/* Language */ +.language { + display: flex; + color: white; +} + +/* Flag of the chosen country */ + +.flag { + display: flex; + align-items: center; + justify-content: center; +} + +/* Sign in */ + +.lang { + font-weight: bold; + background-color: #131921; +} + +.log { + font-size: 12px; + padding-left: 5px; +} + +#sign { + border: none; +} + +/* return */ + +.return p { + padding: 0; +} + +/* Cart */ + +.cart { + display: flex; + align-items: flex-end; + + /* Cart word after cart symbol */ + + p { + padding: 0.5rem 0.5rem 0.5rem 0; + } +} + +/* Cart symbol */ + +#cart { + font-size: 1.8rem; + padding: 0.5rem 0 0.5rem 0.5rem; + align-self: center; +} + +/* Services Tab */ + +.services { + height: 39px; + background-color: hsl(208, 47%, 16%); + display: flex; + align-items: center; + + p { + font-size: 14px; + padding: 10px 9px; + border: 1px solid transparent; + border-radius: 2px; + } + + p:hover { + border: 1px solid white; + } +} + +/* Hero Section */ + +.hero-section { + height: 210vh; + background-color: #dddfdf; +} + +/* Hero Background Image*/ + +.hero-image { + background-image: url("https://m.media-amazon.com/images/I/61CiqVTRBEL._SX3000_.jpg"); + background-size: cover; + background-repeat: no-repeat; + height: 30rem; + display: flex; + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; + +} + +/* Message and redirection link */ + +.redirect { + height: 2.5rem; + width: 96%; + margin-top: 13rem; + background-color: #f5f6f6; + display: flex; + justify-content: center; + align-items: center; + + p { + text-align: center; + font-size: 0.85rem; + color: black; + } + + a { + color: #007185; + text-decoration: none; + } +} + +/* categories */ + +.category { + height: 70vh; + width: 20%; + background-color: white; + margin: 1.7rem 0; + padding: 1rem 1rem; +} + +.category5, +.category6, +.category7, +.category8 { + margin-top: 0; +} + +/* category Image background */ + +.deals { + background-size: cover; + background-repeat: no-repeat; + height: 80%; + margin: 1rem 0; +} + +/* Category's images */ + +.category1-image { + background-image: url("https://m.media-amazon.com/images/I/41GcOjNuawL._AC_SY460_.jpg"); +} + +.category2-image { + background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/US-hq/2023/img/Consumer_Electronics/XCM_CUTTLE_1555947_2997386_758x608_2X_en_US._SY608_CB594429819_.jpg"); +} + +.category3-image { + background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Events/2023/EBF23/Fuji_Desktop_Single_image_EBF_2x_v1._SY608_CB573698005_.jpg"); +} + +.category4-image { + background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/US-hq/2023/img/Consumer_Electronics/XCM_CUTTLE_1546843_2940864_758x608_2X_en_US._SY608_CB613273467_.jpg"); + height: 74%; +} + +.category5-image { + background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Fuji/2021/September/DashboardCards/Fuji_Dash_SmartWatch_2X._SY608_CB639922111_.jpg"); + height: 74%; +} + +.category6-image { + background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Events/2023/EBF23/Fuji_Desktop_Single_image_EBF_2x_v3._SY608_CB573698005_.jpg"); +} + +.category7-image { + background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/AmazonExports/Events/2024/LunarNY/Fuji_Single_card_Lunar_New_Year_Graphics_2x_EN._SY608_CB585956471_.jpg"); +} + +.category8-image { + background-image: url("https://images-na.ssl-images-amazon.com/images/G/01/us-manual-merchandising/XCM_CUTTLE_1622894_3373440_758x608_2X_en_size1_US._SY608_CB597469214_.jpg"); +} + +/* category headings */ + +.header { + font-weight: bolder; + font-size: 1.3rem; + color: #0f1111; + +} + +/* Shop now button below Category Images*/ + +.link { + text-decoration: none; + font-size: 0.85rem; + color: #007185; +} + +.link:hover { + color: orange; +} + + +/* Category 1 offer */ + +.category1-image { + background-size: contain; +} + +.top { + height: 61%; +} + +#offer { + display: flex; + align-items: center; + font-size: 0.85rem; + + b { + margin-left: 0.5rem; + color: rgb(201, 4, 4); + } + +} + +.offer { + padding: 0.3rem; + margin: 0.5rem 0; + background-color: rgb(201, 4, 4); +} + +.name { + margin-bottom: 1rem; + color: black; + font-size: 0.85rem; +} + +/* Back to Top Button */ + +.back-to-top { + padding: 1rem; + font-size: 0.85rem; + background-color: #38475a; + text-align: center; + + a { + text-decoration: none; + + } +} + +.back-to-top:hover { + background-color: #4b596c; +} + +/* Footer with List of links*/ + +.foot { + background-color: #232f3e; + height: 65vh; + display: flex; + justify-content: space-evenly; + align-items: flex-start; + padding-top: 2rem; +} + +.heading { + font-weight: 900; +} + +li, +#copyright { + font-size: 13px; + margin: 1rem; + color: #dddddd; +} + +li:hover:not(.heading) { + text-decoration: underline; +} + +/* Copyrights Section */ + +.copyright { + background-color: #131a22; + padding: 1rem; + text-align: center; + + ul { + display: flex; + justify-content: center; + } + + li { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..531fb21 --- /dev/null +++ b/index.html @@ -0,0 +1,232 @@ + + + + + + + Amazon by Suraj Ray + + + + + + + + + + + + + + + + + + +
+
+
+

You are on amazon.com. You can also shop on Amazon India for millions of product with fast local + delivery. Click here to go to + amazon.in +

+
+ +
+

Top Deal

+
+
+

Up to 29% off

+ Deal +
+

Sports Research Dietary Supplements

+ See all deals +
+
+

New year, new supplies

+
+ Shop office products +
+ +
+

Deals in Pcs

+
+ Shop now +
+ +
+

Player's paradise start here

+
+ Shop video games +
+ +
+

Shop activity trackers and smartwatches

+
+ Shop now +
+ + +
+

Toys under $25

+
+ Shop now +
+ +
+

Lunar New Year

+
+ Shop now +
+ +
+

Laptops for every need

+
+ Find your laptop here +
+
+
+ + + + + + + + \ No newline at end of file