diff --git a/ecommerce/flora_website/index.html b/ecommerce/flora_website/index.html new file mode 100644 index 0000000..38f9624 --- /dev/null +++ b/ecommerce/flora_website/index.html @@ -0,0 +1,355 @@ + + + + + + Flora-Flower For You + + + + + + + + +
+
+ +
+ + +
+
+ + + HOME + + + + Shop + + + + Blog + + + + About Us + + + + Contact + +
+
+
+ +
+
+

Find your favorite bouquet

+

Make a bouquet and get a gift.
Delivery in Chicago, the suburbs, and nationwide!

+ Make a bouquet +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+

Our Most Popular Flowers

+
+
+ +
+ +

Red Roses

+
$2.08 per stem
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

White Calla Lilies

+
$5.27 per stem
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

Pink Tulips

+
$1.20 per stem
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

Phalaenopsis White Orchids

+
$39.49 per stem
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

Lavender Flowers

+
$2.45 per stem
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

Pink Daisies

+
$3.25 per stem
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

Orange Baby's breath

+
$1.50 per stem
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

Blue Hydrangeas

+
$3.75 per stem
+
+

hot

+
+
+
Add to cart +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+

Trending Bouquets

+
+
+ +
+ +

Fall Bouquet

+
$55.99
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

Sunflowers Bouquet

+
$30.99
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

White Peony Bouquet

+
$25.99
+
+

hot

+
+
+
Add to cart +
+
+ +
+ +

Bridal Bouquets

+
$69.49 per stem
+
+

hot

+
+
+
Add to cart +
+
+
+
+ +
+

Customer Reviews

+
+
+
+ + + + + +
+

Wonderful experience!
The flowers are beautiful and lasted.

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

The best flower delivery service.

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

The flowers are drop dead
gorgeous every time.

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

Get to Know Us

+
  • Careers
    • +
  • Newsletter
    • +
  • About Us
    • +
  • Accessibility
    • +
  • Advertising
    • +
    +
    +

    Shop

    +
  • Graduation
    • +
  • Prom
    • +
  • Memorial Day
    • +
  • Anniversary
    • +
  • Birthday
    • +
    +
    +

    Quick Links

    +
  • Our Location
    • +
  • Order Tracking
    • +
  • Delivery service
    • +
  • Privacy
    • +
  • FAQs
    • +
    +
    +

    Let Us Help You

    +
  • Your Order
    • +
  • Shipping Policies
    • +
  • Use Our Coupon
    • +
  • Cancel Your Order
    • +
  • Help
    • +
    +
    +

    Social Media

    +
    Follow Us On
    + +
    +
    + + +
    +

    © Flora All Rights Reserved

    +
    + + + + + + + + + + \ No newline at end of file diff --git a/ecommerce/flora_website/style.css b/ecommerce/flora_website/style.css new file mode 100644 index 0000000..1c0e5ba --- /dev/null +++ b/ecommerce/flora_website/style.css @@ -0,0 +1,585 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Klee One', cursive; + list-style: none; + text-decoration: none; + scroll-behavior: smooth; +} +:root{ + --bg-color:snow; + --main-color:lightcoral; + --minor-color:rgb(49, 48, 48); + --other-color:dimgray; + --text-color:black; + --head-font:5rem; + --h2-font:3rem; + --p-font:1.5rem; +} +a{ + text-decoration: none; +} +li{ + list-style: none; +} +section{ + padding: 3rem 0 2rem; +} +img{ + width: 100%; +} +.bx{ + cursor: pointer; +} +body{ + background: var(--body-color); + color: var(--text-color); +} +.container{ + max-width: 1060px; + margin: auto; + width: 100%; +} +header{ + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 100; + background: var(--bg-color); + box-shadow: 0 1px 6px 0 rgb(32 33 36 /10% ); + display: flex; + padding: 4px 10%; +} +.logo-img{ + width: 12rem; +} +.nav{ + display: flex; + align-items: center; + justify-content: center; + padding: 20px 0; +} +.logo{ + font-size: 2rem; + color: var(--text-color); + font-weight: 600; + text-transform: uppercase; + margin: 0 auto 0 0; +} +.search-box{ + max-width: 210px; + width: 100%; + display: flex; + align-items: center; + column-gap: 0.5rem; + padding: 6px 15px; + background: rgb(242, 213, 213) ; + border-radius: 4rem; +} +.search-box .bx:hover{ + color: var(--main-color); +} +.search-box .bx{ + font-size: 1rem; +} +#search-input{ + width: 100%; + border: none; + outline: none; + color: var(--text-color); + background: transparent; + font-size: 1rem; +} +.navbar{ + position: fixed; + top: 9%; + display: flex; + flex-direction: row; + gap: 3.2rem; + +} +.nav-link{ + display: flex; + flex-direction: column; + align-items: center; + color: var(--other-color); +} +.nav-link:hover, .nav-active{ + color: var(--main-color); + transition: 0.2s all linear; + transform: scale(1.3); +} +.nav-link .bx{ + font-size: 1.2rem; +} +.nav-link-title{ + font-size: 0.8rem; +} +section{ + padding: 50px 15% 70px; +} +/*-------*/ +.home{ + position: relative; + background: url(images/wall3.jpg); + width: 100%; + height: 100vh; + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: flex-start; +} +.home-text h1{ + font-family: 'Norican', cursive; + font-size: 4.2rem; + color: var(--minor-color); + margin-bottom: 20px; + margin-top: 200px; + line-height: 1; +} +.home-text p{ + color:DimGray ; + font-size: var(--p-font);margin-bottom: 60px; +} +.home-btn{ + padding: 15px 20px; + background: var(--main-color); + color: var(--bg-color); + font-size: 16px; + font-weight: 600; + border-radius: 4rem; +} +.home-btn:hover{ + background: var(--other-color); +} +.promotion{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, auto)); + gap: 1rem; +} +.promotion-img img{ + width: 100%; + display: block; + cursor: pointer; +} +.promotion-img:hover img{ + transform: scale(1.05); +} +/*----------*/ +.popular-text h2{ + text-align: center; + font-size: var(--h2-font); + font-weight: 500; + font-family: 'Norican', cursive; +} +.new-content{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, auto)); + align-items: center; + gap: 3rem; + margin-top: 5%; + text-align: center; +} +.row{ + position: relative; + cursor: pointer; +} +.row img{ + width: 100%; + height: auto; + margin-bottom: 15px; +} +.row h4{ + margin-bottom: 5px; + font-size: 1.1rem; +} +.row h4:hover{ + color: var(--main-color); + cursor: pointer; +} +.row h5{ + color: var(--other-color); + font-weight: 600; +} +.top{ + position: absolute; + top: 20px; + left: 0; + height: 30px; + width: 60px; + color: var(--bg-color); + background: var(--main-color); + text-transform: uppercase; +} +.row .flower-btn a{ + padding: 8px 10px; + background: rgb(242, 213, 213); + color: var(--minor-color); + font-size: 10px; + font-weight: 600; + border-radius: 4rem; +} +.row:hover .flower-btn a{ + color: var(--main-color); +} +/*----------*/ +.review h1{ + text-align: center; + font-size: var(--h2-font); + font-weight: 500; + font-family: 'Norican', cursive; + margin-bottom: 3%; +} +.review .box-container{ + display: flex; + flex-wrap: wrap; + gap: 1rem; +} +.review .box-container .box{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, auto)); + box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1); + padding: 2rem 4.2rem; + position: relative; + border: 0.1rem; + align-items: center; +} +.review .box-container .box .bxs-quote-right{ + position: absolute; + bottom: 3rem; + right: 1rem; + font-size: 2.5rem; + color: var(--main-color); +} +.review .box-container .box .stars i{ + color: var(--main-color); + font-size: 0.9rem; +} +.review .box-container .box p{ + color: var(--minor-color); + font-size: 1rem; + padding-top: 1rem; +} +.review .box-container .box .user{ + display: flex; + align-items: center; + padding-top: 2rem; +} +.review .box-container .box .user img{ + height: 4rem; + width: 4rem; + border-radius: 50%; + object-fit: cover; + margin-right: 1rem; +} +.review .box-container .box .user h3{ + font-size: 1.5rem; + color: var(--main-color); +} +.review .box-container .box .user span{ + font-size: 1rem; + color: var(--minor-color); +} +/*-----------*/ +.contact{ + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, auto)); + gap: 2rem; + background: var(--bg-color); +} +.contact-box h4{ + margin-bottom: 0.5rem; + font-size: 16px; + color: var(--main-color); +} +.contact-box li{ + margin-bottom: 5px; +} +.contact-box a{ + font-size: 14px; + color: var(--minor-color); +} +.contact-box h5{ + color: var(--minor-color); +} +.contact-box i{ + color: var(--main-color); +} +.end-text p{ + text-align: center; + background: #272829; + color: var(--bg-color); + font-size: 15px; + letter-spacing: 1px; +} +.scroll-top{ + position: fixed; + bottom: 2.3rem; + right: 2.3rem; +} +.scroll-top i{ + background: var(--main-color); + color: var(--bg-color); + font-size: 22px; + padding: 12px; + border-radius: 30px; +} +/*----------*/ +@media(max-width: 1200px){ + header{ + padding: 1px 2%; + } + section{ + padding: 40px 3% 50px; + } +} +@media(max-width: 920px){ + .logo-img{ + width: 8rem; + } + .nav{ + display: flex; + align-items: center; + justify-content: center; + padding: 10px 0; + } + .search-box{ + max-width: 170px; + } + #search-input{ + font-size: 0.8rem; + } + .navbar{ + top: 5%; + gap: 2.5rem; + } +} +@media(max-width: 720px){ + .search-box{ + max-width: 150px; + } + #search-input{ + font-size: 0.7rem; + } + .navbar{ + top: 5%; + gap: 2rem; + } + .nav-link .bx{ + font-size: 1rem; + } + .nav-link-title{ + font-size: 0.7rem; + } +} +@media(max-width: 640px){ + .home-text h1{ + font-size: 2.8rem; + } + .home-text p{ + font-size: 1.2rem; + margin-bottom: 40px; + } + .home-btn{ + padding: 8px 13px; + font-size: 14px; + } + .popular-text h2{ + font-size: 2rem; + } + .row img{ + width: 50%; + height: auto; + margin-bottom: 15px; + } + .row h4{ + margin-bottom: 2px; + } + .top{ + left: 150px; + } + .review h1{ + font-size: 2rem; + } + .review .box-container .box{ + padding: 1.5rem 9.5rem; + } + .review .box-container .box .bxs-quote-right{ + bottom: 2rem; + font-size: 1.5rem; + } + .review .box-container .box .stars i{ + color: var(--main-color); + font-size: 0.8rem; + } + .review .box-container .box .user img{ + height: 3rem; + width: 3rem; + } + .review .box-container .box .user h3{ + font-size: 1rem; + color: var(--main-color); + } + .review .box-container .box .user span{ + font-size: 0.8rem; + color: var(--minor-color); + } + .contact-box h4{ + font-size: 14px; + } + .contact-box a{ + font-size: 12px; + } + .end-text p{ + font-size: 12px; + } + .scroll-top{ + position: fixed; + bottom: 2rem; + right: 2rem; + } + .scroll-top i{ + font-size: 18px; + padding: 10px; + } +} +@media(max-width: 550px){ + .search-box{ + max-width: 120px; + } + #search-input{ + font-size: 0.6rem; + } + .navbar{ + top: 5%; + gap: 1.5rem; + } + .nav-link .bx{ + font-size: 0.8rem; + } + .nav-link-title{ + font-size: 0.6rem; + } + .review .box-container .box{ + padding: 1.5rem 6.8rem; + } + .review .box-container .box .bxs-quote-right{ + font-size: 1.2rem; + } + .review .box-container .box .user h3{ + font-size: 1rem; + color: var(--main-color); + } + .review .box-container .box .user span{ + font-size: 0.7rem; + color: var(--minor-color); + } + .review .box-container .box p{ + font-size: 0.8rem; + padding-top: 0.5rem; + } + .contact-box h4{ + font-size: 12px; + } + .contact-box a{ + font-size: 10px; + } + .end-text p{ + font-size: 10px; + } + .scroll-top{ + position: fixed; + bottom: 1.5rem; + right: 1.5rem; + } + .contact{ + gap: 0.8rem; + } +} +@media(max-width: 500px){ + .search-box{ + max-width: 100px; + } + #search-input{ + font-size: 0.5rem; + } + .navbar{ + gap: 1.3rem; + } + .review .box-container .box{ + padding: 1.5rem 5.3rem; + } +} +@media(max-width: 450px){ + .logo-img{ + width: 5.5rem; + } + .search-box{ + max-width: 92px; + } + .home-text p{ + font-size: 1rem; + } + .review .box-container .box{ + padding: 1.5rem 3.9rem; + } + .top{ + left: 80px; + } +} +@media(max-width: 400px){ + .logo-img{ + width: 5rem; + } + .search-box{ + max-width: 100px; + } + #search-input{ + font-size: 0.5rem; + } + .navbar{ + top: 6%; + gap: 0.9rem; + } + .nav-link .bx{ + font-size: 0.8rem; + } + .nav-link-title{ + font-size: 0.5rem; + } + .home-text p{ + font-size: 1rem; + } + .review .box-container .box{ + padding: 1.5rem 2.5rem; + } + .top{ + left: 80px; + } +} +@media(max-width: 380px){ + .home-text p{ + font-size: 1rem; + } + .home-btn{ + padding: 7px 10px; + font-size: 12px; + } + .review .box-container .box{ + padding: 1.5rem 1.8rem; + } +} +@media(max-width: 360px){ + .review .box-container .box{ + padding: 1.5rem 1.2rem; + } + .search-box{ + max-width: 90px; + } +} + + +