Scribd
Upload
16 views10 pages

Document 4

Uploaded by

pankajp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views10 pages

Document 4

Uploaded by

pankajp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Index.

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coffee Shop Website</title>
<link rel="stylesheet" href="style.css">
<link

href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300it
alic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"
rel="stylesheet" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.5.2/css/all.css'
integrity='sha512-
U9Y1sGB3sLIpZm3ePcrKbXVhXlnQNcuwGQJ2WjPjnp6XHqVTdgIlbaDzJXJIAuCTp3y22t+nhI4B88F/5ldjFA=='
crossorigin='anonymous' />
</head>
<body>
<div class="main-container">
<header class="header-section">
<div class="header-section__top-bar responsive-container">
<ul class="header-section__top-bar-text">
<li>
<p>Mon-Fri: 8am to 2pm</p>
</li>
<li>
<p>Sat-Sun: 11am to 4pm</p>
</li>
<li>
<p>1234-567-890</p>
</li>
</ul>
</div>
<nav class="header-section__nav responsive-container">
<div class="navbar__logo-div">
<img class="navbar__logo" src="./Images/Coffee-logo.png" alt="Coffee Logo">
</div>
<div class="navbar__links-div">
<ul class="navbar__links">
<li><a href="#section-1" class="white-clr">HOME</a></li>
<li><a href="#section-2" class="white-clr">ABOUT</a></li>
<li><a href="#section-3" class="white-clr">COFFEE</a></li>
<li><a href="#section-5" class="white-clr">REVIEW</a></li>
<li><a href="#section-6" class="white-clr">BLOG</a></li>
</ul>
</div>
</nav>
<nav class="header-section__nav-mobile responsive-container">
<div class="navbar__logo-div">
<img class="navbar__logo" src="./Images/Coffee-logo.png" alt="Coffee Logo">
</div>
<i class="fa-solid fa-bars"></i>
<div class="navbar__links-div">
<ul class="navbar__links-mobile">
<li><a href="#section-1" class="white-clr">HOME</a></li>
<li><a href="#section-2" class="white-clr">ABOUT</a></li>
<li><a href="#section-3" class="white-clr">COFFEE</a></li>
<li><a href="#section-5" class="white-clr">REVIEW</a></li>
<li><a href="#section-6" class="white-clr">BLOG</a></li>
</ul>
</div>
</nav>
</header>
<main class="main-section">
<section class="section-1" id="section-1">
<div class="section-1-div responsive-container">
<span class="section-1__span-text">NOW YOU CAN FEEL THE ENERGY</span>
<h1 class="section-1__main-heading">Start your day with <br> a black
Coffee</h1>
<button class="section-1__button-white">BUY NOW</button>
</div>
</section>
<section class="section-2 responsive-container" id="section-2">
<div class="section-2-left">
<video src="./Videos/Coffee-video.mp4" autoplay muted></video>
</div>
<div class="section-2-right">
<span class="section-2-right__span">LIVE COFFEE MAKING PROCESS.</span>
<h2 class="section-2-right__h2 black-clr">We Telecast our Coffee Making
Live</h2>
<h4 class="section-2-right__h4 black-clr">We are here to listen from you
deliver exellence</h4>
<p class="section-2-right__p black-clr">Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do
eiusmod temp or incididunt ut labore et dolore magna aliqua. Ut enim ad
minim.
</p>
<button class="section-2-right__button-secondary">LEARN MORE</button>
</div>
</section>
<section class="section-3 responsive-container common-padding" id="section-3">
<h2 class="section-3__h2 black-clr text-center">What kind of Coffee we serve
for you</h2>
<p class="section-3__p black-clr text-center">Who are in extremely love with
eco friendly system.</p>
<div class="section-3__card-main-div">
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Cappuccino</h3>
<p>$90</p>
</div>
<p>Creamy espresso topped with frothed milk, served hot in a cup.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Americano</h3>
<p>$69</p>
</div>
<p>Strong espresso diluted with hot water, delivering a bold flavor
profile.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Espresso</h3>
<p>$49</p>
</div>
<p>Robust, concentrated coffee brewed by forcing hot water through fine
grounds.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Macchiato</h3>
<p>$87</p>
</div>
<p>Espresso with a splash of steamed milk; bold yet balanced.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Mocha</h3>
<p>$62</p>
</div>
<p>Espresso with chocolate and steamed milk; rich and indulgent.</p>
</div>
<div class="section-3__card black-clr">
<div class="section-3__coffee-descp">
<h3>Coffee Latte</h3>
<p>$26</p>
</div>
<p>Espresso with creamy steamed milk; smooth and comforting.</p>
</div>
</section>
<section class="section-5" id="section-5">
<div class="responsive-container">
<h2 class="section-5__h2 text-center">Indulge in Rich Aromas: Your Perfect Coffee
Fix</h2>
<div class="section-5__testimonial-div">
<div class="section-5__testimonial">
<img src="./Images/Section-5-Images/Testimonial-logo-1.webp" alt="Testimonial-
logo-1">
<p>Absolutely divine! &nbsp;&nbsp;<i class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i class="fa-solid fa-star white-
clr"></i>
</p>
<p>Exquisite flavor, bold aroma, and unparalleled richness. This coffee is a daily
indulgence,
elevating my mornings and setting the standard for a perfect cup. Truly
exceptional in
every
sip.</p>
</div>
<div class="section-5__testimonial">
<img src="./Images/Section-5-Images/Te stimonial-logo-2.webp" alt="Testimonial-
logo-2">
<p>Incredibly satisfying! &nbsp;&nbsp;<i class="fa-solid fa-star yellow-
clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i
class="fa-solid fa-star yellow-clr"></i><i class="fa-solid fa-star yellow-
clr"></i>
</p>
<p>Rich, robust, and utterly satisfying. This coffee is my daily ritual, fueling
my day with
its
unparalleled flavor and energizing aroma. A true delight for the senses, it never
disappoints.</p>
</div>
</div>
<div class="section-5__counter-div">
<div class="section-5__counter">
<span class="section-5__counter-number" data-val="500">0</span>
<p>Happy Client</p>
</div>
<div class="section-5__counter">
<span class="section-5__counter-number" data-val="462">0</span>
<p class="text-center">Total Projects</p>
</div>
<div class="section-5__counter">
<span class="section-5__counter-number" data-val="313">0</span>
<p class="text-center">Cups Coffee</p>
</div>
<div class="section-5__counter">
<span class="section-5__counter-number" data-val="536">0</span>
<p class="text-center">Total Submitted</p>
</div>
</div>
</div>
</section>
<section class="section-6 responsive-container" id="section-6">
<h2 class="section-6__h2 black-clr text-center">Exploring Coffee Culture: A
Journey of Aromas</h2>
<p class="section-6__p black-clr text-center">Embark on a flavorful journey
through diverse coffee
cultures.</p>
<div class="section-6__blog-div">
<div class="section-6__blog">
<img src="./Images/Section-6-Images/Blog-image-1.webp" alt="Blog-image-1">
<div class="section-6__blog-category">
<a href="#">Travel</a>
<a href="#">Lifestyle</a>
</div>
<h5 class="section-6__blog-title black-clr">The Art of Coffee: A Guide</h5>
<p class="section-6__blog-descp black-clr">Discover the intricate craft of coffee
brewing, from
bean
selection to the perfect pour, in this comprehensive guide</p>
<p class="section-6__blog-date black-clr">31st January, 2023</p>
</div>
<div class="section-6__blog">
<img src="./Images/Section-6-Images/Blog-image-2.webp" alt="Blog-image-2">
<div class="section-6__blog-category">
<a href="#">Travel</a>
<a href="#">Lifestyle</a>
</div>
<h5 class="section-6__blog-title black-clr">Exploring Espresso: A Connoisseur's
Perspective</h5>
<p class="section-6__blog-descp black-clr">Immerse yourself in the world of
espresso, exploring
its
origins, flavors, and techniques with expert insights.</p>
<p class="section-6__blog-date black-clr">16th May, 2023</p>
</div>
</div>
</section>
<footer class="footer common-padding">
<div class="responsive-container">
<div class="footer__about-div">
<h4>About Us</h4>
<p>Explore our passion-perfected coffee blends and savor the journey with every
rich, flavorful cup. Welcome to our coffee family.</p>
<p class="footer_copyright-text">Copyright ©2024 <span>Techie Andrew</span> | All
rights reserved</p>
</div>
<div class="footer__newsletter">
<h4>Newsletter</h4>
<p>Stay updates with our latest news</p>
<div class="footer__search-div">
<input type="search" placeholder="Enter Email">
<button><i class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
<div class="footer__follow-us">
<h4>Follow Us</h4>
<p>Let us be social</p>
<div class="footer__social-links">
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
</div>
</footer>
</main>
</div>
<script src="app.js" type="module"></script>
</body>
</html>

app.js
window.onscroll = () => {
if(scrollY > 233){
document.querySelector('.header-section').style.backgroundColor = '#1b1514e7';
}
else if (scrollY === 0){
document.querySelector('.header-section').style.backgroundColor = 'transparent';
}
}
let valueDisplays = document.querySelectorAll(".section-5__counter-number");
let interval = 5000;
valueDisplays.forEach((valueDisplay) => {
let startValue = 0;
let endValue = parseInt(valueDisplay.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function () {
startValue += 1;
valueDisplay.innerHTML =`${startValue}<span class="plus-symbol">+</span>`;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});

style.css

/* imp! CSS RESET */ .section-6__blog-category{


*{ margin: 2.5rem 0;
margin: 0; }
padding: 0; .section-6__blog-category a{
box-sizing: border-box; display: inline-block;
} text-decoration: none;
/* imp! HTML AND BODY CSS */ margin-right: 2rem;
html{ padding: 1rem 3rem;
font-size: 10px; color: var(--black-color);
scroll-behavior: smooth; font-size: 1.2rem;
} border: 0.01rem solid rgba(34, 34, 34,
body{ 0.175);
font-family: 'Poppins',sans-serif; border-radius: 3rem;
color: var(--pure-white); font-weight: var(--fw-500);
} }
.main-container{ .section-6__blog-title{
overflow-x: hidden; font-size: var(--fs-1-8);
} font-weight: var(--fw-bold);
/* imp! CSS VARIABLES */ }
:root{ .section-6__blog-descp{
/* imp! COLOR */ margin: 1.25rem 0 2rem;
--primary-color: #341d0a; }
--secondary-color: #b68834; /*imp! FOOTER-SECTION */
--pure-white: #fff; .footer{
--black-color: #222222; background-image: url(./Images/footer-
--star-yellow: #FFA500; banner.webp);
/*imp! FONT SIZE */ margin-top: var(--common-margin-top);
--fs-h1: 6rem; background-size: cover;
--fs-h2: 3.9rem; }
--fs-h3: 1.8rem; .footer .responsive-container{
--fs-1-8: 1.8rem; display: flex;
--fs-1-4: 1.4rem; flex-wrap: wrap;
/*imp! FONT-WEIGHT */ padding: 5rem 0 10rem;
--fw-very-light: 200; justify-content: space-between;
--fw-light: 300; }
--fw-regular: 400; .footer__about-div{
--fw-500: 500; flex-basis: 35%;
--fw-bold: 600; }
--fw-extra-bold: 700; .footer__newsletter{
--fw-black: 900; flex-basis: 30%;
/* imp! MARGIN */ }
--common-margin-top: 8rem; .footer__follow-us{
/*imp! PADDING */ flex-basis: 10%;
--common-padding-top: 20rem; }
--common-padding-top-1: 12rem;
} .footer__about-div h4,.footer__newsletter
/*imp! COMMON CSS */ h4,.footer__follow-us h4{
.white-clr{ font-size: 1.8rem;
color: var(--pure-white); font-weight: var(--fw-bold);
} }
.black-clr{ .footer__about-div p:nth-of-type(1){
color: var(--black-color); margin: 2rem 0;
} }
.yellow-clr{ .footer_copyright-text span{
color: var(--star-yellow); font-weight: var(--fw-extra-bold);
} color: var(--secondary-color);
h2{ }
font-size: var(--fs-h2); .footer__newsletter p,.footer__follow-us p{
line-height: 1.4; margin: 1rem 0 3rem;
font-weight: var(--fw-bold); }
} .footer__search-div{
h3{ position: relative;
font-size: var(--fs-h3); }
font-weight: var(--fw-bold); .footer__search-div input{
} padding: 0.9rem;
p,h4{ width: 100%;
font-size: var(--fs-1-4); font-size: 1.6rem;
} }
p{
font-weight: var(--fw-light); i.fa-star{
line-height: 1.6; margin-right: 0.25rem;
} }
.common-padding{ .section-5__testimonial p:nth-child(2){
padding-top: var(--common-padding-top); line-height: 1.6;
} }
.responsive-container{ .section-5__counter-div{
max-width: 1140px; display: grid;
width: 90%; grid-template-columns: repeat(auto-
margin: auto; fit,12rem);
} margin-top: 4rem;
.text-center{ justify-content: space-between;
text-align: center; gap: 4rem;
} }
/*imp! TOPBAR CSS */ .section-5__counter{
.header-section{ display: flex;
position: fixed; flex-direction: column;
top: 0; align-items: center;
left: 0; }
width: 100%; .section-5__counter span{
padding: 2rem 0; font-size: var(--fs-h1);
transition: all 0.5s; font-weight: var(--fw-very-light);
} }
.top-bar-img{ .plus-symbol{
position: absolute; font-size: 3rem !important;
top: 0; position: relative;
bottom: 0; top: -0.75rem;
left: 0; left: 0.7rem;
right: 0; }
background-size: cover; /*imp! SECTION-6 CSS */
width: 100%; .section-6{
z-index: -1; padding-top: var(--common-padding-top-1);
} }
.header-section__top-bar-text{ .section-6__blog-div{
display: flex; display: flex;
justify-content: end; flex-wrap: wrap;
} justify-content: space-between;
.header-section__top-bar-text li{ gap: 5rem;
list-style: none; margin-top: var(--common-margin-top);
} }
.header-section__top-bar-text li:not(:last- .section-6__blog{
child){ flex-basis: 45%;
margin-right: 3rem; display: flex;
} flex-direction: column;
/*imp! NAVBAR CSS */ align-items: start;
.header-section__nav{ }
display: flex; .section-6__blog img{
justify-content: space-between; width: 100%;
align-items: center; }
margin-top: 1rem;
}
.footer__search-div button{
.header-section__nav-mobile{
position: absolute;
display: none;
right: 0;
}
bottom: 0;
.fa-bars{
width: 5rem;
font-size: 2.5rem;
height: 100%;
}
border: 0;
.navbar__logo-div img{
outline: 0;
width: 12.5rem;
background-color: var(--secondary-color);
}
cursor: pointer;
.navbar__links,.navbar__links-mobile{
}
display: flex;
.footer__search-div button .fa-arrow-right{
align-items: center;
font-size: 1.6rem;
position: relative;
color: var(--pure-white);
}
}
.navbar__links li,.navbar__links-mobile li{
input:focus{
list-style: none;
outline: 0;
}
}
.navbar__links li:not(:last-of-type){
.footer__social-links{
margin-right: 3rem;
display: flex;
}
justify-content: space-between;
.navbar__links li a,.navbar__links-mobile
}
li a{
.footer__social-links i{
text-decoration: none;
font-size: var(--fs-1-8);
font-size: var(--fs-1-4);
color: var(--pure-white);
}
}
/*imp! SECTION-1 CSS */
/*imp! TABLET MEDIA QUERY */
.section-1{
@media screen and (max-width: 1141px) {
padding-top: 18rem;
:root{
background-image: url(./Images/hero-
--common-padding-top-1: 10rem;
section-banner.webp);
--common-padding-top: 12rem;
background-size: cover;
--fs-h2: 3rem;
height: 68.1rem;
}
}
.section-2,.section-5__testimonial-div{
.section-1__span-text{
justify-content: center;
font-size: var(--fs-1-4);
}
font-weight: var(--fw-bold);
.section-2-left,.section-2-right{
}
flex-basis: 80%;
.section-1__main-heading{
}
font-size: var(--fs-h1);
.section-2-right{
font-weight: var(--fw-bold);
margin-top: 5rem;
line-height: 1.2;
}
margin: 0.75rem 0 2.5rem;
.section-4__img-div img:nth-child(2){
}
display: none;
.section-1__button-white,.section-2-
}
right__button-secondary {
.section-4__img-div img:nth-child(3){
padding: 1rem 4.25rem;
margin-top: 0;
border-radius: 3rem;
}
font-size: 1.4rem;
.section-4__img-div{
border: 0;
grid-template-columns: repeat(auto-
outline: 0;
fit,32.5rem);
background-color: var(--pure-white);
justify-content: center;
font-family: inherit;
}
font-weight: var(--fw-500);
.section-4__img-div img{
cursor: pointer;
width: 100%;
}
height: 100%;
/*imp! SECTION-2 CSS */
}
.section-2{
.section-5__testimonial{
flex-basis: 80%;
display: flex; }
.section-5__testimonial-div{
gap: 3rem;
flex-wrap: wrap;
}
justify-content: space-between;
.section-5__counter-div,.section-6__blog-
padding-top: var(--common-padding-top-1);
div{
}
justify-content: center;
.section-2-left,.section-2-right{
}
flex-basis: 50%;
.section-5__counter-div{
}
gap: 7rem;
.section-2-left video{
}
width: 100%;
.section-6__blog{
border-radius: 1rem;
flex-basis: 100%;
}
}
.section-2-right{
.footer{
max-width: 45rem;
margin-top: 0;
}
}
.section-2-right__span{
.footer .responsive-container{
letter-spacing: 0.2rem;
margin-top: 0;
color: var(--secondary-color);
padding-top: 15rem;
font-size: 1.2rem;
padding-bottom: 2rem;
font-weight: var(--fw-light);
justify-content: center;
}
}
.section-2-right__h4{
.footer__about-
font-weight: var(--fw-500);
div,.footer__newsletter,.footer__follow-us{
padding: 1.5rem 0;
flex-basis: 80%;
}
margin-bottom: 5rem;
.section-2-right__p{
}
padding-bottom: 2rem;
.footer__social-links{
}
justify-content: start;
.section-2-right__button-secondary {
}
background-color: var(--secondary-color);
.footer__social-links a{
color: var(--pure-white);
margin-right: 1.5rem;
}
}
/*imp! SECTION-3 CSS */
}
.section-3{
/*imp! PHONE MEDIA QUERY */
padding-top: var(--common-padding-top);
@media screen and (max-width: 600px){
}
:root{
.section-3__p,.section-4__p,.section-
--common-padding-top: 12rem;
5__p,.section-6__p{
--common-padding-top-1: 10rem;
margin-top: 1rem;
--fs-h1: 5rem;
}
--fs-h2: 3rem;
.section-3__card-main-div{
}
display: grid;
.header-section__nav{
grid-template-columns: repeat(auto-
display: none;
fit,34rem);
}
gap: 4rem;
.header-section__top-bar{
margin-top: var(--common-margin-top);
display: none;
justify-content: center;
}
}
.header-section__nav-mobile{
.section-3__card {
display: flex;
padding: 1rem;
justify-content: space-between;
border: 1px solid #ddd;
align-items: center;
border-radius: 0.5rem;
}
background-color: #fff;
.header-section__nav-mobile .navbar__links-
margin-bottom: 1rem;
div{
}
display: none;
.section-3__coffee-descp{
}
display: flex;
.fa-bars:hover + .navbar__links-div{
justify-content: space-between;
display: flex;
align-items: center;
position: absolute;
}
top: 9rem;
.section-3__coffee-descp p{
background-color: #1f1311;
font-size: var(--fs-1-8);
width: 90%;
font-weight: var(--fw-extra-bold);
padding: 5rem;
color: var(--secondary-color);
}
margin-bottom: 2rem;
.navbar__links-div .navbar__links-mobile{
} flex-direction: column;
/*imp! SECTION-4 CSS */ gap: 5rem;
.section-4__img-div{ }
display: grid; .section-1{
grid-template-columns: repeat(3,1fr); padding-top: var(--common-padding-top);
gap: 3rem; background-size: cover;
margin: var(--common-margin-top) 0 12rem; }
} .section-2{
.section-4__img-div img:nth-child(2){ padding-top: 0;
grid-column: 2/4; }
} .section-5__testimonial p{
.section-4__img-div img:nth-child(3){ font-size: 1.4rem;
margin-top: -14rem; }
} .section-5__testimonial p:nth-of-type(1){
/*imp! SECTION-5 CSS */ font-size: 1.6rem;
.section-5{ }
background-color: var(--primary-color); i.fa-star{
padding: var(--common-padding-top-1) 0; margin-right: 0.25rem;
} font-size: 1.2rem;
.section-5__testimonial-div{ }
display: flex; }
flex-wrap: wrap;
margin-top: var(--common-margin-top);
justify-content: space-between;
}
.section-5__testimonial{
flex-basis: 45%;
}
.section-5__testimonial p{
margin: 1.5rem 0 3rem;
}
.section-5__testimonial p:nth-of-type(1){
font-size: var(--fs-1-8);
margin-top: 2rem;
}

You might also like