diff --git a/assets/images/about-img.jpeg b/assets/images/about-img.jpeg new file mode 100644 index 0000000..3b0b5ea Binary files /dev/null and b/assets/images/about-img.jpeg differ diff --git a/assets/images/blog-1.jpeg b/assets/images/blog-1.jpeg new file mode 100644 index 0000000..71c5dd1 Binary files /dev/null and b/assets/images/blog-1.jpeg differ diff --git a/assets/images/blog-2.jpeg b/assets/images/blog-2.jpeg new file mode 100644 index 0000000..4787432 Binary files /dev/null and b/assets/images/blog-2.jpeg differ diff --git a/assets/images/blog-3.jpeg b/assets/images/blog-3.jpeg new file mode 100644 index 0000000..ac774f8 Binary files /dev/null and b/assets/images/blog-3.jpeg differ diff --git a/assets/images/cart-item-1.png b/assets/images/cart-item-1.png new file mode 100644 index 0000000..0828034 Binary files /dev/null and b/assets/images/cart-item-1.png differ diff --git a/assets/images/cart-item-2.png b/assets/images/cart-item-2.png new file mode 100644 index 0000000..8c5b6ba Binary files /dev/null and b/assets/images/cart-item-2.png differ diff --git a/assets/images/cart-item-3.png b/assets/images/cart-item-3.png new file mode 100644 index 0000000..6659c91 Binary files /dev/null and b/assets/images/cart-item-3.png differ diff --git a/assets/images/cart-item-4.png b/assets/images/cart-item-4.png new file mode 100644 index 0000000..02e0126 Binary files /dev/null and b/assets/images/cart-item-4.png differ diff --git a/assets/images/home-img.jpeg b/assets/images/home-img.jpeg new file mode 100644 index 0000000..a44abc8 Binary files /dev/null and b/assets/images/home-img.jpeg differ diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..59b2026 Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/menu-1.png b/assets/images/menu-1.png new file mode 100644 index 0000000..88f42a0 Binary files /dev/null and b/assets/images/menu-1.png differ diff --git a/assets/images/menu-2.png b/assets/images/menu-2.png new file mode 100644 index 0000000..ebc413b Binary files /dev/null and b/assets/images/menu-2.png differ diff --git a/assets/images/menu-3.png b/assets/images/menu-3.png new file mode 100644 index 0000000..1f5a9d4 Binary files /dev/null and b/assets/images/menu-3.png differ diff --git a/assets/images/menu-4.png b/assets/images/menu-4.png new file mode 100644 index 0000000..25163ec Binary files /dev/null and b/assets/images/menu-4.png differ diff --git a/assets/images/menu-5.png b/assets/images/menu-5.png new file mode 100644 index 0000000..3068a1c Binary files /dev/null and b/assets/images/menu-5.png differ diff --git a/assets/images/menu-6.png b/assets/images/menu-6.png new file mode 100644 index 0000000..b695f16 Binary files /dev/null and b/assets/images/menu-6.png differ diff --git a/assets/images/pic-1.png b/assets/images/pic-1.png new file mode 100644 index 0000000..8fcc04c Binary files /dev/null and b/assets/images/pic-1.png differ diff --git a/assets/images/pic-2.png b/assets/images/pic-2.png new file mode 100644 index 0000000..a96bed3 Binary files /dev/null and b/assets/images/pic-2.png differ diff --git a/assets/images/pic-3.png b/assets/images/pic-3.png new file mode 100644 index 0000000..cfbfc2f Binary files /dev/null and b/assets/images/pic-3.png differ diff --git a/assets/images/product-1.png b/assets/images/product-1.png new file mode 100644 index 0000000..c6327ea Binary files /dev/null and b/assets/images/product-1.png differ diff --git a/assets/images/product-2.png b/assets/images/product-2.png new file mode 100644 index 0000000..48d7dd1 Binary files /dev/null and b/assets/images/product-2.png differ diff --git a/assets/images/product-3.png b/assets/images/product-3.png new file mode 100644 index 0000000..02b32f7 Binary files /dev/null and b/assets/images/product-3.png differ diff --git a/assets/images/quote-img.png b/assets/images/quote-img.png new file mode 100644 index 0000000..eeea5c2 Binary files /dev/null and b/assets/images/quote-img.png differ diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..1610919 --- /dev/null +++ b/css/style.css @@ -0,0 +1,725 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap'); + + + +:root{ + --main-color:rgb(245, 118, 118);; + --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: capitalize; + 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(https://4.bp.blogspot.com/-AwxvUm0_c4s/UhCcv4x9scI/AAAAAAAAo3I/tG_BvRN46-M/s1600/Coffee+Photography+1.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: 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:rgb(245, 118, 118); +} + +.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: rgb(247, 122, 122); +} + +.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: 1.5rem; +} + +.products .box-container .box .content .stars{ + padding: 1.5rem; +} + +.products .box-container .box .content .stars i{ + font-size: 1.7rem; + color : rgb(241, 83, 83); +} + +.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 Query */ + @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%; + } + } + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8c5e11a --- /dev/null +++ b/index.html @@ -0,0 +1,420 @@ + + + + + + + Coffee Shop Website + + + + + + + + + + +
+ + + +
+ +
+ +
+ +
+ + +
+ +
+
+ + +
+

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

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam rem eveniet aspernatur provident, delectus nemo molestias reiciendis odio atque porro unde repellendus, quia voluptates suscipit quidem recusandae eius dicta quisquam.

+ Get yours Now +
+
+ + + + + +
+

AboutUs

+
+
+ +
+
+

what makes our coffee special?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus qui ea ullam, enim tempora ipsum fuga alias quae ratione a officiis id temporibus autem? Quod nemo facilis cupiditate. Ex, vel?

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit amet enim quod veritatis, nihil voluptas culpa! Neque consectetur obcaecati sapiente?

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

our products

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

fresh coffee

+
+ + + + + +
+
$15.99 $20.99
+
+
+ +
+
+ + + +
+
+ +
+
+

fresh coffee

+
+ + + + + +
+
$15.99 $20.99
+
+
+ +
+
+ + + +
+
+ +
+
+

fresh coffee

+
+ + + + + +
+
$15.99 $20.99
+
+
+ +
+ +
+ + + + + +
+ +

customer's review

+ +
+ +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi quas eaque laudantium consequuntur iste ex aliquam minus vel? Nemo.

+ +

john deo

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi quas eaque laudantium consequuntur iste ex aliquam minus vel? Nemo.

+ +

john deo

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

Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi quas eaque laudantium consequuntur iste ex aliquam minus vel? Nemo.

+ +

john deo

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

contact us

+ +
+ + + + +
+

get in touch

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

our blogs

+ +
+ +
+
+ +
+
+ tasty and refreshing coffee + by admin / 21st may, 2021 +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, dicta.

+ read more +
+
+ +
+
+ +
+
+ tasty and refreshing coffee + by admin / 21st may, 2021 +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, dicta.

+ read more +
+
+ +
+
+ +
+
+ tasty and refreshing coffee + by admin / 21st may, 2021 +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, dicta.

+ read more +
+
+ +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ home + about + menu + products + review + contact + blogs +
+ +
created by Mr Sai Mohan | © Web Designer
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..0c6d2e6 --- /dev/null +++ b/js/script.js @@ -0,0 +1,29 @@ +let navbar = document.querySelector('.navbar'); + +document.querySelector('#menu-btn').onclick = () =>{ + navbar.classList.toggle('active'); + searchForm.classList.remove('active'); + cartItem.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'); +} + +let cartItem = document.querySelector('.cart-items-container'); + +document.querySelector('#cart-btn').onclick = () =>{ + cartItem.classList.toggle('active'); + navbar.classList.remove('active'); + searchForm.classList.remove('active'); +} + +window.onscroll = () =>{ + navbar.classList.remove('active'); + searchForm.classList.remove('active'); + cartItem.classList.remove('active'); +} \ No newline at end of file