diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 813aad5..567e418 100644 --- a/README.md +++ b/README.md @@ -8,3 +8,5 @@ - deploy the project on netlify and share the deployment link in README.md; do not forget to make a PR as well (1 point) - Your creativity and additional functionality to the project will help you to get extra 1 points +### netlify link + - https://splendorous-bubblegum-3d6d29.netlify.app/ diff --git a/cart.css b/cart.css new file mode 100644 index 0000000..152bc29 --- /dev/null +++ b/cart.css @@ -0,0 +1,117 @@ +*{ + box-sizing: border-box; + text-decoration: none; +} +body { + background-color:#efe7f1; + font-family: Arial; + padding: 0; + margin: 0; +} +.container { + max-width: 1200px; + margin: 0 auto; +} +header { + position:sticky; + top:0; + display:flex; + justify-content:space-evenly; + align-items: center; + font-size:15px; + background-color:#D7E9B9; + padding: 20px; +} +header a{ + text-decoration: none; + color: rgb(21, 20, 20); +} + +.cart-page{ + max-width: 800px; + margin: 40px auto; +} +table{ + width: 100%; + border-collapse: collapse; +} +.cart-info{ + display: flex; + flex-wrap: wrap; +} +th{ + text-align: left; + padding: 5px; + color:#fff; + background: #674188; + font-weight: normal; +} +td{ + padding: 10px 5px; +} +td input{ + width: 40px; + height: 30px; + padding:5px; +} +td a{ + color:#674188; + font-size: 12px; +} +td img{ + width:80px; + height:80px; + margin-right: 10px; +} +.total-price{ + display:flex; + justify-content: flex-end; +} +.total-price table{ + border-top: 3px solid #674188; + width: 100%; + max-width: 350px; +} +td:last-child{ + text-align: right; +} +th:last-child{ + text-align: right; +} +#button{ + text-align: right; +} +#button button{ + border:none; + border-radius: 5%; + padding: 10px 15px; + background-color: #674188; + color:#fff; + height:auto; +} +#button button:hover{ + background-color: #492568; +} +footer { + display:flex; + justify-content: space-around; + background-color: #D7E9B9; + color: rgb(21, 20, 20); + padding: 20px; +} +.footer_media a{ + text-align: center; + color:rgb(21, 20, 20); + } +.footer_media a i{ + text-align: end; + font-size:1.2rem; + padding:2px; + } + @media screen and (max-width: 500px) { + header { + flex-direction:initial; + gap:1rem; + padding :1rem; + } +} \ No newline at end of file diff --git a/cart.html b/cart.html new file mode 100644 index 0000000..bb526f8 --- /dev/null +++ b/cart.html @@ -0,0 +1,107 @@ + + + + + + + + + Document + + +
+
+ + kids + Women + Men + + Signup +   Cart +   login +
+
+ + + + + + + + + + + + + + + + + + + + + +
productquantitysubtotal
+
+ kidsitem +
+

Jens

+ price:500 DKK
+ Remove +
+
+ 		500 dkk
+
+ kidsitem +
+

T shirt

+ price:200 DKK
+ Remove +
+
+ 		200 dkk
+
+ kidsitem +
+

Floeal T-shirt

+ price:350 DKK
+ Remove +
+
+ 		350 dkk
+
+ + + + + + + + + + + + + +
Subtotal1050 Dkk
Tax30 Dkk
Ttotal1080 Dkk
+
+ +
+ +
+ + \ No newline at end of file diff --git a/images/accessory1.jpg b/images/accessory1.jpg new file mode 100644 index 0000000..51b538d Binary files /dev/null and b/images/accessory1.jpg differ diff --git a/images/accessory2.jpg b/images/accessory2.jpg new file mode 100644 index 0000000..55e15c5 Binary files /dev/null and b/images/accessory2.jpg differ diff --git a/images/kid1.jpg b/images/kid1.jpg new file mode 100644 index 0000000..aec157f Binary files /dev/null and b/images/kid1.jpg differ diff --git a/images/kid2.jpg b/images/kid2.jpg new file mode 100644 index 0000000..df957f0 Binary files /dev/null and b/images/kid2.jpg differ diff --git a/images/kid3.jpg b/images/kid3.jpg new file mode 100644 index 0000000..95a58ba Binary files /dev/null and b/images/kid3.jpg differ diff --git a/images/kid4.jpg b/images/kid4.jpg new file mode 100644 index 0000000..85e3cb3 Binary files /dev/null and b/images/kid4.jpg differ diff --git a/images/kid5.jpg b/images/kid5.jpg new file mode 100644 index 0000000..6a54e9a Binary files /dev/null and b/images/kid5.jpg differ diff --git a/images/kid6.jpg b/images/kid6.jpg new file mode 100644 index 0000000..c809ee3 Binary files /dev/null and b/images/kid6.jpg differ diff --git a/images/kid7.jpg b/images/kid7.jpg new file mode 100644 index 0000000..90fcf27 Binary files /dev/null and b/images/kid7.jpg differ diff --git a/images/men1.jpg b/images/men1.jpg new file mode 100644 index 0000000..d1013f1 Binary files /dev/null and b/images/men1.jpg differ diff --git a/images/men2.jpg b/images/men2.jpg new file mode 100644 index 0000000..9313b2c Binary files /dev/null and b/images/men2.jpg differ diff --git a/images/men3.jpg b/images/men3.jpg new file mode 100644 index 0000000..a847719 Binary files /dev/null and b/images/men3.jpg differ diff --git a/images/women1.jpg b/images/women1.jpg new file mode 100644 index 0000000..096e580 Binary files /dev/null and b/images/women1.jpg differ diff --git a/images/women2.jpg b/images/women2.jpg new file mode 100644 index 0000000..76142a2 Binary files /dev/null and b/images/women2.jpg differ diff --git a/images/women3.jpg b/images/women3.jpg new file mode 100644 index 0000000..7e7ab0e Binary files /dev/null and b/images/women3.jpg differ diff --git a/images/women4.jpg b/images/women4.jpg new file mode 100644 index 0000000..53e4931 Binary files /dev/null and b/images/women4.jpg differ diff --git a/images/women5.jpg b/images/women5.jpg new file mode 100644 index 0000000..2a4eca4 Binary files /dev/null and b/images/women5.jpg differ diff --git a/images/women6.jpg b/images/women6.jpg new file mode 100644 index 0000000..d3f8a41 Binary files /dev/null and b/images/women6.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..af09431 --- /dev/null +++ b/index.html @@ -0,0 +1,147 @@ + + + + + + + + + + Online shopping + + +
+
+ + kids + Women + Men + Signup +   login +   Cart +
+
+
+
+

shop with smile

+
+
+
+
+

kids product

+
+
+ Product 1 +

floral T-Shirt
350 DKK

+ +
+
+ Product 1 +

Frock
200 DKK

+ +
+
+ Product 1 +

Jacket
400 DKK

+ +
+
+ Product 1 +

White T-shirt
250 DKK

+ +
+
+ Product 1 +

Onesie
300 DKK

+ +
+
+ Product 1 +

white T-shirt
200 DKK

+ +
+
+
+

Women

+
+
+ Product 1 +

Ethnic wear
400 DKK

+ +
+
+ Product 1 +

Salwar
500 Dkk

+ +
+
+ Product 1 +

T-shirt
200 DKK

+ +
+
+ Product 1 +

Sweater
400 DKK

+ +
+
+ Product 1 +

Jacket
600 DKK

+ +
+
+ Product 1 +

Jacket
600 Dkk

+ +
+
+
+

Men

+
+
+ Product 1 +

T-Shirt
300 DKK

+ +
+
+ Product 1 +

Jeans
500 DKK

+ +
+
+ Product 1 +

Formal wear
300 Dkk

+ +
+
+ Product 1 +

T-shirt
300 DKK

+ +
+
+ Product 1 +

Jeans
500 DKK

+ +
+
+ Product 1 +

Formal wear
300 Dkk

+ +
+
+
+ +
+ + \ No newline at end of file diff --git a/login.css b/login.css new file mode 100644 index 0000000..7462f78 --- /dev/null +++ b/login.css @@ -0,0 +1,73 @@ +*{ + box-sizing: border-box; +} +body { + background-color:#B08BBB; + font-family: Arial; + padding: 0; + margin: 0; +} +.container { + max-width: 1200px; + margin: 0 auto; +} +header { + position:sticky; + top:0; + display:flex; + justify-content:space-evenly; + align-items: center; + font-size:15px; + background-color:#D7E9B9; + padding: 20px; +} +header a{ + text-decoration: none; + color: rgb(21, 20, 20); +} +.login { + max-width: 400px; + margin: 0 auto; + padding: 20px; +} +h1 { + text-align: center; + margin-bottom: 30px; +} +form { + background-color: #f5f5f5; + padding: 20px; + border-radius: 10px; + margin-left: auto; + margin-right: auto; +} +label { + display: block; + margin-bottom: 10px; +} +input[type="text"], input[type="password"] { + padding: 12px 20px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 4px; +} +input[type="submit"] { + display:block; + background-color:#a573b4; + color: rgba(23, 1, 1, 0.933); + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + margin-top: 10px; +} +input[type="submit"]:hover { + background-color: #a708a9; +} +@media screen and (max-width: 500px) { + header { + flex-direction:initial; + gap:1rem; + padding :1rem; + } +} \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 0000000..6e379a9 --- /dev/null +++ b/login.html @@ -0,0 +1,35 @@ + + + + + + + + + login + + +
+
+ + kids + Women + Men + + Signup +   Cart +   login +
+
+

Login

+
+ + + + + +
+
+
+ + \ No newline at end of file diff --git a/signup.css b/signup.css new file mode 100644 index 0000000..3716c81 --- /dev/null +++ b/signup.css @@ -0,0 +1,78 @@ +*{ + box-sizing: border-box; +} +body { + font-family: Arial; + background-color:#B08BBB; + padding: 0; + margin: 0; +} +.container { + max-width: 1200px; + margin: 0 auto; +} +header { + position:sticky; + top:0; + display:flex; + justify-content:space-evenly; + align-items: center; + font-size:15px; + background-color:#D7E9B9; + padding: 20px; +} +header a{ + text-decoration: none; + color: rgb(21, 20, 20); +} +/*.login { + max-width: 400px; + margin: 0 auto; + padding: 20px; +}*/ +.signup{ + max-width: 400px; + margin: 0 auto; + padding: 20px; +} +h1 { + text-align: center; + margin-bottom: 30px; +} +form { + background-color: #f5f5f5; + padding: 20px; + border-radius: 10px; + margin-left: auto; + margin-right: auto; +} +label { + display: block; + margin-bottom: 10px; +} +input[type="text"], input[type="email"], input[type="password"] { + padding: 12px 20px; + margin-bottom: 20px; + border: 1px solid #ccc; + border-radius: 4px; +} +input[type="submit"] { + display: block; + background-color: #a573b4; + color: white; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + margin-top: 10px; +} +input[type="submit"]:hover { + background-color: #a708a9; +} +@media screen and (max-width: 500px) { + header { + flex-direction:initial; + gap:1rem; + padding :1rem; + } +} \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 0000000..623fb25 --- /dev/null +++ b/signup.html @@ -0,0 +1,41 @@ + + + + + + + + + signup + + +
+
+ + kids + Women + Men + + Signup +   Cart +   login +
+
+

Sign up

+
+ + + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9e9cd8b --- /dev/null +++ b/style.css @@ -0,0 +1,130 @@ +* { + box-sizing: border-box; + text-decoration: none; + list-style-type: none; +} +body { + font-family: Arial, sans-serif; + background-color: #B08BBB; + padding: 0; + margin: 0; +} +.container { + max-width: 1200px; + margin: 0 auto; +} +header{ + position:sticky; + top:0; + display:flex; + justify-content:space-evenly; + align-items: center; + font-size:15px; + background-color:#D7E9B9; + padding: 20px; +} +header a{ + text-decoration: none; + color: rgb(21, 20, 20); +} +.animation-image{ + background-image: url("images/kid.jpg"); + background-repeat:no-repeat; + background-position: center; + background-size: cover; + height:300px; + animation: slide 10s infinite; +} +@keyframes slide{ + 0%{ + background-image: url("images/kid7.jpg"); + } + 25%{ + background-image: url("images/kid1.jpg"); + } + 50%{ + background-image: url("images/men1.jpg"); + } + 75%{ + background-image: url("images/accessory1.jpg"); + } + 100%{ + background-image: url("images/accessory2.jpg"); + } +} +.image__text h1{ + text-align: center; + color:rgb(21, 20, 20); + +} +h2{ + text-align: center; + color:rgb(21, 20, 20); +} +.main { + display: grid; + grid-row: 1/3; + grid-template-columns: repeat(3,1fr); + grid-gap: 1rem; + flex-wrap: wrap; +} +.card { + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5); + width: 100%; + } + .card:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,5); + } +.product { + margin: 10px; + background-color: #fff; + padding: 20px; + height: auto; +} +.product img { + max-width: 100%; +} + +section h1{ + text-align: center; + color:rgb(39, 3, 73); +} +.animation{ + width:800px; + height:400px; + background:url("images/image1.jpg"); + margin:100px auto; +} +footer { + display:flex; + justify-content: space-around; + background-color: #674188; + color: #fff; + padding: 20px; +} +.footer_media a{ + text-align: center; + color:#fff; + } +.footer_media a i{ + text-align: end; + font-size:1.2rem; + padding:2px; + } + @media screen and (max-width: 500px) { + header{ + flex-direction:initial; + gap:1rem; + padding :1rem; + } + .main { + grid-template-columns: repeat(1,1fr); + grid-gap: 1rem; + flex-wrap: wrap; + } + .product { + margin:auto; + padding: 30px; + } + + } \ No newline at end of file