diff --git a/images/about.jpg b/images/about.jpg new file mode 100644 index 0000000..45fc4a2 Binary files /dev/null and b/images/about.jpg differ diff --git a/images/about1.jpg b/images/about1.jpg new file mode 100644 index 0000000..6d63866 Binary files /dev/null and b/images/about1.jpg differ diff --git a/images/arabica-green-coffee-beans-cart3.jpeg b/images/arabica-green-coffee-beans-cart3.jpeg new file mode 100644 index 0000000..b9ce40f Binary files /dev/null and b/images/arabica-green-coffee-beans-cart3.jpeg differ diff --git a/images/beans.jpg b/images/beans.jpg new file mode 100644 index 0000000..49ad11d Binary files /dev/null and b/images/beans.jpg differ diff --git a/images/cart-item1.jpg b/images/cart-item1.jpg new file mode 100644 index 0000000..2c52659 Binary files /dev/null and b/images/cart-item1.jpg differ diff --git a/images/cart-item3.jpg b/images/cart-item3.jpg new file mode 100644 index 0000000..57ee314 Binary files /dev/null and b/images/cart-item3.jpg differ diff --git a/images/cart-item4.jpg b/images/cart-item4.jpg new file mode 100644 index 0000000..a2fd0f3 Binary files /dev/null and b/images/cart-item4.jpg differ diff --git a/images/cart-item5.jpg b/images/cart-item5.jpg new file mode 100644 index 0000000..8be1cc4 Binary files /dev/null and b/images/cart-item5.jpg differ diff --git a/images/cart-item6.jpg b/images/cart-item6.jpg new file mode 100644 index 0000000..6017ca4 Binary files /dev/null and b/images/cart-item6.jpg differ diff --git a/images/home-page.jpg b/images/home-page.jpg new file mode 100644 index 0000000..adfaadf Binary files /dev/null and b/images/home-page.jpg differ diff --git a/images/home1.jpg b/images/home1.jpg new file mode 100644 index 0000000..ae4994d Binary files /dev/null and b/images/home1.jpg differ diff --git a/images/home2.jpg b/images/home2.jpg new file mode 100644 index 0000000..a6880e6 Binary files /dev/null and b/images/home2.jpg differ diff --git a/images/home3.jpg b/images/home3.jpg new file mode 100644 index 0000000..8743f86 Binary files /dev/null and b/images/home3.jpg differ diff --git a/images/logo.jpg b/images/logo.jpg new file mode 100644 index 0000000..2d5795f Binary files /dev/null and b/images/logo.jpg differ diff --git a/images/logo1.jpg b/images/logo1.jpg new file mode 100644 index 0000000..da1a1d7 Binary files /dev/null and b/images/logo1.jpg differ diff --git a/images/logo2.jpg b/images/logo2.jpg new file mode 100644 index 0000000..0a62095 Binary files /dev/null and b/images/logo2.jpg differ diff --git a/images/logo3.jpg b/images/logo3.jpg new file mode 100644 index 0000000..dc8961e Binary files /dev/null and b/images/logo3.jpg differ diff --git a/images/menu-1.jpg b/images/menu-1.jpg new file mode 100644 index 0000000..3242c2a Binary files /dev/null and b/images/menu-1.jpg differ diff --git a/images/menu-10.jpg b/images/menu-10.jpg new file mode 100644 index 0000000..eb6bc3b Binary files /dev/null and b/images/menu-10.jpg differ diff --git a/images/menu-2.jpg b/images/menu-2.jpg new file mode 100644 index 0000000..d061792 Binary files /dev/null and b/images/menu-2.jpg differ diff --git a/images/menu-3.jpg b/images/menu-3.jpg new file mode 100644 index 0000000..8d86a29 Binary files /dev/null and b/images/menu-3.jpg differ diff --git a/images/menu-4.jpg b/images/menu-4.jpg new file mode 100644 index 0000000..02fea60 Binary files /dev/null and b/images/menu-4.jpg differ diff --git a/images/menu-5.jpg b/images/menu-5.jpg new file mode 100644 index 0000000..ca8216b Binary files /dev/null and b/images/menu-5.jpg differ diff --git a/images/menu-6.jpg b/images/menu-6.jpg new file mode 100644 index 0000000..9ac88fd Binary files /dev/null and b/images/menu-6.jpg differ diff --git a/images/menu-7.jpg b/images/menu-7.jpg new file mode 100644 index 0000000..00abffa Binary files /dev/null and b/images/menu-7.jpg differ diff --git a/images/menu-8.jpg b/images/menu-8.jpg new file mode 100644 index 0000000..d09c300 Binary files /dev/null and b/images/menu-8.jpg differ diff --git a/images/menu-9.jpg b/images/menu-9.jpg new file mode 100644 index 0000000..7f65891 Binary files /dev/null and b/images/menu-9.jpg differ diff --git a/images/people-1.jpg b/images/people-1.jpg new file mode 100644 index 0000000..3debbae Binary files /dev/null and b/images/people-1.jpg differ diff --git a/images/people-2.jpg b/images/people-2.jpg new file mode 100644 index 0000000..192f8c1 Binary files /dev/null and b/images/people-2.jpg differ diff --git a/images/people-3.jpg b/images/people-3.jpg new file mode 100644 index 0000000..ba8bbce Binary files /dev/null and b/images/people-3.jpg differ diff --git a/images/people-4.png b/images/people-4.png new file mode 100644 index 0000000..bf6796d Binary files /dev/null and b/images/people-4.png differ diff --git a/images/people-5.png b/images/people-5.png new file mode 100644 index 0000000..89f7d32 Binary files /dev/null and b/images/people-5.png differ diff --git a/images/people-6.png b/images/people-6.png new file mode 100644 index 0000000..cb85cae Binary files /dev/null and b/images/people-6.png differ diff --git a/images/product-1.jpg b/images/product-1.jpg new file mode 100644 index 0000000..26a8e8e Binary files /dev/null and b/images/product-1.jpg differ diff --git a/images/product-2.jpg b/images/product-2.jpg new file mode 100644 index 0000000..0342731 Binary files /dev/null and b/images/product-2.jpg differ diff --git a/images/product-3.jpg b/images/product-3.jpg new file mode 100644 index 0000000..2f3cc16 Binary files /dev/null and b/images/product-3.jpg differ diff --git a/images/product-4.jpg b/images/product-4.jpg new file mode 100644 index 0000000..9654a17 Binary files /dev/null and b/images/product-4.jpg differ diff --git a/images/product-5.jpg b/images/product-5.jpg new file mode 100644 index 0000000..3d33e9a Binary files /dev/null and b/images/product-5.jpg differ diff --git a/images/product-6.jpg b/images/product-6.jpg new file mode 100644 index 0000000..6ca0c91 Binary files /dev/null and b/images/product-6.jpg differ diff --git a/images/product-7.jpg b/images/product-7.jpg new file mode 100644 index 0000000..842f016 Binary files /dev/null and b/images/product-7.jpg differ diff --git a/images/quote-1.png b/images/quote-1.png new file mode 100644 index 0000000..9041c8f Binary files /dev/null and b/images/quote-1.png differ diff --git a/images/quote-2.png b/images/quote-2.png new file mode 100644 index 0000000..6f63722 Binary files /dev/null and b/images/quote-2.png differ diff --git a/images/quote-3.png b/images/quote-3.png new file mode 100644 index 0000000..feabbb6 Binary files /dev/null and b/images/quote-3.png differ diff --git a/images/quote.png b/images/quote.png new file mode 100644 index 0000000..d845ce6 Binary files /dev/null and b/images/quote.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a85e61c --- /dev/null +++ b/index.html @@ -0,0 +1,412 @@ + + + + + + Coffee Shop Website + + + + + +
+ + + + +
+
+
+ +
+ +
+ + +
+ +
+
+ + +
+

Cart Item 01

+
$10.99/-
+
+
+ +
+ + +
+

Cart Item 02

+
$15.99/-
+
+
+ +
+ + +
+

Cart Item 03

+
$35.99/-
+
+
+ +
+ + +
+

Cart Item 04

+
$25.99/-
+
+
+ Checkout now +
+
+ + + + +
+
+

Fresh Coffee Every Morning

+

Try it Today Love it Forever

+ + Get Yours now +
+
+ +
+

about us

+
+
+ +
+ +
+

What make our coffee specail?

+

The first thing that comes to mind when thinking about specialty coffee is its advanced quality. The flavors hidden in a cup of coffee are rich and crisp, and this comes not just from the quality of the specialty coffee beans, but from the work ethic and dedication put into it by the farmer.

+

With the valuable benefits and experience of speciality coffee, you have all the right reasons to go for it and savour the taste and aroma it brings.

+ + Learn more +
+
+
+ + + + +
+

Our Products

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

Ethical Bean Coffee

+
+ + + + + +
+
$30.99 $25.99
+
+
+ +
+
+ + + +
+
+ +
+
+

Fresh Roasted Coffee

+
+ + + + + +
+
$50.99 $40.99
+
+
+
+
+ + + +
+
+ +
+
+

Lavista Instant Coffee

+
+ + + + + +
+
$65.99 $50.99
+
+
+
+
+ +
+

Customer's review

+
+
+ +

I recently purchased Espresso Con Panna as a gift for my Father, he had been wanting to try it for a long time and was so excited when he opened it. You could smell the coffee through the wrapping paper and when he tried it, he loved it. I will definitely be recommending this coffee to others and recommend they purchase from your website as the delivery and service was brilliant. Many thanks.

+ +

Jennifer Kent

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

This coffee is amazing and so smooth with little or no bitter taste in the mouth, have a couple of cups of this and then go back to your standard coffee and you will think "have i really been drinking this" the only down side is the price but as a treat when you've had a bad day nothing can beat it. Also delivery was very speedy. + +

+ +

Shaun

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

I found this to be finely balanced medium to strong coffee ideal as a great start to the day and throughout as well.

+ +

Catherine

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

Contact us

+
+ +
+

Get In Touch

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

Our Blogs

+
+
+
+ +
+
+ Tasty and Refreshing Coffee + BY BINNY | APRIL 16, 2020 +

Introduction I know the title sounds a little weird, but I promise you it is related to coffee and is […]

+ Read more +
+
+
+
+ +
+
+ A HEART OF COFFEE + BY BOBBY ROY | APRIL 22, 2020 +

A Heart of Coffee Coffee has been forever been close to my heart. If you ask me, I don’t really […]

+ Read more +
+
+
+
+ +
+
+ “Productively Brew-ding” + BY PAUL | MARCH 10 , 2023 +

“49% of the millennial workforce miss their morning coffee with colleagues during the lockdown” The survey titled “Productively Brew-ding”, […]

+ Read more +
+
+
+
+ +
+
+ + + + + + +
+
+ home + about + menu + product + review + contact + blogs +
+ +
Created by Shamaila Ansari | all rights reserved
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..827f337 --- /dev/null +++ b/script.js @@ -0,0 +1,28 @@ +let navbar = document.querySelector('.navbar') +document.querySelector('#menu-btn').onclick = () =>{ + navbar.classList.toggle('active'); + cartItem.classList.remove('active'); + searchForm.classList.remove('active'); +} + +let cartItem = document.querySelector('.cart-items-container'); +document.querySelector('#cart-btn').onclick = () =>{ + cartItem.classList.toggle('active'); + navbar.classList.remove('active'); + searchForm.classList.remove('active'); +} + +let searchForm = document.querySelector('.search-form'); +document.querySelector('#search-btn').onclick =()=>{ + searchForm.classList.toggle('active'); + navbar.classList.remove('active'); + cartItem.classList.remove('active'); + +} + +window.onscroll = () =>{ + navbar.classList.remove('active'); + cartItem.classList.remove('active'); + searchForm.classList.remove('active'); + +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c9af376 --- /dev/null +++ b/style.css @@ -0,0 +1,585 @@ +:root{ + --maain-color:#d3ad7f; + --black:#13131a; + --bg:#010103; + --border:.1rem solid rgba(255,255,255,.3); +} + + +*{ + font-family: 'Roboto',sans-serif ; + margin: 0;padding: 0; + box-sizing: border-box; + outline: none;border: none; + text-decoration: none; + text-transform: capitalize; + transition: .2s linear; +} + +html{ + font-size: 62.5%; + overflow-x: hidden; + scroll-padding-top: 9rem; + scroll-behavior: smooth; +} + +html::-webkit-scrollbar{ + width: .8rem; +} + +html::-webkit-scrollbar-thumb{ + background:#fff; + border-radius: 5rem; +} +body{ + background: var(--bg); +} + +.heading{ + text-align: center; + color: #fff; + text-transform: uppercase; + padding-bottom: 3.5rem; + font-size: 4rem; +} +.heading span{ + color:var(--maain-color); + text-transform: uppercase; +} + +section{ + padding: 2rem 7%; +} +.header{ + background: var(--bg); + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.5rem 7%; + border-bottom: var(--border); + position: fixed; + top: 0;left: 0;right: 0; + z-index: 1000; + + +} +header .logo img{ + height: 6.5rem; +} +.header .navbar a{ + margin: 0 1rem; + font-size: 1.8rem; + color: #fff; + +} +.header .navbar a:hover{ + color: var(--maain-color); + border-bottom: .1rem solid var(--maain-color); + padding-bottom: .5rem; +} + +.header .icon div{ + color: #fff; + cursor: pointer; + font-size: 2.7rem; + margin-left: 2rem; + +} +.header .icon div:hover{ + color: var(--maain-color); +} +#menu-btn{ + display: none; + +} +.header .search-form{ + position: absolute; + top: 115%;right:7% ; + background: #fff; + width:50rem; + height: 5rem; + display: flex; + align-items: center; + transform: scaleY(0); + transform-origin: top; + +} +.header .search-form.active{ + transform: scaleY(1); +} +.header .search-form input{ + height: 100%; + width: 100%; + font-size: 1.6rem; + color:var(--black); + padding: 1rem; + text-transform: none; +} +.header .search-form label{ + /* cursor: pointer; */ + font-size: 2.5rem; + margin-right: 1.5rem; + color: var(--black); + + +} +.header .search-form label:hover{ + color: var(--maain-color); +} + +.header .cart-items-container{ + position: absolute; + top:100%;right:-100%; + height: calc(100vh - 9.5rem); + width: 35rem; + background: #fff; + padding:0 1.5rem; +} + +.header .cart-items-container.active{ + right: 0; +} +.header .cart-items-container .cart-item{ + position: relative; + margin: 2rem 0; + display: flex; + align-items: center; + gap: 1.5rem; +} +.header .cart-items-container .cart-item .fa-times{ + position: absolute; + top: 1rem;right: 1rem; + font-size: 2rem; + cursor: pointer; + color: var(--black); +} + +.header .cart-items-container .cart-item .fa-times:hover{ + color: var(--maain-color); + +} + +.header .cart-items-container .cart-item img{ + height: 130px; + width: 500rem; + + +} +.header .cart-items-container .cart-item .content h3{ + font-size: 2.4rem; + color: var(--black); + padding-bottom: 5rem; +} +.header .cart-items-container .cart-item .content .price{ + font-size: 2.5rem; + color: var(--maain-color); + + +} +.btn{ + margin-top: 1rem; + display: inline-block; + padding: 1.5rem 3rem; + font-size: 2rem; + color: #fff; + background-color: var(--maain-color); + cursor: pointer; + border-radius: 4px; + /* font-weight: 1000px; */ +} +.btn:hover{ + letter-spacing: .2rem; + +} +.header .cart-items-container .cart-item .btn{ + width: 100%; + text-align: centers; +} + +.home{ + display: flex; + min-height: 100vh; + align-items: center; + background: url(images/home-page.jpg) no-repeat; + background-size: cover; + background-position: center; +} +.home .content{ + max-width: 60rem; +} +.home .content h3{ + font-size: 6rem; + text-transform: uppercase; + color:#fff; +} +.home .content p{ + font-size: 2.4rem; + font-weight: 650; + line-height: 1.8; + padding: 1rem 0; + color:#eee; +} +.about .row{ + display: flex; + align-items: center; + background: var(--black); + flex-wrap: wrap; +} +.about .row .image{ + flex:1 1 45rem; +} +.about .row .image img{ + width: 100%; +} +.about .row .content{ + flex:1 1 45rem; + padding: 2rem; +} + +.about .row .content h3{ + font-size: 3rem; + color: #fff; +} +.about .row .content p{ + font-size: 1.6rem; + color: #ccc ; + padding: 1rem 0; + line-height: 1.8; +} + +.menu .box-container{ + display: grid; + grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr)); + gap:1.5rem; +} +.menu .box-container .box{ + padding: 5rem; + text-align: center; + border: var(--border); +} + +.menu .box-container .box img{ + height: 17rem; +} +.menu .box-container .box h3{ + color: #fff; + font-size: 2rem; + padding: 1rem 0; + +} + +.menu .box-container .box .price{ + color: #fff; + font-size: 2.5rem; + padding:.5rem 0; + +} +.menu .box-container .box .price span{ + + font-size: 1.5rem; + text-decoration: line-through; + /* font-weight: bolder; */ + + +} +.menu .box-container .box:hover{ + background: #fff; +} +.menu .box-container .box:hover > *{ + color: var(--black) ; +} +.products .box-container{ + display: grid; + grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr)); + gap:1.5rem; +} +.products .box-container .box{ + text-align: center; + border: var(--border); + padding: 2rem; +} +.products .box-container .box .icons a{ + height: 5rem; + width: 5rem; + line-height: 5rem; + font-size: 3rem; + border: var(--border); + color: #fff; + margin: 3rem; +} +.products .box-container .box .icons a:hover{ + background: var(--maain-color); +} +.products .box-container .box .image{ + padding: 2.5rem 0; +} +/* .products .box-container .box ,image img{ + height: 25rem; +} */ + +.products .box-container .box .content h3{ + color: #fff; + font-size: 2.5rem; +} +.products .box-container .box .content .stars{ + padding: 1.5rem; +} +.products .box-container .box .content .stars i{ + padding: 1.7rem; + color:var(--maain-color); +} +.products .box-container .box .content .price{ + color: #fff; + font-size: 2.5rem; +} +.products .box-container .box .content .price span{ + text-decoration: line-through; + font-weight: lighter; + font-size: 1.5rem; +} +.review .box-container{ + display: grid; + grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr)); + gap:1.5rem; +} +.review .box-container .box{ + border: var(--border); + text-align: center; + padding: 3rem 2rem; +} +.review .box-container .box p{ + font-size: 1.6rem; + line-height: 1.8; + color: #ccc; + padding: 2rem 0; +} +.review .box-container .box .user{ + height: 13rem; + width: 13rem; + border-radius: 50%; + object-fit: cover; +} +.review .box-container .box h3{ + padding: 1rem 0; + font-size: 2rem; + color: #fff; +} +.review .box-container .box .stars i{ + + font-size: 2rem; + color:var(--maain-color); +} +.contact .row{ + display: flex; + + background: var(--black); + flex-wrap: wrap; + gap: 1rem; +} +.contact .row .map{ + flex:1 1 45rem; + width: 100%; + object-fit: cover; +} +.contact .row form{ + flex:1 1 45rem; + padding: 5rem 2rem; + text-align: center; +} +.contact .row form h3{ + text-transform: uppercase; + font-size: 3.5rem; + color: #fff; +} +.contact .row form .inputBox{ + display: flex; + margin-top: 2rem; + margin-bottom: 2rem; + text-align: center; + background: var(--bg); + border: var(--border); +} + +.contact .row form .inputBox input{ + width: 100%; + padding: 2rem; + font-size: 1.7rem; + color: #fff; + text-transform: none; + background: none; + +} +.contact .row form .inputBox span{ + padding-top: 2rem; + padding-left: 1rem; + color: #fff; + font-size: 2rem; + +} +.blogs .box-container{ + display: grid; + grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr)); + gap:1.5rem; +} +.blogs .box-container .box{ + border: var(--border); +} +.blogs .box-container .box .image{ + height: 25rem; + overflow: hidden; + width: 100%; + +} +.blogs .box-container .box .image img{ + height: 100%; + object-fit: cover; + width: 100%; + +} +.blogs .box-container .box:hover .image img{ + transform: scale(1.2); +} +.blogs .box-container .box .content{ + padding: 2rem; +} + +.blogs .box-container .box .content .title{ + font-size: 2.5rem; + line-height: 1.5; + color: #fff; +} +.blogs .box-container .box .content .title:hover{ + color: var(--maain-color); +} +.blogs .box-container .box .content span{ + color: var(--maain-color); + display: block; + padding-top: 1rem; + font-size: 2rem; +} +.blogs .box-container .box .content p{ + font-size: 1.6rem; + line-height: 1.8; + color: #ccc; + padding: 1rem 0; +} + + + + +@media (max-width:991px){ + html{ + font-size: 55%; + } + .header{ + padding: 1.5em 2rem; + } + section{ + padding: 2rem 7%; + } +} + +.footer{ + background: var(--black); + text-align: center; +} +.footer .share{ + padding: 1rem 0; +} + +.footer .share a{ + height: 5rem; + width: 5rem; + line-height: 5rem; + font-size: 2rem; + color: #fff; + border: var(--border); + margin:.3rem; + border-radius: 50%; +} +.footer .share a:hover{ + background-color: var(--maain-color); +} +.footer .links{ + display: flex; + justify-content: center; + flex-wrap: wrap; + padding: 2rem 0; + gap: 1rem; +} +.footer .links a{ + padding: .7rem 2rem; + color: #fff; + border: var(--border); + font-size: 2rem; +} +.footer .links a:hover{ + background-color: var(--maain-color); +} +.footer .credit{ + font-size: 2rem; + color: #fff; + font-weight: lighter; + padding:1.5rem; +} +.footer .credit span{ + color: var(--maain-color); +} + + + + +@media (max-width:768px){ + #menu-btn{ + display: inline-block; + } + .header .navbar{ + position: absolute; + top: 100%;right: -100%; + background-color: #fff; + width: 30rem; + height: calc(100vh - 9.5rem); + } + .header .navbar.active{ + right:0; + + } + .header .navbar a{ + color: var(--black); + display: block; + margin: 1.5rem; + padding: .5rem; + font-size: 2rem; + } + + .header .search-form{ + width:90%; + right: 2rem; + + } + .home{ + background-position: left; + justify-content: center; + text-align: center; + } + .home .content h3{ + font-size: 4.5rem; + } + .home .content p{ + font-size: 1.5rem; + + } + +} +@media (max-width:450px){ + html{ + font-size: 50%; + } + +} + + + + + +