diff --git a/Cart.html b/Cart.html new file mode 100644 index 0000000..971e8a7 --- /dev/null +++ b/Cart.html @@ -0,0 +1,111 @@ + + + + + + + + + + + + + Cart + + + +
+ + + +
+ + + + +
+ +
+
+
+
+
+
+
+

Shopping Cart [1 items]

+
+ + + +
+ +
+ + + The Fairytale +
+
+

The Fairytale

+
€9.50
+

Free Shipping within Germany

+ +
+ + 1 + +
+
+
+
+
+

Payment Summanry

+

Subtotal

+

€9.50

+

Shipping Cost

+

€0.00

+

Toatl Cost

+

€9.50

+ +
+
+

Methods of Payment

+ +
+ + +
+
+
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/First-ecommerce-Project b/First-ecommerce-Project new file mode 160000 index 0000000..5f29c0f --- /dev/null +++ b/First-ecommerce-Project @@ -0,0 +1 @@ +Subproject commit 5f29c0f58b0f380a19f3178b49cbb95ec3f92215 diff --git a/images/IMG_20190809_205413672_LL.jpg b/images/IMG_20190809_205413672_LL.jpg new file mode 100644 index 0000000..a48d74f Binary files /dev/null and b/images/IMG_20190809_205413672_LL.jpg differ diff --git a/images/Lion king.jpg b/images/Lion king.jpg new file mode 100644 index 0000000..ca72bdd Binary files /dev/null and b/images/Lion king.jpg differ diff --git a/images/books.webp b/images/books.webp new file mode 100644 index 0000000..0f23f7c Binary files /dev/null and b/images/books.webp differ diff --git a/images/bookstore.webp b/images/bookstore.webp new file mode 100644 index 0000000..1de4455 Binary files /dev/null and b/images/bookstore.webp differ diff --git a/images/fairytale.jpg b/images/fairytale.jpg new file mode 100644 index 0000000..5099da5 Binary files /dev/null and b/images/fairytale.jpg differ diff --git a/images/five minutes story.jpg b/images/five minutes story.jpg new file mode 100644 index 0000000..ef6f373 Binary files /dev/null and b/images/five minutes story.jpg differ diff --git a/images/space boy.jpg b/images/space boy.jpg new file mode 100644 index 0000000..25dd996 Binary files /dev/null and b/images/space boy.jpg differ diff --git a/images/the koala who could.jpg b/images/the koala who could.jpg new file mode 100644 index 0000000..1c994a6 Binary files /dev/null and b/images/the koala who could.jpg differ diff --git a/images/the whale who wanted more.jpg b/images/the whale who wanted more.jpg new file mode 100644 index 0000000..6468c39 Binary files /dev/null and b/images/the whale who wanted more.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b10f76e --- /dev/null +++ b/index.html @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + Bookstore + + +
+ + + +
+ + + + +
+
+ +
+
+
+ +

Day I fell into a Fairytale
+ Book Summary

+
€9.50
+
+
+
+ +

5 Minutes Stories Collection
+ Book Summary

+
€8.99
+
+
+
+ +

The Lion King
+ Book Summary

+
€12.99
+
+
+
+ +

The Space Boy
+ Book Summary

+
€8.50
+
+
+
+ +

Day I fell into a Fairytale
+ Book Summary

+
€9.50
+
+
+
+ +

The Koala Who Could
+ Book Summary

+
€10.99
+
+
+
+ +

The Whale That Wanted More
+ Book Summary

+
€7.99
+
+
+
+
+ + + + +
+ + \ No newline at end of file diff --git a/productdetails.html b/productdetails.html new file mode 100644 index 0000000..aec629c --- /dev/null +++ b/productdetails.html @@ -0,0 +1,169 @@ + + + + + + + Productdetails + + + + + + + + +
+ + + +
+ + + + +
+
+ + +
+
+
+ product1 +
+
+

Day I fell into a Fairytale

+

Lana loves stories. Especially the ones she and her brother, Harrison, share in their make-believe games. But when Harrison decides he's too grown-up to play with Lana she finds herself feeling lonely. Until something magical happens . . . + + Hidden in the strange new supermarket in town, Lana discovers a portal to a fairytale world! But these aren't the happy-ever-after fairytales that Lana knows, they are darker and more dangerous, and the characters need Lana's help to defeat an evil witch. But she can't do it alone. Can she convince Harrison to believe in stories again and journey to the world with her . . . before it's too late?

+ + +
+
+ Five Minutes Story +
+
+

5 Minutes Stories Collection

+

Nick and Sally have questions about everything from trees to outer space. Luckily, the Cat in the Hat has the answers. Based on the TV series The Cat in the Hat Knows a Lot About That, this hardcover collection of rhyming tales is sure to fascinate and entertain boys and girls ages 3 to 7. Each story can be read in five minutes or less, so they're perfect for bedtime--or anytime!

+ + +
+
+ +
+
+ Lion King +
+
+

The Lion King

+

A bestselling story about confidence, self-esteem, and a shy little mouse who sets out on a journey to find his roar. + + In a dry dusty place where the sand sparkled gold, stood a mighty flat rock, all craggy and old. And under that rock in a tinyful house, lived the littlest, quietest, meekest brown mouse. + + Fed up of being ignored by the other animals, Mouse wishes he could roar like Lion. But, as he discovers, even the biggest, bossiest people are scared sometimes ... and even the smallest creatures can have the heart of a lion!

+ + +
+
+
+ +
+
+ Space Boy +
+
+

The Space Boy

+

America. The 1960s. + + Stuck on a remote farm with her awful aunt, twelve-year-old orphan Ruth spends every night gazing at the stars, dreaming of adventure. + + One night she spots a flying saucer blazing across the sky… before crash-landing in a field. When the spaceship opens and reveals a mysterious alien, all Ruth’s dreams come true. + + But does this visitor from another planet have a giant secret? + + Spaceboy is a hilarious and action-packed tale for readers in any solar system.

+ + +
+
+
+ +
+
+ Fairytales +
+
+

The Fairytale

+

Enter a world of wonder with the bestselling novel from actor, comedian and author, Ben Miller. + + Lana loves stories. Especially the ones she and her brother, Harrison, share in their make-believe games. But when Harrison decides he's too grown-up to play with Lana she finds herself feeling lonely. Until something magical happens . . . + + Hidden in the strange new supermarket in town, Lana discovers a portal to a fairytale world! But these aren't the happy-ever-after fairytales that Lana knows, they are darker and more dangerous, and the characters need Lana's help to defeat an evil witch. But she can't do it alone. Can she convince Harrison to believe in stories again and journey to the world with her . . . before it's too late?

+ + +
+
+
+ +
+
+ The Koala Who Could +
+
+

The Koala Who Could

+

A funny rhyming story about dealing with change and overcoming worries, from the bestselling creators of The Lion Inside. + + In a wonderful place, at the breaking of dawn, where the breezes were soft and the sunshine was warm, a place where the creatures ran wild and played free ... A Koala called Kevin clung to a tree. + + Meet Kevin. A koala who likes to keep things the same. Exactly the same. But sometimes change comes along whether we like it or not... And, as Kevin discovers, if you step outside your comfort zone and try new things, you might just surprise yourself! + + WINNER of the Sainsbury's Book Award and the Evening Standard Oscar's Book Prize!

+ + +
+
+
+
+
+ The Whale who wanted more +
+
+

The Whale That Wanted More

+

A stunning undersea tale of friendship, community and discovery from the bestselling creators of The Lion Inside. + + Under glittering waves of a vast ocean blue, a beautiful world is hidden from view. + And there, in the cool and the quiet of the deep, a great, gentle giant was stirring from sleep . . . + + Humphrey the whale is on a quest: to find the one perfect object that will make him feel complete. He roams far and wide, gathering endless undersea treasure as he goes. Yet, no matter how many goodies he accumulates, Humphrey still doesn't feel content. Could it be friendship, not possessions, that will really make Humphrey's heart sing? + + A sparkling rhyming tale that encourages sharing and kindness, this heartwarming story of friendship is perfect for reading aloud.

+ + +
+ + + +
+
+
+ + +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7a19319 --- /dev/null +++ b/styles.css @@ -0,0 +1,264 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + list-style-type: none; + text-decoration: none; + outline: none; +} +:root { + --bg-color: #ffffff; + --text-color: #121212; + --main-font: 2.2rem; + --p-font: 1.1rem; + --transition: all 2s yellowgreen; + --padding: 0.5rem; +} +body{ + background-color: var(--bg-color); + color: var(--text-color); +} +header{ + width: 100%; + background: ghostwhite; + top: 0; + right: 0; + z-index: 1000; + position: fixed; + box-shadow: 0px 2px 18px 0 rgb(129 162 182 / 20%); + display: flex; + align-items: center; + justify-content: space-between; + padding: 25px 8%; +} +.logo{ + color: var(--text-color); + font-size: var(--main-font); + font-weight: 600; + line-height: 0.8; +} +#menu-icon{ + font-size: 38px; + color: var(--text-color); + z-index: 10001; + display: none; +} +.navbar{ + display: flex; +} +.navbar a{ + font-size: var(--p-font); + color: var(--text-color); + font-weight: 600; + padding: 10px 15px; + margin: 0 10px; + transition: all .4s ease; +} +.icons{ + display: inline-block; +} +.icons i{ + color: var(--text-color); + font-size: 24px; + margin-left: 15px; +} +.icons i:hover{ + opacity: 0.7; +} +section{ + padding: 50px 30px; + justify-content: center; +} +.container{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 20px)); + align-items: center; + gap: 2rem; + text-align: center; + cursor: pointer; + padding-top: 2rem; + justify-content: center; +} +.box{ + padding: 10px; + background: yellowgreen; + border-radius: 10px; + position: relative; + transition: all .35s ease; +} +.box img{ + width: 90%; + height: 50vh; +} +.box h4{ + font-size: 15px; + letter-spacing: 1px; + margin-bottom: 8px; +} +.box h5{ + font-size: 15px; + letter-spacing: 1px; + margin-bottom: 20px; +} +.box .cart i{ + bottom: 0; + width: 35px; + height: 35px; + background: var(--text-color); + color: var(--bg-color); + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 18px; +} +.box:hover{ + transform: translateY(-5px); +} +@media (max-width: 800px){ + #menu-icon{ + display:block; + } + header{ + padding: 15px 8%; + } + .navbar{ + top: -500%; + left: 0; + position: absolute; + flex-direction: column; + background: var(--bg-color); + transition: all .40s ease; + } + .navbar a{ + display: block; + padding: 1rem; + margin: 0.5rem; + } + .navbar.active{ + top: 100%; + } +} +.flex-center{ + float:left; + padding: 1rem; +} +.product-details{ + margin-top: 4rem; + +} +/*.details-box img{ + width: 20%; + height: 50vh; +} +.products h5{ + justify-self: auto; +} +*/ + + +.product__details-left img{ + height: 18rem; + width: 12rem; +} +.product__details-right{ + flex: 1; + display: flex; + flex-direction: column; + gap: 0.5rem; + width:65%; + margin-top: 3rem; +} +.card{ + padding-left: 1rem; + gap: 1rem; +} +.cart .card{ + margin-bottom: 1rem; +} +.cart__items{ + float: right; +} +.cart__items-action{ + margin-top: 1rem; + display: flex; + justify-content: space-between; + align-items: center; +} +.cart__item input{ + flex: 0.1; +} +.cart__item-img{ + flex: 0.2; + height: 18rem; + width: 12rem; +} +.cart__item-description{ + flex: 0.4; +} +.cart__item-shipping{ + margin-top: 0.5rem; + color: yellowgreen; +} +.cart__item-action{ + flex: 0.2; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; +} +.cart__items, .cart__payment{ + width: 90%; +} +.cart__payment { + flex: 1; +} + +.cart__payment{ + display: flex; + justify-content: space-between; + align-items: center; + margin: 1rem; +} +.cart__payyment-btn{ + width: 100%; +} +.cart__payment-methods > h2{ + text-align: center; + margin-bottom: 1rem; +} +.cart__payment-methods > div{ + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} +.footer{ + padding: 1rem; + background-color: yellowgreen; + min-height: 10h; + color: white; + font-size: 1.1rem; + display: flex; + justify-content: space-around; + align-content: center; +} +.btn{ + border: none; + padding: 0.1rem; + cursor: pointer; + text-transform: uppercase; + transition: var(--transition); +} +.btn:hover{ + background-color: yellow; +} +.btn-subscribe{ + margin-left: -5px; +} +.footer__input{ + border: none; + width:18rem; + height: 1.2rem; +} \ No newline at end of file