diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..75d5ddc Binary files /dev/null and b/.DS_Store differ diff --git a/about.html b/about.html new file mode 100644 index 0000000..1d8fa99 --- /dev/null +++ b/about.html @@ -0,0 +1,26 @@ + + + + + Muddy Paws + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+
+ \ No newline at end of file diff --git a/bag-1.html b/bag-1.html new file mode 100644 index 0000000..697da9e --- /dev/null +++ b/bag-1.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Harness Storage (Strawberry)
+
$15
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/bag-2.html b/bag-2.html new file mode 100644 index 0000000..8bd72d3 --- /dev/null +++ b/bag-2.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Harness Storage (Blackberry)
+
$15
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/bag-3.html b/bag-3.html new file mode 100644 index 0000000..15284d6 --- /dev/null +++ b/bag-3.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Harness Storage (Crazyberry)
+
$15
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/bag-4.html b/bag-4.html new file mode 100644 index 0000000..6d71ef5 --- /dev/null +++ b/bag-4.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Harness Storage (Camouflage)
+
$15
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/bag-5.html b/bag-5.html new file mode 100644 index 0000000..c5f8cbb --- /dev/null +++ b/bag-5.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Harness Storage (Night Moon)
+
$15
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/bag-6.html b/bag-6.html new file mode 100644 index 0000000..0c9d03c --- /dev/null +++ b/bag-6.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Harness Storage (Fire Orange)
+
$15
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/cart.html b/cart.html new file mode 100644 index 0000000..03923bf --- /dev/null +++ b/cart.html @@ -0,0 +1,98 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Dog Harness
+
Small
+
Strawberry
+
$20
 +
+ - + 1 + + +
+
delete
+
+
Cat Harness
+
Large
+
Crazyberry
+
$20
 +
+ - + 1 + + +
+
delete
+
+
GPS Tracker Collar
+
Medium
+
Strawberry
+
$80
 +
+ - + 1 + + +
+
delete
+
Subtotal:$120 +
+
Checkout
+
+ +
+ diff --git a/catharness-1.html b/catharness-1.html new file mode 100644 index 0000000..3c61c87 --- /dev/null +++ b/catharness-1.html @@ -0,0 +1,86 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + + +
+ + + + +
+
Cat Harness (Strawberry)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/catharness-2.html b/catharness-2.html new file mode 100644 index 0000000..de95e8b --- /dev/null +++ b/catharness-2.html @@ -0,0 +1,86 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + + +
+ + + + +
+
Cat Harness (Blackberry)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/catharness-3.html b/catharness-3.html new file mode 100644 index 0000000..e249d8c --- /dev/null +++ b/catharness-3.html @@ -0,0 +1,86 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + + +
+ + + + +
+
Cat Harness (Crazyberry)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/catharness-4.html b/catharness-4.html new file mode 100644 index 0000000..7c0e602 --- /dev/null +++ b/catharness-4.html @@ -0,0 +1,86 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + + +
+ + + + +
+
Cat Harness (Camouflage)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/catharness-5.html b/catharness-5.html new file mode 100644 index 0000000..777e45d --- /dev/null +++ b/catharness-5.html @@ -0,0 +1,86 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + + +
+ + + + +
+
Cat Harness (Night Moon)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/catharness-6.html b/catharness-6.html new file mode 100644 index 0000000..e451eb6 --- /dev/null +++ b/catharness-6.html @@ -0,0 +1,86 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + + +
+ + + + +
+
Cat Harness (Fire Orange)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/dogharness-0.html b/dogharness-0.html new file mode 100644 index 0000000..a8e2de0 --- /dev/null +++ b/dogharness-0.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Dog Harness (Strawberry)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/dogharness-2.html b/dogharness-2.html new file mode 100644 index 0000000..e6a6702 --- /dev/null +++ b/dogharness-2.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Dog Harness (Blackberry)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/dogharness-3.html b/dogharness-3.html new file mode 100644 index 0000000..c34f474 --- /dev/null +++ b/dogharness-3.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Dog Harness (Crazyberry)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/dogharness-4.html b/dogharness-4.html new file mode 100644 index 0000000..ed2f38e --- /dev/null +++ b/dogharness-4.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Dog Harness (Camouflage)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/dogharness-5.html b/dogharness-5.html new file mode 100644 index 0000000..1fe0d27 --- /dev/null +++ b/dogharness-5.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Dog Harness (Night Moon)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/dogharness-6.html b/dogharness-6.html new file mode 100644 index 0000000..10a0c70 --- /dev/null +++ b/dogharness-6.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
Dog Harness (Fire Orange)
+
$20
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/gps-1.html b/gps-1.html new file mode 100644 index 0000000..5ad6426 --- /dev/null +++ b/gps-1.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
GPS Tracker Collar (Strawberry)
+
$80
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/gps-2.html b/gps-2.html new file mode 100644 index 0000000..cefd392 --- /dev/null +++ b/gps-2.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
GPS Tracker Collar (Blackberry)
+
$80
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/gps-3.html b/gps-3.html new file mode 100644 index 0000000..6c688e9 --- /dev/null +++ b/gps-3.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
GPS Tracker Collar (Crazyberry)
+
$80
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/gps-4.html b/gps-4.html new file mode 100644 index 0000000..84c9e9b --- /dev/null +++ b/gps-4.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
GPS Tracker Collar (Camouflage)
+
$80
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/gps-5.html b/gps-5.html new file mode 100644 index 0000000..c9cb98a --- /dev/null +++ b/gps-5.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
GPS Tracker Collar (Night Moon)
+
$80
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/gps-6.html b/gps-6.html new file mode 100644 index 0000000..c2097b3 --- /dev/null +++ b/gps-6.html @@ -0,0 +1,82 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+ +
+
+ + + + + +
+ + + + +
+
GPS Tracker Collar (Fire Orange)
+
$80
+
+ + XS + + S + + M + + L +
+
+ + Strawberry + + Blackberry + + Crazyberry +
+ + Camouflage + + Night Moon + + Fire Orange +
+
+ - + 1 + + +
+
Add To Cart
+
+
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/index.html b/index.html index 5602694..ce00b24 100644 --- a/index.html +++ b/index.html @@ -2,22 +2,99 @@ - My Awesome Store + Muddy Paws - + - + - + + +
+ + shopping cart + About Us + Products +
+
+
+ + + + + + + + + + + + + + +
+ + +
The best harness you’ve ever seen
+
With multiple sizes and colors, truly customized for your pet.
+
Buy Now
+
+ + +
The best harness you’ve ever used
+
With multiple sizes and colors, truly customized for your pet.
+
Buy Now
+
+ + +
The best pet GPS you’ve ever seen
+
With multiple sizes and colors, truly customized for your pet.
+
Buy Now
+
+ + + +
+
+
+ + + + + +
+ + +

The Muddy Paws' Soft Dog Harness is an easy-to-use everyday collar that provides ultimate comfort. Made for convenience and function, this lightweight harness features a comfortable neck opening and an adjustable quick-release chest belt with a D-ring for leash attachment. With super-soft air-mesh padding and a practical design, the Soft Dog Harness lets your four-legged friend stroll along with style and comfort on his daily walks.

+
+ + + + + + +
+

Soft inner padding for superior comfort + Features a comfortable neck opening and an adjustable quick-release belt with a D-ring for leash attachment + Made from cotton and polyester + High-quality and lightweight + Authentic Puppia rubber label

+ 		+ +
+
+
+ diff --git a/products.html b/products.html new file mode 100644 index 0000000..4cb619f --- /dev/null +++ b/products.html @@ -0,0 +1,213 @@ + + + + + Muddy Paws Products + + + + + + + + + + + + +
+ + shopping cart + About Us + Products +
+
+
+
+
Animals
+
+
+ Dog + Cat +
+
Functions
+
+
+ Harness + Accessories +
+
Sizes
+
+
+ + XS + + S + + M + + L +
+
Colors
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
$20
+
Dog Harness
+
+ + + + + + +
+
+
+
+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
$20
+
Cat Harness
+
+ + + + + + +
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
$15
+
Harness Storage
+
+ + + + + + +
+
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
$80
+
GPS Tracker Collar
+
+ + + + + + +
+
+ +
+
+
+
+ \ No newline at end of file diff --git a/resources/.DS_Store b/resources/.DS_Store new file mode 100644 index 0000000..6a38a20 Binary files /dev/null and b/resources/.DS_Store differ diff --git a/resources/images/.DS_Store b/resources/images/.DS_Store new file mode 100644 index 0000000..9a1969a Binary files /dev/null and b/resources/images/.DS_Store differ diff --git a/resources/images/bag.jpg b/resources/images/bag.jpg new file mode 100644 index 0000000..3686049 Binary files /dev/null and b/resources/images/bag.jpg differ diff --git a/resources/images/catHarness/cat1.jpg b/resources/images/catHarness/cat1.jpg new file mode 100644 index 0000000..433fd0d Binary files /dev/null and b/resources/images/catHarness/cat1.jpg differ diff --git a/resources/images/catHarness/cat2.jpg b/resources/images/catHarness/cat2.jpg new file mode 100644 index 0000000..fcd8a86 Binary files /dev/null and b/resources/images/catHarness/cat2.jpg differ diff --git a/resources/images/catHarness/cat3.jpg b/resources/images/catHarness/cat3.jpg new file mode 100644 index 0000000..69c99ac Binary files /dev/null and b/resources/images/catHarness/cat3.jpg differ diff --git a/resources/images/catHarness/cat4.jpg b/resources/images/catHarness/cat4.jpg new file mode 100644 index 0000000..89eee95 Binary files /dev/null and b/resources/images/catHarness/cat4.jpg differ diff --git a/resources/images/catHarness/cat5.jpg b/resources/images/catHarness/cat5.jpg new file mode 100644 index 0000000..63d84da Binary files /dev/null and b/resources/images/catHarness/cat5.jpg differ diff --git a/resources/images/catHarness/cat6.jpg b/resources/images/catHarness/cat6.jpg new file mode 100644 index 0000000..3e5b7e8 Binary files /dev/null and b/resources/images/catHarness/cat6.jpg differ diff --git a/resources/images/dogHarness/dog1.jpg b/resources/images/dogHarness/dog1.jpg new file mode 100644 index 0000000..3351e71 Binary files /dev/null and b/resources/images/dogHarness/dog1.jpg differ diff --git a/resources/images/dogHarness/dog2.jpg b/resources/images/dogHarness/dog2.jpg new file mode 100644 index 0000000..5f94914 Binary files /dev/null and b/resources/images/dogHarness/dog2.jpg differ diff --git a/resources/images/dogHarness/dog3.jpg b/resources/images/dogHarness/dog3.jpg new file mode 100644 index 0000000..3eb2006 Binary files /dev/null and b/resources/images/dogHarness/dog3.jpg differ diff --git a/resources/images/dogHarness/dog4.jpg b/resources/images/dogHarness/dog4.jpg new file mode 100644 index 0000000..7241beb Binary files /dev/null and b/resources/images/dogHarness/dog4.jpg differ diff --git a/resources/images/dogHarness/dog5.jpg b/resources/images/dogHarness/dog5.jpg new file mode 100644 index 0000000..64b56de Binary files /dev/null and b/resources/images/dogHarness/dog5.jpg differ diff --git a/resources/images/dogHarness/dog6.jpg b/resources/images/dogHarness/dog6.jpg new file mode 100644 index 0000000..e9de601 Binary files /dev/null and b/resources/images/dogHarness/dog6.jpg differ diff --git a/resources/images/dogHarness/frontPic.jpg b/resources/images/dogHarness/frontPic.jpg new file mode 100644 index 0000000..7386f4d Binary files /dev/null and b/resources/images/dogHarness/frontPic.jpg differ diff --git a/resources/images/dogHarness/side.jpg b/resources/images/dogHarness/side.jpg new file mode 100644 index 0000000..6659f64 Binary files /dev/null and b/resources/images/dogHarness/side.jpg differ diff --git a/resources/images/gps.jpg b/resources/images/gps.jpg new file mode 100644 index 0000000..913f745 Binary files /dev/null and b/resources/images/gps.jpg differ diff --git a/resources/images/indexDog.jpg b/resources/images/indexDog.jpg new file mode 100644 index 0000000..8516603 Binary files /dev/null and b/resources/images/indexDog.jpg differ diff --git a/resources/logos/muddy paws.png b/resources/logos/muddy paws.png new file mode 100644 index 0000000..915b62b Binary files /dev/null and b/resources/logos/muddy paws.png differ diff --git a/resources/logos/shopping cart.png b/resources/logos/shopping cart.png new file mode 100644 index 0000000..c1095b3 Binary files /dev/null and b/resources/logos/shopping cart.png differ diff --git a/scripts/cart.js b/scripts/cart.js new file mode 100644 index 0000000..210f6aa --- /dev/null +++ b/scripts/cart.js @@ -0,0 +1,44 @@ +var costs = [20, 20, 80]; + +function decQuantity(n){ + var name = "quantityNum"+n; + var cost = "cost"+n; + var currentQuantity = parseInt(document.getElementById(name).textContent, 10) || 0; + if (currentQuantity > 1){ + currentQuantity -= 1; + } + document.getElementById(name).innerHTML = currentQuantity; + document.getElementById(cost).innerHTML = "$" + (currentQuantity * costs[n]); + updateSubtotal(); +} + +function incQuantity(n){ + var name = "quantityNum"+n; + var cost = "cost"+n; + var currentQuantity = parseInt(document.getElementById(name).textContent, 10) || 0; + currentQuantity += 1; + document.getElementById(name).innerHTML = currentQuantity; + document.getElementById(cost).innerHTML = "$" + (currentQuantity * costs[n]); + updateSubtotal(); +} + +function updateSubtotal(){ + var subtotal = 0; + var costs = document.getElementsByClassName("cartItemCost"); + for (i = 0; i < costs.length; i++){ + subtotal += (parseInt(costs[i].textContent.substring(1), 10) || 0); + } + document.getElementById("subtotalNum").innerHTML = "$" + subtotal; +} + +// function deleteCart(x){ +// var parent = document.getElementById("carItemsTable"); +// var child = document.getElementById(x); +// parent.removeChild(child); +// } + +function deleteCart(x) { + var i = x.parentNode.parentNode.rowIndex; + document.getElementById("carItemsTable").deleteRow(i); + updateSubtotal(); +} \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..13a7e70 --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,44 @@ +var currentPage = 0; +var timer = null; +// showDots(); +// displayHighlightDots(); +displayPage(); + +function displayPage() { + var i; + var slides = document.getElementsByClassName("highlightBar"); + var dots = document.getElementsByClassName("highlightDot"); + // alert(dots.length); + for (i = 0; i < slides.length; i++){ + slides[i].style.display = "none"; + if(i == currentPage){ + slides[i].style.display = "block"; + } + } + for (i = 0; i < dots.length; i++) { + dots[i].style.backgroundColor = "#fff"; + } + if (dots.length != 0) { + dots[currentPage].style.backgroundColor = "#95989A"; + } + currentPage++; + if (currentPage == slides.length){ + currentPage = 0; + } + timer = setTimeout(displayPage, 10000); +} + +function showHighlight(n){ + clearTimeout(timer); + currentPage = n; + displayPage(); +} + +// function showDots(){ +// var dots = document.getElementsByClassName("highlightDot"); +// alert(dots.length); +// for (i = 0; i < dots.length; i++){ +// dots[i].style.backgroundColor = "#fff"; +// } +// dots[currentPage].style.backgroundColor = "#95989A"; +// } \ No newline at end of file diff --git a/scripts/products.js b/scripts/products.js new file mode 100644 index 0000000..9f692ad --- /dev/null +++ b/scripts/products.js @@ -0,0 +1,129 @@ +var filterTags = []; +var sizes = ["Tiny", "Small", "Medium", "Large"]; +var colors = ["Strawberry", "Blackberry", "Crazyberry", "Camouflage", "Night Moon", "Fire Orange"]; +var productDict = { +"dogHarness":["Dog", "Harness", "Tiny", "Small", "Medium", "Large", +"Strawberry", "Blackberry", "Crazyberry", "Camouflage", "Night Moon", "Fire Orange"], +"catHarness":["Cat", "Harness", "Tiny", "Small", "Medium", "Large", +"Strawberry", "Blackberry", "Crazyberry", "Camouflage", "Night Moon", "Fire Orange"], +"harnessAttach":["Dog", "Cat", "Accessories", "Tiny", "Small", "Medium", "Large", +"Strawberry", "Blackberry", "Crazyberry", "Camouflage", "Night Moon", "Fire Orange"], +"petGPS":["Dog", "Cat", "Accessories", "Tiny", "Small", "Medium", "Large", +"Strawberry", "Blackberry", "Crazyberry", "Camouflage", "Night Moon", "Fire Orange"]}; + +function showColors(n, x) { + var i; + var slides = document.getElementsByClassName(x); + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + slides[n].style.display = "block"; +} + +function checkSize(n) { + var i; + var slides = document.getElementsByClassName("sizeDot"); + var currentColor = slides[n].style.backgroundColor; + for (i = 0; i < slides.length; i++) { + slides[i].style.backgroundColor = "#fff"; + } + if (currentColor == "rgb(0, 0, 0)") { + slides[n].style.backgroundColor = "#fff"; + } else { + slides[n].style.backgroundColor = "#000"; + } +} + +function checkSizeDown(n) { + var i; + var slides = document.getElementsByClassName("sizeDot"); + for (i = 0; i < slides.length; i++) { + slides[i].style.backgroundColor = "#fff"; + } + slides[n].style.backgroundColor = "#000"; +} + +function checkSizeUp(n) { + var i; + var sizes = ["Tiny", "Small", "Medium", "Large"]; + var slides = document.getElementsByClassName("sizeDot"); + for (i = 0; i < slides.length; i++) { + slides[i].style.backgroundColor = "#fff"; + } + addTag(sizes[n]); +} + +function checkColor(n) { + var colors = ["Strawberry", "Blackberry", "Crazyberry", "Camouflage", "Night Moon", "Fire Orange"]; + addTag(colors[n]); +} + +function addTag(x) { + if (!filterTags.includes(x)){ + filterTags.push(x); + var parent = document.getElementById("filterTagContainer"); + var tag = document.createElement("SPAN"); + tag.className = "filterTag"; + var tagName = document.createTextNode(x); + tag.id = "filterTag" + x; + tag.appendChild(tagName); + parent.appendChild(tag); + document.getElementById("filterTagContainer").addEventListener("click", function(e) { + if (e.target && e.target.nodeName == "SPAN" && e.target.id == ("filterTag"+x)){ + deleteTag(e.target.id.replace("filterTag", "")); + } + }); + filterItems(); + } +} + +function deleteTag(x) { + var i; + var deleteIndex = filterTags.indexOf(x); + // console.log("delete element is at index " + deleteIndex); + if (deleteIndex == 0){ + // console.log("when delete the first one"); + filterTags = filterTags.slice(1, filterTags.length); + } else { + // console.log("get here"); + var filterTagsHead = filterTags.slice(0, deleteIndex); + var filterTagsTail = filterTags.slice(deleteIndex+1, filterTags.length); + filterTags = filterTagsHead.concat(filterTagsTail); + } + var parent = document.getElementById("filterTagContainer"); + var tags = document.getElementsByClassName("filterTag"); + for (i = 0; i < tags.length; i++){ + if (tags[i].textContent==x) { + parent.removeChild(tags[i]); + } + } + filterItems(); +} + +function filterItems() { + var i; + var j; + var products = document.getElementsByClassName("productsInd"); + for (i = 0; i < products.length; i++) { + productTags = productDict[products[i].id]; + products[i].style.display = "none"; + for (j = 0; j 1){ + currentQuantity -= 1; + } + document.getElementById("quantityNum").innerHTML = currentQuantity; +} + +function incQuantity(){ + var currentQuantity = parseInt(document.getElementById("quantityNum").textContent, 10) || 0; + currentQuantity += 1; + document.getElementById("quantityNum").innerHTML = currentQuantity; +} + +function checkSize(n) { + var i; + var slides = document.getElementsByClassName("sizeDot"); + for (i = 0; i < slides.length; i++) { + slides[i].style.backgroundColor = "#fff"; + } + slides[n].style.backgroundColor = "#000"; +} + +function checkImgDot(n){ + var i; + var slides = document.getElementsByClassName("mainproductImg"); + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + slides[n].style.display = "block"; +} + +// function checkColor(n) { +// var i; +// var slides = document.getElementsByClassName("colorDot"); +// for (i = 0; i < slides.length; i++) { +// slides[i].style.borderColor = "#95989A"; +// } +// slides[n].style.borderColor = "#ED1245"; +// } \ No newline at end of file diff --git a/scripts/todo.js b/scripts/todo.js deleted file mode 100644 index e69de29..0000000 diff --git a/styles/.DS_Store b/styles/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/styles/.DS_Store differ diff --git a/styles/cart.css b/styles/cart.css new file mode 100644 index 0000000..e053f1f --- /dev/null +++ b/styles/cart.css @@ -0,0 +1,173 @@ +body { + margin: 0; + font-family: "Lato", sans-serif; +} + +.navbar { + overflow: hidden; + background-color: #fff; + position: fixed; + top: 0; + width: 100%; + height: 100px; +} + +#logo { + height: 50px; +} + +#cart { + width: 60px; + margin-right: 50px; +} + +.navRight{ + display: block; + float: right; + /*padding: 31px;*/ + font-size: 30px; + text-align: center; +} + +.navHover{ + padding: 31px; +} + +.navCart{ + margin-top: 5px; + padding: 25px; +} + +.navbar a{ + text-decoration: none; + color: #3D3E3E; +} + +.navHover:hover{ + background-color: #95989A; +} + +.navLeft img{ + margin-left: 50px; + margin-top: 31px; +} + +.main { + margin-top: 100px; +} + +footer { + text-align: center; +} + +.bottombar nav a{ + text-decoration: none; + color: #95989A; + font-size: 25px; + margin: 100px; +} + +table{ + margin-left: 80px; +} + +table th{ + width: 300px; +} + +table td{ + text-align: center; + width: 300px; +} + +#subtotal { + text-align: right; +} + +#subtotalText{ + font-size: 30px; +} + +#subtotalNum { + color: #CE113D; + font-size: 40px; +} + +.cartItemTitle { + font-size: 40px; +} + +.cartItemSize { + color: #95989A; + font-size: 25px; +} + +.cartItemColor { + color: #95989A; + font-size: 25px; +} + +.cartItemCost { + color: #CE113D; + font-size: 40px; +} + +.cartItem img{ + height: 200px; + width: 200px; +} + +.cartItemQuant { + margin-left: 80px; + margin-bottom: 10px; + text-align: center; + border-style: solid; + border-width: 1px; + border-color: #95989A; + border-radius: 5px; + height: 40px; + width: 130px; +} + +.quanButt { + color: #95989A; + cursor:pointer; + height: 40px; + width: 40px; + text-align: center; + font-size: 30px; +/* border-style: solid; + border-width: 1px;*/ + /*border-color: #95989A;*/ +} + +.quantityNum{ + color: #95989A; + font-size: 25px; +/* height: 40px;*/ +} + +.decButton { + float:left; +} + +.incButton { + float: right; +} + +.deleteItem { + color: #1150DE; + text-decoration: underline; +} + +.checkoutButton { + margin-top: 30px; + margin-right: 70px; + margin-left: 150px; + color: #95989A; + font-size: 40px; + border-style: solid; + border-width: 1px; + border-color: #95989A; + border-radius: 5px; +} \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 663513c..7713843 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,4 +1,4 @@ - +/* body{ text-align: center; width: 40%; @@ -17,4 +17,182 @@ p { .starterImage{ width: 16em; +}*/ + +body { + margin: 0; + font-family: "Lato", sans-serif; +} + +.navbar { + overflow: hidden; + background-color: #fff; + position: fixed; + top: 0; + width: 100%; + height: 100px; +} + +#logo { + height: 50px; +} + +#cart { + width: 60px; + margin-right: 50px; +} + +.navRight{ + display: block; + float: right; + /*padding: 31px;*/ + font-size: 30px; + text-align: center; +} + +.navHover{ + padding: 31px; +} + +.navCart{ + margin-top: 5px; + padding: 25px; +} + +.navbar a{ + text-decoration: none; + color: #3D3E3E; +} + +.navHover:hover{ + background-color: #95989A; +} + +.navLeft img{ + margin-left: 50px; + margin-top: 31px; +} + +.main { + margin-top: 150px; +} + +footer { + text-align: center; +} + +.bottombar nav a{ + text-decoration: none; + color: #95989A; + font-size: 25px; + margin: 100px; +} + +#highlightTable td { + text-align: center; +} + +#highlightTable th img{ + margin-left: 120px; + margin-right: 70px; + width: 300px; + height: 300px; +} + +.detailTable { + margin-top: 80px; + margin-right: 150px; + } + +.detailTable th img{ + margin-left: 100px; + width: 400px; + height: 400px; +} + +.detailTable p{ + text-align: center; + font-size: 30px; +} + +#leftBlock p{ + margin-left: 150px; + margin-right: 150px; +} + +.detailTable td img{ + width: 400px; + height: 400px; +} + +.headTitle { + color: #95989A; + font-size: 50px; +} + +.headSubTitle { + color: #95989A; + margin-top: 20px; + font-size: 20px; +} + +.buyNowButton { + margin-top: 40px; +} + +.buyNowButton a{ + text-decoration: none; + color: #95989A; + font-size: 25px; + width: 150px; + border-style: solid; + border-width: 1px; + border-color: #95989A; + border-radius: 5px; + padding: 10px; +} + +.highlight { + text-align: center; +} + +.highlightDot { + cursor:pointer; + height: 20px; + width: 20px; + background-color: #fff; + border-radius: 50%; + border-style: solid; + border-width: 1px; + border-color: #95989A; + display: inline-block; +} + +.highlightDotDefault { + background-color: #95989A; +} + +.highlightBar { + display: none; +} + +.highlightBarDefault { + display: block; +} + +p { + font-weight: lighter; +} + +.highlightDotsList { + padding-left: 100px; + text-align: center; +} + +/*#highlightTable { + border-style: solid; + border-width: 1px; + border-color: #95989A; + margin-left: 50px; +}*/ \ No newline at end of file diff --git a/styles/products.css b/styles/products.css new file mode 100644 index 0000000..3b2a2ea --- /dev/null +++ b/styles/products.css @@ -0,0 +1,290 @@ +body { + margin: 0; + font-family: "Lato", sans-serif; +} + +.navbar { + overflow: hidden; + background-color: #fff; + position: fixed; + top: 0; + width: 100%; + height: 100px; +} + +#logo { + height: 50px; +} + +#cart { + width: 60px; + margin-right: 50px; +} + +.navRight{ + display: block; + float: right; + /*padding: 31px;*/ + font-size: 30px; + text-align: center; +} + +.navHover{ + padding: 31px; +} + +.navCart{ + margin-top: 5px; + padding: 25px; +} + +.navbar a{ + text-decoration: none; + color: #3D3E3E; +} + +.navHover:hover{ + background-color: #95989A; +} + +.navLeft img{ + margin-left: 50px; + margin-top: 31px; +} + +.main { + margin-top: 150px; +} + +.maincontent { + margin-top: 150px; + padding-left: 50px; + padding-right: 50px; +} + +.bottombar { + width: 100%; + text-align: center; +} + +.bottombar nav a{ + text-decoration: none; + color: #95989A; + font-size: 25px; + margin: 100px; +} + +.productsInd { + display: block; + width: 300px; + height: 300px; + margin-right: 5px; + margin-bottom: 5px; + border-color: #95989A; + border-style: solid; + border-width: 1px; + float: left; + /*text-align: center;*/ +} + +.slideDots { + margin-top: 10px; +} + +.slideIndivDot { + cursor:pointer; + height: 25px; + width: 25px; + border-radius: 50%; + display: inline-block; +} + +.filterColor { + color : #95989A; + font-size: 30px; + margin-left: 10px; +} + +.sizeText { + color : #95989A; + display: inline-block; + font-size: 20px; + font-weight: lighter; + margin-left: 2px; + margin-right: 10px; +} + +.sizeDot { + cursor:pointer; + height: 25px; + width: 25px; + background-color: #fff; + border-radius: 50%; + border-style: solid; + border-width: 1px; + border-color: #95989A; + display: inline-block; +} + +.colorDot { + cursor:pointer; + height: 25px; + width: 25px; +/* margin: 0 2px; + background-color: #bbb;*/ + border-radius: 50%; + border-style: solid; + border-width: 1px; + border-color: #95989A; + display: inline-block; +} + +.strawberryDots { + margin-right: 4px; + background-color: #E34C6F; +} + +.blackberryDots{ + margin-right: 4px; + background-color: #6B4CB1; +} + +.crazyberryDots { + margin-right: 4px; + background-color: #AB40CB; +} + +.camouflageDots { + margin-right: 4px; + background-color: #0E740E; +} + +.nightDots { + margin-right: 4px; + background-color: #DBDB19; +} + +.fireDots { + background-color: #E68A1E; +} + +.strawberryDot { + margin-right: 4px; + background-color: #E34C6F; +} + +.blackberryDot{ + margin-right: 4px; + background-color: #6B4CB1; +} + +.crazyberryDot { + margin-right: 4px; + background-color: #AB40CB; +} + +.camouflageDot { + margin-right: 4px; + background-color: #0E740E; +} + +.nightDot { + margin-right: 4px; + background-color: #DBDB19; +} + +.fireDot { + background-color: #E68A1E; +} + +.productColors { + display: none; +} + +.productColorsDefault { + display: block; +} + +.productColors img{ + margin-top: 10px; + margin-left: 50px; + width: 200px; + height: 200px; + align-items: center; +} + +.colorTexts { + margin-left: 20px; + margin-right: 20px; + margin-top: 10px; +} + +.productName { + font-size: 25px; + /*float: left;*/ +} + +.productPrice { + font-size: 30px; + color: #CE113D; + float: right; +} + +.filter { + width: 300px; + /*height: 500px;*/ + border-style: solid; + border-color: #95989A; + border-width: 1px; + /*height: 1000px;*/ + float: left; + padding: 10px; +} + +.filterText { + font-weight: lighter; + font-size: 30px; + color: #1F1F1F; +} + +.filterTextContent { + font-size: 25px; + font-weight: lighter; + margin-right: 15px; + color: #95989A; +} + +.filterTextContent:hover{ + cursor: pointer; +} + +.productsList { + width: 930px; + float: right; +} + +.filterList { + margin-bottom: 20px; +} + +.filterTag { + font-size: 25px; + font-weight: lighter; + margin:0 5px 10px 10px; + border-style: solid; + border-width: 1px; + border-color: #95989A; + padding: 10px 15px 10px 0px; + display: inline-block; +} + +.filterTag:before{ + padding: 10px; + font-size: 30px; + content:"\00D7"; +} + +footer { + width: 1366px; + bottom: 0; +} \ No newline at end of file diff --git a/styles/singleproduct.css b/styles/singleproduct.css new file mode 100644 index 0000000..f96f960 --- /dev/null +++ b/styles/singleproduct.css @@ -0,0 +1,266 @@ +body { + margin: 0; + font-family: "Lato", sans-serif; +} + +.navbar { + overflow: hidden; + background-color: #fff; + position: fixed; + top: 0; + width: 100%; + height: 100px; +} + +#logo { + height: 50px; +} + +#cart { + width: 60px; + margin-right: 50px; +} + +.navRight{ + display: block; + float: right; + /*padding: 31px;*/ + font-size: 30px; + text-align: center; +} + +.navHover{ + padding: 31px; +} + +.navCart{ + margin-top: 5px; + padding: 25px; +} + +.navbar a{ + text-decoration: none; + color: #3D3E3E; +} + +.navHover:hover{ + background-color: #95989A; +} + +.navLeft img{ + margin-left: 50px; + margin-top: 31px; +} + +#cartNumber { + /*display: none;*/ + font-size: 30px; + color: #CE113D; + position: absolute; + top: 15px; + right: 90px; +} + +.main { + margin-top: 150px; + padding-left: 50px; + padding-right: 50px; +} + +.mainproduct { + text-align: center; + font-size: 20px; + align-content: center; +} + +.productName{ + color: #000; + font-size: 40px; + margin-bottom: 10px; +} + +.productPrice { + color: #CE113D; + font-size: 40px; + margin-bottom: 10px; +} + +.mainproductImg { + display: none; +} + +.mainproductImgDefault { + display: block; +} + +.mainproductImg{ + /*float: left;*/ + /*margin-left: 110px;*/ + /*margin-right: 250px;*/ + /*margin-top: 35px;*/ + /*margin-bottom: 35px;*/ + /*margin-left: 433px;*/ + width: 400px; + height: 400px; + margin-left: 150px; + margin-right: 150px; +} + +td { + text-align: left; +} + +table { + margin-bottom: 20px; +} + +.sizeText { + color : #95989A; +} + +.sizeDot { + cursor:pointer; + height: 25px; + width: 25px; +/* margin: 0 2px; + background-color: #bbb;*/ + background-color: #fff; + border-radius: 50%; + border-style: solid; + border-width: 1px; + border-color: #95989A; + display: inline-block; +} + +.productColors { + margin-top: 10px; + margin-bottom: 10px; +} + +.colorText { + color : #95989A; +} + +.colorDot { + cursor:pointer; + height: 25px; + width: 25px; +/* margin: 0 2px; + background-color: #bbb;*/ + border-radius: 50%; + border-style: solid; + border-width: 1px; + border-color: #95989A; + display: inline-block; +} + +.strawberryDot { + background-color: #E34C6F; +} + +.blackberryDot{ + background-color: #6B4CB1; +} + +.crazyberryDot { + background-color: #AB40CB; +} + +.camouflageDot { + background-color: #0E740E; +} + +.nightDot { + background-color: #DBDB19; +} + +.fireDot { + background-color: #E68A1E; +} + +/*.mainproductContent { + margin-left: 250px; +}*/ + +/*.mainproductDot { + border-style: solid; + border-width: 1px; + border-color: #95989A; +}*/ + +/*.mainproduct { + width: 1266px; + height: 470px; + border-style: solid; + border-width: 1px; + border-color: #95989A; +}*/ + +.mainproductDotList { + text-align: center; +} + +.mainproductDot img{ + border-style: solid; + border-width: 1px; + border-color: #95989A; + width: 80px; + height: 80px; +} + +.quantityButton { + margin-top: 20px; + /*margin-left: 570px;*/ + text-align: center; + border-style: solid; + border-width: 1px; + border-color: #95989A; + border-radius: 5px; + height: 40px; + width: 130px; +} + +.quanButt { + color: #95989A; + cursor:pointer; + height: 40px; + width: 40px; + text-align: center; + font-size: 30px; +/* border-style: solid; + border-width: 1px;*/ + /*border-color: #95989A;*/ +} + +#quantityNum{ + color: #95989A; + font-size: 25px; +/* height: 40px;*/ +} + +#decButton { + float:left; +} + +#incButton { + float: right; +} + +.addToCart { + margin-top: 20px; + /*margin-left: 550px;*/ + color: #95989A; + font-size: 25px; + border-style: solid; + border-width: 1px; + border-color: #95989A; + border-radius: 10px; + width: 175px; + height: 46px; + text-align: center; + padding-top: 15px; +} + +.addToCart:hover{ + cursor: pointer; +} \ No newline at end of file