diff --git a/Projects/e-commerce website/about-img.jpeg b/Projects/e-commerce website/about-img.jpeg new file mode 100644 index 0000000..3b0b5ea Binary files /dev/null and b/Projects/e-commerce website/about-img.jpeg differ diff --git a/Projects/e-commerce website/blog-1.jpeg b/Projects/e-commerce website/blog-1.jpeg new file mode 100644 index 0000000..71c5dd1 Binary files /dev/null and b/Projects/e-commerce website/blog-1.jpeg differ diff --git a/Projects/e-commerce website/blog-2.jpeg b/Projects/e-commerce website/blog-2.jpeg new file mode 100644 index 0000000..4787432 Binary files /dev/null and b/Projects/e-commerce website/blog-2.jpeg differ diff --git a/Projects/e-commerce website/blog-3.jpeg b/Projects/e-commerce website/blog-3.jpeg new file mode 100644 index 0000000..ac774f8 Binary files /dev/null and b/Projects/e-commerce website/blog-3.jpeg differ diff --git a/Projects/e-commerce website/cart-item-1.png b/Projects/e-commerce website/cart-item-1.png new file mode 100644 index 0000000..0828034 Binary files /dev/null and b/Projects/e-commerce website/cart-item-1.png differ diff --git a/Projects/e-commerce website/cart-item-2.png b/Projects/e-commerce website/cart-item-2.png new file mode 100644 index 0000000..8c5b6ba Binary files /dev/null and b/Projects/e-commerce website/cart-item-2.png differ diff --git a/Projects/e-commerce website/cart-item-3.jpeg b/Projects/e-commerce website/cart-item-3.jpeg new file mode 100644 index 0000000..6659c91 Binary files /dev/null and b/Projects/e-commerce website/cart-item-3.jpeg differ diff --git a/Projects/e-commerce website/cart-item-4.png b/Projects/e-commerce website/cart-item-4.png new file mode 100644 index 0000000..02e0126 Binary files /dev/null and b/Projects/e-commerce website/cart-item-4.png differ diff --git a/Projects/e-commerce website/home-img.jpeg b/Projects/e-commerce website/home-img.jpeg new file mode 100644 index 0000000..a44abc8 Binary files /dev/null and b/Projects/e-commerce website/home-img.jpeg differ diff --git a/Projects/e-commerce website/index.html b/Projects/e-commerce website/index.html new file mode 100644 index 0000000..775eaba --- /dev/null +++ b/Projects/e-commerce website/index.html @@ -0,0 +1,448 @@ + + + + + + + complete responsive coffee shop website design + + + + + + + + + + + + + +
+ + + + + +
+ +
+ +
+ +
+ + +
+ +
+
+ + +
+

cart item 01

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

cart item 02

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

cart item 03

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

cart item 04

+
$15.99/-
+
+
+ checkout now +
+ +
+ + + + + +
+ +
+

fresh coffee in the morning

+

“A morning coffee is my favorite way of starting the day, settling the nerves so that they don't later fray.”

+ Get yours now +
+ +
+ + + + + +
+ +

about us

+ +
+ +
+ +
+ +
+

what makes our coffee special?

+

I wanted to take this time to let you know how grateful we are to have you choosing us for your coffee needs. Quality coffee is a passion for me and I am so thankful for your patronage which allows me to do this.We buy only from reputable farmers and millers at volumes equal to several hundred acres. We grade our coffees into different sizes and quality, throw out the lower quality beans and blind taste our grades and types individually to find the best roasting temperature that bring out the best taste for that specific size and coffee bean – different roasting temperatures for different coffee. We do this constantly to maintain a consistent and high-quality roast every time.

+ learn more +
+ +
+ +
+ + + + + + + + + +
+ +

our products

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

Robusta

+
+ + + + + +
+
₹1499 ₹1999
+
+
+ +
+
+ + + +
+
+ +
+
+

Excelsa

+
+ + + + + +
+
₹1799 ₹2159
+
+
+ +
+
+ + + +
+
+ +
+
+

Liberica

+
+ + + + + +
+
₹2399 ₹2899
+
+
+ +
+ +
+ + + +
+ +

customer's review

+ +
+ +
+ +

If you are a coffee fanatic just like me then you must be picky about every little coffee details. Cafena offers you one of the best instant coffees you will find in the Indian market providing rich taste and great aroma. + I prefer to always order the Espresso variant to have a great start to my mornings!

+ +

Miguel Diaz

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

This product is excellent. I have been using this brand for nearly three years, and I am very satisfied and happy. It has an awesome taste and makes you fresh after taking a sip of it. + + However, its price is comparatively high. But, I recommend this product at this price if you wish to prioritise your taste. Preparing an espresso coffee is very easy. Just mix the coffee powder in the warm water, and you will get an amazing taste. You can also make it with milk and other way exist. But, I usually take it as black coffee - just mix it with warm water and no sugar.

+ +

Samantha Larusso

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

I’ve tried and tasted 2 flavours of Cafena which are ‘espresso’ and ‘rich aroma’. I can assure you it tastes really different from the coffee by Nescafé which is clearly no match. Cafena has a nice coffee blend which leaves a pleasantly strong taste in your mouth. This coffee remains perfectly granualated even in moist conditions in Mumbai here. The high cost could be slightly prohibitive but it’s surely worth it.

+ +

Robby Keene

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

contact us

+ +
+ + + +
+

get in touch

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

our blogs

+ +
+ +
+
+ +
+
+ Manual Coffee Brewing + by Mili / 21st feb, 2022 +

Outside of the 9-5 life, John at Manual Coffee Brewing enjoys roasting coffee at home and sharing his experiments with his followers. Learn about different techniques of home brewing, including pour-over and immersion. Manual coffee brewing is great if you are branching out into a home brewing hobby. Make sure to read product reviews and learn about John’s tastes through his coffee shop reviews.

+ read more +
+
+ +
+
+ +
+
+ Coffee Affection + by Anikesh / 26st feb, 2022 +

Here’s our shameless plug. If you’re a keen coffee enthusiast wanting to brew coffee at home, this is the blog for you to follow. Coffee Affection’s resources are complete with buying guides for both coffee grinding and brewing instruments, comparisons of brewing techniques, and “best of” lists. Improve your current barista skills, or start learning with the articles available, such as “choosing the right bean,” “different types of roasting,” and information on the consumption of coffee. And don’t forget to keep up to date with new gadgets available in the coffee industry (like the solar-powered French presses!

+ read more +
+
+ +
+
+ +
+
+ THE WAY TO COFFEE + by admin / 21st feb, 2022 +

Traveling from cafe to cafe, Resi is waiting as that next cup of coffee is being prepared, ready to delve into an analysis of what is on offer. Resi has an extensive list of coffee shop reviews nicely categorized by continent, country, and city (also conveniently presented on a map) on her blog The Way to Coffee. The blog is good for travelers who want to discover new places and start the day off with a great cup of coffee. If you loved that cup of coffee you just consumed, look up her guides on roasting and brewing so you can make it exactly the same at home.

+ read more +
+
+ +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ home + about + menu + products + review + contact + blogs +
+ +
created by Anikesh&Mili | Mini project
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Projects/e-commerce website/logo.png b/Projects/e-commerce website/logo.png new file mode 100644 index 0000000..59b2026 Binary files /dev/null and b/Projects/e-commerce website/logo.png differ diff --git a/Projects/e-commerce website/menu-1.png b/Projects/e-commerce website/menu-1.png new file mode 100644 index 0000000..88f42a0 Binary files /dev/null and b/Projects/e-commerce website/menu-1.png differ diff --git a/Projects/e-commerce website/menu-2.png b/Projects/e-commerce website/menu-2.png new file mode 100644 index 0000000..ebc413b Binary files /dev/null and b/Projects/e-commerce website/menu-2.png differ diff --git a/Projects/e-commerce website/menu-3.png b/Projects/e-commerce website/menu-3.png new file mode 100644 index 0000000..1f5a9d4 Binary files /dev/null and b/Projects/e-commerce website/menu-3.png differ diff --git a/Projects/e-commerce website/menu-4.png b/Projects/e-commerce website/menu-4.png new file mode 100644 index 0000000..25163ec Binary files /dev/null and b/Projects/e-commerce website/menu-4.png differ diff --git a/Projects/e-commerce website/menu-5.png b/Projects/e-commerce website/menu-5.png new file mode 100644 index 0000000..3068a1c Binary files /dev/null and b/Projects/e-commerce website/menu-5.png differ diff --git a/Projects/e-commerce website/menu-6.png b/Projects/e-commerce website/menu-6.png new file mode 100644 index 0000000..b695f16 Binary files /dev/null and b/Projects/e-commerce website/menu-6.png differ diff --git a/Projects/e-commerce website/pic-1.png b/Projects/e-commerce website/pic-1.png new file mode 100644 index 0000000..8fcc04c Binary files /dev/null and b/Projects/e-commerce website/pic-1.png differ diff --git a/Projects/e-commerce website/pic-2.png b/Projects/e-commerce website/pic-2.png new file mode 100644 index 0000000..a96bed3 Binary files /dev/null and b/Projects/e-commerce website/pic-2.png differ diff --git a/Projects/e-commerce website/pic-3.png b/Projects/e-commerce website/pic-3.png new file mode 100644 index 0000000..cfbfc2f Binary files /dev/null and b/Projects/e-commerce website/pic-3.png differ diff --git a/Projects/e-commerce website/product-1.png b/Projects/e-commerce website/product-1.png new file mode 100644 index 0000000..c6327ea Binary files /dev/null and b/Projects/e-commerce website/product-1.png differ diff --git a/Projects/e-commerce website/product-2.png b/Projects/e-commerce website/product-2.png new file mode 100644 index 0000000..48d7dd1 Binary files /dev/null and b/Projects/e-commerce website/product-2.png differ diff --git a/Projects/e-commerce website/product-3.png b/Projects/e-commerce website/product-3.png new file mode 100644 index 0000000..02b32f7 Binary files /dev/null and b/Projects/e-commerce website/product-3.png differ diff --git a/Projects/e-commerce website/quote-img.png b/Projects/e-commerce website/quote-img.png new file mode 100644 index 0000000..eeea5c2 Binary files /dev/null and b/Projects/e-commerce website/quote-img.png differ diff --git a/Projects/e-commerce website/style.css b/Projects/e-commerce website/style.css new file mode 100644 index 0000000..9b1758c --- /dev/null +++ b/Projects/e-commerce website/style.css @@ -0,0 +1,642 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap'); + +:root{ + --main-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-track{ + background: transparent; +} + +html::-webkit-scrollbar-thumb{ + background: #fff; + border-radius: 5rem; +} + +body{ + background: var(--bg); +} + +section{ + padding:2rem 7%; +} + +.heading{ + text-align: center; + color:#fff; + text-transform: uppercase; + padding-bottom: 3.5rem; + font-size: 4rem; +} + +.heading span{ + color:var(--main-color); + text-transform: uppercase; +} + +.btn{ + margin-top: 1rem; + display: inline-block; + padding:.9rem 3rem; + font-size: 1.7rem; + color:#fff; + background: var(--main-color); + cursor: pointer; +} + +.btn:hover{ + letter-spacing: .2rem; +} + +.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: 6rem; +} + +.header .navbar a{ + margin:0 1rem; + font-size: 1.6rem; + color:#fff; +} + +.header .navbar a:hover{ + color:var(--main-color); + border-bottom: .1rem solid var(--main-color); + padding-bottom: .5rem; +} + +.header .icons div{ + color:#fff; + cursor: pointer; + font-size: 2.5rem; + margin-left: 2rem; +} + +.header .icons div:hover{ + color:var(--main-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.2rem; + margin-right: 1.5rem; + color:var(--black); +} + +.header .search-form label:hover{ + color:var(--main-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(--main-color); +} + +.header .cart-items-container .cart-item img{ + height: 7rem; +} + +.header .cart-items-container .cart-item .content h3{ + font-size: 2rem; + color:var(--black); + padding-bottom: .5rem; +} + +.header .cart-items-container .cart-item .content .price{ + font-size: 1.5rem; + color:var(--main-color); +} + +.header .cart-items-container .btn{ + width: 100%; + text-align: center; +} + +.home{ + min-height: 100vh; + display: flex; + align-items: center; + background:url(home-img.jpeg) 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: 2rem; + font-weight: lighter; + 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: 10rem; +} + +.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: lighter; +} + +.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: 2rem; + border:var(--border); + color:#fff; + margin:.3rem; +} + +.products .box-container .box .icons a:hover{ + background:var(--main-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{ + font-size: 1.7rem; + color: var(--main-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.5rem; + line-height: 1.8; + color:#ccc; + padding:2rem 0; +} + +.review .box-container .box .user{ + height: 7rem; + width: 7rem; + 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: 1.5rem; + color:var(--main-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; + align-items: center; + margin-top: 2rem; + margin-bottom: 2rem; + background:var(--bg); + border:var(--border); +} + +.contact .row form .inputBox span{ + color:#fff; + font-size: 2rem; + padding-left: 2rem; +} + +.contact .row form .inputBox input{ + width: 100%; + padding:2rem; + font-size: 1.7rem; + color:#fff; + text-transform: none; + background:none; +} + +.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(--main-color); +} + +.blogs .box-container .box .content span{ + color:var(--main-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; +} + +.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(--main-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:var(--main-color); +} + +.footer .credit{ + font-size: 2rem; + color:#fff; + font-weight: lighter; + padding:1.5rem; +} + +.footer .credit span{ + color:var(--main-color); +} + + + + + + + + + + + + + +/* media queries */ +@media (max-width:991px){ + + html{ + font-size: 55%; + } + + .header{ + padding:1.5rem 2rem; + } + + section{ + padding:2rem; + } + +} + +@media (max-width:768px){ + + #menu-btn{ + display: inline-block; + } + + .header .navbar{ + position: absolute; + top:100%; right: -100%; + background: #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%; + } + +} \ No newline at end of file