diff --git a/README.md b/README.md index 813aad5..93a0eba 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +link to the website on Netllify https://lucky-bombolone-3e6315.netlify.app/ + # isa7-css-ecommerce-project ## CSS Assignment - 10 points - Instructions (you can design an ecommerce website the you like but make sure it has the following) diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..4a05719 --- /dev/null +++ b/contact.html @@ -0,0 +1,28 @@ + + + + + + + Document + + + +
+

Sign Up

+ +
+
+
+ +
+
+ +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/iframe.html b/iframe.html new file mode 100644 index 0000000..329fda0 --- /dev/null +++ b/iframe.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6d2930d --- /dev/null +++ b/index.html @@ -0,0 +1,124 @@ + + + + + + + + ❤️Minimalist Jewellery + + + + + + +
+ Up To 30% off Specisall V-Day Offer!! +
+ +
+ + + +
+
+ +
+ + + + + + + +
+ +
+ +
+
+ +
+
+ +
+ +

Valentine's day offer

+

Only High quality Jewellery

+
+
+
+
+

Products

+ +
+diamond ringDiamond Ring + + +diamond earingsDiamond Earings + +gold chain18 Karat gold chain + +jewlery set + Minimalist gold set + + +
+
+ +
+ +
+
+
+ + + diff --git a/pictures/amy-shamblen-qdPnQuGeuwU-unsplash.jpg b/pictures/amy-shamblen-qdPnQuGeuwU-unsplash.jpg new file mode 100644 index 0000000..d6faa8d Binary files /dev/null and b/pictures/amy-shamblen-qdPnQuGeuwU-unsplash.jpg differ diff --git a/pictures/chain.jpg b/pictures/chain.jpg new file mode 100644 index 0000000..7fdd3b3 Binary files /dev/null and b/pictures/chain.jpg differ diff --git a/pictures/earings.jpg b/pictures/earings.jpg new file mode 100644 index 0000000..0e59320 Binary files /dev/null and b/pictures/earings.jpg differ diff --git a/pictures/joanna-kosinska-P9oOLKNhIYU-unsplash.jpg b/pictures/joanna-kosinska-P9oOLKNhIYU-unsplash.jpg new file mode 100644 index 0000000..a9aa788 Binary files /dev/null and b/pictures/joanna-kosinska-P9oOLKNhIYU-unsplash.jpg differ diff --git a/pictures/model.jpg b/pictures/model.jpg new file mode 100644 index 0000000..aed3bfa Binary files /dev/null and b/pictures/model.jpg differ diff --git a/pictures/ring.jpg b/pictures/ring.jpg new file mode 100644 index 0000000..3b4c734 Binary files /dev/null and b/pictures/ring.jpg differ diff --git a/pictures/ring2.jpg b/pictures/ring2.jpg new file mode 100644 index 0000000..be3bd8b Binary files /dev/null and b/pictures/ring2.jpg differ diff --git a/pictures/set.jpg b/pictures/set.jpg new file mode 100644 index 0000000..cf00e98 Binary files /dev/null and b/pictures/set.jpg differ diff --git a/products/cart.html b/products/cart.html new file mode 100644 index 0000000..4546efd --- /dev/null +++ b/products/cart.html @@ -0,0 +1,52 @@ + + + + + + + 🛒Shopping Cart + + + + + + + +
+

shopping cart

+ + + + + + + + + + + + + + + + + + + + + +
product nameamountprice
Diamond ring1$1349
Gift package1$5
Total$1354
+ + +
+ + \ No newline at end of file diff --git a/products/chain.html b/products/chain.html new file mode 100644 index 0000000..31a36de --- /dev/null +++ b/products/chain.html @@ -0,0 +1,46 @@ + + + + + + + Diamond ring + + + + + + + +
+
+
+ 18 karat gold chain +
+
+

18 karat gold chain

 +

$2549
Now $2349

 + + + +
+
+
+

How to take care of your Jewellery

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate aperiam, tempore nulla facere, consequuntur quia quas qui modi aliquid beatae magnam fuga cupiditate similique. Expedita, cumque. Corporis

+ +
+ +
+ + + \ No newline at end of file diff --git a/products/earings.html b/products/earings.html new file mode 100644 index 0000000..74d509d --- /dev/null +++ b/products/earings.html @@ -0,0 +1,46 @@ + + + + + + + Diamond ring + + + + + + + +
+
+
+ Diamon earings +
+
+

Blue Diamond earings

 +

$2049
Now $1849

 + + + +
+
+
+

How to take care of your Jewellery

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate aperiam, tempore nulla facere, consequuntur quia quas qui modi aliquid beatae magnam fuga cupiditate similique. Expedita, cumque. Corporis

+ +
+ +
+ + + \ No newline at end of file diff --git a/products/jwelerySet.html b/products/jwelerySet.html new file mode 100644 index 0000000..ccc77d6 --- /dev/null +++ b/products/jwelerySet.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + +
+
+
+ minimalist jewellery set +
+
+

minimalist jewellery set

 +

$2049
Now $1849

 + + + +
+
+
+

How to take care of your Jewellery

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate aperiam, tempore nulla facere, consequuntur quia quas qui modi aliquid beatae magnam fuga cupiditate similique. Expedita, cumque. Corporis

+ +
+ +
+ + + \ No newline at end of file diff --git a/products/product-style.css b/products/product-style.css new file mode 100644 index 0000000..47252c2 --- /dev/null +++ b/products/product-style.css @@ -0,0 +1,173 @@ + + *{ + box-sizing: border-box; + margin: 0; + padding: 0; + list-style-type: none; + text-decoration: none; + scroll-behavior: smooth; + border: none; + font-family: 'Merienda', cursive; + + } + :root{ + --primary-first-color:#D4668E; + --primary-second-color:#FFCABE; + --primary-body-color:#FEF4EA; + --primary-btn-color:#FFB8D0; + --primary-aside-color:#FAECBC; + --primary-footer-color:#CECCFD; + --btn-padding: 0.5rem; + --btn-width: 7rem; + --btn-border-radius:7px; + --heading-fnt-w:1.5rem; + --subheading-fnt-w:1rem; + --contents-fnt-w:1.5rem; + --bx-shadow:-8px 10px 5px -2px rgba(163,152,152,0.55); + } + a{ + color: black; + } + a:visited{ + color: black + } + a:active{ + color: black; + } + button{ + padding: var(--btn-padding); + width: var(--btn-width); + background-color: var(--primary-btn-color); + border-radius: var(--btn-border-radius); + -webkit-border-radius: var(--btn-border-radius); + -moz-border-radius: var(--btn-border-radius); + -ms-border-radius: var(--btn-border-radius); + -o-border-radius: var(--btn-border-radius); + cursor: pointer; + box-shadow: var(--bx-shadow); + transition: all 1s ease-in-out; + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; + } + button:hover{ + background-color: var(--primary-first-color); + } + +.p__img{ + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + box-shadow:var(--bx-shadow) ; + width:70%; +} + +h1{ + font-size: var(--heading-fnt-w); +} +del{ + text-decoration: line-through; +} +.p__amnt{ + width: 3rem; +} +.flex__container{ + display: flex; + align-items: center; + margin: 8%; +} +.p__dsc{ + display: flex; + flex-direction: column; + justify-content: space-around; + margin: 7%; +} + +form{ + width: 30rem; + height: 30rem; + margin: auto; +} +.form{ + margin: 10%; + display: flex; + flex-direction: column; +} +.form__header{ + width: 30%; + border-bottom: 2px solid; +} +input{ + width: 20rem; + padding: 7px; +} +input{ + border-radius: var(--btn-border-radius); + -webkit-border-radius: var(--btn-border-radius); + -moz-border-radius: var(--btn-border-radius); + -ms-border-radius: var(--btn-border-radius); + -o-border-radius: var(--btn-border-radius); +} +.user__acnt{ + margin: 15%; + display: flex; + flex-direction: column; +} +.user__acnt-hd{ + + border-bottom: 2px solid; + margin-bottom: 3%; +} +.user__acnt-lnk{ + border-bottom: 2px solid; +} +.link1{ + width: 280px; +} +.link2{ + width: 270px; +} +.link3{ + width: 260px; +} +.link4{ + width: 250px; +} +.tr__border{ + border-top: 2px dotted; +} + +.cart__hd{ + border-bottom: 2px solid; + width: 50%; + margin-bottom: 5%; +} +.cart__container{ + display: flex; + flex-direction: column; + margin: 15%; +} +.checkout__btn{ + margin-top:5% ; +} +.contact__form{ + margin: 15%; + display: flex; + flex-direction: column; +} +.contact__form-hd{ + + border-bottom: 2px solid; + margin-bottom: 3%; +} +#textarea{ + box-shadow: var(--bx-shadow); + border-radius: var(--btn-border-radius); + -webkit-border-radius: var(--btn-border-radius); + -moz-border-radius: var(--btn-border-radius); + -ms-border-radius: var(--btn-border-radius); + -o-border-radius: var(--btn-border-radius); +} \ No newline at end of file diff --git a/products/ring.html b/products/ring.html new file mode 100644 index 0000000..2192590 --- /dev/null +++ b/products/ring.html @@ -0,0 +1,46 @@ + + + + + + + Diamond ring + + + + + + + +
+
+
+ diamond ring +
+
+

Diamond ring

 +

$1449
Now $1349

 + + + +
+
+
+

How to take care of your Jewellery

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate aperiam, tempore nulla facere, consequuntur quia quas qui modi aliquid beatae magnam fuga cupiditate similique. Expedita, cumque. Corporis

+ +
+ +
+ + + \ No newline at end of file diff --git a/products/signIn.html b/products/signIn.html new file mode 100644 index 0000000..8e1c917 --- /dev/null +++ b/products/signIn.html @@ -0,0 +1,37 @@ + + + + + + + Sign in + + + + + + + +
+

Sign In

+ +
+
+
+
+ +
+ +
+
+ + \ No newline at end of file diff --git a/products/signUp.html b/products/signUp.html new file mode 100644 index 0000000..73699dd --- /dev/null +++ b/products/signUp.html @@ -0,0 +1,44 @@ + + + + + + + Sign in + + + + + + + +
+

Sign Up

+ +
+
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/products/user-acount.html b/products/user-acount.html new file mode 100644 index 0000000..6232469 --- /dev/null +++ b/products/user-acount.html @@ -0,0 +1,33 @@ + + + + + + + user account + + + + + + + +
+

Welcome to your account

+ My purchases + My returns + My profile + Setting +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3635228 --- /dev/null +++ b/style.css @@ -0,0 +1,280 @@ +/*------- Global style -------*/ +*{ + box-sizing: border-box; + margin: 0; + padding: 0; + list-style-type: none; + text-decoration: none; + scroll-behavior: smooth; + border: none; + font-family: 'Merienda', cursive; + +} +/*------- variables -------*/ +:root{ + --primary-first-color:#D4668E; + --primary-second-color:#FFCABE; + --primary-body-color:#FEF4EA; + --primary-btn-color:#FFB8D0; + --primary-aside-color:#FAECBC; + --primary-footer-color:#CECCFD; + --btn-padding: 0.25rem; + --btn-width: 5rem; + --btn-border-radius:7px; + --heading-fnt-w:2.5rem; + --subheading-fnt-w:50px; + --contents-fnt-w:2rem; + --info-fnt-w:20px; + --bx-shadow:-8px 10px 5px -2px rgba(163,152,152,0.55); +} +a{ + color: black; +} +a:visited{ + color: black +} +a:active{ + color: black; +} +button{ + padding: var(--btn-padding); + width: var(--btn-width); + background-color: var(--primary-btn-color); + border-radius: var(--btn-border-radius); + -webkit-border-radius: var(--btn-border-radius); + -moz-border-radius: var(--btn-border-radius); + -ms-border-radius: var(--btn-border-radius); + -o-border-radius: var(--btn-border-radius); + cursor: pointer; + box-shadow: var(--bx-shadow); + transition: all 1s ease-in-out; + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; +} +button:hover{ + background-color: var(--primary-first-color); +} + +body{ + background-color: var(--primary-body-color); +} +/*------------ head section-------*/ +marquee{ + background-color: black; + color: white; + padding: 5px; +} +.logo{ + color: darkorchid; + font-size: large; + font-weight: bold; +} +.header__links{ + display:flex; + justify-content: space-between; + padding: 20px; +} +.header__cart-user{ + margin-left: 80%; + box-shadow: var(--bx-shadow); + transition: all 1s ease-in-out; + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; +} +.header__cart-user:hover{ + height: 40px; +} + +.header__search{ + padding: 5px; + border-radius: var(--btn-border-radius); + -webkit-border-radius: var(--btn-border-radius); + -moz-border-radius: var(--btn-border-radius); + -ms-border-radius: var(--btn-border-radius); + -o-border-radius: var(--btn-border-radius); + box-shadow: var(--bx-shadow); +} + + + +/*--------- Mani section----------*/ +.main__msg{ + margin-top: 8%; + color: var(--primary-aside-color); + text-align: center; + z-index: 1000; +} +.h1{ + font-size: var(--heading-fnt-w); +} +.p{ + font-size: var(--contents-fnt-w); +} + +.main__images{ +display:flex; +width: 100%; +height: 30rem; +box-shadow: var(--bx-shadow); +} + +.img1{ + width: 33%; + height: 100%; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-image: url(/pictures/ring.jpg); +} +.img2{ + width: 33%; + height: 100%; + background-repeat: no-repeat; + background-position: center; +background-size: cover; + background-image: url(/pictures/joanna-kosinska-P9oOLKNhIYU-unsplash.jpg); +} +.img3{ + width: 35%; + height: 100%; + background-repeat: no-repeat; + background-position: center; +background-size: cover; + background-image: url(/pictures/model.jpg); +} + +/*------- product section-------*/ +.main__products-header{ + margin-top: 1%; + text-align: center; + margin-bottom: 1%; + border-bottom: 1px solid gray; +} +.products{ + display: flex; + justify-content: space-evenly; + width: 100%; + height: 20rem; +} +.product{ +margin-top: 4%; +display: block; + border-radius:7px ; + -webkit-border-radius:7px ; + -moz-border-radius:7px ; + -ms-border-radius:7px ; + -o-border-radius:7px ; + box-shadow: var(--bx-shadow); transition: all 1s ease-in-out; + -webkit-transition: all 1s ease-in-out; + -moz-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; +} + +.product:hover{ + transform: translate(-10px, -12px); + -webkit-transform: translate(-10px, -12px); + -moz-transform: translate(-10px, -12px); + -ms-transform: translate(-10px, -12px); + -o-transform: translate(-10px, -12px); +} + +.main__iframe{ + display: flex; + justify-content: center; + align-items: center; +} +iframe{ + width: 80vh; + height: 80vh; + text-align: center; + background-color: var(--primary-second-color); + box-shadow: var(--bx-shadow); +} +.arrow{ + display: flex; + justify-content: flex-end; + margin-right: 5%; +} + +/*--------footer-------*/ +footer{ + margin-top: 1%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 20vh; + grid-gap: 0px 0px; + background-color:var(--primary-second-color); + font-family:var(--contents-fnt-w); + width: 100%; + height: auto; + text-align: center; + padding-left: 3%; + padding-right: 3%; + +} +.footer-menue{ + display: flex; +} +.footer-list{ + display: flex; + flex-direction: row; +justify-content: center; +align-items: center; +text-align: center; +vertical-align: middle; +} +.footer-list-item{ + border-right: 1px solid; + padding-left: 8%; +} +.footer-list-item:last-child{ + border: none; +} +.footer-address-info{ + display:flex; + flex-direction: column; + justify-content: center; +} +.footer-about{ + display:flex; + flex-direction: column; + justify-content: center; +} +/*---------responsivness -----------*/ +@media only screen and (max-width: 750px) { + .img1,.img3{ + display: none; + } +.img2{ + width: 100%; +} +.main__products{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + flex-wrap: wrap; +} +.main__iframe{ + width: fit-content; + margin: 0; + padding: 0; +} +footer{ + width: fit-content; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin:0; + padding-top: 2%; +} +.footer-menue{ + padding: 2%; +} +} \ No newline at end of file