diff --git a/Front-end-Projects/Basic/Amazon-Clone/README.md b/Front-end-Projects/Basic/Amazon-Clone/README.md new file mode 100644 index 00000000..598441db --- /dev/null +++ b/Front-end-Projects/Basic/Amazon-Clone/README.md @@ -0,0 +1,61 @@ +

🌟 Amazon Clone 🌟

+ +

Tech Stack Used đŸ’ģ

+
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + +## :zap: Description 📃 +It's an landing page clone of `Amazon.com` with attention to details for every part of this page, using HTML, CSS. Hope you would love it + + +## :zap: How to run it? 🕹ī¸ + +
+

To run this project locally, follow these steps: + +1. Fork the repository. + +2. Clone the repository to your local machine: + + ```bash + + git clone < https-link > + + ``` + +4. Open the project folder in your preferred code editor, and run the `index.html` file now you can view this page in live. + +

+
+ + + +## :zap: Screenshots 📸 + + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Suvadip Sana

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/cartLogo.png b/Front-end-Projects/Basic/Amazon-Clone/assets/cartLogo.png new file mode 100644 index 00000000..28f2a507 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/cartLogo.png differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/favicon.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/favicon.jpg new file mode 100644 index 00000000..1eb3d03d Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/favicon.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/flag.png b/Front-end-Projects/Basic/Amazon-Clone/assets/flag.png new file mode 100644 index 00000000..c41889a7 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/flag.png differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/footerLogo.png b/Front-end-Projects/Basic/Amazon-Clone/assets/footerLogo.png new file mode 100644 index 00000000..fefa9913 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/footerLogo.png differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image1.1.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image1.1.jpg new file mode 100644 index 00000000..9e982371 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image1.1.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image1.2.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image1.2.jpg new file mode 100644 index 00000000..03a2df40 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image1.2.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image1.3.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image1.3.jpg new file mode 100644 index 00000000..1fc2101d Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image1.3.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image1.4.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image1.4.jpg new file mode 100644 index 00000000..f45aff0a Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image1.4.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image10.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image10.jpg new file mode 100644 index 00000000..2fb7e8de Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image10.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image11.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image11.jpg new file mode 100644 index 00000000..bd6dd6db Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image11.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image12.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image12.jpg new file mode 100644 index 00000000..cfdbe3e2 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image12.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image13.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image13.jpg new file mode 100644 index 00000000..9172db05 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image13.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image2.1.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.1.jpg new file mode 100644 index 00000000..39e7a6eb Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.1.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image2.2.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.2.jpg new file mode 100644 index 00000000..241d2e4e Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.2.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image2.3.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.3.jpg new file mode 100644 index 00000000..22e3abd3 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.3.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image2.4.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.4.jpg new file mode 100644 index 00000000..00d77b2d Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.4.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image2.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.jpg new file mode 100644 index 00000000..d84c8f52 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image2.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image4.1.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.1.jpg new file mode 100644 index 00000000..ab189c1c Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.1.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image4.2.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.2.jpg new file mode 100644 index 00000000..78a33c33 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.2.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image4.3.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.3.jpg new file mode 100644 index 00000000..77cfb21e Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.3.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image4.4.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.4.jpg new file mode 100644 index 00000000..261f9625 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.4.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image4.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.jpg new file mode 100644 index 00000000..0a117ce4 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image4.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image6.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image6.jpg new file mode 100644 index 00000000..80604d88 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image6.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image7.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image7.jpg new file mode 100644 index 00000000..de6f3392 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image7.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/image9.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/image9.jpg new file mode 100644 index 00000000..1abe032a Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/image9.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/logo.png b/Front-end-Projects/Basic/Amazon-Clone/assets/logo.png new file mode 100644 index 00000000..65d1e879 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/logo.png differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/main.jpg b/Front-end-Projects/Basic/Amazon-Clone/assets/main.jpg new file mode 100644 index 00000000..c0d0cf89 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/main.jpg differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/assets/smallImage.png b/Front-end-Projects/Basic/Amazon-Clone/assets/smallImage.png new file mode 100644 index 00000000..f9319ba6 Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/assets/smallImage.png differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/index.html b/Front-end-Projects/Basic/Amazon-Clone/index.html new file mode 100644 index 00000000..047fff4c --- /dev/null +++ b/Front-end-Projects/Basic/Amazon-Clone/index.html @@ -0,0 +1,396 @@ + + + + + + Amazon + + + + + +
+ +
+ + + +
+
+

Deliver to

+
+ +

India

+
+
+
+ +
+ + +
+ +
+
+ +
+
+ flag + +
+
+ +
+ +
+ +
+
+

Returns &

+

Orders

+
+
+ +
+
+ +

Cart

+
+
+ +
+ +
+ +
+ +

All

+
+ +
+
+ Today's Deals +
+
+ Customer Service +
+
+ Registry +
+
+ Gift Cards +
+
+ Sell +
+
+ +
+ +
+ +
+
+

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

+
+
+ +
+ +
+
+

A whole new way to work

+
+ Shop personal computers +
+
+ +
+
+

Handpicked music & audio

+
+ +
+ +
+
+
+
+

Headphones

+
+
+ +
+
+
+
+

Guitars

+
+
+ +
+
+
+
+

Keyboards

+
+
+ +
+
+
+
+

Microphones

+
+
+ +
+ +
+ See more +
+
+ +
+
+

Upgrade your office furniture

+
+ Shop now +
+
+ +
+
+

Creating business solutions

+
+ See more software products +
+
+ + +
+
+

Player's paradise starts here

+
+ Shop video games +
+
+ +
+
+

Shop activity trackers and smartwatches

+
+ Shop now +
+
+ +
+
+

Warm & welcoming decor

+
+ See more +
+
+ +
+
+

Refresh yourself & your space

+
+ +
+ +
+
+
+
+

Dining

+
+
+ +
+
+
+
+

Home

+
+
+ +
+
+
+
+

Kitchen

+
+
+ +
+
+
+
+

Health and Beauty

+
+
+ +
+ +
+ Shop now +
+
+ +
+
+

Curated furniture to enhance your home

+
+ See more +
+
+ +
+
+

Shop deals in Fashion

+
+ +
+ +
+
+
+
+

Shoes under $50

+
+
+ +
+
+
+
+

Jeans under $50

+
+
+ +
+
+
+
+

Tops under $25

+
+
+ +
+
+
+
+

Dresses under $30

+
+
+ +
+ +
+ See more +
+
+ +
+
+

Personal Care under $25

+
+ Shop now +
+
+ +
+
+

Deals on shoes

+
+ Explore more +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/Front-end-Projects/Basic/Amazon-Clone/screenshot.webp b/Front-end-Projects/Basic/Amazon-Clone/screenshot.webp new file mode 100644 index 00000000..3d1da49f Binary files /dev/null and b/Front-end-Projects/Basic/Amazon-Clone/screenshot.webp differ diff --git a/Front-end-Projects/Basic/Amazon-Clone/style.css b/Front-end-Projects/Basic/Amazon-Clone/style.css new file mode 100644 index 00000000..5393901b --- /dev/null +++ b/Front-end-Projects/Basic/Amazon-Clone/style.css @@ -0,0 +1,983 @@ +*{ + margin: 0; + padding: 0; + border: border-box; + font-family: Arial; +} + +.navbar{ + height: 60px; + color: white; + background-color: #0f1111; + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.border{ + border: 1.5px solid transparent; + border-radius: 3px; +} + +.border:hover{ + border: 1.5px solid rgb(203, 203, 203); + border-radius: 3px; + cursor: pointer; +} + +/* Box 1 Style(amazon-logo) */ + +.amazon-logo{ + height: 50px; + width: 110px; + margin: 1px; +} + +.logo{ + background-image: url("assets/logo.png"); + height: 50px; + width: 100%; + background-size: cover; +} + +/* Box 2 Style(address) */ + +.address{ + padding: 8px 4px 8px 4px; +} + +.first-add{ + font-size:0.9rem; + color: #cccccc; + margin-left: 15px; +} + +.icon-location{ + display: flex; +} + +.location{ + color: #ffffff; + font-size: 1rem; + font-weight: 600; + margin-left: 4px; +} + +/* Box 3 Style(search-box) */ + +.search-box{ + width: 890px; + height: 40px; + border-radius: 5px; + display: flex; + justify-content: space-evenly; + background-color: white; + cursor: pointer; +} + +.search-box:active{ + border: 3px solid orange; + border-radius: 8px; +} + +.search-box:hover{ + border: 3px solid orange; + border-radius: 8px; +} + +.select{ + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border: none; + border-right: 1.5px solid #a4a5a5; + outline: none; + font-size: 14px; + width: 50px; + text-align: center; + background-color: #e6e6e6; + cursor: pointer; +} + +.search-input{ + width: 100%; + margin-left: 8px; + font-size: 1rem; + border: none; + outline: none; +} + +.search-input::placeholder{ + font-size: 1.1rem; +} + +.search-icon{ + width: 50px; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.4rem; + color: #0f1111; + background-color: #febd68; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} + +/* Box 4 Style(language) */ + +.language2{ + padding: 16px 4px 12px 4px; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.flag{ + width: 21.6px; + height: 20.5px; +} + +.lang{ + background-color: transparent; + color: white; + border: none; + outline: none; + padding-left: 4px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; +} + +/* Box 5 Style(account1) */ + +.account{ + padding: 8px 7px 8px 7px; +} + +span{ + font-size: 0.7rem; + font-weight: 500; +} + +.second-line{ + font-size: 0.9rem; + font-weight: 700; +} + +/* Box6 Style(Order1) */ + +.order{ + padding: 8px 7px 8px 7px; +} + +/* Box7 Style(cart) */ + +.cart{ + padding: 8px 7px 5px 7px; + display: flex; + justify-content: center; + align-items: center; +} + +.cartlogo{ + width: 40px; + height: 32px; +} + +.cart p{ + padding-top: 18px; +} + +/* Panel Style(panel) */ + +.panel{ + height: 40px; + background-color: #222f3d; + color: #ffffff; + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.all{ + display: flex; + height: 40px; + width: 50px; + align-items: center; + justify-content: center; +} + +.all i{ + font-size: 18px; +} + +.all p{ + font-size: 0.9rem; + padding-left: 3px; + font-weight: 700; +} + +.options{ + width: 93%; + display: flex; + padding-left: 5px; +} + +.op{ + height: 40px; + display: flex; + align-items: center; +} + +.options a{ + color: #ffffff; + text-decoration: none; + font-size: 0.9rem; + margin-left: 8px; + padding-right: 8px; +} + +/* Main Section Style */ + +.main-section{ + background-image: url("assets/main.jpg"); + mask-image: linear-gradient(to bottom, #000000 50%, transparent 100%); + background-size: cover; + max-width: 100%; + height: 600px; + display: flex; + justify-content: center; + align-items: flex-end; +} + +.main-message{ + background-color: #ffffff; + color: #0f1111; + height: 40px; + width: 97%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 308px; +} + +.main-message p{ + font-size: 0.9rem; +} + +.main-message a{ + text-decoration: none; + font-size: 0.9rem; + color: #007185; +} + +/* Shop Section Style*/ + +.box-section{ + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + background-color: #eeeeee; + padding-bottom: 25px; + margin-top: -20.1vw; +} + +.box{ + height: 420px; + width: 23%; + background-color: #ffffff; + padding: 25px 0px 15px; + margin-top: 25px; + z-index: 1; +} + +.box-image{ + height: 325px; + background-size: cover; + margin-top: 1rem; + margin-bottom: 1rem; + cursor: pointer; +} + +.box-content{ + margin-left: 1.3rem; + margin-right: 1.3rem; +} + +.box-content h2{ + font-size: 1.32rem; +} + +.box-content a{ + text-decoration: none; + font-size: 14px; + color: #007185; + padding-top: -20px; + cursor: pointer; +} + +/* For Squadren Image Style */ + +.squad-images{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +.squad-box{ + width: 47%; +} + +.squad-box-image{ + height: 17vh; + background-size: cover; +} + +.squad-box-content p{ + font-size: 13px; + padding-top: 3px; +} + +.push{ + margin-top: 30px; +} + +/* Footer Style*/ + +.pannel1{ + height: 50px; + background-color: #37475a; + color: #ffffff; + font-size: 0.85rem; + display: flex; + align-items: center; + justify-content: center; +} + +.pannel2{ + background: linear-gradient(180deg, #1f2b37, #25323f, #273849); + color: #ffffff; + height: 480px; + display: flex; + justify-content: space-evenly; +} + +.pannel2 p{ + font-size: 1rem; + font-weight: 600; +} + +.pannel2 a{ + color: #ffffff; + text-decoration: none; + font-size: 0.85rem; +} + +ul{ + margin-top: 50px; +} + +ul a{ + padding-top: 30px; + display: block; + color: #dddddd; +} + +.pannel3{ + background-color: #1f2b37; + height: 75px; + display: flex; + align-items: center; + justify-content: center; +} + +.foot-logo{ + background-image: url("assets/logo.png"); + width: 150px; + height: 60px; + background-size: cover; +} + +.pannel4{ + height: 80px; + background-color:#19222c; + color: #ffffff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.redirect a{ + text-decoration: none; + font-size: 0.75rem; + color: #ffffff; + padding-left: 15px; +} + +.copy-right { + margin-top: 5px; + font-size: 0.75rem; + text-align: center; +} + +.copy-right span{ + font-size: 1rem; + font-weight: 600; +} + +@media (min-width: 481px) and (max-width: 800px) { + + *{ + margin: 0; + padding: 0; + border: border-box; + font-family: Arial; + } + + .navbar{ + font-size: 20px; + } + + .amazon-logo{ + height: 43px; + margin-left: 6px; + } + + .logo{ + background-image: url("assets/footerLogo.png"); + background-size: contain; + background-repeat: no-repeat; + margin-top: 10px; + width: 67px; + } + + .add{ + margin-left: 3px; + } + + .address{ + width: 55px; + height: 25px; + margin-right: 10px; + } + + .first-add{ + font-size: 0.6rem; + margin-left: 11px; + margin-bottom: 5px; + } + + .location{ + font-size: 0.9rem; + margin-left: 2px; + } + + .icon-location i{ + font-size: 0.7rem; + } + + .select{ + width: 37px; + font-size: 12px; + } + + .search-box{ + height: 36px; + } + + .search-input{ + font-size: 0.9rem; + } + + .search-input::placeholder{ + font-size: 0.9rem; + } + + .search-icon{ + font-size: 1.3rem; + } + + .language{ + display: none; + } + + .account{ + margin-left: 8px; + width: 45px; + } + + .second-line{ + font-size: 0.75rem; + } + + .order{ + height: 30px; + margin-left: 5px; + } + + .gu{ + margin-top: 5px; + } + + .account span, .order span{ + display: none; + } + + .cart{ + height: 30px; + margin-right: 8px; + } + + .cartlogo{ + height: 30px; + width: 30px; + } + + .ghu{ + margin-bottom: 10px; + } + + .options a{ + font-size: 0.8rem; + margin-left: 8px; + } + + .all{ + margin-right: -8px; + } + + .all i{ + font-size: 0.8rem; + } + + .all p{ + font-size: 0.9rem; + padding-left: 5px; + padding-top: 3px; + font-weight: 700; + } + + .main-section { + height: 420px; + background-size: contain; + background-repeat: no-repeat; + margin-bottom: 180px; + } + + .main-message { + width: 90%; + border-radius: 5px; + height: 45px; + margin-bottom: 22vh; + text-align: center; + color: #000000; + padding: 3px 3px 3px 3px; + } + + .main-message p{ + font-size: 0.73rem; + } + + .main-message a{ + font-size: 0.8rem; + } + + .box-section { + margin-top: -55.1vw; + margin-bottom: -10px; + } + + .box { + margin-top: 25px; + height: 16rem; + width: 45%; + padding-top: 15px; + } + + .box-image { + height: 22vh; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .box-content h2 { + font-size: 0.8rem; + } + + .box-content a { + font-size: 12px; + } + + .squad-box-image{ + height: 9vh; + background-size:cover; + } + + .squad-box-content{ + margin-bottom: -20px; + } + + .squad-box-content p{ + font-size: 0.5rem; + + } + + .push{ + margin-top: 2rem; + } + + .pannel1{ + height: 37px; + font-size: 0.65rem; + } + + .pannel2{ + height: 300px; + } + + .pannel2 p{ + font-size: 0.9rem; + font-weight: 600; + } + + .pannel2 a{ + color: #ffffff; + text-decoration: none; + font-size: 0.7rem; + } + + ul{ + margin-top: 40px; + } + + .big{ + display: none; + } + + ul a{ + padding-top: 15px; + display: block; + color: #dddddd; + } + .pannel3{ + height: 50px; + } + + .foot-logo{ + margin-top: 20px; + background-size: contain; + background-repeat: no-repeat; + width: 100px; + } + + .pannel4{ + height: 80px; + background-color:#19222c; + color: #ffffff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .redirect a{ + text-decoration: none; + font-size: 0.7rem; + color: #ffffff; + padding-left: 15px; + } + + .copy-right { + margin-top: 5px; + font-size: 0.65rem; + text-align: center; + } + + .copy-right span{ + font-size: 0.9rem; + font-weight: 600; + } +} + +@media (max-width: 480px) { + + *{ + margin: 0; + padding: 0; + border: border-box; + font-family: Arial; + } + + .navbar{ + font-size: 10px; + } + + .amazon-logo{ + height: 37px; + margin-left: 4px; + } + + .logo{ + background-image: url("assets/smallImage.png"); + background-size: contain; + background-repeat: no-repeat; + margin-bottom: -15px; + height: 35px; + width: 35px; + } + + .add{ + margin-left: -3px; + } + + .address{ + width: 30px; + margin-right: 10px; + } + + .first-add{ + font-size: 0.4rem; + margin-left: 1px; + } + + .location{ + font-size: 0.7rem; + margin-left: 2px; + } + + .icon-location i{ + display: none; + } + + .select{ + width: 20px; + font-size: 9px; + } + + .search-box{ + height: 30px; + } + + .search-box:hover{ + border: 2px solid orange; + border-radius: 5px; + } + + .search-box:active{ + border: 2px solid orange; + border-radius: 5px; + } + + .search-input{ + font-size: 0.7rem; + } + + .search-input::placeholder{ + font-size: 0.6rem; + } + + .search-icon{ + font-size: 16px; + } + + .language{ + display: none; + } + + .account{ + margin-left: 8px; + } + + .second-line{ + font-size: 10px; + } + + .order{ + height: 20px; + } + + .gu{ + margin-top: 5px; + } + + .account span, .order span{ + display: none; + } + + .cart{ + height: 25px; + } + + .cartlogo{ + height: 20px; + width: 20px; + } + + .ghu{ + margin-bottom: 10px; + } + + .options a{ + font-size: 10px; + margin-left: 5px; + } + + .all{ + margin-right: -8px; + } + + .all i{ + font-size: 12px; + } + + .all p{ + font-size: 0.6rem; + padding-left: 5px; + padding-top: 3px; + font-weight: 700; + } + + .main-section { + height: 200px; + margin-bottom: 180px; + } + + .main-message { + width: 67%; + border-radius: 5px; + height: 25px; + margin-bottom: 6vh; + text-align: center; + color: #000000; + padding: 3px 3px 3px 3px; + z-index: 3; + } + + .main-message p{ + font-size: 0.5rem; + } + + .main-message a{ + font-size: 0.55rem; + } + + .box-section { + margin-top: -50.1vw; + margin-bottom: -10px; + } + + .box { + margin-top: 15px; + height: 16rem; + width: 45%; + padding-top: 15px; + } + + .box-image { + height: 22vh; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .box-content h2 { + font-size: 0.8rem; + } + + .box-content a { + font-size: 12px; + } + + .squad-box-image{ + height: 9vh; + background-size:cover; + } + + .squad-box-content{ + margin-bottom: -20px; + } + + .squad-box-content p{ + font-size: 0.5rem; + + } + + .push{ + margin-top: 2rem; + } + + .pannel1{ + height: 37px; + font-size: 0.65rem; + } + + .pannel2{ + height: 300px; + } + + .pannel2 p{ + font-size: 0.57rem; + font-weight: 600; + } + + .pannel2 a{ + color: #ffffff; + text-decoration: none; + font-size: 0.4rem; + } + + ul{ + margin-top: 40px; + } + + .big{ + display: none; + } + + ul a{ + padding-top: 15px; + display: block; + color: #dddddd; + } + + .pannel3{ + height: 60px; + } + + .foot-logo{ + background-image: url("assets/footerLogo.png"); + margin-top: 28px; + background-size: contain; + background-repeat: no-repeat; + width: 100px; + } + + .pannel4{ + height: 60px; + background-color:#19222c; + color: #ffffff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .redirect a{ + text-decoration: none; + font-size: 0.55rem; + color: #ffffff; + padding-left: 15px; + } + + .copy-right { + margin-top: 5px; + margin-bottom: 7px; + font-size: 0.58rem; + text-align: center; + } + + .copy-right span{ + font-size: 0.8rem; + font-weight: 600; + } +} diff --git a/Front-end-Projects/README.md b/Front-end-Projects/README.md index 2cbe4f0f..dc36b476 100644 --- a/Front-end-Projects/README.md +++ b/Front-end-Projects/README.md @@ -42,6 +42,12 @@ |:--:|:--:|:--:| | [Starbucks Landing page](./Basic/Starbucks-Landing-page) | [Survey Form](./Basic/Survey-Form) | [Sidebar Menu](./Basic/Sidebar-Menu) | +#### :zap: Row 6 + +| | | | +|:--:|:--:|:--:| +| [Amazon Clone](./Basic/Amazon-Clone) | | | + ---