diff --git a/Assets-1/eye.png b/Assets-1/eye.png deleted file mode 100644 index 2299071..0000000 Binary files a/Assets-1/eye.png and /dev/null differ diff --git a/Assets-1/google-logo-9824.png b/Assets-1/google-logo-9824.png deleted file mode 100644 index b5b9bdd..0000000 Binary files a/Assets-1/google-logo-9824.png and /dev/null differ diff --git a/Assets-1/hidden.png b/Assets-1/hidden.png deleted file mode 100644 index b05e4c0..0000000 Binary files a/Assets-1/hidden.png and /dev/null differ diff --git a/Assets-1/index.txt b/Assets-1/index.txt deleted file mode 100644 index 5ab2f8a..0000000 --- a/Assets-1/index.txt +++ /dev/null @@ -1 +0,0 @@ -Hello \ No newline at end of file diff --git a/Assets-1/logo.png b/Assets-1/logo.png deleted file mode 100644 index af6c78d..0000000 Binary files a/Assets-1/logo.png and /dev/null differ diff --git a/Assets-1/price-tag.png b/Assets-1/price-tag.png deleted file mode 100644 index dc1e59c..0000000 Binary files a/Assets-1/price-tag.png and /dev/null differ diff --git a/Assets-1/worker.png b/Assets-1/worker.png deleted file mode 100644 index 4dd7a8d..0000000 Binary files a/Assets-1/worker.png and /dev/null differ diff --git a/Local storage.txt b/Local storage.txt deleted file mode 100644 index 34af0b3..0000000 --- a/Local storage.txt +++ /dev/null @@ -1,9 +0,0 @@ ---> Sign up page:- - 1. userData(for storing data of new users) - Key:- userName , userEmail , userPassword , userPhone , userId - ---> Sign in page:- - 1. tempUserData (For storing temproray data) - key:- Name , Email , memberID - ---> Add Your's \ No newline at end of file diff --git a/Payment page (AS)/Assets/logo.png b/Payment page (AS)/Assets/logo.png deleted file mode 100644 index af6c78d..0000000 Binary files a/Payment page (AS)/Assets/logo.png and /dev/null differ diff --git a/Payment page (AS)/Assets/visa-mastercard-discover-american-express-icons-21635415958rgxaunvs7z.png b/Payment page (AS)/Assets/visa-mastercard-discover-american-express-icons-21635415958rgxaunvs7z.png deleted file mode 100644 index a7265c2..0000000 Binary files a/Payment page (AS)/Assets/visa-mastercard-discover-american-express-icons-21635415958rgxaunvs7z.png and /dev/null differ diff --git a/Payment page (AS)/checkoutPage.css b/Payment page (AS)/checkoutPage.css deleted file mode 100644 index 016296f..0000000 --- a/Payment page (AS)/checkoutPage.css +++ /dev/null @@ -1,290 +0,0 @@ -/* commit */ -* { - margin: 0px; - padding: 0px; - font-family: "Poppins", sans-serif; -} - -/* Navbar Styling */ - -nav { - background-color: #0046be; - height: 80px; - display: flex; - justify-content: space-around; - color: white; - position: static; -} -nav > div { - display: flex; - align-items: center; -} -nav > div > a > img { - height: 60px; - margin-right: 10px; -} -nav > div + div > a { - text-decoration: none; - color: white; -} -nav > div + div > a:hover { - text-decoration: underline; -} -nav > div > p { - font-size: 35px; -} -.mt{ - margin-top: 10px; -} -.mb{ - margin-bottom: 10px; -} -/* Navbar Styling */ - -/* Main page styling */ -main>h1{ - margin-top: 15px; - margin-bottom: 10px; -} - -body { - background-color: #f0f2f4; -} - -main { - width: 70%; - margin: auto; -} - -#container { - display: flex; - justify-content: space-between; -} - -#container > div:first-child { - margin-top: 10px; - width: 60%; - background-color: white; - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; -} - -#container > div:last-child { - margin-top: 10px; - width: 38%; - background-color: white; - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; -} - -#container > div:last-child > div { - width: 90%; - margin: auto; - padding: 10px; -} - -#container > div > div { - width: 95%; - margin: auto; - padding: 10px; -} - -#responsiveDiv > div { - display: flex; -} - -#responsiveDiv > div > img { - width: 10%; - margin-right: 10px; -} - -.iconimage { - height: 30px; - width: 30px; -} - -.margin_set { - margin-top: 0px; - margin-bottom: 10px; -} - -input { - margin-top: 10px; - padding: 10px; -} - -#redirect { - width: 65%; - margin-top: 35px; - background-color: white; - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; -} -#redirect > div { - width: 90%; - margin: auto; -} - -#redirect > div > h4 { - margin-bottom: 0px; -} - -#redirect > div > h2 { - padding-top: 10px; -} - -#redirect > div > input { - width: 90%; -} - -button { - margin-top: 40px; - margin-bottom: 10px; - width: 100%; - padding: 10px; - background-color: rgb(33, 67, 221); - color: white; - border: none; - font-weight: bold; -} - -button:hover { - cursor: pointer; - background-color: #073788e5; -} - -#summary>div>h4{ - margin-bottom: 0px; -} -#summary>div>p{ - margin-top: 0px; -} - -#responsiveness>div{ - display: flex; -} - -#responsiveness>div>p{ - margin-left: 5px; - margin-right: 13%; - font-size: 12px; - width: 40%; -} - -#responsiveness>div>img{ - width: 20%; - margin-left: 0px; - margin-right: 10px; -} - -#responsiveness>div>div>p{ - font-size: 14px; -} - -#responsiveness>div>div>p:last-child{ - color: blue; -} - -#responsiveness>div>div>p:last-child:hover{ - cursor: pointer; - text-decoration: underline; -} - -#referal{ - width: 90%; -} - -#referalBtn{ - margin-top: 5px; -} -#total{ - display: flex; - justify-content: space-between; -} - -#referalAndSaving>h3{ - color: green; -} -#savings{ - color: rgb(25, 228, 10); -} - -#responsiveness>div>span{ - color: black; - text-decoration: none; -} -/* Main page styling */ - -/* footer styling */ -footer { - background-color: white; - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; - margin-top: 60px; - padding: 10px; -} -#footer { - width: 80%; - margin: auto; - font-size: 13px; - /* padding: 10px; */ -} -span { - color: blue; -} -span:hover{ - cursor: pointer; - text-decoration: underline; -} - -a{ - color: blue; - text-decoration: none; -} - -a:hover{ - text-decoration: underline; -} - -/* footer styling */ - - -/* Media queries */ - -@media all and (min-width: 790px) and (max-width: 865px){ - #total{ - font-size: 15px; - } -} - -@media all and (max-width: 790px){ - #container{ - display: block; - } - #container > div:last-child{ - width: 95%; - } - #container > div:first-child{ - width: 95%; - } - #redirect{ - width: 95%; - } -} - -@media all and (min-width: 320px) and (max-width: 536px){ - #container{ - display: block; - } - #container > div:last-child{ - width: 95%; - } - #container > div:first-child{ - width: 95%; - } - #redirect{ - width: 95%; - } -} - -@media all and (min-width: 320px) and (max-width: 420px){ - #total{ - font-size: 10px; - } -} diff --git a/Payment page (AS)/checkoutPage.html b/Payment page (AS)/checkoutPage.html deleted file mode 100644 index 41035b6..0000000 --- a/Payment page (AS)/checkoutPage.html +++ /dev/null @@ -1,150 +0,0 @@ - - - - - - - Checkout - Best Buy - - - - - - - - - - -
-

Getting your order

-
-
-
-

Store Pickup Details

-

Ready for pickup Tomorrow

-
-
-

Pickup Location

-

Aiea

-

- 98-051 Kamehameha Hwy -

-

Aiea, HI 96701

- change pickup location -
-
-

Pickup Person

- -
- -

- * Remember to bring your photo ID when you -

-

- pick up your order. -

-
-

! Regarding your pickup

-

- We'll notify you when your order is ready and it can be picked up - anytime during store hours until Sunday, Jun 19. -

-
-
- - -
-
-

Order Summary

-

Store Pickup

-

Aiea

-

Ready for pickup Tomorrow

-
- -
-
-
-

Total

-

$

-
-
-

Referals -

- - -

- You’re saving $0 on your order today! -

-
-
-
-
- - -
-
-

Contact Information

-

Email Address

- -

Phone Number

- -
- -
-
-
- - - - - - diff --git a/Payment page (AS)/checkoutPage.js b/Payment page (AS)/checkoutPage.js deleted file mode 100644 index 587c12d..0000000 --- a/Payment page (AS)/checkoutPage.js +++ /dev/null @@ -1,78 +0,0 @@ -// Here we have to get the data from local storage -// For now I am taking the demo array of object - -// let productArr = [ -// {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6418/6418601_sd.jpg;canvasHeight=100;canvasWidth=100",name:"MacBook Pro 13.3 Laptop - Apple M1 chip - 8GB Memory - 256GB SSD - Space Gray",price:1299.99,quantity:2}, -// {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6451/6451333_sd.jpg;canvasHeight=100;canvasWidth=100",name:"Best Buy essentials™ - Full Motion TV Wall Mount for 47–84 TVs - Black",price:59,quantity:1}, -// {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6451/6451333_sd.jpg;canvasHeight=100;canvasWidth=100",name:"Best Buy essentials™ - Full Motion TV Wall Mount for 47–84 TVs - Black",price:800,quantity:4} -// ] - -let productArr = JSON.parse(localStorage.getItem("cart_page")) - -productArr.forEach(function(elem){ - let newDiv = document.createElement("div"); - - let image = document.createElement("img"); - image.setAttribute("src",elem.image); - - let name = document.createElement("p"); - name.innerText = elem.name; - - newDiv.append(image,name); - document.querySelector("#responsiveDiv").append(newDiv); -}) - - -let totalAmount = 0; -productArr.forEach(function(elem,index){ - totalAmount = (totalAmount + (elem.quantity*elem.price)); - let div = document.createElement("div"); - - let image = document.createElement("img"); - image.setAttribute("src",elem.image); - - let name = document.createElement("p"); - name.innerText = elem.name; - - // Append price, quantity, remove in this div. - let div2 = document.createElement("div"); - - let price = document.createElement("h4"); - price.innerText = "$"+elem.price; - - let quantity = document.createElement("p"); - quantity.innerText = "Qty " + elem.quantity; - - let remove = document.createElement('p'); - remove.innerText = "Remove"; - remove.addEventListener("click",function(){ - removefun(index); - }) - - div2.append(price,quantity,remove); - div.append(image,name,div2); - document.querySelector("#responsiveness").append(div); - -}) - -document.querySelector("#totalAmount").innerText = "$"+(totalAmount) - -document.querySelector("#referalBtn").addEventListener("click",referal); -let temp = totalAmount; -function referal(){ - if(document.querySelector("#referal").value == "buyers10"){ - totalAmount = totalAmount - totalAmount*(10/100); - alert("Referal added successfuly") - document.querySelector("#totalAmount").innerText = "$"+(totalAmount).toFixed(2) - document.querySelector("#savings").innerText = "$"+(temp - totalAmount).toFixed(2) - }else{ - alert("Enter a valid referal code") - } -} - -function removefun(index){ - productArr.splice(index,1); - localStorage.setItem("cart_page",JSON.stringify(productArr)); - window.location.reload(); -} - diff --git a/Payment page (AS)/otpPage.html b/Payment page (AS)/otpPage.html deleted file mode 100644 index 808a061..0000000 --- a/Payment page (AS)/otpPage.html +++ /dev/null @@ -1,120 +0,0 @@ - - - - - - - Validate Otp - - - - - - -
-
-

Validate OTP

-
-
-

The OTP has been sent to your mobile. Please enter the OTP you received to Validate.

-

-
- -
- - -
-
- - - - \ No newline at end of file diff --git a/Payment page (AS)/paymentsPage.css b/Payment page (AS)/paymentsPage.css deleted file mode 100644 index 62c48b3..0000000 --- a/Payment page (AS)/paymentsPage.css +++ /dev/null @@ -1,296 +0,0 @@ - -* { - font-family: "Poppins", sans-serif; - margin: 0px; - padding: 0px; - } - - body { - background-color: #f0f2f4; - } - - /* Navbar Styling */ - - nav { - background-color: #0046be; - height: 80px; - display: flex; - justify-content: space-around; - color: white; - position: static; - } - nav > div { - display: flex; - align-items: center; - } - nav > div > a > img { - height: 60px; - margin-right: 10px; - } - nav > div + div > a { - text-decoration: none; - color: white; - } - nav > div + div > a:hover { - text-decoration: underline; - } - nav > div > p { - font-size: 35px; - } - /* Navbar Styling */ - - /* Main Page styling */ - - main{ - margin: auto; - margin-top: 10px; - width: 70%; - } - - main>p>a{ - color: blue; - text-decoration: none; - } - - #container{ - display: flex; - justify-content: space-between; - } - - #formSection{ - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; - background-color: white; - width: 60%; - } - - form{ - width: 92%; - margin: auto; - padding-top: 10px; - padding-bottom: 10px; - } - - #summary{ - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; - background-color: white; - width: 38%; - } - - #summary>div{ - width: 92%; - margin: auto; - padding-top: 10px; - padding-bottom: 10px; - } - - #referalAndSaving>button{ - margin-top: 20px; - margin-bottom: 10px; - width: 95%; - padding: 10px; - background-color: rgb(33, 67, 221); - color: white; - border: none; - font-weight: bold; - } - - #referalAndSaving>button:hover { - cursor: pointer; - background-color: #073788e5; - } - - #FirstAndLastName{ - display: flex; - } - - #FirstAndLastName>div:last-child{ - margin-left: 20px; - } - - #cityStateCode{ - display: flex; - } - - #cityStateCode>div:first-child{ - margin-right: 20px; - } - - #cityStateCode>div:last-child{ - margin-left: 20px; - } - - input{ - width: 90%; - padding: 10px; - } - - select{ - padding: 10px; - width: 100%; - font-size: 14px; - font-weight: bold; - } - - #submit{ - margin-top: 10px; - border: none; - background-color: rgba(228, 228, 9, 0.924); - font-size: 18px; - font-weight: bold; - width: 95%; - padding: 10px; - } - - #submit:hover{ - cursor: pointer; - background-color: yellow; - } - - #image{ - margin-top: 15px; - } - - img{ - display: flex; - margin: auto; - height: 60px; - width: 90%; - } - - #summary>div>h4{ - margin-bottom: 0px; - } - - #summary>div>p{ - margin-top: 0px; - } - - #responsiveness>div{ - display: flex; - /* justify-content: space-between; */ - } - - #responsiveness>div>p{ - margin-left: 5px; - margin-right: 13%; - font-size: 12px; - width: 40%; - } - - #responsiveness>div>img{ - width: 20%; - margin-left: 0px; - margin-right: 10px; - } - - #responsiveness>div>div>p{ - font-size: 14px; - } - - #responsiveness>div>div>p:last-child{ - color: blue; - } - #responsiveness>div>div>p:last-child:hover{ - cursor: pointer; - text-decoration: underline; - } - - #total{ - display: flex; - justify-content: space-between; - } - - #referalAndSaving>h3{ - color: green; - } - - #savings{ - color: rgb(25, 228, 10); - } - - .mb{ - margin-bottom: 15px; - } - - .mt{ - margin-top: 15px; - } - - .moreMt{ - margin-top: 25px; - } - .moreMb{ - margin-bottom: 20px; - } - .font{ - font-size: 13px; - } - - /* Main Page styling */ - - - - /* footer styling */ -footer { - box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; - background-color: white; - padding: 10px; - margin-top: 50px; - } - #footer { - width: 80%; - margin: auto; - font-size: 13px; - margin-top: 10px; - } - span { - color: blue; - } - span:hover{ - cursor: pointer; - text-decoration: underline; - } - - /* footer styling */ - - /* Media queries */ - - @media all and (min-width: 790px) and (max-width: 865px){ - #total{ - font-size: 15px; - } - } - @media all and (max-width: 790px){ - #container{ - display: block; - } - #formSection{ - width: 95%; - } - #summary{ - width: 95%; - margin-top: 20px; - - } - } - @media all and (min-width: 320px) and (max-width: 536px){ - #container{ - display: block; - } - #formSection{ - width: 95%; - } - #summary{ - width: 95%; - margin-top: 20px; - } - input{ - width: 80%; - } - } - - @media all and (min-width: 320px) and (max-width: 415px){ - #total{ - font-size: 15px; - } - } \ No newline at end of file diff --git a/Payment page (AS)/paymentsPage.html b/Payment page (AS)/paymentsPage.html deleted file mode 100644 index b98a1d8..0000000 --- a/Payment page (AS)/paymentsPage.html +++ /dev/null @@ -1,177 +0,0 @@ - - - - - - - Checkout - Best Buy - - - - - - - - - -
-

- < Back to Pickup & Delivery Options -

-

Payment Information

-
-
-
-

Credit or Debit Card Number

- - -
- -
-
-
-

- Other payment options are not available for orders with - recurring payments -

-
- -

Billing Address

-
-
-

First Name

- -
-
-

Last Name

- -
-
- -

Address

- - -
-
-

City

- -
-
-

State

- -
-
-

Zip Code

- -
-
- -
-
- - -
-
-

Order Summary

-

Store Pickup

-

Aiea

-

Ready for pickup Tomorrow

-
- -
-
-
-

Total

-

$

-
-
- -
-
-
- -
- - - - - diff --git a/Payment page (AS)/paymentsPage.js b/Payment page (AS)/paymentsPage.js deleted file mode 100644 index 8bd7ffc..0000000 --- a/Payment page (AS)/paymentsPage.js +++ /dev/null @@ -1,73 +0,0 @@ -// let productArr = [ -// {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6418/6418601_sd.jpg;canvasHeight=100;canvasWidth=100",name:"MacBook Pro 13.3 Laptop - Apple M1 chip - 8GB Memory - 256GB SSD - Space Gray",price:1299.99,quantity:2}, -// {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6451/6451333_sd.jpg;canvasHeight=100;canvasWidth=100",name:"Best Buy essentials™ - Full Motion TV Wall Mount for 47–84 TVs - Black",price:59,quantity:1}, -// {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6451/6451333_sd.jpg;canvasHeight=100;canvasWidth=100",name:"Best Buy essentials™ - Full Motion TV Wall Mount for 47–84 TVs - Black",price:800,quantity:4} -// ] - -let productArr = JSON.parse(localStorage.getItem("cart_page")); - -let totalAmount = 0; -productArr.forEach(function(elem,index){ - totalAmount = totalAmount + (elem.quantity*elem.price); - let div = document.createElement("div"); - - let image = document.createElement("img"); - image.setAttribute("src",elem.image); - - let name = document.createElement("p"); - name.innerText = elem.name; - - // Append price, quantity, remove in this div. - let div2 = document.createElement("div"); - - let price = document.createElement("h4"); - price.innerText = "$"+elem.price; - - let quantity = document.createElement("p"); - quantity.innerText = "Qty " + elem.quantity; - - let remove = document.createElement('p'); - remove.innerText = "Remove"; - remove.addEventListener("click",function(){ - removefun(index) - }) - - div2.append(price,quantity,remove); - div.append(image,name,div2); - document.querySelector("#responsiveness").append(div); - -}) -document.querySelector("#totalAmount").innerText = "$"+totalAmount - -// document.querySelector("#referalBtn").addEventListener("click",referal); -// let temp = totalAmount; -// function referal(){ -// if(document.querySelector("#referal").value == "buyers10"){ -// totalAmount = totalAmount - totalAmount*(10/100); -// alert("Referal added successfuly") -// document.querySelector("#totalAmount").innerText = "$"+totalAmount -// document.querySelector("#savings").innerText = "$"+(temp - totalAmount).toFixed(2) -// }else{ -// alert("Referal code is not Correct") -// } -// } - -document.querySelector("form").addEventListener("submit",submitfun); - -function submitfun(elem){ - elem.preventDefault(); - // console.log("inside fun") - if(document.querySelector("#card").value == 1234567812345678){ - alert("OTP sent successfully"); - window.location.href="otpPage.html" - }else { - alert("Please enter a valid card number") - window.location.reload(); - } -} - -function removefun(index){ - productArr.splice(index,1); - localStorage.setItem("cart_page",JSON.stringify(productArr)); - window.location.reload(); -} \ No newline at end of file diff --git a/Payment page (AS)/success.html b/Payment page (AS)/success.html deleted file mode 100644 index a0523c0..0000000 --- a/Payment page (AS)/success.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - Success - - - -
-
- ✓ -
-

Payment Successful

-

Continue Shoping

 -
- - diff --git a/README.md b/README.md deleted file mode 100644 index 8d92d09..0000000 --- a/README.md +++ /dev/null @@ -1,14 +0,0 @@ -# Best-Buyers -Read this - -Unit 2 group project 14 -- 19 / 06/2022 - -Name - Page-Name - Branch-Name - Localstorage name - -Mayuri Samanta - Homepage - brachname (homepage , navbar) -Rohan Mourya - User Sign in and Up - Branch Name (userAuthentication) -Sadanand Mare - cartpage :- branchname (cartpage) :- localstorage name("cart-page") -Siddharth Sharma -Top Deals - Branch Name (topDeals) -Anurag Shekhawat - Payments Page - Branch Name (paymentsSection) -Sushank Mandal - Product Page - Brach Name(products) - diff --git a/appliances.css b/appliances.css new file mode 100644 index 0000000..2e3a121 --- /dev/null +++ b/appliances.css @@ -0,0 +1,1000 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +/* nav bar */ +#main >select > option , #buttons select > option{ + background-color: white; + color: #0046be; + font-family: 'Raleway', sans-serif; +} +#main > select, #buttons > select{ + cursor: pointer; +} + +/* First div */ + +#main{ + height: 70px; + width: 100%; + min-width: 100vw; + background-color: + #0046be; + display: flex; + align-items: center; +} +#main > img:first-child{ + height: 90%; + margin-left: 1.5%; + cursor: pointer; +} +#main > img:nth-child(2){ + height: 30px; + cursor: pointer; + margin-left: 2%; +} +#main > div > img{ + height: 55%; +} + +#main > div:nth-child(5){ + display: flex; + align-items: center; + background-color: white; + height: 57%; + padding-right: 10px; + padding-left: 10px; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; +} +#search-nav{ + height: 60%; + width: 35%; + padding-left: 1%; + font-size: 18px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border: 1px solid #0046be; + border-right: white; + margin-left: 2%; +} +/* #main > select{ + background-color: #0046be; + color: white; + font-weight: bold; + font-size: 20px; + border: 1px solid #0046be; + width: 6%; +} */ + +/* Drop down */ + +.dropbtn { + /* background-color: #3498DB; + color: white; + padding: 16px; + font-size: 16px; */ + background-color: #0046be; + color: white; + font-weight: bold; + font-size: 20px; + border: 1px solid #0046be; + width: 6%; + border: none; + cursor: pointer; + } + .dropbtn1 { + background-color: #0046be; + color: white; + font-weight: bolder; + font-size: 14px; + border: 1px solid #0046be; + width: 8%; + border: none; + cursor: pointer; + } + .dropdown,.dropdown1 { + position: relative; + display: inline-block; + } + .dropdown-content , .dropdown-content1{ + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + overflow: auto; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + } + .dropdown-content a , .dropdown-content1 a{ + color: #0046be; + padding: 12px 16px; + text-decoration: none; + display: block; + font-family: 'Raleway', sans-serif; + } + .show {display: block;} + + .dropdown-content a:hover, .dropdown-content1 a:hover{ + text-decoration: underline; + } +#main > p{ + color: white; + font-size: 24px; + font-weight: bold; +} +#main > p:nth-child(7){ + cursor: pointer; + font-family: 'Raleway', sans-serif; +} +#main > img:nth-child(8){ + height: 80%; + cursor: pointer; + margin-left: 3%; +} +#main > p:last-child{ + cursor: pointer; + margin-right: 1%; + font-family: 'Raleway', sans-serif; +} +#main > p:last-child:hover{ + text-decoration: underline; +} +#main > img:nth-child(6){ + height: 100%; + cursor: pointer; + margin-left: 18%; +} + +/* Second div */ + +#buttons{ + height: 50px; + width: 100%; + border-top: 0.5px solid + #1e88e5; + background-color: #0046be; + display: flex; + justify-content: space-between; + font-family: 'Raleway', sans-serif; +} +#buttons > div{ + display: flex; + align-items: center; + color: white; + font-size: 14px; +} +#buttons > div:first-child{ + width: 52%; + justify-content: space-around; + margin-left: 2%; +} +#buttons > div:last-child{ + width: 37%; + justify-content: space-between; + margin-right: 3.5%; +} +#buttons select{ + background-color: #0046be; + color: white; + font-size: 14px; + border: 0px; + font-family: 'Raleway', sans-serif; + font-weight: bold; +} +#buttons p{ + cursor: pointer; +} +#buttons P:hover{ + text-decoration: underline; +} + +/* Medium screen */ + +@media all and (min-width:768px) and (max-width:1023px){ + #main .other1, #buttons .other1{ + width: 0%; + height: 0%; + font-size: 0px; + font-size: 0%; + } + + /* First div */ + #search-nav{ + width: 20%; + font-size: 14px; + } + /* #main > select{ + font-size: 18px; + width: 12%; + } */ + #main > img:first-child{ + margin-left: 0.5%; + + } + #main > img:nth-child(2){ + margin-left: 0.5%; + } + #main > img:nth-child(6){ + margin-left: 3%; + } + #main > img:nth-child(8){ + margin-left: 1%; + } + /* Second div */ + #buttons > div{ + font-size: 12px; + } + #buttons select{ + font-size: 10px; + } + #buttons > div:last-child{ + width: 45%; + margin-right: 0.5%; + } + #buttons > div:first-child{ + width: 48%; + margin-left: 0.5%; + } +} + +/* Small screen */ + +@media all and (min-width:340px) and (max-width:767px){ + + #main .other, #buttons .other{ + width: 0%; + height: 0%; + font-size: 0px; + font-size: 0%; + } + + /* First div */ + /* #main > select{ + font-size: 18px; + width: 30%; + margin-left: 0%; + } */ + #main > img:first-child{ + height: 60%; + } + #search-nav{ + width: 60%; + font-size: 12px; + } + #main > p:nth-child(7){ + font-size: 0px; + margin: 0%; + } + #main > img:nth-child(6){ + margin-left: 0%; + } + #main > img:nth-child(8){ + margin-left: 0%; + } + + /* Second div */ + #buttons > div:last-child{ + width: 35%; + margin-right: 1%; + } + #buttons > div:first-child{ + width: 50%; + margin-left: 0.5%; + } + /* #main > div{ + width: 0%; + height: 0%; + } */ +} +/* nav bar */ + + +#bb-ap-sale{ + margin-left: 5%; + margin-top: 5px; + font-size: 13px; + +} +.bb-ap-sale-text{ + color: blue; +} +#mj-ap-sale{ + width: 95%; + display: block; + margin-top: 10px; + margin-left: 4.5%; + padding: 10px; + font-size: 18px; + font-weight: bold; +} + + +/* body of the page */ +#pagebody{ + width: 95%; + display: grid; + grid-template-columns: 1fr 3fr; + margin: auto; + justify-content: center; + justify-content: space-between; + gap: 20px; +} +.scroll { + border: 1px solid rgb(150, 146, 146); + /* width: 22%; */ + height: 550px; + overflow-x: hidden; + overflow-y: auto; + text-align: center; + position: sticky; + top: 7.5%; + margin-bottom: 40%; + margin-left: 30px; +} +#product-container-div{ + height: auto; + border-bottom: 1px solid rgb(150, 146, 146); +} +.product-category{ + font-weight: 100px; + font-size: 14px; + color: blue; + margin-left: 15%; + margin-top: 5px; +} +.p-c-all{ + margin-left: 10%; +} +#filter-brands{ + margin-left: 10%; + margin-top: 5px; + font-size: 15px; +} +#brands-container-div{ + height: auto; + border-bottom: 1px solid rgb(150, 146, 146); +} +#pc-cata{ + margin-bottom: 8px; + font-size: 15px; +} +#pc-cata+input,label{ + margin-bottom: 10px; +} +#items{ + /* width: 73%; */ + height: 100%; +} +div.scroll>div { + text-align: left; +} +#fbp-line{ + height: auto; +} +#filter-price{ + margin-left: 10%; + margin-top: 5px; + font-size: 15px; +} + +div.scroll>div>h5 { + padding: 20px 20px 0px 20px; +} + +div.scroll>div>ul { + list-style-type: none; + padding: 20px; +} + +#sorting { + display: flex; + justify-content: space-between; + padding: 20px 50px 20px 50px; + width: 100%; + border-bottom: 1px solid rgb(150, 146, 146); + border-top: 1px solid rgb(150, 146, 146); + margin: 30px 0px; +} +#item_count{ + font-size: 14px; +} +#sortlabel{ + font-size: 14px; +} +#heading-1 { + display: flex; + justify-content: left; + align-items: center; + font-size: 10px; + width: 30%; + margin-bottom: 20px; +} +#heading-1>i { + font-size: 20px; + margin-left: 10px; +} +#heading-1>i:hover { + cursor: pointer; + color: rgb(9, 90, 201); +} +.item-list{ + width: 100%; + display: flex; + margin: auto; + /* min-width: 671px; */ + margin-bottom: 20px; + padding: 0px; +} +.item-list{ + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 30px; +} +.item{ + height: auto; + list-style: none; + border-bottom: 1px solid rgb(150, 146, 146); +} +.rowdiv{ + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 20px; +} +.item_image{ + width: auto; + display: block; + height: auto; + margin: auto; +} +.pImage{ + width: 100%; + cursor: pointer; +} +.item_details{ + height: auto; + display: flex; + flex-direction: column; + gap: 3px; +} +.pName{ + color: blue; + font-size: 13px; +} +.pModel{ + font-size: 12px; + +} +.pContent{ + display: block; + /* height: 75%; */ + cursor: pointer; +} +.pName,.pModel{ + margin-left: 10px; + cursor: pointer; +} +.pName:hover{ + text-decoration: underline; + color: rgb(0, 0, 189); +} +.pCost{ + font-size: 28px; + color: #1d252c; +} +.pAvail{ + font-size: 12px; + color: blue; + cursor: pointer; +} +.pAvail:hover{ + text-decoration: underline; + color: rgb(0, 0, 189); +} +.pCart{ + padding: 5px 50px 5px 50px; + background-color: #ffe000; + border: none; + border-radius: 5px; + color: black; + font-weight: 700; + text-align: center; + font-size: 14px; + display: flex; + gap: 17px; + margin-top: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + justify-content: space-around; +} +.pCart>img{ + width: 15px; +} +.id{ + color: transparent; +} +.slider { + width: 100%; + position: relative; + margin-bottom: 30px; + border: 1px solid rgb(150, 146, 146); +} + +.slider>img { + width: 90%; + margin-left: 5%; +} +.slider>button { + position: absolute; + padding: 20px; + background-color: transparent; + border: none; + font-size: 40px; + cursor: pointer; +} + +.slider>button:nth-child(2) { + top: 75px; + left: 5px; +} + +.slider>button:nth-child(3) { + top: 75px; + right: 5px; +} + +.slider>button>i { + color: gray; +} + +/* Medium screen starts */ +@media all and (min-width:768px) and (max-width:1023px) { + #bb-ap-sale{ + font-size: 10px; + margin-left: 3.5%; + } + #mj-ap-sale{ + font-size: 13px; + margin-left: 2.5%; + } + #pagebody{ + width: 100%; + } + .scroll{ + /* width: 18vw; */ + height: 500px; + margin-bottom: 40%; + margin-left: 20px; + } + #product-container-div{ + + padding: 2px; + } + .product-category{ + font-size: 12px; + margin-left: 13%; + margin-top: 1px; + } + #brands-container-div{ + height: auto; + } + #filter-brands{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-brands>input{ + margin-left: 13%; + margin-top: 1px; + width: 8%; + + } + #filter-brands>label{ + font-size: 12px; + } + #fbp-line{ + height: auto; + } + #filter-price{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-price>input{ + margin-left: 13%; + margin-top: 1px; + width: 8%; + } + #filter-price>label{ + font-size: 12px; + } + #items{ + /* width: 75vw; */ + height: 100%; + } + #heading-1{ + font-size: 6px; + } + .item-list{ + /* width: 10%; */ + } + #items{ + width: 95%; + } + #item-list-div{ + width: 95%; + } + .item-list{ + width: 90%; + } + .item{ + width: 95%; + } + #heading-1{ + display: none; + } + .slider{ + display: none; + } + #sorting{ + margin-top: 10px; + } + .pCart{ + padding: 5px 20px 5px 20px; + background-color: #ffe000; + border: none; + border-radius: 5px; + color: black; + font-weight: 700; + text-align: center; + font-size: 14px; + display: flex; + gap: 10px; + margin-top: 20px; + cursor: pointer; + font-size: 10px; + } + .pCart>img{ + width: 15px; + } +} +/* Medium screen ends */ + +/* Small screen starts */ +@media all and (min-width:340px) and (max-width:767px) { + #bb-ap-sale{ + font-size: 10px; + margin-left: 6%; + } + #mj-ap-sale{ + font-size: 12px; + margin-left: 4.6%; + } + #pagebody{ + display: grid; + grid-template-columns: 22% 72%; + gap: 10px; + justify-content: center; + justify-content: space-between; + } + .scroll{ + /* width: 18vw; */ + height: 500px; + margin-bottom: 40%; + margin-left: 20px; + } + #product-container-div{ + + padding: 2px; + } + .product-category{ + font-size: 12px; + margin-left: 13%; + margin-top: 1px; + } + #brands-container-div{ + height: auto; + } + #brands-container-div{ + height: auto; + } + #filter-brands{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-brands>input{ + margin-left: 13%; + margin-top: 1px; + width: auto; + display: none; + } + #filter-brands>label{ + font-size: 12px; + } + #fbp-line{ + height: auto; + } + #filter-price{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-price>input{ + margin-left: 13%; + margin-top: 1px; + width: 8%; + display: none; + } + #filter-price>label{ + font-size: 12px; + } + #heading-1, .slider{ + display: none; + } + #items{ + width: 100%; + } + #item-list-div{ + /* width: 50%; */ + } + .item-list{ + width: 100%; + } + .item{ + width: 70vw; + } + .rowdiv{ + display: flex; + gap: 10px; + } + .item_details{ + height: auto; + } + .pContent{ + width: 100%; + display: block; + height: auto; + cursor: pointer; + } + .pCost{ + font-size: 15px; + color: #1d252c; + } + .pAvail{ + font-size: 8px; + color: blue; + cursor: pointer; + } + .pCart{ + padding: 2px 5px 2px 5px; + font-size: 8px; + width: auto; + gap: 1px; + } + .pImage{ + width: 100%; + cursor: pointer; + } +} +/* Small screen ends */ + +/* body of the page */ + + + +/* footer */ +footer{ + background-color: rgb(240,242,244); + width: 100%; +} + + +.sec_1{ + display: grid; + gap: 30px; + grid-template-columns: repeat(5,1fr); + text-align: center; +} +.sec_1>div{ + padding: 60px; +} +.sec_1>div:hover{ + cursor: pointer; +} + +.font-60{ + font-size: 60px; + padding-bottom: 20px; + color: gray; +} + +.sec_1>div>a{ + text-decoration: none; + margin-top: 10px; + font-family: 'Poppins' , sans-serif; + font-weight: 600; + font-size: 14px; + color: rgb(9,90,201); +} +.sec_1>div>a:hover{ + text-decoration: underline; +} +.hl{ + width: 95%; + background-color: rgb(152, 150, 150); + height: 1px; + margin: auto; +} + +.sec_2{ + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +#sec_2-1{ + margin-top: 10px; + display: grid; + grid-template-columns: repeat(3 , 1fr); + grid-template-rows: repeat(2 , 1fr); +} + +#sec_2-1>div>h3{ + font-family: 'Poppins' , sans-serif; +} +#sec_2-1>div>p{ + color: rgb(9,90,201); + font-family: 'Poppins' , sans-serif; + padding-top: 20px; +} +footer>div:nth-child(4){ + display: flex; + justify-content: space-between; + margin-top: 50px; + padding: 20px; +} +footer>div:nth-child(4)>div{ + display: flex; + justify-content: space-around; +} +footer>div:nth-child(4)>p>span{ + color: rgb(9,90,201); + font-family: 'Poppins' ,sans-serif; +} +footer>div:nth-child(4)>div>p{ + color: rgb(9,90,201); + font-family: 'Poppins' ,sans-serif; + margin-right: 40px; +} +#footer_form{ + background-color: white; + width: 30%; + padding: 10px 20px 10px 30px; + margin-top: 20px; + border-radius: 10px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px; +} + +#footer_form>p:first-child{ + color: rgb(9,90,201); + font-family: 'Poppins' , sans-serif; + font-weight: 500; + padding-bottom: 15px; +} + +#footer_form>h3{ + font-family: 'Poppins',sans-serif; + font-weight: 500; + padding-bottom: 15px; + padding-top: 15px; +} +#footer_form>input:nth-child(4){ + padding: 10px 40px 10px 20px; + border-radius: 5px; + border: 1px solid gray; + margin-left: 10px; +} +#footer_form>input:nth-child(5){ + margin-left: 15px; + padding: 10px 30px 10px 30px; + border-radius: 5px; + border: none; + background-color: rgb(9,90,201); + color: white; +} +.fa-mobile-button{ + font-size: 60px; + color: rgb(9,90,201); +} +#footer_form>div:nth-child(7){ + padding: 20px; +} +#footer_form>div:nth-child(7)>p{ + font-family: 'Poppins' , sans-serif; +} +#footer_form>div:nth-child(7)>span{ + font-size: 30px; + font-family: 'Poppins' ,sans-serif; + font-weight: 600; +} + +.fa-brands{ + font-size: 35px; + margin: 20px 5px 20px 40px; + color: rgb(9,90,201); +} +#footer_form>p:last-child{ + padding-left: 10px; + color: rgb(9,90,201); + font-family: 'Poppins' ,sans-serif; +} + +#sec_3>div:first-child{ + display: flex; + color: rgb(9,90,201); + justify-content: space-around; + font-size: 13px; + width: 90%; + margin-top: 30px; + font-family: 'Poppins' , sans-serif; +} +#sec_3>div:last-child{ + color: rgb(115, 115, 115); + width: 90%; + font-size: 15px; + margin-top: 20px; + font-family: 'Poppins' ,sans-serif; + margin-left: 20px; +} + +@media all and (min-width: 1324px) and (max-width: 1524px){ + #footer_form{ + width: 35%; + } +} +@media all and (min-width: 768px) and (max-width: 1324px) { + .sec_1{ + grid-template-columns: repeat(3, 1fr); + } + #footer_form{ + width: 50%; + } + #sec_2{ + grid-template-columns: 1fr; + grid-template-rows: repeat(2,1fr); + } + #sec_2-1{ + padding: 10px; + gap: 20px; + grid-template-columns: repeat(2 , 1fr); + } +} + +@media all and (min-width: 320px) and (max-width: 867px) { + .sec_1{ + grid-template-columns: repeat(2 ,1fr); + } + #footer_form{ + width:80%; + } + #sec_2-1{ + padding: 20px; + gap: 20px; + } + #sec_3>div:first-child{ + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 10px; + padding: 20px; + } + #footer_form>input{ + margin-top: 15px; + } +} +/* footer */ \ No newline at end of file diff --git a/appliances.html b/appliances.html new file mode 100644 index 0000000..8f93b02 --- /dev/null +++ b/appliances.html @@ -0,0 +1,346 @@ + + + + + + + + All Appliances + + + + + +
+ logo + +
+ +
+ Top Deals + Deals of the Day + All Appliances + + + Mobiles + Laptops + + Best Buy Outlet + Toys, Games & Collectibles +
+
+ +
+ +
+ +

Aiea

+ +

Cart

+
+
+
+

Top Deals

+

Deal of the Day

+

Totaltech Membership

+

Credit Cards

+

Gift Cards

+

Gift Ideas

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

+ Best Buy Appliances Appliances On Sale +

+

Major Appliances On Sale

+ +
+
+
+
+
Category
+

All

+

Mobiles

+

Laptops

+

Microwaves

+

Freezers & Ice Makers

+

Ranges, Cooktops & Ovens

+

Washers & Dryers

+

Dishwashers

+
+
+
+
Filter By Brand
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+
+
+
+
+
Filter By Price
+ +
+ +
+ +
+ + +
+ + +
+
+
+
+

Sponsored products

+ +
+
+
+ product + + +
+
+
+

+ Products: All appliances +

+ + +
+
+
    + +
+
+
+
+ + + + + + + + + + diff --git a/appliances.js b/appliances.js new file mode 100644 index 0000000..9bbb95e --- /dev/null +++ b/appliances.js @@ -0,0 +1,631 @@ +// nav bar +document + .querySelector("#main > img:first-child") + .addEventListener("click", function () { + window.location.href = "index.html"; + }); + +// Menu +function myFunction() { + document.getElementById("myDropdown").classList.toggle("show"); +} + +window.onclick = function (event) { + if (!event.target.matches(".dropbtn")) { + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains("show")) { + openDropdown.classList.remove("show"); + } + } + } +}; + +// Account +function myFunction1() { + document.getElementById("myDropdown1").classList.toggle("show"); +} + +window.onclick = function (event) { + if (!event.target.matches(".dropbtn1")) { + var dropdowns1 = document.getElementsByClassName("dropdown-content1"); + var j; + for (j = 0; j < dropdowns1.length; j++) { + var openDropdown1 = dropdowns1[j]; + if (openDropdown1.classList.contains("show")) { + openDropdown1.classList.remove("show"); + } + } + } +}; + +let account = document.querySelector(".dropbtn1"); +tempUserData = JSON.parse(localStorage.getItem("tempUserData")); +if (tempUserData == undefined) { + account.innerText = "Account"; +} else { + account.innerText = "Hi, " + tempUserData[0].Name; +} + +// cart Image +document + .querySelector("#main > p:last-child") + .addEventListener("click", function () { + window.location.href = "cartpage.html"; + }); + +// Top deals +document.querySelector("#top").addEventListener("click", function () { + window.location.href = "topDeals.html"; +}); + +// Deals of the day +document.querySelector("#deal").addEventListener("click", function () { + window.location.href = "deals.html"; +}); + +// Account +// document.querySelector("#account").addEventListener("click", function(){ +// let selectedd = document.querySelector("#account").value; +// if (selectedd == "signin"){ +// window.location.href = "login.html"; +// } +// else if (selectedd == "create"){ +// window.location.href = "signup.html"; +// } +// else if (selectedd == "ac"){ +// window.location.href = "userAccount.html"; +// } +// }); +// end +// nav bar + +let productData = [ + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5838/5838109_sd.jpg;maxHeight=200;maxWidth=300", + name: "Insignia™ - 18.1 Cu. Ft. Top-Freezer Refrigerator - White", + price: "479.99", + model: "Insignia", + id: 20221, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6464/6464959_sd.jpg;maxHeight=200;maxWidth=300", + name: "LG - 5.0 Cu. Ft. Smart Top Load Washer with 6Motion Technology - White", + price: "849.99", + model: "LG", + id: 20222, + }, + + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6408/6408648_sd.jpg;maxHeight=200;maxWidth=300", + name: "GE Profile - Opal 2.0 24-lb. Portable Ice maker with Nugget Ice Production, Side Tank and Built-in WiFi - Stainless steel", + price: "579.99", + model: "GE", + id: 20223, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5161/5161200_sd.jpg;maxHeight=200;maxWidth=300", + name: "Insignia™ - 18 Cu. Ft. Top-Freezer Refrigerator - Stainless steel", + price: "579.99", + model: "Insignia", + id: 20224, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6237/6237753_sd.jpg;maxHeight=200;maxWidth=300", + name: "GE - 1.6 Cu. Ft. Microwave with Sensor Cooking - Stainless steel", + price: "159.99", + model: "GE", + id: 20225, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6416/6416175_sd.jpg;maxHeight=200;maxWidth=300", + name: "Samsung - 4.5 Cu. Ft. High Efficiency Top Load Washer with Vibration Reduction Technology+ - White", + price: "579.99", + model: "Samsung", + id: 20226, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6397/6397853_sd.jpg;maxHeight=200;maxWidth=300", + name: "LG - 4.5 Cu. Ft. High Efficiency Stackable Front-Load Washer with 6Motion Technology - White", + price: "849.99", + model: "LG", + id: 20227, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5900/5900311_sd.jpg;maxHeight=200;maxWidth=300", + name: "Whirlpool - 1.7 Cu. Ft. Over-the-Range Microwave - Stainless steel", + price: "249.99", + model: "Whirlpool", + id: 20228, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6321/6321760_sd.jpg;maxHeight=200;maxWidth=300", + name: "LG - 7.3 Cu. Ft. Smart Electric Dryer with Sensor Dry - White", + price: "779.99", + model: "LG", + id: 20229, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6448/6448628_sd.jpg;maxHeight=200;maxWidth=300", + name: "Insignia™ - 26 Lb. Retro Portable Icemaker with Auto Shut-Off - Red", + price: "94.99", + model: "Insignia", + id: 202210, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6369/6369435_sd.jpg;maxHeight=200;maxWidth=300", + name: "Frigidaire - 13.0 Cu. Ft. Frost-Free Upright Freezer with Interior Light - White", + price: "679.99", + model: "Frigidaire", + id: 202211, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6493/6493492_sd.jpg;maxHeight=200;maxWidth=300", + name: "Samsung - Bespoke 23 cu. ft. Counter Depth 4-Door French Door Refrigerator with Beverage Center - Stainless steel", + price: "2699.99", + model: "Samsung", + id: 202212, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6322/6322982_sd.jpg;maxHeight=200;maxWidth=300", + name: "Samsung - 5.0 Cu. Ft. High Efficiency Top Load Washer with Active WaterJet - White", + price: "649.99", + model: "Samsung", + id: 202213, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6076/6076924_sd.jpg;maxHeight=200;maxWidth=300", + name: "Whirlpool - 21.4 Cu. Ft. Side-by-Side Refrigerator Fingerprint Resistant - Stainless steel", + price: "1999.99", + model: "Whirlpool", + id: 202214, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6321/6321755_sd.jpg;maxHeight=200;maxWidth=300", + name: "LG - 5.0 Cu. Ft. High-Efficiency Smart Top-Load Washer with TurboWash3D Technology - White", + price: "779.99", + model: "LG", + id: 202215, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6203/6203990_sd.jpg;maxHeight=200;maxWidth=300", + name: "Whirlpool - 7 Cu. Ft. Electric Dryer with AutoDry Drying System - White", + price: "549.99", + model: "Whirlpool", + id: 202216, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/3073/3073087_sd.jpg;maxHeight=200;maxWidth=300", + name: "Amana - 6.5 Cu. Ft. Electric Dryer with Automatic Dryness Control - White", + price: "499.99", + model: "Amana", + id: 202217, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6470/6470435_sd.jpg;maxHeight=200;maxWidth=300", + name: "Samsung - 4.5 cu. ft. Large Capacity Smart Dial Front Load Washer with Super Speed Wash - Brushed black", + price: "829.99", + model: "Samsung", + id: 202218, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6450/6450853_sd.jpg;maxHeight=200;maxWidth=300", + name: 'MacBook Pro 14" Laptop - Apple M1 Pro chip - 16GB Memory - 512GB SSD (Latest Model) - Space Gray', + price: "1799.00", + model: "MacBook", + id: 20221, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6469/6469399_sd.jpg;maxHeight=200;maxWidth=300", + name: 'ASUS - Vivobook 17.3" Laptop - Intel Core 10th Gen i5 - 12GB Memory - 1TB HDD', + price: "429.99", + model: "ASUS", + id: 20222, + }, + + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5721/5721600_sd.jpg;maxHeight=200;maxWidth=300", + name: 'MacBook Air 13.3" Laptop - Apple M1 chip - 8GB Memory - 256GB SSD - Space Gray', + price: "949.99", + model: "MacBook", + id: 20223, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6458/6458905_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Dell - Inspiron 2-in-1 14" Touch-Screen Laptop - Intel Core i5 - 8GB Memory - 512GB Solid State Drive - Silver', + price: "649.99", + model: "Dell", + id: 20224, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6470/6470463_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Dell - G15 15.6" FHD Gaming Laptop - Intel Core i7 - 16GB Memory - NVIDIA GeForce RTX 3050 - 512GB Solid State Drive - Black, Dark Shadow Grey', + price: "899.99", + model: "Dell", + id: 20225, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6499/6499749_sd.jpg;maxHeight=200;maxWidth=300", + name: 'HP - 14" Laptop - Intel Celeron - 4GB Memory - 64GB eMMC - Snowflake White', + price: "169.99", + model: "HP", + id: 20226, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6500/6500646_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Dell - Inspiron 3511 15.6" Touch Laptop - Intel Core i5 - 8GB Memory - 256GB Solid State Drive - Black', + price: "599.99", + model: "Dell", + id: 20227, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6469/6469397_sd.jpg;maxHeight=200;maxWidth=300", + name: 'ASUS - Vivobook 15.6" Laptop - Intel 10th Gen i3 - 8GB Memory - 256GB PCIE SSD - Slate Grey', + price: "404.99", + model: "ASUS", + id: 20228, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6499/6499942_sd.jpg;maxHeight=200;maxWidth=300", + name: 'HP - 14" Laptop - Intel Celeron - 4GB Memory - 64GB eMMC - Rose gold', + price: "169.99", + model: "HP", + id: 20229, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6479/6479177_sd.jpg;maxHeight=200;maxWidth=300", + name: 'HP - ENVY x360 2-in-1 13.3" OLED Touch-Screen Laptop - Intel Evo Core i7 - 8GB Memory - 512GB SSD - Natural Silver', + price: "799.99", + model: "HP", + id: 202210, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6502/6502175_sd.jpg;maxHeight=200;maxWidth=300", + name: 'HP - 14" Laptop - AMD Ryzen 3 - 8GB Memory - 128GB SSD - Natural Silver', + price: "369.99", + model: "HP", + id: 202211, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6432/6432553_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Dell - Inspiron 7000 2-in-1 15.6" FHD Touch-Screen Laptop - Intel Core i5 - 12GB Memory - 512GB SSD+32GB Optane - Silver', + price: "749.99", + model: "Dell", + id: 202213, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6448/6448936_sd.jpg;maxHeight=200;maxWidth=300", + name: 'ASUS - TUF DASH 15.6" Gaming Laptop - Intel 11th Gen i7 - 16GB Memory - NVIDIA GeForce RTX 3070 - 1TB M.2 PCIEG3 SSD - Eclipse Grey', + price: "1349.99", + model: "ASUS", + id: 202214, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6450/6450856_sd.jpg;maxHeight=200;maxWidth=300", + name: 'MacBook Pro 14" Laptop - Apple M1 Pro chip - 16GB Memory - 512GB SSD (Latest Model) - Silver', + price: "1199.99", + model: "MacBook", + id: 202215, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6509/6509652_sd.jpg;maxHeight=200;maxWidth=300", + name: 'MacBook Pro 13.3" Laptop - Apple M2 chip - 8GB Memory - 256GB SSD (Latest Model) - Space Gray', + price: "1299.00", + model: "MacBook", + id: 202216, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6428/6428992_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Microsoft - Surface Laptop Go - 12.4" Touch-Screen - Intel 10th Generation Core i5 - 8GB Memory - 256GB Solid State Drive - Platinum', + price: "649.99", + model: "Microsoft", + id: 202217, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6469/6469400_sd.jpg;maxHeight=200;maxWidth=300", + name: 'ASUS - 14.0" Laptop - Intel Celeron N4020 - 4GB Memory - 128GB eMMC - Star Black', + price: "149.99", + model: "ASUS", + id: 202218, + }, +]; + +//category starts +document.querySelector(".p-c-all").addEventListener("click", allpageFun); +function allpageFun(event) { + window.location.href = "appliances.html"; +} + +document.querySelector(".p-c-mobiles").addEventListener("click", mobpageFun); +function mobpageFun(event) { + window.location.href = "mobiles.html"; +} +document.querySelector(".p-c-ref").addEventListener("click", laptopspageFun); +function laptopspageFun(event) { + window.location.href = "laptops.html"; +} + +//category ends + +//sort by section start +let sortby = document.getElementById("sort"); +sortby.addEventListener("change", function () { + // console.log(sortby.value); + if (sortby.value == "A") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + if (a.model < b.model) { + return -1; + } + if (a.model > b.model) { + return 1; + } + return 0; + }); + displayItems(filtered); + } else if (sortby.value == "Z") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + if (a.model < b.model) { + return 1; + } + if (a.model > b.model) { + return -1; + } + return 0; + }); + displayItems(filtered); + } else if (sortby.value == "LtoH") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + return Number(a.price) - Number(b.price); + }); + displayItems(filtered); + } else if (sortby.value == "HtoL") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + return Number(b.price) - Number(a.price); + }); + displayItems(filtered); + } +}); +// sort by section end + +//filter section starts +// Filter Section Brands +let Amana = document.getElementById("Amana"); // Selected Input Tag by Id + +// Mobile is main Data +Amana.addEventListener("change", function () { + filterItem(productData, Amana.value); +}); + +let Frigidaire = document.getElementById("Frigidaire"); // Selected Input Tag by Id + +// Mobile is main Data +Frigidaire.addEventListener("change", function () { + filterItem(productData, Frigidaire.value); +}); +let GE = document.getElementById("GE"); // Selected Input Tag by Id + +// Mobile is main Data +GE.addEventListener("change", function () { + filterItem(productData, GE.value); +}); +let Insignia = document.getElementById("Insignia"); // Selected Input Tag by Id + +// Mobile is main Data +Insignia.addEventListener("change", function () { + filterItem(productData, Insignia.value); +}); +let LG = document.getElementById("LG"); // Selected Input Tag by Id + +// Mobile is main Data +LG.addEventListener("change", function () { + filterItem(productData, LG.value); +}); +let Samsung = document.getElementById("Samsung"); // Selected Input Tag by Id + +// Mobile is main Data +Samsung.addEventListener("change", function () { + filterItem(productData, Samsung.value); +}); +let Whirlpool = document.getElementById("Whirlpool"); // Selected Input Tag by Id + +// Mobile is main Data +Whirlpool.addEventListener("change", function () { + filterItem(productData, Whirlpool.value); +}); +let ASUS = document.getElementById("ASUS"); // Selected Input Tag by Id + +// Mobile is main Data +ASUS.addEventListener("change", function () { + filterItem(productData, ASUS.value); +}); + +let Dell = document.getElementById("Dell"); // Selected Input Tag by Id + +// Mobile is main Data +Dell.addEventListener("change", function () { + filterItem(productData, Dell.value); +}); +let HP = document.getElementById("HP"); // Selected Input Tag by Id + +// Mobile is main Data +HP.addEventListener("change", function () { + filterItem(productData, HP.value); +}); +let MacBook = document.getElementById("MacBook"); // Selected Input Tag by Id + +// Mobile is main Data +MacBook.addEventListener("change", function () { + filterItem(productData, MacBook.value); +}); + +// filter function +let tempFilter = []; +function filterItem(all, a) { + let filterd = all.filter(function (elem) { + return elem.model == a; + }); + + // main display function + filterd.forEach(function (elem) { + tempFilter.push(elem); + }); + document.querySelector(".item-list").innerHTML = ""; + displayItems(tempFilter); +} +//filter section brand ends + +//filter by price + +//filter by price + +displayItems(productData); + +// this is a function which dynamically takes input from productData array + +let cart_page = JSON.parse(localStorage.getItem("cart_page")) || []; + +function displayItems(productData) { + productData.forEach(function (element) { + let pImage = document.createElement("img"); + pImage.setAttribute("class", "pImage"); + pImage.src = element.image; + let pName = document.createElement("p"); + pName.setAttribute("class", "pName"); + pName.innerText = element.name; + let pCost = document.createElement("h1"); + pCost.setAttribute("class", "pCost"); + pCost.innerText = "$" + element.price; + let pModel = document.createElement("p"); + pModel.setAttribute("class", "pModel"); + pModel.innerText = "Brand: " + element.model; + let pContent = document.createElement("img"); + pContent.setAttribute("class", "pContent"); + pContent.src = "/rating.png"; + let pAvail = document.createElement("p"); + pAvail.setAttribute("class", "pAvail"); + pAvail.innerText = "No rebates available in 96939"; + + let item_image = document.createElement("div"); + item_image.setAttribute("class", "item_image"); + item_image.append(pImage); + + let item_details = document.createElement("div"); + item_details.setAttribute("class", "item_details"); + item_details.append(pName, pModel, pContent); + + // cart + let pCart = document.createElement("button"); + let cLogo = document.createElement("img"); + cLogo.src = "/trolly.png"; + + let text = document.createElement("p"); + text.innerText = "Add to Cart"; + + pCart.setAttribute("class", "pCart"); + pCart.addEventListener("click", function () { + if (addtoCartFunction(element.id)) { + element.quantity = 1; + element.totalPrice = element.price * element.quantity; + cart_page.push(element); + + localStorage.setItem("cart_page", JSON.stringify(cart_page)); + } + }); + + let pId = document.createElement("p"); + pId.innerText = element.id; + pId.setAttribute("class", "id"); + pCart.append(cLogo, text); + + let item_cost = document.createElement("div"); + item_cost.setAttribute("class", "item_cost"); + item_cost.append(pCost, pAvail, pCart, pId); + + let rowdiv = document.createElement("div"); + rowdiv.setAttribute("class", "rowdiv"); + rowdiv.append(item_image, item_details, item_cost); + let item = document.createElement("li"); + item.setAttribute("class", "item"); + item.append(rowdiv); + document.querySelector(".item-list").append(item); + }); +} + +let slide_1 = document.getElementById("slide-1"); +let slide_2 = document.getElementById("slide-2"); +slide_1.addEventListener("click", slider); +slide_2.addEventListener("click", sliderTwo); + +let slide_img = ["/slider1.png", "/slider2.png", "/slider3.png"]; + +let img = document.getElementById("productSlide"); +let count = 0; +function slider() { + if (count === 0) { + count = slide_img.length - 1; + } else { + count--; + } + img.src = slide_img[count]; + console.log(count); +} +function sliderTwo() { + if (count == slide_img.length - 1) { + count = 0; + } else { + count++; + } + img.src = slide_img[count]; + console.log(count); +} +function addtoCartFunction(id) { + let check = cart_page.filter(function (element) { + return id == element.id; + }); + if (check.length > 0) { + return false; + } else { + return true; + } +} diff --git a/footer.css b/footer.css deleted file mode 100644 index 95732f3..0000000 --- a/footer.css +++ /dev/null @@ -1,219 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); - -/* footer css css*/ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; -} - -footer{ - background-color: rgb(240,242,244); - width: 100%; -} - - -.sec_1{ - display: grid; - gap: 30px; - grid-template-columns: repeat(5,1fr); - text-align: center; -} -.sec_1>div{ - padding: 60px; -} -.sec_1>div:hover{ - cursor: pointer; -} - -.font-60{ - font-size: 60px; - padding-bottom: 20px; - color: gray; -} - -.sec_1>div>a{ - text-decoration: none; - margin-top: 10px; - font-family: 'Poppins' , sans-serif; - font-weight: 600; - font-size: 14px; - color: rgb(9,90,201); -} -.sec_1>div>a:hover{ - text-decoration: underline; -} -.hl{ - width: 95%; - background-color: rgb(152, 150, 150); - height: 1px; - margin: auto; -} - -.sec_2{ - display: flex; - justify-content: space-around; - flex-wrap: wrap; -} - -#sec_2-1{ - margin-top: 10px; - display: grid; - grid-template-columns: repeat(3 , 1fr); - grid-template-rows: repeat(2 , 1fr); -} - -#sec_2-1>div>h3{ - font-family: 'Poppins' , sans-serif; -} -#sec_2-1>div>p{ - color: rgb(9,90,201); - font-family: 'Poppins' , sans-serif; - padding-top: 20px; -} -footer>div:nth-child(4){ - display: flex; - justify-content: space-between; - margin-top: 50px; - padding: 20px; -} -footer>div:nth-child(4)>div{ - display: flex; - justify-content: space-around; -} -footer>div:nth-child(4)>p>span{ - color: rgb(9,90,201); - font-family: 'Poppins' ,sans-serif; -} -footer>div:nth-child(4)>div>p{ - color: rgb(9,90,201); - font-family: 'Poppins' ,sans-serif; - margin-right: 40px; -} - - -#footer_form{ - background-color: white; - width: 30%; - padding: 10px 20px 10px 30px; - margin-top: 20px; - border-radius: 10px; - box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px; -} - -#footer_form>p:first-child{ - color: rgb(9,90,201); - font-family: 'Poppins' , sans-serif; - font-weight: 500; - padding-bottom: 15px; -} - -#footer_form>h3{ - font-family: 'Poppins',sans-serif; - font-weight: 500; - padding-bottom: 15px; - padding-top: 15px; -} -#footer_form>input:nth-child(4){ - padding: 10px 40px 10px 20px; - border-radius: 5px; - border: 1px solid gray; - margin-left: 10px; -} -#footer_form>input:nth-child(5){ - margin-left: 15px; - padding: 10px 30px 10px 30px; - border-radius: 5px; - border: none; - background-color: rgb(9,90,201); - color: white; -} -.fa-mobile-button{ - font-size: 60px; - color: rgb(9,90,201); -} -#footer_form>div:nth-child(7){ - padding: 20px; -} -#footer_form>div:nth-child(7)>p{ - font-family: 'Poppins' , sans-serif; -} -#footer_form>div:nth-child(7)>span{ - font-size: 30px; - font-family: 'Poppins' ,sans-serif; - font-weight: 600; -} - -.fa-brands{ - font-size: 35px; - margin: 20px 5px 20px 40px; - color: rgb(9,90,201); -} -#footer_form>p:last-child{ - padding-left: 10px; - color: rgb(9,90,201); - font-family: 'Poppins' ,sans-serif; -} - -#sec_3>div:first-child{ - display: flex; - color: rgb(9,90,201); - justify-content: space-around; - font-size: 13px; - width: 90%; - margin-top: 30px; - font-family: 'Poppins' , sans-serif; -} -#sec_3>div:last-child{ - color: rgb(115, 115, 115); - width: 90%; - font-size: 15px; - margin-top: 20px; - font-family: 'Poppins' ,sans-serif; - margin-left: 20px; -} - -@media all and (min-width: 1324px) and (max-width: 1524px){ - #footer_form{ - width: 35%; - } -} -@media all and (min-width: 768px) and (max-width: 1324px) { - .sec_1{ - grid-template-columns: repeat(3, 1fr); - } - #footer_form{ - width: 50%; - } - #sec_2{ - grid-template-columns: 1fr; - grid-template-rows: repeat(2,1fr); - } - #sec_2-1{ - padding: 10px; - gap: 20px; - grid-template-columns: repeat(2 , 1fr); - } -} - -@media all and (min-width: 320px) and (max-width: 867px) { - .sec_1{ - grid-template-columns: repeat(2 ,1fr); - } - #footer_form{ - width:80%; - } - #sec_2-1{ - padding: 20px; - gap: 20px; - } - #sec_3>div:first-child{ - display: grid; - grid-template-columns: repeat(3,1fr); - gap: 10px; - padding: 20px; - } - #footer_form>input{ - margin-top: 15px; - } -} \ No newline at end of file diff --git a/footer.html b/footer.html deleted file mode 100644 index cd83772..0000000 --- a/footer.html +++ /dev/null @@ -1,136 +0,0 @@ - - - - - - - Document - - - - - - - - - \ No newline at end of file diff --git a/index.css b/index.css deleted file mode 100644 index e3f6800..0000000 --- a/index.css +++ /dev/null @@ -1,1505 +0,0 @@ -/* Navbar */ -*{ - padding: 0%; - margin: 0%; - box-sizing: border-box; -} -#main >select > option , #buttons select > option{ - background-color: white; - color: #0046be; - font-family: 'Raleway', sans-serif; -} -#main > select, #buttons > select{ - cursor: pointer; -} - -/* First div */ - -#main{ - height: 70px; - width: 100%; - min-width: 100vw; - background-color: - #0046be; - display: flex; - align-items: center; -} -#main > img:first-child{ - height: 90%; - margin-left: 1.5%; - cursor: pointer; -} -#main > img:nth-child(2){ - height: 30px; - cursor: pointer; - margin-left: 2%; -} -#main > div > img{ - height: 55%; -} - -#main > div:nth-child(5){ - display: flex; - align-items: center; - background-color: white; - height: 57%; - padding-right: 10px; - padding-left: 10px; - border-bottom-right-radius: 5px; - border-top-right-radius: 5px; -} -#search-nav{ - height: 60%; - width: 35%; - padding-left: 1%; - font-size: 18px; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - border: 1px solid #0046be; - border-right: white; - margin-left: 2%; -} -/* #main > select{ - background-color: #0046be; - color: white; - font-weight: bold; - font-size: 20px; - border: 1px solid #0046be; - width: 6%; -} */ - -/* Drop down */ - -.dropbtn { - /* background-color: #3498DB; - color: white; - padding: 16px; - font-size: 16px; */ - background-color: #0046be; - color: white; - font-weight: bold; - font-size: 20px; - border: 1px solid #0046be; - width: 6%; - border: none; - cursor: pointer; - } - .dropbtn1 { - background-color: #0046be; - color: white; - font-weight: bolder; - font-size: 14px; - border: 1px solid #0046be; - width: 8%; - border: none; - cursor: pointer; - } - .dropdown,.dropdown1 { - position: relative; - display: inline-block; - } - .dropdown-content , .dropdown-content1{ - display: none; - position: absolute; - background-color: #f1f1f1; - min-width: 160px; - overflow: auto; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; - } - .dropdown-content a , .dropdown-content1 a{ - color: #0046be; - padding: 12px 16px; - text-decoration: none; - display: block; - font-family: 'Raleway', sans-serif; - } - .show {display: block;} - - .dropdown-content a:hover, .dropdown-content1 a:hover{ - text-decoration: underline; - } -#main > p{ - color: white; - font-size: 24px; - font-weight: bold; -} -#main > p:nth-child(7){ - cursor: pointer; - font-family: 'Raleway', sans-serif; -} -#main > img:nth-child(8){ - height: 80%; - cursor: pointer; - margin-left: 3%; -} -#main > p:last-child{ - cursor: pointer; - margin-right: 1%; - font-family: 'Raleway', sans-serif; -} -#main > p:last-child:hover{ - text-decoration: underline; -} -#main > img:nth-child(6){ - height: 100%; - cursor: pointer; - margin-left: 18%; -} - -/* Second div */ - -#buttons{ - height: 50px; - width: 100%; - border-top: 0.5px solid - #1e88e5; - background-color: #0046be; - display: flex; - justify-content: space-between; - font-family: 'Raleway', sans-serif; -} -#buttons > div{ - display: flex; - align-items: center; - color: white; - font-size: 14px; -} -#buttons > div:first-child{ - width: 52%; - justify-content: space-around; - margin-left: 2%; -} -#buttons > div:last-child{ - width: 37%; - justify-content: space-between; - margin-right: 3.5%; -} -#buttons select{ - background-color: #0046be; - color: white; - font-size: 14px; - border: 0px; - font-family: 'Raleway', sans-serif; - font-weight: bold; -} -#buttons p{ - cursor: pointer; -} -#buttons P:hover{ - text-decoration: underline; -} - -/* Medium screen */ - -@media all and (min-width:768px) and (max-width:1023px){ - #main .other1, #buttons .other1{ - width: 0%; - height: 0%; - font-size: 0px; - font-size: 0%; - } - - /* First div */ - #search-nav{ - width: 20%; - font-size: 14px; - } - /* #main > select{ - font-size: 18px; - width: 12%; - } */ - #main > img:first-child{ - margin-left: 0.5%; - - } - #main > img:nth-child(2){ - margin-left: 0.5%; - } - #main > img:nth-child(6){ - margin-left: 3%; - } - #main > img:nth-child(8){ - margin-left: 1%; - } - /* Second div */ - #buttons > div{ - font-size: 12px; - } - #buttons select{ - font-size: 10px; - } - #buttons > div:last-child{ - width: 45%; - margin-right: 0.5%; - } - #buttons > div:first-child{ - width: 48%; - margin-left: 0.5%; - } -} - -/* Small screen */ - -@media all and (min-width:340px) and (max-width:767px){ - - #main .other, #buttons .other{ - width: 0%; - height: 0%; - font-size: 0px; - font-size: 0%; - } - - /* First div */ - /* #main > select{ - font-size: 18px; - width: 30%; - margin-left: 0%; - } */ - #main > img:first-child{ - height: 60%; - } - #search-nav{ - width: 60%; - font-size: 12px; - } - #main > p:nth-child(7){ - font-size: 0px; - margin: 0%; - } - #main > img:nth-child(6){ - margin-left: 0%; - } - #main > img:nth-child(8){ - margin-left: 0%; - } - - /* Second div */ - #buttons > div:last-child{ - width: 35%; - margin-right: 1%; - } - #buttons > div:first-child{ - width: 50%; - margin-left: 0.5%; - } - /* #main > div{ - width: 0%; - height: 0%; - } */ -} - - -/* Homepage */ -body{ - background-color: #f0f2f4; -} - -/* First section */ - -#firstsec{ - width: 97%; - height: fit-content; - margin: 20px; - display: flex; - justify-content: space-between; -} -#firstsec > div:first-child{ - width: 49%; - height: 620px; - position: relative; -} -#firstsec > div:first-child > img{ - height: 100%; - width: 100%; -} -#firstsec > div:first-child > p{ - position: absolute; - top: 55%; - right: 17%; - font-size: 40px; - color: white; - font-weight: bolder; - font-family: 'Raleway', sans-serif; -} -#firstsec > div:first-child > button{ - position: absolute; - top: 65%; - right: 42%; - padding: 8px 18px; - border-radius: 5px; - border: 0px solid; - color: #0046be; - font-weight: bold; -} -#firstsec > div:first-child > button:hover{ - color: white; - background-color: #0046be; - border: 1px solid white; -} -#firstsec > div:last-child{ - width: 49%; - height: fit-content; -} -#first{ - width: 100%; - height: fit-content; - background-color: white; - padding: 20px; - border: 1px solid lightgray; -} -#first > p{ - font-weight: bold; - font-family: 'Raleway', sans-serif; - margin-bottom: 15px; -} -#first > div{ - display: grid; - grid-template-columns: repeat(4,1fr); - grid-template-rows: auto; - gap: 10px; -} -#first img{ - height: 100px; - margin-bottom: 8px; - cursor: pointer; -} -#first > div > div > p{ - font-size: 14px; - color: #0046be; -} -#first > div > div > p:hover{ - color: rgb(23, 23, 143); - text-decoration: underline; - cursor: pointer; -} -#second{ - display: flex; - margin-top: 20px; - height: fit-content; -} -#second > div:first-child{ - width: 48%; - height: 365px; - margin-right: 35px; - border: 1px solid lightgray; - background-color: white; - cursor: pointer; -} -#second > div:first-child > p:first-child{ - background-color: #0046be; - padding: 5px 10px; - margin-left: 20px; - margin-top: 20px; - width: fit-content; -} -#second > div:first-child > p:first-child > span:first-child{ - color: yellow; - font-weight: bold; - font-family: 'Raleway', sans-serif; -} -#second > div:first-child > p:first-child > span:last-child{ - color: white; - font-weight: bold; - font-family: 'Raleway', sans-serif; -} -#second > div:first-child > p:nth-child(2){ - font-size: 50px; - font-family: 'Raleway', sans-serif; - width: 90%; - font-weight: bolder; - margin: auto; - margin-top: 40px; -} -#second > div:first-child > p:nth-child(2) > span:first-child , #second > div:first-child > p:nth-child(2) > span:last-child{ - color: #bb0729; -} -#second > div:first-child > p:nth-child(3){ - color: #0046be; - margin-top: 60px; - margin-left: 20px; -} -#second > div:first-child > p:nth-child(3):hover{ - color: rgb(23, 23, 143); - text-decoration: underline; -} -#second > div:last-child{ - width: 48%; - height: 365px; - border: 1px solid lightgray; - background-color: white; - cursor: pointer; -} -#second > div:last-child >p:first-child{ - font-weight: bold; - margin-top: 20px; - margin-left: 20px; - font-family: 'Raleway', sans-serif; -} -#second > div:last-child > img{ - height: 250px; - margin-left: 50px; - margin-top: 5px; -} -#second > div:last-child >p:nth-child(3) , #second > div:last-child >p:nth-child(4){ - color: #0046be; - margin-left: 20px; - margin-top: 5px; -} -#second > div:last-child >p:nth-child(3):hover , #second > div:last-child >p:nth-child(4):hover { - color: rgb(23, 23, 143); - text-decoration: underline; -} - -/* Second section */ - -#secondsec{ - border: 1px solid transparent; - width: 100%; - background-color: white; -} -#secondsec > p:first-child{ - margin-top: 40px; - font-size: 20px; - font-weight: bold; - font-family: 'Raleway', sans-serif; - margin-left: 20px; -} -#secondsec1{ - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: 20px; - width: 98%; - margin: auto; -} -#secondsec > hr{ - margin-bottom: 40px; - color: lightgray; -} -#secondsec1 > div{ - border: 1px solid lightgray; - padding: 20px; - border-radius: 5px; - cursor: pointer; -} -#secondsec1 > div > img{ - height: 150px; - width: 200px; -} -#secondsec1 > div > p{ - margin-top: 20px; - color: #0046be; -} -#secondsec1 > div > p:hover{ - color: rgb(23, 23, 143); - text-decoration: underline; -} -#secondsec2 { - height: 80px; - margin-top: 40px; - display: grid; - grid-template-columns: repeat(2, 1fr); - -} -#secondsec2 > div{ - display: flex; - width: 96%; - height: 100%; - border: 1px solid lightgray; - margin: auto; - justify-content: center; - align-items: center; - background-color: #f0f2f4; -} -#secondsec2 > div > img{ - height: 90%; - cursor: pointer; -} -#secondsec2 > div > div{ - margin-left: 20px; -} -#secondsec2 > div > div > p:first-child{ - font-family: 'Raleway', sans-serif; - font-size: 23px; - font-weight: bold; -} -#secondsec2 > div > div > p:last-child{ - color: #0046be; -} -#secondsec2 > div > div > p:last-child:hover{ - color: rgb(23, 23, 143); - text-decoration: underline; - cursor: pointer; -} -#secondsec3{ - height: 70px; - width: 98%; - margin-top: 30px; - margin-left: 12px; - margin-bottom: 30px; - background-color: - #fff200; - display: flex; - align-items: center; - justify-content: center; -} -#secondsec3 > p:first-child{ - text-align: center; - font-family: 'Raleway', sans-serif; - font-size: 25px; - font-weight: bold; - margin-right: 40px; -} -#secondsec3 > p:last-child{ - color: #0046be; - font-family: 'Raleway', sans-serif; - font-weight: bold; -} -#secondsec3 > p:last-child:hover{ - color: rgb(23, 23, 143); - text-decoration: underline; - cursor: pointer; -} - -/* Third section */ -#thirdsec{ - display: grid; - padding: 25px; - grid-template-columns: repeat(2,1fr); - gap: 25px; -} -#thirdsec1{ - position: relative; -} -#thirdsec1 > div{ - position: absolute; - top: 40px; - left: 40px; -} -#thirdsec1 > div > p:first-child{ - font-size: 40px; - font-family: 'Raleway', sans-serif; - font-weight: bold; -} -#thirdsec1 > div > p:nth-child(2){ - font-family: 'Raleway', sans-serif; - margin-top: 5px; -} -#thirdsec1 > div > p:nth-child(3){ - font-family: 'Raleway', sans-serif; - margin-top: 5px; - font-size: 12px; -} -#thirdsec1 > div > button{ - margin-top: 5px; - padding: 8px 20px; - font-family: 'Raleway', sans-serif; - color: white; - background-color: #0046be; - border: 0px; - border-radius: 5px; - font-weight: bold; -} -#thirdsec1 > div > button:hover{ - background-color: #133775; -} -#thirdsec1 > img{ - width: 100%; -} -#thirdsec2{ - position: relative; -} -#thirdsec2 > div{ - position: absolute; - top: 40px; - left: 40px; -} -#thirdsec2 > img{ - width: 100%; -} -#thirdsec2 > div > p:first-child{ - font-size: 40px; - font-family: 'Raleway', sans-serif; - font-weight: bold; -} -#thirdsec2 > div > p:nth-child(2){ - font-family: 'Raleway', sans-serif; - margin-top: 5px; -} -#thirdsec2 > div > button{ - margin-top: 5px; - padding: 8px 20px; - font-family: 'Raleway', sans-serif; - color: white; - background-color: #0046be; - border: 0px; - border-radius: 5px; - font-weight: bold; - cursor: pointer; -} -#thirdsec2 > div > button:hover{ - background-color: #133775; -} - -/* Forth Section */ - -#forthsec{ - background-color: white; -} -#forthsec1{ - display: grid; - grid-template-columns: repeat(3, 1fr); - margin: auto; - background-color: white; -} -#forthsec1 > div{ - display: flex; - align-items: center; - justify-content: center; -} -#forthsec1 > div:first-child{ - justify-content: right; -} -#forthsec1 > div:last-child{ - justify-content: left; -} -#forthsec1 > div > img{ - height: 50%; - margin-right: 10px; -} -#forthsec1 > div > div > p:first-child{ - font-size: 22px; - font-family: 'Raleway', sans-serif; - color: rgb(75, 71, 71); - font-weight: bold; - cursor: pointer; -} -#forthsec1 > div > div > p:nth-child(2){ - font-size: 12px; - font-family: 'Raleway', sans-serif; - color: rgb(75, 71, 71); - margin-top: 5px; -} -#forthsec1 > div > div > p:nth-child(3){ - font-size: 10px; - font-family: 'Raleway', sans-serif; - color: rgb(75, 71, 71); - margin-top: 5px; -} -@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@500&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); - -.positn-abs { - position: absolute; -} - -#bar_main { - height: 200px; -} - -#bar { - background: rgb(42, 95, 202); - background: linear-gradient(180deg, rgba(42, 95, 202, 1) 12%, rgba(5, 26, 94, 1) 56%, rgba(0, 9, 101, 1) 100%); - height: 150px; - margin-top: 80px; - position: relative; -} - -#bar>div:last-child>img { - width: 90%; -} - -#bar>div:last-child { - right: 5em; - top: -47px; -} - -#bar>div:nth-child(1) { - left: 8rem; - top: 25px; - line-height: 2rem; - color: white; - font-family: 'Raleway', sans-serif; -} - -#bar>div:nth-child(1)>button { - background-color: white; - color: rgb(0, 70, 190); - border: none; - border-radius: 5px; - padding: 5px 20px 5px 20px; - font-weight: 600; -} - -#bar>div:nth-child(1)>button:hover { - background-color: rgb(11, 54, 127); - color: white; - cursor: pointer; - border: 1px solid white; - font-family: 'Raleway', sans-serif; -} - -#bar>div:nth-child(2) { - border: none; - border-radius: 1px; - width: 1px; - height: 90px; - left: 20em; - top: 30px; - background-color: white; -} - -#bar>div:nth-child(3) { - top: 20px; - width: 45%; - left: 22em; - padding: 10px; - color: white; - font-family : 'Raleway', sans-serif; -} - -#bar>div:nth-child(3)>h1 { - font-size: 1.5rem; - letter-spacing: 2px; -} - -#bar>div:nth-child(3)>p:nth-child(2) { - font-size: .9rem; - color: white; - font-family: 'Raleway', sans-serif; -} - -#bar>div:nth-child(3)>p:nth-child(3) { - font-size: .5rem; - color: white; - font-family: 'Raleway', sans-serif; -} - -/* Fifth Section */ - -#fifthsec{ - width: 100%; - background-color: white; - display: grid; - grid-template-columns: repeat(3,1fr); - justify-content: space-around; - gap: 10px; - padding-bottom: 40px; -} -#fifthsec >div > p{ - font-size: 20px; - font-family: 'Raleway', sans-serif; - font-weight: bold; - margin-left: 13px; -} -#fifthsec > div{ - height: 100%; - margin: auto; - padding: 20px; - background-color: - #f0f2f4; -} -#fifthsec > div > div{ - display: grid; - grid-template-columns: repeat(2, 1fr); - padding: 10px; - gap: 20px; -} -#fifthsec > div > div p{ - color: #0046be; -} -#fifthsec > div > div p:hover{ - color: rgb(23, 23, 143); - text-decoration: underline; - cursor: pointer; -} -#fifthsec > div > div img{ - height: 170px; - cursor: pointer; -} - -/* Sixth Section */ -#sixthsec{ - height: fit-content; - width: 100%; - background-color: white; -} -#sixthsec > p{ - font-size: 20px; - margin-bottom: 20px; - margin-left: 15px; - font-family: 'Raleway', sans-serif; - font-weight: bold; -} -#sixthsec > div{ - display: grid; - grid-template-columns: repeat(3,1fr); -} -#sixthsec > div > div{ - border: 0.5px solid rgb(228, 226, 226); - padding: 30px; -} -#sixthsec > div > div > img{ - height: 250px; - cursor: pointer; -} -#sixthsec > div > div > P:nth-child(2){ - color: #0457c8; - font-size: 20px; - font-weight: bold; - font-family: 'Raleway', sans-serif; - margin-top: 10px; -} -#sixthsec > div > div > P:nth-child(2):hover{ - color: rgb(23, 23, 143); - text-decoration: underline; - cursor: pointer; -} -#sixthsec > div > div > P:nth-child(3){ - font-size: 14px; - font-family: 'Raleway', sans-serif; - margin-top: 10px; -} -#sixthsec > div > div > P:nth-child(4){ - font-size: 12px; - font-family: 'Raleway', sans-serif; - margin-top: 10px; - color: gray; -} - -/* Seventh Section & Eighth Section & Tenth Section*/ - -#seventhsec , #eighthsec, #tenthsec{ - width: 100%; - background-color: white; - height: fit-content; -} -#seventhsec > p, #eighthsec > p, #tenthsec > p { - padding-top: 50px; - font-family: 'Raleway', sans-serif; -} -#seventhsec > p > span:first-child, #eighthsec > p > span:first-child,#tenthsec > p > span:first-child{ - font-size: 20px; - margin-bottom: 20px; - margin-left: 15px; - font-weight: bold; -} -#seventhsec > div, #eighthsec > div, #tenthsec> div{ - display: grid; - grid-template-columns: repeat(6,1fr); -} -#seventhsec > div > div, #eighthsec > div > div, #tenthsec > div > div{ - padding: 30px; -} -#seventhsec > div > div > img, #eighthsec > div > div > img, #tenthsec > div > div > img{ - height: 100px; - cursor: pointer; -} -#tenthsec > div > div > img{ - width: 100%; -} -#seventhsec > div > div > P:nth-child(2), #eighthsec > div > div > P:nth-child(2), #tenthsec > div > div > P:nth-child(2){ - color: #0457c8; - font-size: 12px; - font-family: 'Raleway', sans-serif; - margin-top: 10px; -} -#seventhsec > div > div > P:nth-child(2):hover, #eighthsec > div > div > P:nth-child(2):hover, #tenthsec > div > div > P:nth-child(2):hover{ - color: rgb(23, 23, 143); - text-decoration: underline; - cursor: pointer; -} -#seventhsec > div > div > P:nth-child(3), #eighthsec > div > div > P:nth-child(3), #tenthsec > div > div > P:nth-child(3){ - font-size: 14px; - font-family: 'Raleway', sans-serif; - margin-top: 10px; - font-weight: bold; -} - -/* Ninth Section */ - -#ninthsec{ - width: 100%; - background-color: white; - height: fit-content; -} -#ninthsec > div:first-child{ - display: grid; - grid-template-columns: repeat(3,1fr); - gap: 30px; - width: 98%; - margin: auto; - margin-bottom: 40px; -} -#ninthsec > div:first-child > div{ - border: 1px solid lightgray; - display: grid; - justify-content: center; - padding: 20px; -} -#ninthsec > div:first-child > div > img{ - width: 100%; - cursor: pointer; -} -#ninthsec > div:first-child > div > :nth-child(2){ - color: #0046be; - font-size: 20px; - font-family: 'Raleway', sans-serif; - font-weight: bold; - margin-top: 10px; -} -#ninthsec > div:first-child > div > :nth-child(2):hover{ - color: rgb(23, 23, 143); - text-decoration: underline; - cursor: pointer; -} -#ninthsec > div:first-child > div > :nth-child(3){ - font-size: 14px; - font-family: 'Raleway', sans-serif; - margin-top: 10px; -} -#ninthsec > div:last-child{ - height: fit-content; - width: 98%; - margin: auto; - background-color: #0046be; - display: flex; - align-items: center; - justify-content: center; -} -#ninthsec > div:last-child > img { - height: 100px; -} -#ninthsec > div:last-child > div{ - display: grid; - align-items: center; - margin-left: 30px; -} -#ninthsec > div:last-child > div > p:first-child{ - color: white; - font-size: 20px; - font-weight: bold; - font-family: 'Raleway', sans-serif; -} -#ninthsec > div:last-child > div > p:last-child{ - color: yellow; - font-size: 40px; - font-weight: bold; - font-family: 'Raleway', sans-serif; -} -#ninthsec > div:last-child > p{ - color: white; - font-family: 'Raleway', sans-serif; - width: 20%; - margin-left: 30px; -} -#ninthsec > div:last-child > button{ - background-color: yellow; - color: black; - font-family: 'Raleway', sans-serif; - padding: 10px 25px; - border: 0px; - border-radius: 5px; - font-weight: bolder; - margin-left: 30px; - cursor: pointer; -} -/* Medium screen */ - -@media all and (min-width:768px) and (max-width:1024px){ - - /* navbar */ - - /* First div */ - #main > input{ - width: 20%; - } - #main > select{ - font-size: 18px; - width: 12%; - } - #main > img:first-child{ - margin-left: 0.5%; - } - #main > img:nth-child(2){ - margin-left: 0.5%; - } - #main > img:nth-child(6){ - margin-left: 3%; - } - #main > img:nth-child(8){ - margin-left: 1%; - } - /* Second div */ - #buttons > div{ - font-size: 12px; - } - #buttons select{ - font-size: 10px; - } - #buttons > div:last-child{ - width: 45%; - margin-right: 0.5%; - } - #buttons > div:first-child{ - width: 48%; - margin-left: 0.5%; - } - - /* Homepage */ - - /* First section */ - - #firstsec{ - display: inline; - } - #firstsec > div:first-child{ - width: 100%; - } - #firstsec > div:first-child > p{ - right: 23%; - } - #firstsec > div:first-child > button{ - right: 43%; - } - #firstsec > div:last-child{ - width: 100%; - } - - /* Second section */ - - #secondsec1{ - grid-template-columns: repeat(2,1fr); - } - #secondsec3{ - margin-left: 7px; - } - - /* Third section */ - - #thirdsec{ - grid-template-columns: repeat(1,1fr); - } - #bar>div:last-child>img { - width: 0%; - } - #bar>div:nth-child(3)>h1{ - font-size: 1em; - } - #bar>div:nth-child(3)>p:nth-child(2){ - font-size: 0.7em; - margin-top: 3px; - margin-bottom: 5px; - } - - /* Forth section */ - - #forthsec1{ - grid-template-columns: repeat(2, 1fr); - } - #forthsec1 > div:first-child{ - justify-content: center; - } - #forthsec1 > div:last-child{ - justify-content: center; - } - - /* Fifth Section */ - #fifthsec{ - grid-template-columns: repeat(2,1fr); - } - - /* Sixth Section */ - - #sixthsec > div{ - grid-template-columns: repeat(2,1fr); - } - - /* Seventh Section & Eighth Section */ - - #seventhsec > div, #eighthsec > div, #tenthsec > div{ - display: grid; - grid-template-columns: repeat(3,1fr); - } - - /* Ninth Section */ - #ninthsec > div:first-child{ - grid-template-columns: repeat(2,1fr); - } -} - -/* Small screen */ - -@media all and (min-width:340px) and (max-width:767px){ - - /* navbar */ - - #main .other, #buttons .other{ - width: 0%; - height: 0%; - font-size: 0px; - font-size: 0%; - } - - /* First div */ - #first > div{ - grid-template-columns: repeat(2,1fr); - } - #main > select{ - font-size: 18px; - width: 30%; - margin-left: 0%; - } - #main > input{ - width: 60%; - } - #main > p:nth-child(7){ - font-size: 0px; - margin: 0%; - } - #main > img:nth-child(6){ - margin-left: 0%; - } - #main > img:nth-child(8){ - margin-left: 0%; - } - - /* Second div */ - #buttons > div:last-child{ - width: 35%; - margin-right: 1%; - } - #buttons > div:first-child{ - width: 50%; - margin-left: 0.5%; - } - #main > div{ - width: 0%; - height: 0%; - } - - /* Homepage */ - - /* First section */ - - #firstsec{ - display: inline; - } - #firstsec > div:first-child{ - width: 100%; - } - #firstsec > div:first-child > p{ - font-size: 0px; - } - #firstsec > div:first-child > button{ - right: 45rem; - } - #firstsec > div:last-child{ - width: 100%; - } - #second{ - display: block; - } - #second > div:first-child{ - height: fit-content; - width: 100%; - } - #second > div:last-child{ - height: fit-content; - width: 100%; - } - - /* Second section */ - - #secondsec1{ - grid-template-columns: repeat(1,1fr); - } - #secondsec3{ - margin-left: 7px; - } - #secondsec2{ - display: inline; - } - - /* Third section */ - - #thirdsec{ - grid-template-columns: repeat(1,1fr); - } - #bar>div:last-child>img { - width: 0%; - } - #bar>div:nth-child(3)>h1{ - font-size: 1em; - } - #bar>div:nth-child(3)>p:nth-child(2){ - font-size: 0.5em; - margin-top: 3px; - margin-bottom: 5px; - } - #bar>div:nth-child(1){ - left: 1rem; - } - #bar>div:nth-child(2){ - left: 12rem; - } - #bar>div:nth-child(3){ - left: 13rem; - } - - /* Forth section */ - - #forthsec1{ - grid-template-columns: repeat(1, 1fr); - } - #forthsec1 > div:first-child{ - justify-content: center; - } - #forthsec1 > div:last-child{ - justify-content: center; - } - - /* Fifth Section */ - - #fifthsec{ - grid-template-columns: repeat(1,400px); - } - - /* Sixth Section */ - - #sixthsec > div{ - grid-template-columns: repeat(1,1fr); - } - - /* Seventh Section & Eighth Section */ - - #seventhsec > div, #eighthsec > div, #tenthsec > div{ - display: grid; - grid-template-columns: repeat(2,1fr); - } - - #ninthsec > div:first-child{ - grid-template-columns: repeat(1,1fr); - } -} - -/* Footer */ - -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); - -/* footer css css*/ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; -} - -footer{ - background-color: rgb(240,242,244); - width: 100%; -} - - -.sec_1{ - display: grid; - gap: 30px; - grid-template-columns: repeat(5,1fr); - text-align: center; -} -.sec_1>div{ - padding: 60px; -} -.sec_1>div:hover{ - cursor: pointer; -} - -.font-60{ - font-size: 60px; - padding-bottom: 20px; - color: gray; -} - -.sec_1>div>a{ - text-decoration: none; - margin-top: 10px; - font-family: 'Poppins' , sans-serif; - font-weight: 600; - font-size: 14px; - color: rgb(9,90,201); -} -.sec_1>div>a:hover{ - text-decoration: underline; -} -.hl{ - width: 95%; - background-color: rgb(152, 150, 150); - height: 1px; - margin: auto; -} - -.sec_2{ - display: flex; - justify-content: space-around; - flex-wrap: wrap; -} - -#sec_2-1{ - margin-top: 10px; - display: grid; - grid-template-columns: repeat(3 , 1fr); - grid-template-rows: repeat(2 , 1fr); -} - -#sec_2-1>div>h3{ - font-family: 'Poppins' , sans-serif; -} -#sec_2-1>div>p{ - color: rgb(9,90,201); - font-family: 'Poppins' , sans-serif; - padding-top: 20px; -} -footer>div:nth-child(4){ - display: flex; - justify-content: space-between; - margin-top: 50px; - padding: 20px; -} -footer>div:nth-child(4)>div{ - display: flex; - justify-content: space-around; -} -footer>div:nth-child(4)>p>span{ - color: rgb(9,90,201); - font-family: 'Poppins' ,sans-serif; -} -footer>div:nth-child(4)>div>p{ - color: rgb(9,90,201); - font-family: 'Poppins' ,sans-serif; - margin-right: 40px; -} - - -#footer_form{ - background-color: white; - width: 30%; - padding: 10px 20px 10px 30px; - margin-top: 20px; - border-radius: 10px; - box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px; -} - -#footer_form>p:first-child{ - color: rgb(9,90,201); - font-family: 'Poppins' , sans-serif; - font-weight: 500; - padding-bottom: 15px; -} - -#footer_form>h3{ - font-family: 'Poppins',sans-serif; - font-weight: 500; - padding-bottom: 15px; - padding-top: 15px; -} -#footer_form>input:nth-child(4){ - padding: 10px 40px 10px 20px; - border-radius: 5px; - border: 1px solid gray; - margin-left: 10px; -} -#footer_form>input:nth-child(5){ - margin-left: 15px; - padding: 10px 30px 10px 30px; - border-radius: 5px; - border: none; - background-color: rgb(9,90,201); - color: white; -} -.fa-mobile-button{ - font-size: 60px; - color: rgb(9,90,201); -} -#footer_form>div:nth-child(7){ - padding: 20px; -} -#footer_form>div:nth-child(7)>p{ - font-family: 'Poppins' , sans-serif; -} -#footer_form>div:nth-child(7)>span{ - font-size: 30px; - font-family: 'Poppins' ,sans-serif; - font-weight: 600; -} - -.fa-brands{ - font-size: 35px; - margin: 20px 5px 20px 40px; - color: rgb(9,90,201); -} -#footer_form>p:last-child{ - padding-left: 10px; - color: rgb(9,90,201); - font-family: 'Poppins' ,sans-serif; -} - -#sec_3>div:first-child{ - display: flex; - color: rgb(9,90,201); - justify-content: space-around; - font-size: 13px; - width: 90%; - margin-top: 30px; - font-family: 'Poppins' , sans-serif; -} -#sec_3>div:last-child{ - color: rgb(115, 115, 115); - width: 90%; - font-size: 15px; - margin-top: 20px; - font-family: 'Poppins' ,sans-serif; - margin-left: 20px; -} - -@media all and (min-width: 1324px) and (max-width: 1524px){ - #footer_form{ - width: 35%; - } -} -@media all and (min-width: 768px) and (max-width: 1324px) { - .sec_1{ - grid-template-columns: repeat(3, 1fr); - } - #footer_form{ - width: 50%; - } - #sec_2{ - grid-template-columns: 1fr; - grid-template-rows: repeat(2,1fr); - } - #sec_2-1{ - padding: 10px; - gap: 20px; - grid-template-columns: repeat(2 , 1fr); - } -} - -@media all and (min-width: 320px) and (max-width: 867px) { - .sec_1{ - grid-template-columns: repeat(2 ,1fr); - } - #footer_form{ - width:80%; - } - #sec_2-1{ - padding: 20px; - gap: 20px; - } - #sec_3>div:first-child{ - display: grid; - grid-template-columns: repeat(3,1fr); - gap: 10px; - padding: 20px; - } - #footer_form>input{ - margin-top: 15px; - } -} \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 06ee48d..0000000 --- a/index.html +++ /dev/null @@ -1,485 +0,0 @@ - - - - - - - Best Buy - - - - - -
- logo - -
- -
- Top Deals - Deals of the Day - All Appliances - Mobiles - Laptops - Best Buy Outlet - Toys, Games & Collectibles -
-
- -
- -
- -

Aiea

- -

Cart

-
-
-
-

Top Deals

-

- Deal of the Day

-

- Totaltech Membership

-

- Credit Cards

-

- Gift Cards

-

- Gift Ideas

- -
-
-
- - -
- - - -
-
- - - - -
-
- -

Deals Mode Activated

- -
-
-
-

Today's popular picks

-
-
-
-
-

- Outlet - Deals -

-

- Clearance - , open-box and more - . -

-

View outlet deals

-
-
-

Continue Shopping

- -

Apple - iPhone 13 Pro Max 5G 128GB...

-

Save on similar items

-
-
-
-
- - - -
-

Most-viewed items

-
-
-
-
-
- -
-

Shop safely and confidently.

-

See our safety procedures

-
-
-
- -
-

- Get help shopping from home.

-

Shop with an Expert

-
-
-
-
-

Insignia™ air fryers product recall. -

-

Learn more

-
-
- - - -
-
-
-

Save up to $500

-

on select Windows laptops.

-

Minimum savings is $30.

- -
- -
-
-
-

Smart TVs

-

as low as $109.99.

- -
- -
-
- - - -
-
-
- -
-

Ready in one hour

-

with Store or Curbside Pickup.

-
-
-
- -
-

- Free next-day delivery

-

on thousands of items.

-
-
-
- -
-

- Same-day delivery.

-

Order by 3 p.m., get it by 8 p.m.

-

Order by 2 p.m. Sunday.

-
-
-
- -
-
- -
-

Best Buy

-

Total Tech

- -
-
- -
- -

The membership you and your tech deserve.

-

Best Buy Totaltech™ provides 24/7/365 tech support, up to 24 months of product protection with active - membership, free standard installation and so much more.

-

Terms and conditions apply*.

-
-
- - workers -
-
-
-
- - -
-
-

Father's Day gifts

-
-
- -

For chill dads

-
-
- -

For outdoorsy dads

-
-
- -

For exercise-loving dads

-
-
- -

For chef dads

-
-
-
- -
-

Grad gift ideas

-
-
- -

For little grads

-
-
- -

For middle school grads

-
-
- -

For high school grads

-
-
- -

For college grads

-
-
-
- -
-

We’re driven by our impact

-
-
- -

Tech access means brighter futures

-
-
- -

More celebrating. More love.

-
-
- -

Sustainability is part of our ecosystem

-
-
- -

Committed to making a difference

-
-
-
-
- - - -
-

Our featured offers

-
-
-
- - - -
-

Related to items you've viewed - (6 items)

-
-
-
- - - -
-

You may also like - (6 items)

-
-
-
- - - -
-
-
- -

Deal of the Day.

-

Great deals. Every day.

-
-
- -

Clearance, open-box and more.

-

Save when you shop the Best Buy Outlet for clearance, open-box, refurbished and pre-owned items.

-
-
- -

-

-
-
-
- -
-

Apply today and get

-

10% back

-
-

in rewards on your first day of purchases when you are approved for the Card.

- -
-
- - - -
-

Featured products - (6 items)

-
-
-
- - - - - - diff --git a/index.js b/index.js deleted file mode 100644 index 1496ffa..0000000 --- a/index.js +++ /dev/null @@ -1,287 +0,0 @@ -// Navbar - - -document.querySelector("#main > img:first-child").addEventListener("click", function(){ - window.location.href = "index.html"; -}); - -// Menu -function myFunction() { - document.getElementById("myDropdown").classList.toggle("show"); - } - - window.onclick = function(event) { - if (!event.target.matches('.dropbtn')) { - var dropdowns = document.getElementsByClassName("dropdown-content"); - var i; - for (i = 0; i < dropdowns.length; i++) { - var openDropdown = dropdowns[i]; - if (openDropdown.classList.contains('show')) { - openDropdown.classList.remove('show'); - } - } - } - } - - // Account -function myFunction1() { - document.getElementById("myDropdown1").classList.toggle("show"); - } - - window.onclick = function(event) { - if (!event.target.matches('.dropbtn1')) { - var dropdowns1 = document.getElementsByClassName("dropdown-content1"); - var j; - for (j = 0; j < dropdowns1.length; j++) { - var openDropdown1 = dropdowns1[j]; - if (openDropdown1.classList.contains('show')) { - openDropdown1.classList.remove('show'); - } - } - } - } - - let account = document.querySelector(".dropbtn1"); - tempUserData = JSON.parse(localStorage.getItem("tempUserData")); - if (tempUserData == undefined){ - account.innerText = "Account"; - } - else { - account.innerText = "Hi, " + tempUserData[0].Name; - } - -// cart Image -document.querySelector("#main > p:last-child").addEventListener("click", function(){ - window.location.href = "cartpage.html"; -}); - -// Top deals -document.querySelector("#top").addEventListener("click",function(){ - window.location.href = "topDeals.html"; -}); - -// Deals of the day -document.querySelector("#deal").addEventListener("click", function(){ - window.location.href = "dealsOftheDay.html"; -}); - -// Account -// document.querySelector("#account").addEventListener("click", function(){ -// let selectedd = document.querySelector("#account").value; -// if (selectedd == "signin"){ -// window.location.href = "login.html"; -// } -// else if (selectedd == "create"){ -// window.location.href = "signup.html"; -// } -// else if (selectedd == "ac"){ -// window.location.href = "userAccount.html"; -// } -// }); - - -// Homepage - -// First Section - -firstsec = [ - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/4900/4900942_sd.jpg;maxHeight=640;maxWidth=550", - text : "Apple - AirPods Pro (with Magsafe..."}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6487/6487447_sd.jpg;maxHeight=640;maxWidth=550", - text : "Apple - iPhone 13 Pro Max 5G 128GB - Alpin..."}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6215/6215932_sd.jpg;maxHeight=640;maxWidth=550", - text : "Apple Watch Series 7 (GPS) 41mm Midnight..."}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5721/5721600_sd.jpg;maxHeight=640;maxWidth=550", - text : "MacBook Air 13.3 Laptop - Apple M1..."} -]; - -firstsec.forEach(function(el){ - let first = document.querySelector("#first > div"); - let div = document.createElement("div"); - let img = document.createElement("img"); - img.setAttribute("src", el.image); - let p = document.createElement("p"); - p.innerText = el.text; - div.append(img, p); - first.append(div); -}); - -// Second section - -let secondsec = [ - {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6502/6502660_sd.jpg;maxHeight=400;maxWidth=400", - text :"Lenovo - Ideapad 1 15.6 FHD Touch-Screen Laptop - Ryzen 7..."}, - {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6505/6505200_sd.jpg;maxHeight=400;maxWidth=400", - text :"Microsoft - Surface Laptop Go 2 - 12.4” Touch-Screen – Intel Core i5..."}, - {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6503/6503849_sd.jpg;maxHeight=400;maxWidth=400", - text :"HP - Victus 15.6 Gaming Laptop - Intel Core i5-12450H - 8GB Memory - NVIDIA GeForce GTX..."}, - {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6505/6505727_rd.jpg;maxHeight=400;maxWidth=400", - text :"Sony - WH-1000XM5 Wireless Noise-Canceling Over-the-Ear..."}, - {image:"https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6509/6509757_sd.jpg;maxHeight=400;maxWidth=400", - text :"Doctor Strange in the Multiverse of Madness [SteelBook][Digital..."} -]; - -secondsec.forEach(function(el){ - let secondsec1 = document.querySelector("#secondsec1"); - let div = document.createElement("div"); - let img = document.createElement("img"); - img.setAttribute("src", el.image); - let p = document.createElement("p"); - p.innerText = el.text; - div.append(img, p); - secondsec1.append(div); -}); - -// Sixth section - -sixthsec = [ - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/dam/MMT-549829_pol_COPE_DER-fa200b0f-0f59-4944-84ce-13f51119db12.jpg;maxHeight=504;maxWidth=740", - p : "Apple Watch Save up to $70 on select models.", - p1 : "Give Dad the gift of Apple Watch.", - p2 : "Minimum savings is $30. Excludes open-box and refurbished items."}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/dam/pol_MMT-549800_der-b2458fef-e15a-4f61-87e6-66976b17ba3a.jpg;maxHeight=504;maxWidth=740", - p : "Appliance Summer Savings Event..", - p1 : "Bring summer home with new appliances for your kitchen and laundry room."}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/dam/pol_microsoft-happy-guy-v2-0620-3a7b8bc1-22dd-4fc9-8cf6-905382572981.jpg;maxHeight=504;maxWidth=740", - p : "Introducing Surface Laptop Go 2.", - p1 : "Sleek, light, on the go performance."}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/dam/pol-traeger-mmt549810-5ca17726-f4bd-490f-9b37-99065dacf67f.jpg;maxHeight=504;maxWidth=740", - p : "Save up to $150 on select Traeger grills.", - p1 : "Experience the flavor of wood pellet grilling this summer.", - p2 : "Minimum savings is $75."}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/dam/MMT-549477_pol_COPE_DER-bb7580c0-afa1-4b6b-9775-d78aa1be89e3.jpg;maxHeight=504;maxWidth=740", - p : "Save up to $100 on select wearables.", - p1 : "Keep your goals on track with smartwatches and fitness trackers from Fitbit, Garmin and Citizen.", - p2 : "Minimum savings is $20."}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/dam/pol-MMT-552676-220606_DER-b3ba4051-f64a-439b-88f2-99e7308c0c6a.jpg;maxHeight=504;maxWidth=740", - p : "Save up to $100 on select GoPro.", - p1 : "Plus, get a free $25 Best Buy e-Gift Card with GoPro HERO10 Black action camera.", - p2 : "Minimum savings is $50. Terms and conditions apply to gift card offer."} -] -sixthsec.forEach(function(el){ - let sixthsec1 = document.querySelector("#sixthsec > div"); - let div = document.createElement("div"); - let img = document.createElement("img"); - img.setAttribute("src", el.image); - let text1 = document.createElement("p"); - text1.innerText = el.p; - let text2 = document.createElement("p"); - text2.innerText = el.p1; - let text3 = document.createElement("p"); - if (el.p2 == undefined){ - text3.innerText = ""; - } - else { - text3.innerText = el.p2; - } - div.append(img, text1, text2, text3); - sixthsec1.append(div); -}); - -// Seventh Section - -seventhsec = [ - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6418/6418601_sd.jpg;maxHeight=272;maxWidth=400", - text : "MacBook Pro 13.3 Laptop - Apple M1 chip - 8GB Memory - 256GB SSD - Space Gray", - price : "$1,199.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/4900/4900944_sd.jpg;maxHeight=272;maxWidth=400", - text : "Apple - AirPods (3rd generation) - White", - price : "$169.00"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6487/6487448_sd.jpg;maxHeight=272;maxWidth=400", - text : "Apple - iPhone 13 Pro Max 5G 256GB - Alpine Green (T-Mobile)", - price : "$46.66/mo"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6394/6394628_sd.jpg;maxHeight=272;maxWidth=400", - text : "Apple - Geek Squad Certified Refurbished AirPods Pro - White", - price : "$149.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/4900/4900942_sd.jpg;maxHeight=272;maxWidth=400", - text : "Apple - AirPods Pro (with Magsafe Charging Case) - White", - price : "$179.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6401/6401735_sd.jpg;maxHeight=272;maxWidth=400", - text : "Samsung - 55 Class 7 Series LED 4K UHD Smart Tizen TV", - price : "$399.99"}, -] - -seventhsec.forEach(function(el){ - let seventhsec1 = document.querySelector("#seventhsec > div"); - let div = document.createElement("div"); - let img = document.createElement("img"); - img.setAttribute("src", el.image); - let text1 = document.createElement("p"); - text1.innerText = el.text; - let text2 = document.createElement("p"); - text2.innerText = el.price; - div.append(img, text1, text2); - seventhsec1.append(div); -}); - -// Eighth Section - -eighthsec = [ - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6489/6489522_sd.jpg;maxHeight=272;maxWidth=400", - text : "Apple - Geek Squad Certified Refurbished AirPods (3rd generation) - White", - price : "$107.49"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6397/6397391_rd.jpg;maxHeight=272;maxWidth=400", - text : "Beats by Dr. Dre - Beats Fit Pro True Wireless Noise Cancelling In-Ear Earbuds - Black", - price : "$179.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/4900/4900915_sd.jpg;maxHeight=272;maxWidth=400", - text : "Beats by Dr. Dre - Beats Studio Buds Totally Wireless Noise Cancelling Earbuds - Black", - price : "$119.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6419/6419203_sd.jpg;maxHeight=272;maxWidth=400", - text : "Bose - QuietComfort Earbuds True Wireless Noise Cancelling In-Ear Earbuds - Triple Black", - price : "$199.00"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5920/5920901_rd.jpg;maxHeight=272;maxWidth=400", - text : "Beats by Dr. Dre - Beats Studio³ Wireless Noise Cancelling Headphones - Matte Black", - price : "$199.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6341/6341988_rd.jpg;maxHeight=272;maxWidth=400", - text : "Beats by Dr. Dre - Powerbeats Pro Totally Wireless Earbuds - Black", - price : "$199.99"}, -] - -eighthsec.forEach(function(el){ - let eighthsec1 = document.querySelector("#eighthsec > div"); - let div = document.createElement("div"); - let img = document.createElement("img"); - img.setAttribute("src", el.image); - let text1 = document.createElement("p"); - text1.innerText = el.text; - let text2 = document.createElement("p"); - text2.innerText = el.price; - div.append(img, text1, text2); - eighthsec1.append(div); -}); - -// Tenth Section - -tenthsec = [ - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6478/6478928_sd.jpg;maxHeight=150;maxWidth=225", - text : "Ray-Ban - Stories Wayfarer Smart Glasses 50mm - Shiny Olive/Transitions G-15...", - price : "$379.00"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6478/6478917_sd.jpg;maxHeight=150;maxWidth=225", - text : "Ray-Ban - Stories Round Smart Glasses - Shiny Blue/Dark Blue Polarized", - price : "$299.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6502/6502943_sd.jpg;maxHeight=150;maxWidth=225", - text : "HP - Victus 15.6 Gaming Laptop - Intel Core i7-12650H - 16GB Memory -...", - price : "$1,099.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6498/6498473_bd.jpg;maxHeight=150;maxWidth=225", - text : "HP - ENVY Desktop - Intel Core i7 - 16GB Memory - 1TB SSD - Black", - price : "$799.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6323/6323216_sd.jpg;maxHeight=150;maxWidth=225", - text : "Samsung - 28 cu. ft. 4-Door French Door Refrigerator with FlexZone Drawer -...", - price : "$2,299.99"}, - {image : "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6452/6452813cv1d.jpg;maxHeight=150;maxWidth=225", - text : "Mounted Solar Panel Charger for Arlo Ultra, Ultra 2, Pro 3 and Pro 4 Cameras ", - price : "$59.99"}, -] - -tenthsec.forEach(function(el){ - let tenthsec1 = document.querySelector("#tenthsec > div"); - let div = document.createElement("div"); - let img = document.createElement("img"); - img.setAttribute("src", el.image); - let text1 = document.createElement("p"); - text1.innerText = el.text; - let text2 = document.createElement("p"); - text2.innerText = el.price; - div.append(img, text1, text2); - tenthsec1.append(div); -}); \ No newline at end of file diff --git a/laptops.css b/laptops.css new file mode 100644 index 0000000..2e3a121 --- /dev/null +++ b/laptops.css @@ -0,0 +1,1000 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +/* nav bar */ +#main >select > option , #buttons select > option{ + background-color: white; + color: #0046be; + font-family: 'Raleway', sans-serif; +} +#main > select, #buttons > select{ + cursor: pointer; +} + +/* First div */ + +#main{ + height: 70px; + width: 100%; + min-width: 100vw; + background-color: + #0046be; + display: flex; + align-items: center; +} +#main > img:first-child{ + height: 90%; + margin-left: 1.5%; + cursor: pointer; +} +#main > img:nth-child(2){ + height: 30px; + cursor: pointer; + margin-left: 2%; +} +#main > div > img{ + height: 55%; +} + +#main > div:nth-child(5){ + display: flex; + align-items: center; + background-color: white; + height: 57%; + padding-right: 10px; + padding-left: 10px; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; +} +#search-nav{ + height: 60%; + width: 35%; + padding-left: 1%; + font-size: 18px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border: 1px solid #0046be; + border-right: white; + margin-left: 2%; +} +/* #main > select{ + background-color: #0046be; + color: white; + font-weight: bold; + font-size: 20px; + border: 1px solid #0046be; + width: 6%; +} */ + +/* Drop down */ + +.dropbtn { + /* background-color: #3498DB; + color: white; + padding: 16px; + font-size: 16px; */ + background-color: #0046be; + color: white; + font-weight: bold; + font-size: 20px; + border: 1px solid #0046be; + width: 6%; + border: none; + cursor: pointer; + } + .dropbtn1 { + background-color: #0046be; + color: white; + font-weight: bolder; + font-size: 14px; + border: 1px solid #0046be; + width: 8%; + border: none; + cursor: pointer; + } + .dropdown,.dropdown1 { + position: relative; + display: inline-block; + } + .dropdown-content , .dropdown-content1{ + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + overflow: auto; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + } + .dropdown-content a , .dropdown-content1 a{ + color: #0046be; + padding: 12px 16px; + text-decoration: none; + display: block; + font-family: 'Raleway', sans-serif; + } + .show {display: block;} + + .dropdown-content a:hover, .dropdown-content1 a:hover{ + text-decoration: underline; + } +#main > p{ + color: white; + font-size: 24px; + font-weight: bold; +} +#main > p:nth-child(7){ + cursor: pointer; + font-family: 'Raleway', sans-serif; +} +#main > img:nth-child(8){ + height: 80%; + cursor: pointer; + margin-left: 3%; +} +#main > p:last-child{ + cursor: pointer; + margin-right: 1%; + font-family: 'Raleway', sans-serif; +} +#main > p:last-child:hover{ + text-decoration: underline; +} +#main > img:nth-child(6){ + height: 100%; + cursor: pointer; + margin-left: 18%; +} + +/* Second div */ + +#buttons{ + height: 50px; + width: 100%; + border-top: 0.5px solid + #1e88e5; + background-color: #0046be; + display: flex; + justify-content: space-between; + font-family: 'Raleway', sans-serif; +} +#buttons > div{ + display: flex; + align-items: center; + color: white; + font-size: 14px; +} +#buttons > div:first-child{ + width: 52%; + justify-content: space-around; + margin-left: 2%; +} +#buttons > div:last-child{ + width: 37%; + justify-content: space-between; + margin-right: 3.5%; +} +#buttons select{ + background-color: #0046be; + color: white; + font-size: 14px; + border: 0px; + font-family: 'Raleway', sans-serif; + font-weight: bold; +} +#buttons p{ + cursor: pointer; +} +#buttons P:hover{ + text-decoration: underline; +} + +/* Medium screen */ + +@media all and (min-width:768px) and (max-width:1023px){ + #main .other1, #buttons .other1{ + width: 0%; + height: 0%; + font-size: 0px; + font-size: 0%; + } + + /* First div */ + #search-nav{ + width: 20%; + font-size: 14px; + } + /* #main > select{ + font-size: 18px; + width: 12%; + } */ + #main > img:first-child{ + margin-left: 0.5%; + + } + #main > img:nth-child(2){ + margin-left: 0.5%; + } + #main > img:nth-child(6){ + margin-left: 3%; + } + #main > img:nth-child(8){ + margin-left: 1%; + } + /* Second div */ + #buttons > div{ + font-size: 12px; + } + #buttons select{ + font-size: 10px; + } + #buttons > div:last-child{ + width: 45%; + margin-right: 0.5%; + } + #buttons > div:first-child{ + width: 48%; + margin-left: 0.5%; + } +} + +/* Small screen */ + +@media all and (min-width:340px) and (max-width:767px){ + + #main .other, #buttons .other{ + width: 0%; + height: 0%; + font-size: 0px; + font-size: 0%; + } + + /* First div */ + /* #main > select{ + font-size: 18px; + width: 30%; + margin-left: 0%; + } */ + #main > img:first-child{ + height: 60%; + } + #search-nav{ + width: 60%; + font-size: 12px; + } + #main > p:nth-child(7){ + font-size: 0px; + margin: 0%; + } + #main > img:nth-child(6){ + margin-left: 0%; + } + #main > img:nth-child(8){ + margin-left: 0%; + } + + /* Second div */ + #buttons > div:last-child{ + width: 35%; + margin-right: 1%; + } + #buttons > div:first-child{ + width: 50%; + margin-left: 0.5%; + } + /* #main > div{ + width: 0%; + height: 0%; + } */ +} +/* nav bar */ + + +#bb-ap-sale{ + margin-left: 5%; + margin-top: 5px; + font-size: 13px; + +} +.bb-ap-sale-text{ + color: blue; +} +#mj-ap-sale{ + width: 95%; + display: block; + margin-top: 10px; + margin-left: 4.5%; + padding: 10px; + font-size: 18px; + font-weight: bold; +} + + +/* body of the page */ +#pagebody{ + width: 95%; + display: grid; + grid-template-columns: 1fr 3fr; + margin: auto; + justify-content: center; + justify-content: space-between; + gap: 20px; +} +.scroll { + border: 1px solid rgb(150, 146, 146); + /* width: 22%; */ + height: 550px; + overflow-x: hidden; + overflow-y: auto; + text-align: center; + position: sticky; + top: 7.5%; + margin-bottom: 40%; + margin-left: 30px; +} +#product-container-div{ + height: auto; + border-bottom: 1px solid rgb(150, 146, 146); +} +.product-category{ + font-weight: 100px; + font-size: 14px; + color: blue; + margin-left: 15%; + margin-top: 5px; +} +.p-c-all{ + margin-left: 10%; +} +#filter-brands{ + margin-left: 10%; + margin-top: 5px; + font-size: 15px; +} +#brands-container-div{ + height: auto; + border-bottom: 1px solid rgb(150, 146, 146); +} +#pc-cata{ + margin-bottom: 8px; + font-size: 15px; +} +#pc-cata+input,label{ + margin-bottom: 10px; +} +#items{ + /* width: 73%; */ + height: 100%; +} +div.scroll>div { + text-align: left; +} +#fbp-line{ + height: auto; +} +#filter-price{ + margin-left: 10%; + margin-top: 5px; + font-size: 15px; +} + +div.scroll>div>h5 { + padding: 20px 20px 0px 20px; +} + +div.scroll>div>ul { + list-style-type: none; + padding: 20px; +} + +#sorting { + display: flex; + justify-content: space-between; + padding: 20px 50px 20px 50px; + width: 100%; + border-bottom: 1px solid rgb(150, 146, 146); + border-top: 1px solid rgb(150, 146, 146); + margin: 30px 0px; +} +#item_count{ + font-size: 14px; +} +#sortlabel{ + font-size: 14px; +} +#heading-1 { + display: flex; + justify-content: left; + align-items: center; + font-size: 10px; + width: 30%; + margin-bottom: 20px; +} +#heading-1>i { + font-size: 20px; + margin-left: 10px; +} +#heading-1>i:hover { + cursor: pointer; + color: rgb(9, 90, 201); +} +.item-list{ + width: 100%; + display: flex; + margin: auto; + /* min-width: 671px; */ + margin-bottom: 20px; + padding: 0px; +} +.item-list{ + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 30px; +} +.item{ + height: auto; + list-style: none; + border-bottom: 1px solid rgb(150, 146, 146); +} +.rowdiv{ + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 20px; +} +.item_image{ + width: auto; + display: block; + height: auto; + margin: auto; +} +.pImage{ + width: 100%; + cursor: pointer; +} +.item_details{ + height: auto; + display: flex; + flex-direction: column; + gap: 3px; +} +.pName{ + color: blue; + font-size: 13px; +} +.pModel{ + font-size: 12px; + +} +.pContent{ + display: block; + /* height: 75%; */ + cursor: pointer; +} +.pName,.pModel{ + margin-left: 10px; + cursor: pointer; +} +.pName:hover{ + text-decoration: underline; + color: rgb(0, 0, 189); +} +.pCost{ + font-size: 28px; + color: #1d252c; +} +.pAvail{ + font-size: 12px; + color: blue; + cursor: pointer; +} +.pAvail:hover{ + text-decoration: underline; + color: rgb(0, 0, 189); +} +.pCart{ + padding: 5px 50px 5px 50px; + background-color: #ffe000; + border: none; + border-radius: 5px; + color: black; + font-weight: 700; + text-align: center; + font-size: 14px; + display: flex; + gap: 17px; + margin-top: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + justify-content: space-around; +} +.pCart>img{ + width: 15px; +} +.id{ + color: transparent; +} +.slider { + width: 100%; + position: relative; + margin-bottom: 30px; + border: 1px solid rgb(150, 146, 146); +} + +.slider>img { + width: 90%; + margin-left: 5%; +} +.slider>button { + position: absolute; + padding: 20px; + background-color: transparent; + border: none; + font-size: 40px; + cursor: pointer; +} + +.slider>button:nth-child(2) { + top: 75px; + left: 5px; +} + +.slider>button:nth-child(3) { + top: 75px; + right: 5px; +} + +.slider>button>i { + color: gray; +} + +/* Medium screen starts */ +@media all and (min-width:768px) and (max-width:1023px) { + #bb-ap-sale{ + font-size: 10px; + margin-left: 3.5%; + } + #mj-ap-sale{ + font-size: 13px; + margin-left: 2.5%; + } + #pagebody{ + width: 100%; + } + .scroll{ + /* width: 18vw; */ + height: 500px; + margin-bottom: 40%; + margin-left: 20px; + } + #product-container-div{ + + padding: 2px; + } + .product-category{ + font-size: 12px; + margin-left: 13%; + margin-top: 1px; + } + #brands-container-div{ + height: auto; + } + #filter-brands{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-brands>input{ + margin-left: 13%; + margin-top: 1px; + width: 8%; + + } + #filter-brands>label{ + font-size: 12px; + } + #fbp-line{ + height: auto; + } + #filter-price{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-price>input{ + margin-left: 13%; + margin-top: 1px; + width: 8%; + } + #filter-price>label{ + font-size: 12px; + } + #items{ + /* width: 75vw; */ + height: 100%; + } + #heading-1{ + font-size: 6px; + } + .item-list{ + /* width: 10%; */ + } + #items{ + width: 95%; + } + #item-list-div{ + width: 95%; + } + .item-list{ + width: 90%; + } + .item{ + width: 95%; + } + #heading-1{ + display: none; + } + .slider{ + display: none; + } + #sorting{ + margin-top: 10px; + } + .pCart{ + padding: 5px 20px 5px 20px; + background-color: #ffe000; + border: none; + border-radius: 5px; + color: black; + font-weight: 700; + text-align: center; + font-size: 14px; + display: flex; + gap: 10px; + margin-top: 20px; + cursor: pointer; + font-size: 10px; + } + .pCart>img{ + width: 15px; + } +} +/* Medium screen ends */ + +/* Small screen starts */ +@media all and (min-width:340px) and (max-width:767px) { + #bb-ap-sale{ + font-size: 10px; + margin-left: 6%; + } + #mj-ap-sale{ + font-size: 12px; + margin-left: 4.6%; + } + #pagebody{ + display: grid; + grid-template-columns: 22% 72%; + gap: 10px; + justify-content: center; + justify-content: space-between; + } + .scroll{ + /* width: 18vw; */ + height: 500px; + margin-bottom: 40%; + margin-left: 20px; + } + #product-container-div{ + + padding: 2px; + } + .product-category{ + font-size: 12px; + margin-left: 13%; + margin-top: 1px; + } + #brands-container-div{ + height: auto; + } + #brands-container-div{ + height: auto; + } + #filter-brands{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-brands>input{ + margin-left: 13%; + margin-top: 1px; + width: auto; + display: none; + } + #filter-brands>label{ + font-size: 12px; + } + #fbp-line{ + height: auto; + } + #filter-price{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-price>input{ + margin-left: 13%; + margin-top: 1px; + width: 8%; + display: none; + } + #filter-price>label{ + font-size: 12px; + } + #heading-1, .slider{ + display: none; + } + #items{ + width: 100%; + } + #item-list-div{ + /* width: 50%; */ + } + .item-list{ + width: 100%; + } + .item{ + width: 70vw; + } + .rowdiv{ + display: flex; + gap: 10px; + } + .item_details{ + height: auto; + } + .pContent{ + width: 100%; + display: block; + height: auto; + cursor: pointer; + } + .pCost{ + font-size: 15px; + color: #1d252c; + } + .pAvail{ + font-size: 8px; + color: blue; + cursor: pointer; + } + .pCart{ + padding: 2px 5px 2px 5px; + font-size: 8px; + width: auto; + gap: 1px; + } + .pImage{ + width: 100%; + cursor: pointer; + } +} +/* Small screen ends */ + +/* body of the page */ + + + +/* footer */ +footer{ + background-color: rgb(240,242,244); + width: 100%; +} + + +.sec_1{ + display: grid; + gap: 30px; + grid-template-columns: repeat(5,1fr); + text-align: center; +} +.sec_1>div{ + padding: 60px; +} +.sec_1>div:hover{ + cursor: pointer; +} + +.font-60{ + font-size: 60px; + padding-bottom: 20px; + color: gray; +} + +.sec_1>div>a{ + text-decoration: none; + margin-top: 10px; + font-family: 'Poppins' , sans-serif; + font-weight: 600; + font-size: 14px; + color: rgb(9,90,201); +} +.sec_1>div>a:hover{ + text-decoration: underline; +} +.hl{ + width: 95%; + background-color: rgb(152, 150, 150); + height: 1px; + margin: auto; +} + +.sec_2{ + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +#sec_2-1{ + margin-top: 10px; + display: grid; + grid-template-columns: repeat(3 , 1fr); + grid-template-rows: repeat(2 , 1fr); +} + +#sec_2-1>div>h3{ + font-family: 'Poppins' , sans-serif; +} +#sec_2-1>div>p{ + color: rgb(9,90,201); + font-family: 'Poppins' , sans-serif; + padding-top: 20px; +} +footer>div:nth-child(4){ + display: flex; + justify-content: space-between; + margin-top: 50px; + padding: 20px; +} +footer>div:nth-child(4)>div{ + display: flex; + justify-content: space-around; +} +footer>div:nth-child(4)>p>span{ + color: rgb(9,90,201); + font-family: 'Poppins' ,sans-serif; +} +footer>div:nth-child(4)>div>p{ + color: rgb(9,90,201); + font-family: 'Poppins' ,sans-serif; + margin-right: 40px; +} +#footer_form{ + background-color: white; + width: 30%; + padding: 10px 20px 10px 30px; + margin-top: 20px; + border-radius: 10px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px; +} + +#footer_form>p:first-child{ + color: rgb(9,90,201); + font-family: 'Poppins' , sans-serif; + font-weight: 500; + padding-bottom: 15px; +} + +#footer_form>h3{ + font-family: 'Poppins',sans-serif; + font-weight: 500; + padding-bottom: 15px; + padding-top: 15px; +} +#footer_form>input:nth-child(4){ + padding: 10px 40px 10px 20px; + border-radius: 5px; + border: 1px solid gray; + margin-left: 10px; +} +#footer_form>input:nth-child(5){ + margin-left: 15px; + padding: 10px 30px 10px 30px; + border-radius: 5px; + border: none; + background-color: rgb(9,90,201); + color: white; +} +.fa-mobile-button{ + font-size: 60px; + color: rgb(9,90,201); +} +#footer_form>div:nth-child(7){ + padding: 20px; +} +#footer_form>div:nth-child(7)>p{ + font-family: 'Poppins' , sans-serif; +} +#footer_form>div:nth-child(7)>span{ + font-size: 30px; + font-family: 'Poppins' ,sans-serif; + font-weight: 600; +} + +.fa-brands{ + font-size: 35px; + margin: 20px 5px 20px 40px; + color: rgb(9,90,201); +} +#footer_form>p:last-child{ + padding-left: 10px; + color: rgb(9,90,201); + font-family: 'Poppins' ,sans-serif; +} + +#sec_3>div:first-child{ + display: flex; + color: rgb(9,90,201); + justify-content: space-around; + font-size: 13px; + width: 90%; + margin-top: 30px; + font-family: 'Poppins' , sans-serif; +} +#sec_3>div:last-child{ + color: rgb(115, 115, 115); + width: 90%; + font-size: 15px; + margin-top: 20px; + font-family: 'Poppins' ,sans-serif; + margin-left: 20px; +} + +@media all and (min-width: 1324px) and (max-width: 1524px){ + #footer_form{ + width: 35%; + } +} +@media all and (min-width: 768px) and (max-width: 1324px) { + .sec_1{ + grid-template-columns: repeat(3, 1fr); + } + #footer_form{ + width: 50%; + } + #sec_2{ + grid-template-columns: 1fr; + grid-template-rows: repeat(2,1fr); + } + #sec_2-1{ + padding: 10px; + gap: 20px; + grid-template-columns: repeat(2 , 1fr); + } +} + +@media all and (min-width: 320px) and (max-width: 867px) { + .sec_1{ + grid-template-columns: repeat(2 ,1fr); + } + #footer_form{ + width:80%; + } + #sec_2-1{ + padding: 20px; + gap: 20px; + } + #sec_3>div:first-child{ + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 10px; + padding: 20px; + } + #footer_form>input{ + margin-top: 15px; + } +} +/* footer */ \ No newline at end of file diff --git a/laptops.html b/laptops.html new file mode 100644 index 0000000..cd2d52b --- /dev/null +++ b/laptops.html @@ -0,0 +1,330 @@ + + + + + + + + Laptops + + + + + +
+ logo + +
+ +
+ Top Deals + Deals of the Day + All Appliances + + + Mobiles + Laptops + + Best Buy Outlet + Toys, Games & Collectibles +
+
+ +
+ +
+ +

Aiea

+ +

Cart

+
+
+
+

Top Deals

+

Deal of the Day

+

Totaltech Membership

+

Credit Cards

+

Gift Cards

+

Gift Ideas

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

+ Best Buy Appliances Appliances On Sale +

+

Major Appliances On Sale

+ +
+
+
+
+
Category
+

All

+

Mobiles

+

Laptops

+

Microwaves

+

Freezers & Ice Makers

+

Ranges, Cooktops & Ovens

+

Washers & Dryers

+

Dishwashers

+
+
+
+
Filter By Brand
+ +
+ +
+ +
+ +
+
+
+
+
+
+
Filter By Price
+ +
+ +
+ +
+ + +
+ + +
+
+
+
+

Sponsored products

+ +
+
+
+ product + + +
+
+
+

Products: Laptops

+ + +
+
+
    + +
+
+
+
+ + + + + + + + + + diff --git a/laptops.js b/laptops.js new file mode 100644 index 0000000..db347c8 --- /dev/null +++ b/laptops.js @@ -0,0 +1,430 @@ +// nav bar +document + .querySelector("#main > img:first-child") + .addEventListener("click", function () { + window.location.href = "index.html"; + }); + +// Menu +function myFunction() { + document.getElementById("myDropdown").classList.toggle("show"); +} + +window.onclick = function (event) { + if (!event.target.matches(".dropbtn")) { + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains("show")) { + openDropdown.classList.remove("show"); + } + } + } +}; + +// Account +function myFunction1() { + document.getElementById("myDropdown1").classList.toggle("show"); +} + +window.onclick = function (event) { + if (!event.target.matches(".dropbtn1")) { + var dropdowns1 = document.getElementsByClassName("dropdown-content1"); + var j; + for (j = 0; j < dropdowns1.length; j++) { + var openDropdown1 = dropdowns1[j]; + if (openDropdown1.classList.contains("show")) { + openDropdown1.classList.remove("show"); + } + } + } +}; + +let account = document.querySelector(".dropbtn1"); +tempUserData = JSON.parse(localStorage.getItem("tempUserData")); +if (tempUserData == undefined) { + account.innerText = "Account"; +} else { + account.innerText = "Hi, " + tempUserData[0].Name; +} + +// cart Image +document + .querySelector("#main > p:last-child") + .addEventListener("click", function () { + window.location.href = "cartpage.html"; + }); + +// Top deals +document.querySelector("#top").addEventListener("click", function () { + window.location.href = "topDeals.html"; +}); + +// Deals of the day +document.querySelector("#deal").addEventListener("click", function () { + window.location.href = "deals.html"; +}); + +// end +// nav bar + +let productData = [ + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6450/6450853_sd.jpg;maxHeight=200;maxWidth=300", + name: 'MacBook Pro 14" Laptop - Apple M1 Pro chip - 16GB Memory - 512GB SSD (Latest Model) - Space Gray', + price: "1799.00", + model: "MacBook", + id: 20221, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6469/6469399_sd.jpg;maxHeight=200;maxWidth=300", + name: 'ASUS - Vivobook 17.3" Laptop - Intel Core 10th Gen i5 - 12GB Memory - 1TB HDD', + price: "429.99", + model: "ASUS", + id: 20222, + }, + + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/5721/5721600_sd.jpg;maxHeight=200;maxWidth=300", + name: 'MacBook Air 13.3" Laptop - Apple M1 chip - 8GB Memory - 256GB SSD - Space Gray', + price: "949.99", + model: "MacBook", + id: 20223, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6458/6458905_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Dell - Inspiron 2-in-1 14" Touch-Screen Laptop - Intel Core i5 - 8GB Memory - 512GB Solid State Drive - Silver', + price: "649.99", + model: "Dell", + id: 20224, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6470/6470463_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Dell - G15 15.6" FHD Gaming Laptop - Intel Core i7 - 16GB Memory - NVIDIA GeForce RTX 3050 - 512GB Solid State Drive - Black, Dark Shadow Grey', + price: "899.99", + model: "Dell", + id: 20225, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6499/6499749_sd.jpg;maxHeight=200;maxWidth=300", + name: 'HP - 14" Laptop - Intel Celeron - 4GB Memory - 64GB eMMC - Snowflake White', + price: "169.99", + model: "HP", + id: 20226, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6500/6500646_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Dell - Inspiron 3511 15.6" Touch Laptop - Intel Core i5 - 8GB Memory - 256GB Solid State Drive - Black', + price: "599.99", + model: "Dell", + id: 20227, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6469/6469397_sd.jpg;maxHeight=200;maxWidth=300", + name: 'ASUS - Vivobook 15.6" Laptop - Intel 10th Gen i3 - 8GB Memory - 256GB PCIE SSD - Slate Grey', + price: "404.99", + model: "ASUS", + id: 20228, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6499/6499942_sd.jpg;maxHeight=200;maxWidth=300", + name: 'HP - 14" Laptop - Intel Celeron - 4GB Memory - 64GB eMMC - Rose gold', + price: "169.99", + model: "HP", + id: 20229, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6479/6479177_sd.jpg;maxHeight=200;maxWidth=300", + name: 'HP - ENVY x360 2-in-1 13.3" OLED Touch-Screen Laptop - Intel Evo Core i7 - 8GB Memory - 512GB SSD - Natural Silver', + price: "799.99", + model: "HP", + id: 202210, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6502/6502175_sd.jpg;maxHeight=200;maxWidth=300", + name: 'HP - 14" Laptop - AMD Ryzen 3 - 8GB Memory - 128GB SSD - Natural Silver', + price: "369.99", + model: "HP", + id: 202211, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6432/6432553_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Dell - Inspiron 7000 2-in-1 15.6" FHD Touch-Screen Laptop - Intel Core i5 - 12GB Memory - 512GB SSD+32GB Optane - Silver', + price: "749.99", + model: "Dell", + id: 202213, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6448/6448936_sd.jpg;maxHeight=200;maxWidth=300", + name: 'ASUS - TUF DASH 15.6" Gaming Laptop - Intel 11th Gen i7 - 16GB Memory - NVIDIA GeForce RTX 3070 - 1TB M.2 PCIEG3 SSD - Eclipse Grey', + price: "1349.99", + model: "ASUS", + id: 202214, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6450/6450856_sd.jpg;maxHeight=200;maxWidth=300", + name: 'MacBook Pro 14" Laptop - Apple M1 Pro chip - 16GB Memory - 512GB SSD (Latest Model) - Silver', + price: "1199.99", + model: "MacBook", + id: 202215, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6509/6509652_sd.jpg;maxHeight=200;maxWidth=300", + name: 'MacBook Pro 13.3" Laptop - Apple M2 chip - 8GB Memory - 256GB SSD (Latest Model) - Space Gray', + price: "1299.00", + model: "MacBook", + id: 202216, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6428/6428992_sd.jpg;maxHeight=200;maxWidth=300", + name: 'Microsoft - Surface Laptop Go - 12.4" Touch-Screen - Intel 10th Generation Core i5 - 8GB Memory - 256GB Solid State Drive - Platinum', + price: "649.99", + model: "Microsoft", + id: 202217, + }, + { + image: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6469/6469400_sd.jpg;maxHeight=200;maxWidth=300", + name: 'ASUS - 14.0" Laptop - Intel Celeron N4020 - 4GB Memory - 128GB eMMC - Star Black', + price: "149.99", + model: "ASUS", + id: 202218, + }, +]; + +//category starts +document.querySelector(".p-c-all").addEventListener("click", allpageFun); +function allpageFun(event) { + window.location.href = "appliances.html"; +} + +document.querySelector(".p-c-mobiles").addEventListener("click", mobpageFun); +function mobpageFun(event) { + window.location.href = "mobiles.html"; +} +document.querySelector(".p-c-ref").addEventListener("click", laptopspageFun); +function laptopspageFun(event) { + window.location.href = "laptops.html"; +} + +//category ends + +//sort by section start +let sortby = document.getElementById("sort"); +sortby.addEventListener("change", function () { + // console.log(sortby.value); + if (sortby.value == "A") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + if (a.model < b.model) { + return -1; + } + if (a.model > b.model) { + return 1; + } + return 0; + }); + displayItems(filtered); + } else if (sortby.value == "Z") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + if (a.model < b.model) { + return 1; + } + if (a.model > b.model) { + return -1; + } + return 0; + }); + displayItems(filtered); + } else if (sortby.value == "LtoH") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + return Number(a.price) - Number(b.price); + }); + displayItems(filtered); + } else if (sortby.value == "HtoL") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + return Number(b.price) - Number(a.price); + }); + displayItems(filtered); + } +}); +// sort by section end + +//filter section starts +// Filter Section Brands +let ASUS = document.getElementById("ASUS"); // Selected Input Tag by Id + +// Mobile is main Data +ASUS.addEventListener("change", function () { + filterItem(productData, ASUS.value); +}); + +let Dell = document.getElementById("Dell"); // Selected Input Tag by Id + +// Mobile is main Data +Dell.addEventListener("change", function () { + filterItem(productData, Dell.value); +}); +let HP = document.getElementById("HP"); // Selected Input Tag by Id + +// Mobile is main Data +HP.addEventListener("change", function () { + filterItem(productData, HP.value); +}); +let MacBook = document.getElementById("MacBook"); // Selected Input Tag by Id + +// Mobile is main Data +MacBook.addEventListener("change", function () { + filterItem(productData, MacBook.value); +}); + +// filter function +let tempFilter = []; +function filterItem(laptops, a) { + let filterd = laptops.filter(function (elem) { + return elem.model == a; + }); + + // main display function + filterd.forEach(function (elem) { + tempFilter.push(elem); + }); + document.querySelector(".item-list").innerHTML = ""; + displayItems(tempFilter); +} +//filter section brand ends + +//filter by price + +//filter by price + +displayItems(productData); + +// this is a function which dynamically takes input from productData array + +let cart_page = JSON.parse(localStorage.getItem("cart_page")) || []; + +function displayItems(productData) { + productData.forEach(function (element) { + let pImage = document.createElement("img"); + pImage.setAttribute("class", "pImage"); + pImage.src = element.image; + let pName = document.createElement("p"); + pName.setAttribute("class", "pName"); + pName.innerText = element.name; + let pCost = document.createElement("h1"); + pCost.setAttribute("class", "pCost"); + pCost.innerText = "$" + element.price; + let pModel = document.createElement("p"); + pModel.setAttribute("class", "pModel"); + pModel.innerText = "Brand: " + element.model; + let pContent = document.createElement("img"); + pContent.setAttribute("class", "pContent"); + pContent.src = "/rating.png"; + let pAvail = document.createElement("p"); + pAvail.setAttribute("class", "pAvail"); + pAvail.innerText = "No rebates available in 96939"; + + let item_image = document.createElement("div"); + item_image.setAttribute("class", "item_image"); + item_image.append(pImage); + + let item_details = document.createElement("div"); + item_details.setAttribute("class", "item_details"); + item_details.append(pName, pModel, pContent); + + // cart + let pCart = document.createElement("button"); + let cLogo = document.createElement("img"); + cLogo.src = "/trolly.png"; + + let text = document.createElement("p"); + text.innerText = "Add to Cart"; + + pCart.setAttribute("class", "pCart"); + pCart.addEventListener("click", function () { + if (addtoCartFunction(element.id)) { + element.quantity = 1; + element.totalPrice = element.price * element.quantity; + cart_page.push(element); + + localStorage.setItem("cart_page", JSON.stringify(cart_page)); + } + }); + + let pId = document.createElement("p"); + pId.innerText = element.id; + pId.setAttribute("class", "id"); + pCart.append(cLogo, text); + + let item_cost = document.createElement("div"); + item_cost.setAttribute("class", "item_cost"); + item_cost.append(pCost, pAvail, pCart, pId); + + let rowdiv = document.createElement("div"); + rowdiv.setAttribute("class", "rowdiv"); + rowdiv.append(item_image, item_details, item_cost); + let item = document.createElement("li"); + item.setAttribute("class", "item"); + item.append(rowdiv); + document.querySelector(".item-list").append(item); + }); +} + +let slide_1 = document.getElementById("slide-1"); +let slide_2 = document.getElementById("slide-2"); +slide_1.addEventListener("click", slider); +slide_2.addEventListener("click", sliderTwo); + +let slide_img = ["/slider1.png", "/slider2.png", "/slider3.png"]; + +let img = document.getElementById("productSlide"); +let count = 0; +function slider() { + if (count === 0) { + count = slide_img.length - 1; + } else { + count--; + } + img.src = slide_img[count]; + console.log(count); +} +function sliderTwo() { + if (count == slide_img.length - 1) { + count = 0; + } else { + count++; + } + img.src = slide_img[count]; + console.log(count); +} +function addtoCartFunction(id) { + let check = cart_page.filter(function (element) { + return id == element.id; + }); + if (check.length > 0) { + return false; + } else { + return true; + } +} diff --git a/login.css b/login.css deleted file mode 100644 index 36cb9dd..0000000 --- a/login.css +++ /dev/null @@ -1,244 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); - -/* login css start*/ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - background-color: rgb(236, 236, 236); -} - -/* Navbar Css Start */ -nav { - background-color: rgb(0, 70, 190); - color: white; - display: flex; - justify-content: space-around; - align-items: center; - position: relative; - top: 0; -} - -img { - cursor: pointer; -} - -nav>a { - color: white; - text-decoration: none; -} - -/* Navbar Css End */ - - -/* CSS for sign in Form */ -form { - width: 70%; - margin: auto; -} - -#submit { - text-align: center; - background-color: rgb(0, 70, 190); - font-family: 'Poppins', sans-serif; - font-size: 1rem; - color: white; - border: none; - padding: 10px; -} - -#submit:hover { - background-color: rgb(0, 48, 131); - cursor: pointer; -} - -.signup { - background-color: white; - width: 40%; - margin: auto; - margin-top: 50px; - border: 1px solid; - text-align: center; - border: none; - border-radius: 5px; - box-shadow: 0px 0px 5px gray; -} - -.signup>h1 { - font-family: 'Poppins', sans-serif; - font-weight: 600; - font-size: 1.5rem; - letter-spacing: 1px; - padding-top: 20px; - padding-bottom: 5px; -} - -.signup>p { - padding-bottom: 20px; - font-family: 'Poppins', sans-serif; - font-size: 13px; -} - -input { - padding: 10px; - margin-bottom: 10px; - width: 80%; - text-align: left; - border-radius: 5px; - border: 1px solid rgb(181, 181, 181); -} - -::placeholder { - font-size: 15px; - padding: 5px; - color: rgb(41, 41, 41); - font-family: 'Poppins', sans-serif; - font-weight: 500; - margin-top: 10px; -} - -#showHide { - position: relative; -} - -#showHide>img { - position: absolute; - top: 8px; - right: 55px; - width: 20px; -} - -.signup>div:nth-child(3) { - width: 60%; - margin: auto; - position: relative; - display: flex; - align-items: center; - justify-content: center; -} - -.signup>div:nth-child(3)>div:nth-child(1) { - position: absolute; - background-color: #595a5c; - top: 50%; - left: 0px; - right: 0px; - height: 3px; -} - -.withGoogle { - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - margin-left: 27%; - padding: 5px 50px 5px 50px; - background-color: white; - border: 1px solid rgb(0, 70, 190); - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 15px; - color: rgb(0, 70, 190); -} - -.withGoogle>img { - width: 30px; -} - -.withGoogle:hover { - background-color: rgb(0, 70, 190); - color: white; - cursor: pointer; -} - -.signup>div:nth-child(5) { - height: 2px; - background-color: rgb(80, 80, 80); - width: 50%; - margin: auto; - margin-top: 30px; -} - -.signup>div:nth-child(6)>p { - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 13px; - padding-top: 30px; - padding-bottom: 30px; -} - - -/* CSS for Footer */ -footer { - box-sizing: border-box; - background-color: white; - margin-top: 50px; - height: 250px; - padding: 25px 200px 10px 200px; - line-height: 25px; -} - -.footer { - display: flex; -} - -.vl { - border-left: 1px solid rgb(209, 209, 209); - margin-left: 10px; - margin-right: 10px; -} - -footer>div>a { - text-decoration: none; -} - -footer>div>p { - padding-top: 10px; - font-family: 'Poppins', sans-serif; - color: #939393; -} - - -@media all and (min-width: 768px) and (max-width: 1324px) { - .signup { - width: 60%; - } - - .withGoogle { - padding-left: 30px; - } - - footer { - height: 200px; - padding: 50px; - } - -} - -@media all and (min-width: 320px) and (max-width: 768px) { - .signup { - width: 90%; - } - - .withGoogle { - padding-right: 10px; - padding-left: 10px; - margin-left: 20%; - } - - input { - width: 100%; - } - - footer { - padding: 20px; - } - - #showHide>img { - right: 15px; - } -} \ No newline at end of file diff --git a/login.html b/login.html deleted file mode 100644 index ae13b42..0000000 --- a/login.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - - - - Best Buy | Log In - - - - - - - - - - -
- -
-

Sign In to Best Buy

-
-
-
-
- show -
- -
-
-
-
- OR
-
-
- -
-
-
-

Already have an Account? Sign Up

-
-
-
- - - - - - - - - \ No newline at end of file diff --git a/login.js b/login.js deleted file mode 100644 index 8e9e0c4..0000000 --- a/login.js +++ /dev/null @@ -1,50 +0,0 @@ -let userData = JSON.parse(localStorage.getItem("userData")) || []; // All user info - -let tempData = JSON.parse(localStorage.getItem("tempUserData")); // Temporary Data - -document.querySelector("form").addEventListener("submit", checkForLogIn); - -// main Function to check user information -function checkForLogIn(event) { - event.preventDefault(); - let email = document.getElementById("email").value; - let password = document.getElementById("password").value; - - let flag = false; - userData.forEach(function (el, index) { - if (el.userEmail == email && el.userPassword == password) { - i = index; - flag = true; - } - }); - if (flag) { - let name = userData[i].userName; - let id = userData[i].userId; - let tempUserData = []; - let obj = { - Name: name, - Email: email, - memberId: id, - }; - tempUserData.push(obj); - localStorage.setItem("tempUserData", JSON.stringify(tempUserData)); - alert("Sign in Succesfully"); - window.location.href = "index.html"; - } else { - alert("Invalid Login Email/ID or Password"); - } -} - -let eye = document.getElementById("eyeBtn"); -eye.addEventListener("click", showHide); - -function showHide() { - let column = document.getElementById("password"); - if (column.type == "password") { - column.type = "text"; - eye.src = "/Assets-1/hidden.png"; - } else { - column.type = "password"; - eye.src = "/Assets-1/eye.png"; - } -} diff --git a/mobiles.css b/mobiles.css new file mode 100644 index 0000000..2e3a121 --- /dev/null +++ b/mobiles.css @@ -0,0 +1,1000 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +/* nav bar */ +#main >select > option , #buttons select > option{ + background-color: white; + color: #0046be; + font-family: 'Raleway', sans-serif; +} +#main > select, #buttons > select{ + cursor: pointer; +} + +/* First div */ + +#main{ + height: 70px; + width: 100%; + min-width: 100vw; + background-color: + #0046be; + display: flex; + align-items: center; +} +#main > img:first-child{ + height: 90%; + margin-left: 1.5%; + cursor: pointer; +} +#main > img:nth-child(2){ + height: 30px; + cursor: pointer; + margin-left: 2%; +} +#main > div > img{ + height: 55%; +} + +#main > div:nth-child(5){ + display: flex; + align-items: center; + background-color: white; + height: 57%; + padding-right: 10px; + padding-left: 10px; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; +} +#search-nav{ + height: 60%; + width: 35%; + padding-left: 1%; + font-size: 18px; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border: 1px solid #0046be; + border-right: white; + margin-left: 2%; +} +/* #main > select{ + background-color: #0046be; + color: white; + font-weight: bold; + font-size: 20px; + border: 1px solid #0046be; + width: 6%; +} */ + +/* Drop down */ + +.dropbtn { + /* background-color: #3498DB; + color: white; + padding: 16px; + font-size: 16px; */ + background-color: #0046be; + color: white; + font-weight: bold; + font-size: 20px; + border: 1px solid #0046be; + width: 6%; + border: none; + cursor: pointer; + } + .dropbtn1 { + background-color: #0046be; + color: white; + font-weight: bolder; + font-size: 14px; + border: 1px solid #0046be; + width: 8%; + border: none; + cursor: pointer; + } + .dropdown,.dropdown1 { + position: relative; + display: inline-block; + } + .dropdown-content , .dropdown-content1{ + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + overflow: auto; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + } + .dropdown-content a , .dropdown-content1 a{ + color: #0046be; + padding: 12px 16px; + text-decoration: none; + display: block; + font-family: 'Raleway', sans-serif; + } + .show {display: block;} + + .dropdown-content a:hover, .dropdown-content1 a:hover{ + text-decoration: underline; + } +#main > p{ + color: white; + font-size: 24px; + font-weight: bold; +} +#main > p:nth-child(7){ + cursor: pointer; + font-family: 'Raleway', sans-serif; +} +#main > img:nth-child(8){ + height: 80%; + cursor: pointer; + margin-left: 3%; +} +#main > p:last-child{ + cursor: pointer; + margin-right: 1%; + font-family: 'Raleway', sans-serif; +} +#main > p:last-child:hover{ + text-decoration: underline; +} +#main > img:nth-child(6){ + height: 100%; + cursor: pointer; + margin-left: 18%; +} + +/* Second div */ + +#buttons{ + height: 50px; + width: 100%; + border-top: 0.5px solid + #1e88e5; + background-color: #0046be; + display: flex; + justify-content: space-between; + font-family: 'Raleway', sans-serif; +} +#buttons > div{ + display: flex; + align-items: center; + color: white; + font-size: 14px; +} +#buttons > div:first-child{ + width: 52%; + justify-content: space-around; + margin-left: 2%; +} +#buttons > div:last-child{ + width: 37%; + justify-content: space-between; + margin-right: 3.5%; +} +#buttons select{ + background-color: #0046be; + color: white; + font-size: 14px; + border: 0px; + font-family: 'Raleway', sans-serif; + font-weight: bold; +} +#buttons p{ + cursor: pointer; +} +#buttons P:hover{ + text-decoration: underline; +} + +/* Medium screen */ + +@media all and (min-width:768px) and (max-width:1023px){ + #main .other1, #buttons .other1{ + width: 0%; + height: 0%; + font-size: 0px; + font-size: 0%; + } + + /* First div */ + #search-nav{ + width: 20%; + font-size: 14px; + } + /* #main > select{ + font-size: 18px; + width: 12%; + } */ + #main > img:first-child{ + margin-left: 0.5%; + + } + #main > img:nth-child(2){ + margin-left: 0.5%; + } + #main > img:nth-child(6){ + margin-left: 3%; + } + #main > img:nth-child(8){ + margin-left: 1%; + } + /* Second div */ + #buttons > div{ + font-size: 12px; + } + #buttons select{ + font-size: 10px; + } + #buttons > div:last-child{ + width: 45%; + margin-right: 0.5%; + } + #buttons > div:first-child{ + width: 48%; + margin-left: 0.5%; + } +} + +/* Small screen */ + +@media all and (min-width:340px) and (max-width:767px){ + + #main .other, #buttons .other{ + width: 0%; + height: 0%; + font-size: 0px; + font-size: 0%; + } + + /* First div */ + /* #main > select{ + font-size: 18px; + width: 30%; + margin-left: 0%; + } */ + #main > img:first-child{ + height: 60%; + } + #search-nav{ + width: 60%; + font-size: 12px; + } + #main > p:nth-child(7){ + font-size: 0px; + margin: 0%; + } + #main > img:nth-child(6){ + margin-left: 0%; + } + #main > img:nth-child(8){ + margin-left: 0%; + } + + /* Second div */ + #buttons > div:last-child{ + width: 35%; + margin-right: 1%; + } + #buttons > div:first-child{ + width: 50%; + margin-left: 0.5%; + } + /* #main > div{ + width: 0%; + height: 0%; + } */ +} +/* nav bar */ + + +#bb-ap-sale{ + margin-left: 5%; + margin-top: 5px; + font-size: 13px; + +} +.bb-ap-sale-text{ + color: blue; +} +#mj-ap-sale{ + width: 95%; + display: block; + margin-top: 10px; + margin-left: 4.5%; + padding: 10px; + font-size: 18px; + font-weight: bold; +} + + +/* body of the page */ +#pagebody{ + width: 95%; + display: grid; + grid-template-columns: 1fr 3fr; + margin: auto; + justify-content: center; + justify-content: space-between; + gap: 20px; +} +.scroll { + border: 1px solid rgb(150, 146, 146); + /* width: 22%; */ + height: 550px; + overflow-x: hidden; + overflow-y: auto; + text-align: center; + position: sticky; + top: 7.5%; + margin-bottom: 40%; + margin-left: 30px; +} +#product-container-div{ + height: auto; + border-bottom: 1px solid rgb(150, 146, 146); +} +.product-category{ + font-weight: 100px; + font-size: 14px; + color: blue; + margin-left: 15%; + margin-top: 5px; +} +.p-c-all{ + margin-left: 10%; +} +#filter-brands{ + margin-left: 10%; + margin-top: 5px; + font-size: 15px; +} +#brands-container-div{ + height: auto; + border-bottom: 1px solid rgb(150, 146, 146); +} +#pc-cata{ + margin-bottom: 8px; + font-size: 15px; +} +#pc-cata+input,label{ + margin-bottom: 10px; +} +#items{ + /* width: 73%; */ + height: 100%; +} +div.scroll>div { + text-align: left; +} +#fbp-line{ + height: auto; +} +#filter-price{ + margin-left: 10%; + margin-top: 5px; + font-size: 15px; +} + +div.scroll>div>h5 { + padding: 20px 20px 0px 20px; +} + +div.scroll>div>ul { + list-style-type: none; + padding: 20px; +} + +#sorting { + display: flex; + justify-content: space-between; + padding: 20px 50px 20px 50px; + width: 100%; + border-bottom: 1px solid rgb(150, 146, 146); + border-top: 1px solid rgb(150, 146, 146); + margin: 30px 0px; +} +#item_count{ + font-size: 14px; +} +#sortlabel{ + font-size: 14px; +} +#heading-1 { + display: flex; + justify-content: left; + align-items: center; + font-size: 10px; + width: 30%; + margin-bottom: 20px; +} +#heading-1>i { + font-size: 20px; + margin-left: 10px; +} +#heading-1>i:hover { + cursor: pointer; + color: rgb(9, 90, 201); +} +.item-list{ + width: 100%; + display: flex; + margin: auto; + /* min-width: 671px; */ + margin-bottom: 20px; + padding: 0px; +} +.item-list{ + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 30px; +} +.item{ + height: auto; + list-style: none; + border-bottom: 1px solid rgb(150, 146, 146); +} +.rowdiv{ + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 20px; +} +.item_image{ + width: auto; + display: block; + height: auto; + margin: auto; +} +.pImage{ + width: 100%; + cursor: pointer; +} +.item_details{ + height: auto; + display: flex; + flex-direction: column; + gap: 3px; +} +.pName{ + color: blue; + font-size: 13px; +} +.pModel{ + font-size: 12px; + +} +.pContent{ + display: block; + /* height: 75%; */ + cursor: pointer; +} +.pName,.pModel{ + margin-left: 10px; + cursor: pointer; +} +.pName:hover{ + text-decoration: underline; + color: rgb(0, 0, 189); +} +.pCost{ + font-size: 28px; + color: #1d252c; +} +.pAvail{ + font-size: 12px; + color: blue; + cursor: pointer; +} +.pAvail:hover{ + text-decoration: underline; + color: rgb(0, 0, 189); +} +.pCart{ + padding: 5px 50px 5px 50px; + background-color: #ffe000; + border: none; + border-radius: 5px; + color: black; + font-weight: 700; + text-align: center; + font-size: 14px; + display: flex; + gap: 17px; + margin-top: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + justify-content: space-around; +} +.pCart>img{ + width: 15px; +} +.id{ + color: transparent; +} +.slider { + width: 100%; + position: relative; + margin-bottom: 30px; + border: 1px solid rgb(150, 146, 146); +} + +.slider>img { + width: 90%; + margin-left: 5%; +} +.slider>button { + position: absolute; + padding: 20px; + background-color: transparent; + border: none; + font-size: 40px; + cursor: pointer; +} + +.slider>button:nth-child(2) { + top: 75px; + left: 5px; +} + +.slider>button:nth-child(3) { + top: 75px; + right: 5px; +} + +.slider>button>i { + color: gray; +} + +/* Medium screen starts */ +@media all and (min-width:768px) and (max-width:1023px) { + #bb-ap-sale{ + font-size: 10px; + margin-left: 3.5%; + } + #mj-ap-sale{ + font-size: 13px; + margin-left: 2.5%; + } + #pagebody{ + width: 100%; + } + .scroll{ + /* width: 18vw; */ + height: 500px; + margin-bottom: 40%; + margin-left: 20px; + } + #product-container-div{ + + padding: 2px; + } + .product-category{ + font-size: 12px; + margin-left: 13%; + margin-top: 1px; + } + #brands-container-div{ + height: auto; + } + #filter-brands{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-brands>input{ + margin-left: 13%; + margin-top: 1px; + width: 8%; + + } + #filter-brands>label{ + font-size: 12px; + } + #fbp-line{ + height: auto; + } + #filter-price{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-price>input{ + margin-left: 13%; + margin-top: 1px; + width: 8%; + } + #filter-price>label{ + font-size: 12px; + } + #items{ + /* width: 75vw; */ + height: 100%; + } + #heading-1{ + font-size: 6px; + } + .item-list{ + /* width: 10%; */ + } + #items{ + width: 95%; + } + #item-list-div{ + width: 95%; + } + .item-list{ + width: 90%; + } + .item{ + width: 95%; + } + #heading-1{ + display: none; + } + .slider{ + display: none; + } + #sorting{ + margin-top: 10px; + } + .pCart{ + padding: 5px 20px 5px 20px; + background-color: #ffe000; + border: none; + border-radius: 5px; + color: black; + font-weight: 700; + text-align: center; + font-size: 14px; + display: flex; + gap: 10px; + margin-top: 20px; + cursor: pointer; + font-size: 10px; + } + .pCart>img{ + width: 15px; + } +} +/* Medium screen ends */ + +/* Small screen starts */ +@media all and (min-width:340px) and (max-width:767px) { + #bb-ap-sale{ + font-size: 10px; + margin-left: 6%; + } + #mj-ap-sale{ + font-size: 12px; + margin-left: 4.6%; + } + #pagebody{ + display: grid; + grid-template-columns: 22% 72%; + gap: 10px; + justify-content: center; + justify-content: space-between; + } + .scroll{ + /* width: 18vw; */ + height: 500px; + margin-bottom: 40%; + margin-left: 20px; + } + #product-container-div{ + + padding: 2px; + } + .product-category{ + font-size: 12px; + margin-left: 13%; + margin-top: 1px; + } + #brands-container-div{ + height: auto; + } + #brands-container-div{ + height: auto; + } + #filter-brands{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-brands>input{ + margin-left: 13%; + margin-top: 1px; + width: auto; + display: none; + } + #filter-brands>label{ + font-size: 12px; + } + #fbp-line{ + height: auto; + } + #filter-price{ + margin-left: 1%; + padding: 2px; + margin-top: 1px; + } + #filter-price>input{ + margin-left: 13%; + margin-top: 1px; + width: 8%; + display: none; + } + #filter-price>label{ + font-size: 12px; + } + #heading-1, .slider{ + display: none; + } + #items{ + width: 100%; + } + #item-list-div{ + /* width: 50%; */ + } + .item-list{ + width: 100%; + } + .item{ + width: 70vw; + } + .rowdiv{ + display: flex; + gap: 10px; + } + .item_details{ + height: auto; + } + .pContent{ + width: 100%; + display: block; + height: auto; + cursor: pointer; + } + .pCost{ + font-size: 15px; + color: #1d252c; + } + .pAvail{ + font-size: 8px; + color: blue; + cursor: pointer; + } + .pCart{ + padding: 2px 5px 2px 5px; + font-size: 8px; + width: auto; + gap: 1px; + } + .pImage{ + width: 100%; + cursor: pointer; + } +} +/* Small screen ends */ + +/* body of the page */ + + + +/* footer */ +footer{ + background-color: rgb(240,242,244); + width: 100%; +} + + +.sec_1{ + display: grid; + gap: 30px; + grid-template-columns: repeat(5,1fr); + text-align: center; +} +.sec_1>div{ + padding: 60px; +} +.sec_1>div:hover{ + cursor: pointer; +} + +.font-60{ + font-size: 60px; + padding-bottom: 20px; + color: gray; +} + +.sec_1>div>a{ + text-decoration: none; + margin-top: 10px; + font-family: 'Poppins' , sans-serif; + font-weight: 600; + font-size: 14px; + color: rgb(9,90,201); +} +.sec_1>div>a:hover{ + text-decoration: underline; +} +.hl{ + width: 95%; + background-color: rgb(152, 150, 150); + height: 1px; + margin: auto; +} + +.sec_2{ + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +#sec_2-1{ + margin-top: 10px; + display: grid; + grid-template-columns: repeat(3 , 1fr); + grid-template-rows: repeat(2 , 1fr); +} + +#sec_2-1>div>h3{ + font-family: 'Poppins' , sans-serif; +} +#sec_2-1>div>p{ + color: rgb(9,90,201); + font-family: 'Poppins' , sans-serif; + padding-top: 20px; +} +footer>div:nth-child(4){ + display: flex; + justify-content: space-between; + margin-top: 50px; + padding: 20px; +} +footer>div:nth-child(4)>div{ + display: flex; + justify-content: space-around; +} +footer>div:nth-child(4)>p>span{ + color: rgb(9,90,201); + font-family: 'Poppins' ,sans-serif; +} +footer>div:nth-child(4)>div>p{ + color: rgb(9,90,201); + font-family: 'Poppins' ,sans-serif; + margin-right: 40px; +} +#footer_form{ + background-color: white; + width: 30%; + padding: 10px 20px 10px 30px; + margin-top: 20px; + border-radius: 10px; + box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px; +} + +#footer_form>p:first-child{ + color: rgb(9,90,201); + font-family: 'Poppins' , sans-serif; + font-weight: 500; + padding-bottom: 15px; +} + +#footer_form>h3{ + font-family: 'Poppins',sans-serif; + font-weight: 500; + padding-bottom: 15px; + padding-top: 15px; +} +#footer_form>input:nth-child(4){ + padding: 10px 40px 10px 20px; + border-radius: 5px; + border: 1px solid gray; + margin-left: 10px; +} +#footer_form>input:nth-child(5){ + margin-left: 15px; + padding: 10px 30px 10px 30px; + border-radius: 5px; + border: none; + background-color: rgb(9,90,201); + color: white; +} +.fa-mobile-button{ + font-size: 60px; + color: rgb(9,90,201); +} +#footer_form>div:nth-child(7){ + padding: 20px; +} +#footer_form>div:nth-child(7)>p{ + font-family: 'Poppins' , sans-serif; +} +#footer_form>div:nth-child(7)>span{ + font-size: 30px; + font-family: 'Poppins' ,sans-serif; + font-weight: 600; +} + +.fa-brands{ + font-size: 35px; + margin: 20px 5px 20px 40px; + color: rgb(9,90,201); +} +#footer_form>p:last-child{ + padding-left: 10px; + color: rgb(9,90,201); + font-family: 'Poppins' ,sans-serif; +} + +#sec_3>div:first-child{ + display: flex; + color: rgb(9,90,201); + justify-content: space-around; + font-size: 13px; + width: 90%; + margin-top: 30px; + font-family: 'Poppins' , sans-serif; +} +#sec_3>div:last-child{ + color: rgb(115, 115, 115); + width: 90%; + font-size: 15px; + margin-top: 20px; + font-family: 'Poppins' ,sans-serif; + margin-left: 20px; +} + +@media all and (min-width: 1324px) and (max-width: 1524px){ + #footer_form{ + width: 35%; + } +} +@media all and (min-width: 768px) and (max-width: 1324px) { + .sec_1{ + grid-template-columns: repeat(3, 1fr); + } + #footer_form{ + width: 50%; + } + #sec_2{ + grid-template-columns: 1fr; + grid-template-rows: repeat(2,1fr); + } + #sec_2-1{ + padding: 10px; + gap: 20px; + grid-template-columns: repeat(2 , 1fr); + } +} + +@media all and (min-width: 320px) and (max-width: 867px) { + .sec_1{ + grid-template-columns: repeat(2 ,1fr); + } + #footer_form{ + width:80%; + } + #sec_2-1{ + padding: 20px; + gap: 20px; + } + #sec_3>div:first-child{ + display: grid; + grid-template-columns: repeat(3,1fr); + gap: 10px; + padding: 20px; + } + #footer_form>input{ + margin-top: 15px; + } +} +/* footer */ \ No newline at end of file diff --git a/mobiles.html b/mobiles.html new file mode 100644 index 0000000..3514453 --- /dev/null +++ b/mobiles.html @@ -0,0 +1,320 @@ + + + + + + + + Mobiles + + + + + + + +

+ Best Buy Appliances Appliances On Sale +

+

Major Appliances On Sale

+ +
+
+
+
+
Category
+

All

+

Mobiles

+

Laptops

+

Microwaves

+

Freezers & Ice Makers

+

Ranges, Cooktops & Ovens

+

Washers & Dryers

+

Dishwashers

+
+
+
+
Filter By Brand
+ +
+ +
+ +
+
+
+
+
+
+
Filter By Price
+ +
+ +
+ +
+ + +
+ + +
+
+
+
+

Sponsored products

+ +
+
+
+ product + + +
+
+
+

Products

+ + +
+
+
    + +
+
+
+
+ + + + + + + + + + diff --git a/mobiles.js b/mobiles.js new file mode 100644 index 0000000..ecd24d4 --- /dev/null +++ b/mobiles.js @@ -0,0 +1,380 @@ +// nav bar +document + .querySelector("#main > img:first-child") + .addEventListener("click", function () { + window.location.href = "index.html"; + }); + +// Menu js +document.querySelector("#main > select").addEventListener("click", function () { + let selected = document.querySelector("#main > select").value; + if (selected == "all") { + window.location.href = "appliances.html"; + } else if (selected == "topdeals") { + window.location.href = "topDeals.html"; + } else if (selected == "dealofday") { + window.location.href = ""; + } +}); + +// cart Image +document + .querySelector("#main > p:last-child") + .addEventListener("click", function () { + window.location.href = ""; + }); + +// Top deals +document.querySelector("#top").addEventListener("click", function () { + window.location.href = "topDeals.html"; +}); + +// Deals of the day +document.querySelector("#deal").addEventListener("click", function () { + window.location.href = ""; + console.log("inside"); +}); + +// Account +document.querySelector("#account").addEventListener("click", function () { + let selectedd = document.querySelector("#account").value; + if (selectedd == "signin") { + window.location.href = ""; + } else if (selectedd == "create") { + window.location.href = ""; + } else if (selectedd == "ac") { + window.location.href = ""; + } +}); + +// end +// nav bar + +let productData = [ + { + name: "OnePlus - 9 5G 128GB (Unlocked) - Astral Black", + price: "989.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6457/6457035_sd.jpg;maxHeight=300;maxWidth=450", + model: "Oneplus", + id: 20222, + }, + { + name: "Apple - Pre-Owned iPhone XR with 128GB Memory Cell Phone (Unlocked) - Black", + price: "289.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6398/6398614_sd.jpg;maxHeight=300;maxWidth=450", + model: "Apple", + id: 20223, + }, + { + name: "OnePlus - Geek Squad Certified Refurbished Nord N10 5G 128GB (Unlocked) - Midnight Ice", + price: "299.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6463/6463777_sd.jpg;maxHeight=300;maxWidth=450", + model: "Oneplus", + id: 20225, + }, + { + name: "Motorola Edge 256GB (Unlocked) 2021 - Nebula Blue", + price: "599.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6472/6472092_rd.jpg;maxHeight=300;maxWidth=450", + model: "Motorola", + id: 20226, + }, + { + name: "OnePlus - 8T 5G 256G (Unlocked) - Aquamarine Green", + price: "599.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6448/6448201_sd.jpg;maxHeight=300;maxWidth=450", + model: "Oneplus", + id: 20227, + }, + { + name: "OnePlus - Nord N10 5G 128GB (Unlocked) - Midnight Ice", + price: "799.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6448/6448207_sd.jpg;maxHeight=300;maxWidth=450", + model: "Oneplus", + id: 20228, + }, + { + name: "Apple - iPhone 12 5G 64GB - Blue (T-Mobile)", + price: "2799.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6418/6418409_sd.jpg;maxHeight=300;maxWidth=450", + model: "Apple", + id: 20229, + }, + { + name: "Apple - Pre-Owned iPhone XR with 128GB Memory Cell Phone (Unlocked) - Black", + price: "289.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6398/6398614_sd.jpg;maxHeight=300;maxWidth=450", + model: "Apple", + id: 202210, + }, + { + name: "Motorola - Moto G Power (2022) 128GB (Unlocked) - Ice Blue", + price: "199.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6494/6494854_sd.jpg;maxHeight=300;maxWidth=450", + model: "Motorola", + id: 202211, + }, + { + name: "Motorola - Geek Squad Certified Refurbished Moto G Stylus 2021 (Unlocked) - Aurora Black", + price: "189.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6463/6463774_sd.jpg;maxHeight=300;maxWidth=450", + model: "Motorola", + id: 202215, + }, + { + name: "Apple - iPhone 13 Pro Max 5G 128GB - Alpine Green (AT&T)", + price: "1789.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6487/6487226_sd.jpg;maxHeight=300;maxWidth=450", + model: "Apple", + id: 202216, + }, + { + name: "Motorola - Moto G 5G 256GB (2022 Unlocked) - Moonlight Gray", + price: "389.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6501/6501829_sd.jpg;maxHeight=300;maxWidth=450", + model: "Motorola", + id: 202217, + }, + { + name: "Apple - iPhone 13 Pro 5G 128GB - Sierra Blue (Verizon)", + price: "1389.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6443/6443321_sd.jpg;maxHeight=300;maxWidth=450", + model: "Apple", + id: 202218, + }, + { + name: "OnePlus - 9 5G 128GB (Unlocked) - Astral Black", + price: "989.99", + img_url: + "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6457/6457035_sd.jpg;maxHeight=300;maxWidth=450", + model: "Oneplus", + id: 202218, + }, +]; + +//category starts +document.querySelector(".p-c-all").addEventListener("click", allpageFun); +function allpageFun(event) { + window.location.href = "appliances.html"; +} + +document.querySelector(".p-c-mobiles").addEventListener("click", mobpageFun); +function mobpageFun(event) { + window.location.href = "mobiles.html"; +} +document.querySelector(".p-c-ref").addEventListener("click", laptopspageFun); +function laptopspageFun(event) { + window.location.href = "laptops.html"; +} + +//category ends + +//sort by section start +let sortby = document.getElementById("sort"); +sortby.addEventListener("change", function () { + // console.log(sortby.value); + if (sortby.value == "A") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + if (a.model < b.model) { + return -1; + } + if (a.model > b.model) { + return 1; + } + return 0; + }); + displayItems(filtered); + } else if (sortby.value == "Z") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + if (a.model < b.model) { + return 1; + } + if (a.model > b.model) { + return -1; + } + return 0; + }); + displayItems(filtered); + } else if (sortby.value == "LtoH") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + return Number(a.price) - Number(b.price); + }); + displayItems(filtered); + } else if (sortby.value == "HtoL") { + document.querySelector(".item-list").innerHTML = ""; + let filtered = productData.sort(function (a, b) { + return Number(b.price) - Number(a.price); + }); + displayItems(filtered); + } +}); +// sort by section end + +//filter section starts +// Filter Section Brands +let Apple = document.getElementById("Apple"); // Selected Input Tag by Id + +// Mobile is main Data +Apple.addEventListener("change", function () { + filterItem(productData, Apple.value); +}); + +let Motorola = document.getElementById("Motorola"); // Selected Input Tag by Id + +// Mobile is main Data +Motorola.addEventListener("change", function () { + filterItem(productData, Motorola.value); +}); +let Oneplus = document.getElementById("Oneplus"); // Selected Input Tag by Id + +// Mobile is main Data +Oneplus.addEventListener("change", function () { + filterItem(productData, Oneplus.value); +}); + +// filter function +let tempFilter = []; +function filterItem(mobiles, a) { + let filterd = mobiles.filter(function (elem) { + return elem.model == a; + }); + + // main display function + filterd.forEach(function (elem) { + tempFilter.push(elem); + }); + document.querySelector(".item-list").innerHTML = ""; + displayItems(tempFilter); +} +//filter section brand ends + +//filter by price + +//filter by price + +displayItems(productData); + +// this is a function which dynamically takes input from productData array + +let cart_page = JSON.parse(localStorage.getItem("cart_page")) || []; + +function displayItems(productData) { + productData.forEach(function (element) { + let pImage = document.createElement("img"); + pImage.setAttribute("class", "pImage"); + pImage.src = element.img_url; + let pName = document.createElement("p"); + pName.setAttribute("class", "pName"); + pName.innerText = element.name; + let pCost = document.createElement("h1"); + pCost.setAttribute("class", "pCost"); + pCost.innerText = "$" + element.price; + let pModel = document.createElement("p"); + pModel.setAttribute("class", "pModel"); + pModel.innerText = "Brand: " + element.model; + let pContent = document.createElement("img"); + pContent.setAttribute("class", "pContent"); + pContent.src = "/rating.png"; + let pAvail = document.createElement("p"); + pAvail.setAttribute("class", "pAvail"); + pAvail.innerText = "No rebates available in 96939"; + + let item_image = document.createElement("div"); + item_image.setAttribute("class", "item_image"); + item_image.append(pImage); + + let item_details = document.createElement("div"); + item_details.setAttribute("class", "item_details"); + item_details.append(pName, pModel, pContent); + + // cart + let pCart = document.createElement("button"); + let cLogo = document.createElement("img"); + cLogo.src = "/trolly.png"; + + let text = document.createElement("p"); + text.innerText = "Add to Cart"; + + pCart.setAttribute("class", "pCart"); + pCart.addEventListener("click", function () { + if (addtoCartFunction(element.id)) { + element.quantity = 1; + element.totalPrice = element.price * element.quantity; + cart_page.push(element); + + localStorage.setItem("cart_page", JSON.stringify(cart_page)); + } + }); + + let pId = document.createElement("p"); + pId.innerText = element.id; + pId.setAttribute("class", "id"); + pCart.append(cLogo, text); + + let item_cost = document.createElement("div"); + item_cost.setAttribute("class", "item_cost"); + item_cost.append(pCost, pAvail, pCart, pId); + + let rowdiv = document.createElement("div"); + rowdiv.setAttribute("class", "rowdiv"); + rowdiv.append(item_image, item_details, item_cost); + let item = document.createElement("li"); + item.setAttribute("class", "item"); + item.append(rowdiv); + document.querySelector(".item-list").append(item); + }); +} + +let slide_1 = document.getElementById("slide-1"); +let slide_2 = document.getElementById("slide-2"); +slide_1.addEventListener("click", slider); +slide_2.addEventListener("click", sliderTwo); + +let slide_img = ["/slider1.png", "/slider2.png", "/slider3.png"]; + +let img = document.getElementById("productSlide"); +let count = 0; +function slider() { + if (count === 0) { + count = slide_img.length - 1; + } else { + count--; + } + img.src = slide_img[count]; + console.log(count); +} +function sliderTwo() { + if (count == slide_img.length - 1) { + count = 0; + } else { + count++; + } + img.src = slide_img[count]; + console.log(count); +} +function addtoCartFunction(id) { + let check = cart_page.filter(function (element) { + return id == element.id; + }); + if (check.length > 0) { + return false; + } else { + return true; + } +} diff --git a/navbar.css b/navbar.css deleted file mode 100644 index f39de54..0000000 --- a/navbar.css +++ /dev/null @@ -1,289 +0,0 @@ -*{ - padding: 0%; - margin: 0%; - box-sizing: border-box; -} -#main >select > option , #buttons select > option{ - background-color: white; - color: #0046be; - font-family: 'Raleway', sans-serif; -} -#main > select, #buttons > select{ - cursor: pointer; -} - -/* First div */ - -#main{ - height: 70px; - width: 100%; - min-width: 100vw; - background-color: - #0046be; - display: flex; - align-items: center; -} -#main > img:first-child{ - height: 90%; - margin-left: 1.5%; - cursor: pointer; -} -#main > img:nth-child(2){ - height: 30px; - cursor: pointer; - margin-left: 2%; -} -#main > div > img{ - height: 55%; -} - -#main > div:nth-child(5){ - display: flex; - align-items: center; - background-color: white; - height: 57%; - padding-right: 10px; - padding-left: 10px; - border-bottom-right-radius: 5px; - border-top-right-radius: 5px; -} -#search-nav{ - height: 60%; - width: 35%; - padding-left: 1%; - font-size: 18px; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - border: 1px solid #0046be; - border-right: white; - margin-left: 2%; -} -/* #main > select{ - background-color: #0046be; - color: white; - font-weight: bold; - font-size: 20px; - border: 1px solid #0046be; - width: 6%; -} */ - -/* Drop down */ - -.dropbtn { - /* background-color: #3498DB; - color: white; - padding: 16px; - font-size: 16px; */ - background-color: #0046be; - color: white; - font-weight: bold; - font-size: 20px; - border: 1px solid #0046be; - width: 6%; - border: none; - cursor: pointer; - } - .dropbtn1 { - background-color: #0046be; - color: white; - font-weight: bolder; - font-size: 14px; - border: 1px solid #0046be; - width: 8%; - border: none; - cursor: pointer; - } - .dropdown,.dropdown1 { - position: relative; - display: inline-block; - } - .dropdown-content , .dropdown-content1{ - display: none; - position: absolute; - background-color: #f1f1f1; - min-width: 160px; - overflow: auto; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; - } - .dropdown-content a , .dropdown-content1 a{ - color: #0046be; - padding: 12px 16px; - text-decoration: none; - display: block; - font-family: 'Raleway', sans-serif; - } - .show {display: block;} - - .dropdown-content a:hover, .dropdown-content1 a:hover{ - text-decoration: underline; - } -#main > p{ - color: white; - font-size: 24px; - font-weight: bold; -} -#main > p:nth-child(7){ - cursor: pointer; - font-family: 'Raleway', sans-serif; -} -#main > img:nth-child(8){ - height: 80%; - cursor: pointer; - margin-left: 3%; -} -#main > p:last-child{ - cursor: pointer; - margin-right: 1%; - font-family: 'Raleway', sans-serif; -} -#main > p:last-child:hover{ - text-decoration: underline; -} -#main > img:nth-child(6){ - height: 100%; - cursor: pointer; - margin-left: 18%; -} - -/* Second div */ - -#buttons{ - height: 50px; - width: 100%; - border-top: 0.5px solid - #1e88e5; - background-color: #0046be; - display: flex; - justify-content: space-between; - font-family: 'Raleway', sans-serif; -} -#buttons > div{ - display: flex; - align-items: center; - color: white; - font-size: 14px; -} -#buttons > div:first-child{ - width: 52%; - justify-content: space-around; - margin-left: 2%; -} -#buttons > div:last-child{ - width: 37%; - justify-content: space-between; - margin-right: 3.5%; -} -#buttons select{ - background-color: #0046be; - color: white; - font-size: 14px; - border: 0px; - font-family: 'Raleway', sans-serif; - font-weight: bold; -} -#buttons p{ - cursor: pointer; -} -#buttons P:hover{ - text-decoration: underline; -} - -/* Medium screen */ - -@media all and (min-width:768px) and (max-width:1023px){ - #main .other1, #buttons .other1{ - width: 0%; - height: 0%; - font-size: 0px; - font-size: 0%; - } - - /* First div */ - #search-nav{ - width: 20%; - font-size: 14px; - } - /* #main > select{ - font-size: 18px; - width: 12%; - } */ - #main > img:first-child{ - margin-left: 0.5%; - - } - #main > img:nth-child(2){ - margin-left: 0.5%; - } - #main > img:nth-child(6){ - margin-left: 3%; - } - #main > img:nth-child(8){ - margin-left: 1%; - } - /* Second div */ - #buttons > div{ - font-size: 12px; - } - #buttons select{ - font-size: 10px; - } - #buttons > div:last-child{ - width: 45%; - margin-right: 0.5%; - } - #buttons > div:first-child{ - width: 48%; - margin-left: 0.5%; - } -} - -/* Small screen */ - -@media all and (min-width:340px) and (max-width:767px){ - - #main .other, #buttons .other{ - width: 0%; - height: 0%; - font-size: 0px; - font-size: 0%; - } - - /* First div */ - /* #main > select{ - font-size: 18px; - width: 30%; - margin-left: 0%; - } */ - #main > img:first-child{ - height: 60%; - } - #search-nav{ - width: 60%; - font-size: 12px; - } - #main > p:nth-child(7){ - font-size: 0px; - margin: 0%; - } - #main > img:nth-child(6){ - margin-left: 0%; - } - #main > img:nth-child(8){ - margin-left: 0%; - } - - /* Second div */ - #buttons > div:last-child{ - width: 35%; - margin-right: 1%; - } - #buttons > div:first-child{ - width: 50%; - margin-left: 0.5%; - } - /* #main > div{ - width: 0%; - height: 0%; - } */ -} \ No newline at end of file diff --git a/navbar.html b/navbar.html deleted file mode 100644 index 6b1e642..0000000 --- a/navbar.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - Navbar - - - - -
- logo - -
- -
- Top Deals - Deals of the Day - All Appliances - Mobiles - Laptops - Best Buy Outlet - Toys, Games & Collectibles -
-
- -
- -
- -

Aiea

- -

Cart

-
-
-
-

Top Deals

-

- Deal of the Day

-

- Totaltech Membership

-

- Credit Cards

-

- Gift Cards

-

- Gift Ideas

- -
-
-
- - -
- - - -
-
- - - - diff --git a/navbar.js b/navbar.js deleted file mode 100644 index be71cb5..0000000 --- a/navbar.js +++ /dev/null @@ -1,78 +0,0 @@ - -document.querySelector("#main > img:first-child").addEventListener("click", function(){ - window.location.href = "index.html"; -}); - -// Menu -function myFunction() { - document.getElementById("myDropdown").classList.toggle("show"); - } - - window.onclick = function(event) { - if (!event.target.matches('.dropbtn')) { - var dropdowns = document.getElementsByClassName("dropdown-content"); - var i; - for (i = 0; i < dropdowns.length; i++) { - var openDropdown = dropdowns[i]; - if (openDropdown.classList.contains('show')) { - openDropdown.classList.remove('show'); - } - } - } - } - - // Account -function myFunction1() { - document.getElementById("myDropdown1").classList.toggle("show"); - } - - window.onclick = function(event) { - if (!event.target.matches('.dropbtn1')) { - var dropdowns1 = document.getElementsByClassName("dropdown-content1"); - var j; - for (j = 0; j < dropdowns1.length; j++) { - var openDropdown1 = dropdowns1[j]; - if (openDropdown1.classList.contains('show')) { - openDropdown1.classList.remove('show'); - } - } - } - } - - let account = document.querySelector(".dropbtn1"); - tempUserData = JSON.parse(localStorage.getItem("tempUserData")); - if (tempUserData == undefined){ - account.innerText = "Account"; - } - else { - account.innerText = "Hi, " + tempUserData[0].Name; - } - -// cart Image -document.querySelector("#main > p:last-child").addEventListener("click", function(){ - window.location.href = "cartpage.html"; -}); - -// Top deals -document.querySelector("#top").addEventListener("click",function(){ - window.location.href = "topDeals.html"; -}); - -// Deals of the day -document.querySelector("#deal").addEventListener("click", function(){ - window.location.href = "dealsOftheDay.html"; -}); - -// Account -// document.querySelector("#account").addEventListener("click", function(){ -// let selectedd = document.querySelector("#account").value; -// if (selectedd == "signin"){ -// window.location.href = "login.html"; -// } -// else if (selectedd == "create"){ -// window.location.href = "signup.html"; -// } -// else if (selectedd == "ac"){ -// window.location.href = "userAccount.html"; -// } -// }); diff --git a/rating.png b/rating.png new file mode 100644 index 0000000..ead1885 Binary files /dev/null and b/rating.png differ diff --git a/signup.css b/signup.css deleted file mode 100644 index fd0771d..0000000 --- a/signup.css +++ /dev/null @@ -1,225 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); - -/* sign up css start*/ - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - background-color: rgb(236, 236, 236); -} - -nav { - background-color: rgb(0, 70, 190); - color: white; - display: flex; - justify-content: space-around; - align-items: center; - position: sticky; - top: 0; -} - -img { - cursor: pointer; -} - -nav>a { - color: white; - text-decoration: none; -} - -form { - width: 70%; - margin: auto; -} - -form>input:nth-child(10) { - text-align: center; - background-color: rgb(0, 70, 190); - font-family: 'Poppins', sans-serif; - font-size: 1rem; - color: white; - border: none; - padding: 10px; -} - -form>input:nth-child(10):hover { - background-color: rgb(0, 48, 131); - cursor: pointer; -} - -.signup { - background-color: white; - width: 40%; - margin: auto; - margin-top: 50px; - border: 1px solid; - text-align: center; - border: none; - border-radius: 5px; - box-shadow: 0px 0px 5px gray; -} - -.signup>h1 { - font-family: 'Poppins', sans-serif; - font-weight: 600; - font-size: 1.5rem; - letter-spacing: 1px; - padding-top: 20px; - padding-bottom: 5px; -} - -.signup>p { - padding-bottom: 20px; - font-family: 'Poppins', sans-serif; - font-size: 13px; -} - -input { - padding: 10px; - margin-bottom: 10px; - width: 80%; - text-align: left; - border-radius: 5px; - border: 1px solid rgb(181, 181, 181); -} - -::placeholder { - font-size: 15px; - padding: 5px; - color: rgb(41, 41, 41); - font-family: 'Poppins', sans-serif; - font-weight: 500; - margin-top: 10px; -} - -.signup>div:nth-child(4) { - width: 60%; - margin: auto; - position: relative; - display: flex; - align-items: center; - justify-content: center; -} - -.signup>div:nth-child(4)>div:nth-child(1) { - position: absolute; - background-color: #595a5c; - top: 50%; - left: 0px; - right: 0px; - height: 3px; -} - -.withGoogle { - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - margin-left: 25%; - padding: 5px 10% 5px 50px; - background-color: white; - border: 1px solid rgb(0, 70, 190); - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 15px; - color: rgb(0, 70, 190); -} - -.withGoogle>img { - width: 30px; -} - -.withGoogle:hover { - background-color: rgb(0, 70, 190); - color: white; - cursor: pointer; -} - -.signup>div:nth-child(6) { - height: 2px; - background-color: rgb(80, 80, 80); - width: 50%; - margin: auto; - margin-top: 30px; -} - -.signup>div:nth-child(7)>p { - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 13px; - padding-top: 30px; - padding-bottom: 30px; -} - -#tabLogo { - border-radius: 100%; -} - -footer { - box-sizing: border-box; - background-color: white; - margin-top: 50px; - height: 250px; - padding: 50px 200px 10px 200px; - line-height: 25px; -} - -.footer { - display: flex; -} - -.vl { - border-left: 1px solid rgb(209, 209, 209); - margin-left: 10px; - margin-right: 10px; -} - -footer>div>a { - text-decoration: none; -} - -footer>div>p { - padding-top: 10px; - font-family: 'Poppins', sans-serif; - color: #939393; -} - -@media all and (min-width: 768px) and (max-width: 1324px) { - .signup { - width: 60%; - } - - .withGoogle { - padding-left: 30px; - } - - footer { - height: 200px; - padding: 50px; - } - -} - -@media all and (min-width: 320px) and (max-width: 768px) { - .signup { - width: 90%; - } - - .withGoogle { - padding-right: 10px; - padding-left: 10px; - margin-left: 20%; - } - - input { - width: 100%; - } - - footer { - padding: 20px; - } -} \ No newline at end of file diff --git a/signup.html b/signup.html deleted file mode 100644 index e8b7a0b..0000000 --- a/signup.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - - Best Buy | Sign Up - - - - - - - - - - -
-
-

Create an Account

-

Shopping for your business? Create a business account.

-
-
-
-
-
-
-
-
-
- -
-
-
-
- OR
-
-
- -
-
-
-

Already have an Account? Sign in

-
-
-
- - - - - - - - - - \ No newline at end of file diff --git a/signup.js b/signup.js deleted file mode 100644 index 35ffc86..0000000 --- a/signup.js +++ /dev/null @@ -1,50 +0,0 @@ -document.querySelector("form").addEventListener("submit", main); - -let userData = JSON.parse(localStorage.getItem("userData")) || []; // use this local storage - -function main(event) { - event.preventDefault(); - let name = document.getElementById("fName").value; - let email = document.getElementById("email").value; - let password = document.getElementById("password").value; - let cPassword = document.getElementById("cPassword").value; - let phone = document.getElementById("phone").value; - - if (password == cPassword) { - if (authEmailAndPhone(userData) == false) { - let uid = Date.now().toString(36) + Math.floor(Math.random() * 100); - let object = { - userName: name, - userEmail: email, - userPassword: password, - userPhone: phone, - userId: uid, - }; - userData.push(object); - localStorage.setItem("userData", JSON.stringify(userData)); - alert("Sign up succesful"); - window.location.href = "login.html"; - } else { - alert("Email or Phone Already Exists"); - } - } else { - alert("Password not Matched"); - } -} - -function authEmailAndPhone(userData) { - let flag = false; - userData.forEach(function (elem) { - let email = document.getElementById("email").value; - let phone = document.getElementById("phone").value; - - if (elem.userEmail == email || elem.userPhone == phone) { - flag = true; - } - }); - if (flag) { - return true; - } else { - return false; - } -} diff --git a/slider1.png b/slider1.png new file mode 100644 index 0000000..6eb4e8f Binary files /dev/null and b/slider1.png differ diff --git a/slider2.png b/slider2.png new file mode 100644 index 0000000..f226bf6 Binary files /dev/null and b/slider2.png differ diff --git a/slider3.png b/slider3.png new file mode 100644 index 0000000..25f6e5a Binary files /dev/null and b/slider3.png differ diff --git a/topDeals.html b/topDeals.html deleted file mode 100644 index e0e300d..0000000 --- a/topDeals.html +++ /dev/null @@ -1,1366 +0,0 @@ - - - - - - - - Top Deals - - - - - - - -
- -
-
-

Top Deals Today’s featured deals and top tech. Valid through 18/06/22.*

-
-
-
-
Featured Deals
-
Laptops & Computers
-
TVs & Projectors
-
Video Games
-
Apple
-
Headphones
-
Cell Phones
-
Tablets
-
Major Appliances
-
Small Kitchen Appliances
-
-

Today’s featured deals

-
-
-
-
Big-Screen TVs as low as$19999
-

Free shipping, - delivery or Curbside Pickup. Installation available.

-

Insignia™ model NS-50F301NA22 is $199.99 (not pictured).

-
- -
-
-
-
-
-
-

Save up to

-

50%

-

on clearance and open box

-
-
Save up to 50% on clearance and open-box items. -

Find great deals on a huge selection of products.

-

Ends 06/19/22. Online and in store. Minimum savings is 5%. Exclusions apply.

-
-
-
Electric bikes and more. -

Energy-efficient and enjoyable to ride, - e-vehicles are ideal for families and individuals.

-
-
-
-
-

More speaking up.More moving - forward.

-

See how we’re amplifying the voices of women in tech and throughout the - digital world, - with the goal of promoting digital equity.

-
-
-

More of this.

-
-
-
-
Save up to$300on select Windows laptops.Minimum savings is - $20.
-
-
-
-
-
-

Save up to $1, - 000 with qualified activation and trade-in of iPhone 11 Pro or newer.

-

Terms and conditions apply.

-
-
-
-
- -
-
Toy for spring gifts -

Surprise a child in your life with toys, - trading cards and more.

-

Some items chosen at random.

-
-
-
-
-
-

The membership you and your tech deserve.

-

Best Buy Totaltech™ provides 24/7/365 tech support, - up to 24 months of product protection with active membership, - free standard installation and so much more.

-

Terms and conditions apply.

-
-
-
-
-
-

Exclusive product savings for members.

-

Whether you’re a Best Buy Totaltech™ member or thinking of joining, - here are today’s featured discounts, - with many more available online and in store.

-
-
-
-
-
-
-

12 month financing

-

on storewide purchases $299 and up.

-
-
-

Interested in a

-

no credit

-

needed*See disclosure option?

-
-
-
-
-
- - - - - \ No newline at end of file diff --git a/trolly.png b/trolly.png new file mode 100644 index 0000000..8c1226e Binary files /dev/null and b/trolly.png differ diff --git a/userAccount.css b/userAccount.css deleted file mode 100644 index b918f1e..0000000 --- a/userAccount.css +++ /dev/null @@ -1,895 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; -} - -body { - width: 100vw; -} - -.clo-grn { - color: green; -} - -a { - text-decoration: none; - color: rgb(9, 90, 201); -} - -a:visited { - color: rgb(9, 90, 201); -} - -a:hover { - text-decoration: underline; - cursor: pointer; -} - -.dplay-grid { - display: grid; -} - -#userAccount { - background-color: rgb(240, 242, 244); - display: grid; - grid-template-columns: 35% 60%; - gap: 5%; - padding-top: 100px; -} - -#uc-sec-1 { - margin-left: 10%; - gap: 50px; - grid-template-rows: repeat(3, 1fr); -} - -#uc-sec-2 { - margin-right: 5%; -} - -.uc-sec-1-1 { - background-color: white; -} - -.uc-sec-2-1 { - background-color: white; - padding: 20px; - border-radius: 10px; - box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; -} - -.uc-sec-2-2 { - background-color: white; - padding: 30px; - margin-top: 50px; - border-radius: 10px; - box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; -} - -.uc-sec-2-1>div:nth-child(1) { - display: flex; - justify-content: space-between; - font-size: 1.3rem; -} - -.uc-sec-2-1>p:nth-child(2) { - text-align: center; - padding: 15px; - font-size: 1.3rem; -} - -.uc-sec-2-1>div:nth-child(3) { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - border-radius: 10px; -} - -.uc-sec-2-1>div:nth-child(3)>div { - text-align: center; - width: 50%; - padding: 30px; - background-color: rgb(240, 242, 244); -} - -.uc-sec-2-1>div:nth-child(3)>div>p { - width: 80%; - margin: auto; - padding: 20px; -} - -.uc-btn { - background-color: white; - padding: 5px 20px 5px 20px; - margin-top: 5px; - font-weight: 800; - color: rgb(0, 70, 190); - border: 1px solid rgb(0, 70, 190); - border-radius: 5px; -} - -.uc-btn:hover { - color: white; - background-color: rgb(15, 55, 124); - cursor: pointer; -} - - -.uc-sec-2-2>div:nth-child(1) { - width: 96%; - margin: auto; - display: flex; - justify-content: space-between; - padding: 20px; -} - -.uc-sec-2-2>div:nth-child(1)>p { - font-size: 20px; -} - -.uc-sec-2-2>div:nth-child(3) { - display: grid; - gap: 10px; - grid-template-columns: 65% 35%; - padding: 20px; -} - -#uc-sec-2-3 { - display: flex; - justify-content: space-around; - line-height: 2.5rem; -} - -#uc-sec-2-3>div:nth-child(2) { - padding-top: 8%; -} - -#uc-sec-2-4 { - padding: 30% 0px 5px 20px; -} - -#uc-sec-2-4>div { - padding: 10px; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; -} - -#uc-sec-2-4>div>h3 { - font-family: 'Mukta', sans-serif; -} - -#uc-sec-2-4>div>p { - font-family: 'Mukta', sans-serif; - color: rgb(127, 129, 151); - line-height: 120%; - padding: 0px 10px 15px 0px; -} - -#uc-sec-2-4>div>button { - display: block; - margin: auto; - padding: 5px 70px 5px 70px; -} - -.uc-sec-2-2>div:nth-child(3)>div>h3 { - font-family: 'Mukta', sans-serif; -} - -.uc-sec-1-1 { - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; - border-radius: 10px; - padding: 20px; -} - -.uc-sec-1-1>div:last-child { - padding: 20px; -} - -#name { - padding: 20px; -} - -.uc-sec-1-1-div { - display: flex; - justify-content: space-between; - padding: 20px; - align-items: center; -} - -.uc-sec-1-1-div>p { - font-size: 13px; - color: rgb(127, 129, 151); -} - -.uc-sec-1-2 { - border-radius: 10px; - padding: 30px; - background-color: white; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; -} - - -.uc-sec-1-2>div:nth-child(1)>div:nth-child(1) { - background-color: rgb(9, 90, 201); - display: flex; - flex-wrap: wrap; - justify-content: space-around; - align-items: center; - color: white; - padding: 10px; - border-top-right-radius: 10px; - border-top-left-radius: 10px; -} - -.uc-sec-1-2>div:nth-child(1)>div:nth-child(2)>div { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - align-items: center; - padding: 25px; - border-left: 1px solid rgb(127, 129, 151); - border-right: 1px solid rgb(127, 129, 151); -} - -#uc-sec-1-h2 { - padding: 10px; -} - -.uc-sec-1-2>div:nth-child(1)>div:nth-child(2)>div:nth-child(2) { - border-bottom: 1px solid rgb(127, 129, 151); - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - margin-bottom: 60px; -} - -.uc-sec-1-2>div:nth-child(1)>div:nth-child(2)>div { - text-align: center; -} - -.fa-laptop, -.fa-tv { - color: rgb(0, 70, 190); - font-size: 30px; - padding: 10px; -} - -.uc-sec-1-2>div:nth-child(3) { - margin-top: 3%; - padding: 20px; -} - -.uc-sec-1-2>div:nth-child(3)>div:nth-child(2) { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - align-items: center; - padding: 10px; -} - -#laptop { - color: rgb(127, 129, 151); -} - -.uc-sec-1-3 { - border-radius: 10px; - padding: 30px; - background-color: white; - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; - height: 370px; -} - -.uc-sec-1-3>p:first-child { - padding: 10px; - font-size: 20px; -} - -#uc-sec-1-p { - color: rgb(68, 69, 81); - padding: 10px 0px 10px 10px; -} - -.uc-sec-1-3>button { - display: block; - margin: auto; - margin-top: 30px; - margin-left: 0; - width: 80%; - background-color: rgb(9, 90, 201); - color: white; -} - -.uc-sec-1-4 { - background-color: rgb(240, 242, 244); - padding: 80px; -} - -.uc-sec-1-4>ol>li { - line-height: 25px; - font-size: 13px; - color: rgb(127, 129, 151); -} - -.uc-sec-1-4>ol>li>b { - color: black; -} - -footer { - background-color: rgb(240, 242, 244); - width: 100%; -} - - -.sec_1 { - display: grid; - gap: 30px; - grid-template-columns: repeat(5, 1fr); - text-align: center; -} - -.sec_1>div { - padding: 60px; -} - -.sec_1>div:hover { - cursor: pointer; -} - -.font-60 { - font-size: 60px; - padding-bottom: 20px; - color: gray; -} - -.sec_1>div>a { - text-decoration: none; - margin-top: 10px; - font-family: 'Poppins', sans-serif; - font-weight: 600; - font-size: 14px; - color: rgb(9, 90, 201); -} - -.sec_1>div>a:hover { - text-decoration: underline; -} - -.hl { - width: 95%; - background-color: rgb(152, 150, 150); - height: 1px; - margin: auto; -} - -.sec_2 { - display: flex; - justify-content: space-around; - flex-wrap: wrap; -} - -#sec_2-1 { - margin-top: 10px; - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, 1fr); -} - -#sec_2-1>div>h3 { - font-family: 'Poppins', sans-serif; -} - -#sec_2-1>div>p { - color: rgb(9, 90, 201); - font-family: 'Poppins', sans-serif; - padding-top: 20px; -} - -footer>div:nth-child(4) { - display: flex; - justify-content: space-between; - margin-top: 50px; - padding: 20px; -} - -footer>div:nth-child(4)>div { - display: flex; - justify-content: space-around; -} - -footer>div:nth-child(4)>p>span { - color: rgb(9, 90, 201); - font-family: 'Poppins', sans-serif; -} - -footer>div:nth-child(4)>div>p { - color: rgb(9, 90, 201); - font-family: 'Poppins', sans-serif; - margin-right: 40px; -} - - -#footer_form { - background-color: white; - width: 30%; - padding: 10px 20px 10px 30px; - margin-top: 20px; - border-radius: 10px; - box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px; -} - -#footer_form>p:first-child { - color: rgb(9, 90, 201); - font-family: 'Poppins', sans-serif; - font-weight: 500; - padding-bottom: 15px; -} - -#footer_form>h3 { - font-family: 'Poppins', sans-serif; - font-weight: 500; - padding-bottom: 15px; - padding-top: 15px; -} - -#footer_form>input:nth-child(4) { - padding: 10px 40px 10px 20px; - border-radius: 5px; - border: 1px solid gray; - margin-left: 10px; -} - -#footer_form>input:nth-child(5) { - margin-left: 15px; - padding: 10px 30px 10px 30px; - border-radius: 5px; - border: none; - background-color: rgb(9, 90, 201); - color: white; -} - -.fa-mobile-button { - font-size: 60px; - color: rgb(9, 90, 201); -} - -#footer_form>div:nth-child(7) { - padding: 20px; -} - -#footer_form>div:nth-child(7)>p { - font-family: 'Poppins', sans-serif; -} - -#footer_form>div:nth-child(7)>span { - font-size: 30px; - font-family: 'Poppins', sans-serif; - font-weight: 600; -} - -.fa-brands { - font-size: 35px; - margin: 20px 5px 20px 40px; - color: rgb(9, 90, 201); -} - -#footer_form>p:last-child { - padding-left: 10px; - color: rgb(9, 90, 201); - font-family: 'Poppins', sans-serif; -} - -#sec_3>div:first-child { - display: flex; - color: rgb(9, 90, 201); - justify-content: space-around; - font-size: 13px; - width: 90%; - margin-top: 30px; - font-family: 'Poppins', sans-serif; -} - -#sec_3>div:last-child { - color: rgb(115, 115, 115); - width: 90%; - font-size: 15px; - margin-top: 20px; - font-family: 'Poppins', sans-serif; - margin-left: 20px; -} - -@media all and (min-width: 1025x) and (max-width: 1524px) { - #footer_form { - width: 50%; - } -} - -@media all and (min-width: 768px) and (max-width: 1024px) { - .sec_1 { - grid-template-columns: repeat(3, 1fr); - } - - #footer_form { - width: 50%; - } - - #sec_2 { - grid-template-columns: 1fr; - grid-template-rows: repeat(2, 1fr); - } - - #sec_2-1 { - padding: 40px; - gap: 20px; - grid-template-columns: repeat(3, 1fr); - } - - .uc-sec-1-3 { - height: 450px; - } - - .uc-sec-2-1>div:nth-child(1) { - justify-content: space-around; - } - - .uc-sec-2-1>p:nth-child(2) { - font-size: 1.2rem; - } - - .uc-sec-2-1>div:nth-child(3)>div { - width: 100%; - } - - .uc-sec-2-2 { - margin-top: 30px; - padding: 10px; - } - - .uc-sec-2-1>p:nth-child(2) { - padding: 7px; - } - - #uc-sec-2-4>div>button { - padding: 5px 30px 5px 30px; - font-size: 12px; - } - - #uc-sec-2-3>div:nth-child(2) { - margin-top: 15%; - } - - #uc-sec-2-4>div { - margin-top: 45%; - } - - #uc-sec-1 { - gap: 20px; - } - - .uc-sec-1-1 { - padding: 0; - height: 550px; - } - - #name { - font-size: 13px; - } - - .uc-sec-1-1-div>p { - font-size: 13px; - padding-left: 10px; - } - - .uc-sec-1-1-div { - padding: 15px; - } - - .uc-sec-1-2 { - padding: 10px; - } - - .uc-sec-1-3 { - padding: 20px; - } - - .uc-sec-1-2>div:nth-child(1)>div:nth-child(1) { - padding: 5px; - } - - .uc-sec-1-2>div:nth-child(1)>div:nth-child(2)>div { - padding: 15px; - } - - .uc-sec-1-2>div:nth-child(3) { - padding: 15px; - } - - .fa-laptop, - .fa-tv { - padding: 20px; - padding-left: 0px; - } - - .uc-sec-1-3 { - padding: 15px; - } - - #uc-sec-1-h2 { - font-size: 20px; - padding-left: 10px; - padding-top: 10px; - } - - #sec_2 { - grid-template-columns: 1fr; - grid-template-rows: repeat(2, 1fr); - } - - #sec_2-1 { - padding: 40px; - gap: 20px; - grid-template-columns: repeat(3, 1fr); - } - - .uc-sec-1-3 { - height: 450px; - } - - .uc-sec-2-1>div:nth-child(1) { - justify-content: space-around; - } - - .uc-sec-2-1>p:nth-child(2) { - font-size: 1.2rem; - } - - .uc-sec-2-1>div:nth-child(3)>div { - width: 100%; - } - - .uc-sec-2-2 { - margin-top: 30px; - padding: 10px; - } - - .uc-sec-2-1>p:nth-child(2) { - padding: 7px; - } - - #uc-sec-2-4>div>button { - padding: 5px 30px 5px 30px; - font-size: 12px; - } - - #uc-sec-2-3>div:nth-child(2) { - margin-top: 15%; - } - - #uc-sec-2-4>div { - margin-top: 45%; - } - - #uc-sec-1 { - gap: 20px; - } - - .uc-sec-1-1 { - padding: 0; - height: 550px; - } - - #name { - font-size: 13px; - } - - .uc-sec-1-1-div>p { - font-size: 13px; - padding-left: 10px; - } - - .uc-sec-1-1-div { - padding: 15px; - } - - .uc-sec-1-2 { - padding: 10px; - } - - .uc-sec-1-3 { - padding: 20px; - } - - .uc-sec-1-2>div:nth-child(1)>div:nth-child(1) { - padding: 5px; - } - - .uc-sec-1-2>div:nth-child(1)>div:nth-child(2)>div { - padding: 15px; - } - - .uc-sec-1-2>div:nth-child(3) { - padding: 15px; - } - - .fa-laptop, - .fa-tv { - padding: 20px; - padding-left: 0px; - } - - .uc-sec-1-3 { - padding: 15px; - } - - #uc-sec-1-h2 { - font-size: 20px; - padding-left: 10px; - padding-top: 10px; - } -} - -@media all and (min-width: 320px) and (max-width:767px) { - - .sec_1 { - grid-template-columns: repeat(2, 1fr); - } - - body { - min-width: 100vw; - } - - - - #footer_form { - width: 80%; - } - - #sec_2-1 { - padding: 20px; - gap: 20px; - } - - #sec_3>div:first-child { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 10px; - padding: 20px; - } - - #footer_form>input { - margin-top: 15px; - } - - #userAccount { - grid-template-columns: 80%; - } - - #uc-sec-1 { - grid-template-rows: repeat(3, 1fr); - } - - #uc-sec-2 { - width: 100%; - margin: auto; - margin-top: 0; - margin-left: 10%; - } - - .uc-sec-2-1>div:nth-child(3)>div { - padding: 10px; - } - - .uc-sec-2-1 { - width: 100%; - padding: 30px; - } - - .uc-sec-2-1>div:nth-child(1) { - justify-content: space-around; - } - - .uc-sec-2-1>p:nth-child(2) { - font-size: 1.2rem; - } - - .uc-sec-2-1>div:nth-child(3)>div { - width: 100%; - } - - .uc-sec-2-2 { - margin-top: 30px; - padding: 10px; - } - - .uc-sec-2-1>p:nth-child(2) { - padding: 7px; - } - - #uc-sec-2-4>div>h3 { - font-size: 15px; - } - - #uc-sec-2-4>div>p { - padding: 0 5px 7px 0; - } - - #uc-sec-2-4>div>button { - padding: 5px 15px 5px 15px; - font-size: 10px; - } - - #uc-sec-2-3>div:nth-child(2) { - margin-top: 15%; - } - - #uc-sec-2-4>div { - margin-top: 45%; - } - - #uc-sec-1 { - gap: 20px; - } - - .uc-sec-1-1 { - padding: 0; - height: 600px; - } - - #name { - font-size: 13px; - } - - .uc-sec-1-1-div>p { - font-size: 13px; - padding-left: 10px; - } - - .uc-sec-1-1-div { - padding: 15px; - } - - .uc-sec-1-2 { - padding: 10px; - } - - .uc-sec-1-3 { - padding: 20px; - } - - .uc-sec-1-2>div:nth-child(1)>div:nth-child(1) { - padding: 5px; - } - - .uc-sec-1-2>div:nth-child(1)>div:nth-child(2)>div { - padding: 15px; - } - - .uc-sec-1-2>div:nth-child(3) { - padding: 15px; - } - - .fa-laptop, - .fa-tv { - padding: 20px; - padding-left: 0px; - } - - .uc-sec-1-3 { - padding: 15px; - height: 600px; - } - - #uc-sec-1-h2 { - font-size: 20px; - padding-left: 10px; - padding-top: 10px; - } - - .uc-sec-1-4 { - width: 100%; - padding: 200px 10px 100px 15px; - text-align: left; - font-size: 1rem; - } -} \ No newline at end of file diff --git a/userAccount.html b/userAccount.html deleted file mode 100644 index 702657a..0000000 --- a/userAccount.html +++ /dev/null @@ -1,378 +0,0 @@ - - - - - - - - Account Home - Best Buy - - - - - - - - - -
- logo - -
- -
- Top Deals - Deals of the Day - All Appliances - - - Mobiles - Laptops - - Best Buy Outlet - Toys, Games & Collectibles -
-
- -
- -
- -

Aiea

- -

Cart

-
-
-
-

Top Deals

-

- Deal of the Day

-

- Totaltech Membership

-

- Credit Cards

-

- Gift Cards

-

- Gift Ideas

- -
-
-
- - -
- - - -
-
-
-
-
-
-
-
- Purchases -

Track, change, cancel

-
-
-
- Your Product -

Support, manuals, guides

-
-
-
- Payment Methods -

Saved credit cards

-
-
-
- Account Settings -

Addresses, password, preferences

-
-
-
- Support Center -

Help, customer service, contact us

-
-
-
- Sign Out -
-
-
-
-
-

My BestBuy.com

-
-
-
-
-
-

$0

-

Certificates

-
-
-

0

-

Points

-
-
- -
-
-
-
-

Member Offers

-
-
- - -
-
- My Best Buy Offers -

Enjoy these deals designed especially for you!

-
-
-
-
-
-

Payment Methods

-
- -

Apply today. Shop today. 10% back in rewards2

- -

on your first day of purchases, or choose flexible financing, when approved for a My - Best Buy® Credit - Card

-
- View pricing and terms -
- - -
- -
-
-
-
-

Your Products

- See all your products -
-

You haven’t bought anything in a while.

-
-
-

Add Your Products

-

Add items you own (no matter where you bought them) to see support & service options.

- -
-
-

Start Shopping

-

Your items will show up here – along with warranty info, support & service options, and more. -

- -
-
-
-
-
-

Customer Services

- See all help topics -
-
-
- -
-
-

Need more help?

-

Find answers to frequently asked questions or contact us by phone or email.

- -
-
-
-
-
-
-
-
    -
  1. 250 points = $5 reward certificate.Reward certificates are coupons for discounts off future - purchases. See My Best Buy program terms for details.
    2. -
  2. - *Get 2.5 points per $1 spent (5% back in rewards) on qualifying Best Buy® purchases when you - choose Standard Credit with your Best Buy Credit Card. If you apply and are approved for a new - My Best Buy® Credit Card, your first day of purchases on the Credit Card using Standard Credit - within the first 14 days of account opening will get an additional 2.5 bonus points (an - additional 5% back in rewards, for a total of 10%). Points are not awarded on promotional credit - purchases. May not be combined with other offers. Does not include tax. Additional limitations - may apply. Subject to My Best Buy Program Terms. In select stores. Online offer may vary. - Subject to change without notice. -
    3. -
-
- - - - - - \ No newline at end of file diff --git a/userAccount.js b/userAccount.js deleted file mode 100644 index 2147a71..0000000 --- a/userAccount.js +++ /dev/null @@ -1,21 +0,0 @@ -let data = JSON.parse(localStorage.getItem("tempUserData")); -console.log(data); - -// Account js file -data.forEach(function (elem) { - let name = document.createElement("h3"); - let userName = elem.Name; - name.innerHTML = `Hi, ${userName}. Welcome Back.`; - document.getElementById("name").append(name); - - let userId = elem.memberId; - let id = `Member ID: ${userId}`; - document.getElementById("memberID").innerText = id; -}); - -function applynow() { - window.location.href = "topDeals.html"; -} -function shopnow() { - window.location.href = "laptops.html"; -}