diff --git a/Amazon clone/Images/cart.png b/Amazon clone/Images/cart.png new file mode 100644 index 00000000..e5508fbc Binary files /dev/null and b/Amazon clone/Images/cart.png differ diff --git a/Amazon clone/Images/logo.jpg b/Amazon clone/Images/logo.jpg new file mode 100644 index 00000000..5f23b612 Binary files /dev/null and b/Amazon clone/Images/logo.jpg differ diff --git a/Amazon clone/Images/logo2.png b/Amazon clone/Images/logo2.png new file mode 100644 index 00000000..b62146b6 Binary files /dev/null and b/Amazon clone/Images/logo2.png differ diff --git a/Amazon clone/index.html b/Amazon clone/index.html new file mode 100644 index 00000000..a7eb32db --- /dev/null +++ b/Amazon clone/index.html @@ -0,0 +1,279 @@ + + + + + + + Amazon + + + + + +
+ + +
+ +
+
+
+

Top Picks for your home

+ +

See more

+
+ +
+

Top rated, premium quality | Amazon brand & more

+ +

See more

+
+ +
+

Shop & Pay | Earn rewards daily

+ +

See more

+
+ +
+

Sign in for your best experience

+ +
+
+
+ + +
+
+

Related items you've viewed

+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+ + +
+
+

Best seller in fitness and outdoors

+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+ + +
+
+

From browsing history

+ +
+
+ + +
+
+

See personalised recommendation

+ +

New customer + Start here. +

+ +
+
+ + + + + \ No newline at end of file diff --git a/Amazon clone/product.css b/Amazon clone/product.css new file mode 100644 index 00000000..37502baa --- /dev/null +++ b/Amazon clone/product.css @@ -0,0 +1,92 @@ +.product-heading{ + width: 100%; + height: 100px; + display: flex; + align-items: center; +} + +.product-heading .product-container{ + margin: 20px; +} + +.product-heading .product-container h1{ + font-size: 30px; + font-weight: bold; + color: #000; +} + +/* section 2 */ +.product-detail{ + width: 100%; + height: 700px; +} + +.product-detail .product-container{ + margin: 20px; + display: flex; + flex-direction: row; + align-items: flex-start; +} + +.product-detail .product-container .product-picture{ + width:45%; +} + +.product-detail .product-container .product-picture img{ + border-radius: 15px; + box-shadow: 0 0 10px rgba(50, 50, 50, 0.1); + width: 70%; +} + +.product-detail .product-container .product-detail-body{ + width: 50%; +} + +.product-detail .product-container .product-detail-body .product-title{ + font-size: 25px; + font-weight: 500; + color:#121212; +} + +.product-detail .product-container .product-detail-body .product-price{ + margin-top: 10px; + font-size: 28px; + font-weight: 500; +} + +.product-detail .product-container .product-detail-body .product-about{ + margin-top: 10px; + color:#121212; +} + +.product-detail .product-container .product-detail-body .product_about h4{ + font-size: 20px; + font-weight: 500; + color: #121212; +} + +.product-detail .product-container .product-detail-body .product_about ul{ + padding-left: 40px; +} +.product-detail .product-container .product-detail-body .buttons{ + margin-top: 20px; + display: flex; + gap:2px; +} +.product-detail .product-container .product-detail-body .buttons .buy-now{ + width: 50%; + border:none; + background-color: #ffa41c; + color: white; + padding: 8px; + border-radius: 10px; +} + +.product-detail .product-container .product-detail-body .buttons .Add-to-cart{ + width: 50%; + border:2px solid #ffa41c; + background-color:transparent; + color: #ffa41c; + padding: 8px; + border-radius: 10px; +} \ No newline at end of file diff --git a/Amazon clone/product.html b/Amazon clone/product.html new file mode 100644 index 00000000..e0e5f5a5 --- /dev/null +++ b/Amazon clone/product.html @@ -0,0 +1,77 @@ + + + + + + + Product + + + + + + +
+ + +
+ + +
+
+

Acer aspire

+
+
+ + +
+
+
+ +
+
+

Acer Aspire 5 A515-45-R74Z Slim Laptop

+

₹40,000

+
+

About this product

+
    +
  • AMD Ryzen 5 5500U Hexa-Core Mobile Processor with AMD Radeon Graphics +
  • + +
  • 15.6" Full HD (1920 x 1080) Widescreen LED-backlit IPS Display
  • +
  • 8GB DDR4 Onboard Memory and 256GB NVMe SSD
  • +
  • 1 - USB 3.2 (Type-C) Gen 1 port (up to 5 Gbps) | 2 - USB 3.2 Gen 1 Ports (one with Power-off Charging) | 1 - USB 2.0 Port | 1 - HDMI 2.0 Port with HDCP support
  • +
  • Wi-Fi 6 | Backlit Keyboard | Up to 11 Hours Battery Life | Comes with Windows 11 Home
  • +
+
+ +
+ + +
+
+
+
+ + \ No newline at end of file diff --git a/Amazon clone/style.css b/Amazon clone/style.css new file mode 100644 index 00000000..a56da761 --- /dev/null +++ b/Amazon clone/style.css @@ -0,0 +1,289 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); + +*{ + margin: 0; + padding: 0; + font-family: Poppins,sans-serif; +} + +/* VARIABLE */ +:root{ + --major-bg-color:#131921; + --minor-bg-color:#ebeded; + --amazon-major-color:#febd68; +} + +/* BODY */ +body{ + background-color: var(--minor-bg-color); +} + +/* HEADER */ +.header{ + width: 100%; + height: 50px; + background-color: var(--major-bg-color); + display: flex; + justify-content: center; +} + +.header .header-nav{ + margin-top: 2px; + display: flex; + justify-content: center; +} + +.header .header-nav .header-container{ + width: 1200px; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header .header-nav .header-container .logo{ + width: 100px; +} + +.header .header-nav .header-container .header-search{ + width: 50%; + display: flex; + justify-content: center; + align-content: center; + align-items: center; +} + +.header .header-nav .header-container .header-search .search-input{ + width: 100%; + height: 40px; + border: 1px solid #ccc; + padding: 0 10px; +} + +.header .header-nav .header-container .header-search .search-button{ + width: 40px; + height: 42px; + background-color: var(--amazon-major-color); + border: 1px solid #ccc; + display: flex; + justify-content: center; + align-items: center; + align-content: center; + color:#000; +} + +.header .header-nav .header-container .header-cart{ + color: white; + display: flex; + justify-content: center; + align-items: center; +} + +.header .header-nav .header-container .header-cart svg{ + width: 42px; + height: 42px; +} + +/* Section-1 */ + +.section-1{ + width: 100%; + height: auto; + background: url('https://images-eu.ssl-images-amazon.com/images/G/31/img22/Fashion/Gateway/BAU/Aug/Apay/GW-PC-Deals-Unrec-3000._CB629506848_.jpg'); + background-size: cover; + background-size: cover; + display: flex; +} + +.section-1 .section-1-container{ + margin-top: 300px; + margin-right: 20px ; + margin-left: 20px; + margin-bottom: 20px; + display: flex; + justify-content: center; + align-items: flex-start; + gap: 20px; +} + +.section-1 .section-1-container .section-1-column{ + width:100%; + background-color: white; + padding: 20px; +} + +.section-1 .section-1-container .section-1-column img{ + margin-top: 20px; + width: 100%; + height: auto; +} + +.section-1 .section-1-container .section-1-column p{ + margin-top: 10px; + font-size: 14px; + color: #007185; +} + +.section-1 .section-1-container .section-1-column button{ + margin-top: 20px; + width: 100%; + border: none; + background-color: var(--amazon-major-color); + padding: 0px; + border-radius: 12px; +} + +/* SECTION-2 */ + +.section-2{ + margin: 20px; + padding: 20px; + background-color: white; +} + +.section-2 .section-2-container .product-cards{ + display: flex; + justify-content: flex-start; + align-items: center; + gap: 10px; + flex-wrap: nowrap; + overflow: auto; + padding :2px; +} + +.section-2 .section-2-container h3{ + margin-bottom: 10px; +} + +.section-2 .section-2-container .product-cards .product-card{ + display: inline-block; + width: 300px !important; + flex : 0 0 auto; + justify-content: center; + align-items: center; +} + +.section-2 .section-2-container .product-cards .product-card img{ + width:auto; + height: auto; + max-width: 270px;; + max-height: 200px; +} + +/* SECTION -3 */ +.section-3{ + background-color:white; +} + +.section-3 .section-3-container{ + margin:20px; + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 20px; + +} + +.section-3 .section-3-container h3{ + padding: 5px; + /* border:#000 solid; */ +} + +.section-3 .section-3-container .product-detail-cards{ + display: flex; + justify-content: flex-start; + align-items: center; + gap:20px; + flex-wrap:nowrap; + overflow: auto; +} + + +.section-3 .section-3-container .product-detail-cards .product-detail-card{ + display: inline-block; + width: 220px; + max-width: 300px; + flex: 0 0 auto; + flex-direction: column; + /* flex-direction: row; */ + justify-content: center; + /* border:red solid; */ + align-items: center; + gap :10; +} + +.section-3 .section-3-container .product-detail-cards .product-detail-card .star-rating .checked{ + color: orange; + padding: 2px; +} + +.section-3 .section-3-container .product-detail-cards .product-detail-card .product-detail-img +{ + margin-top: 0px; + max-height: 200px; + /* border: #febd68 solid; */ +} +.section-3 .section-3-container .product-detail-cards .product-detail-card .product-detail-img img +{ + margin-top: 20px; + align-items: center; + width:auto; + height: auto; + max-width: 200px;; + max-height: 200px; + /* border:#000 solid; */ + justify-content: center; +} + +.section-3 .section-3-container .product-detail-cards .product-detail-card a +{ + font-size: 15px; +} + +.section-3 .section-3-container .product-detail-cards .product-detail-card a:hover +{ + color:darkred; +} + +/* SECTION 4 */ +.section-4{ + padding: 20px; +} + +.section-4 .section-4-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.section-4 .section-4-container p{ + margin-top:4px; + font-size: 20px; +} + +.section-4 .section-4-container .customer +{ + font-size: 10px; +} + +.section-4 .section-4-container button{ + width: 300px; + padding:8px; + background:var(--amazon-major-color); + border-radius: 10px; + padding: 8px; + margin-top: 5px; +} + +footer{ + margin-top: 20px; + font-size: 12px; + width: 100%; + height: 50px; + color: white; + background-color: var(--major-bg-color); + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file