Brewing Excellence: Crafting a Stunning Starbucks Coffee Landing Page with HTML & CSS
In the ever-evolving world of web design, mastering HTML and CSS is like having the perfect blend of coffee beans for a web developer. In this tutorial, we’ll embark on a journey to create a captivating Starbucks Coffee Landing Page using the magic of HTML and CSS. From the aroma of well-structured HTML tags to the artistry of CSS styling, we’ll explore the essential ingredients that make this virtual coffee haven come to life.
To start our creative brewing process, we’ll delve into the structure of the Starbucks Coffee Landing Page, breaking down the HTML elements that form the backbone of our design. From the hero section that welcomes visitors to the enticing menu section showcasing the finest brews, each element will be carefully crafted to capture the essence of the Starbucks experience.
With the foundation set, we’ll then turn our attention to the CSS side of things. From choosing the perfect color palette that mirrors the warmth of a cozy coffee shop to fine-tuning the typography for that distinct Starbucks feel, every CSS rule will contribute to the overall visual appeal of our landing page. We’ll explore responsive design principles to ensure that our creation looks just as inviting on a mobile device as it does on a desktop.
But this tutorial isn’t just about code; it’s about understanding the art of storytelling through web design. We’ll discuss the importance of creating a seamless user experience, incorporating enticing visuals, and strategically placing call-to-action buttons to keep visitors engaged and encourage exploration.
Step 1(HTML Code):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Starbucks Coffee Website Landing Page - CodePicker</title>
</head>
<body>
<section>
<div class="circle"></div>
<header>
<a href="#"><img src="./images/logo.png" class="logo"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">What's New</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="container">
<div class="text-box">
<h2>Its not just a Coffee <br>Its <span>Starbucks</span></h2>
<p>Starbucks Corp <b>(Starbucks)</b> is a specialty coffee retailer. It roasts, markets, and retails specialty coffee. The company, through its stores, offers several blends of coffee, handcrafted beverages, merchandise, and food items.</p>
<a href="3">learn More</a>
</div>
<div class="img-box">
<img src="./images/img1.png" class="starbucks" alt="">
</div>
</div>
<ul class="thumb">
<li><img src="./images/thumb1.png" onclick="imgSlider('img1.png');changeCircleColor('#017143')"></li>
<li><img src="./images/thumb2.png" onclick="imgSlider('img2.png');changeCircleColor('#0eb7495')"></li>
<li><img src="./images/thumb3.png" onclick="imgSlider('img3.png');changeCircleColor('#d752b1')"></li>
</ul>
<ul class="social">
<li><a href="#"><img src="./images/facebook.png"></a></li>
<li><a href="#"><img src="./images/instagram.png"></a></li>
<li><a href="#"><img src="./images/twitter.png"></a></li>
</ul>
</section>
</body>
</html>Step 2(CSS Code):
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,300;1,700&family=Poppins:wght@400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
section{
position: relative;
width: 100%;
min-width: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
header{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo{
position: relative;
max-width: 80px;
}
header ul{
position: relative;
display: flex;
}
header ul li{
list-style: none;
}
header ul li a{
display: inline-block;
color: #333;
font-weight: 800;
margin-left: 40px;
text-decoration: none;
}
.container{
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .text-box{
position: relative;
max-width: 600px;
}
.container .text-box h2{
color: #333;
font-size: 4em;
font-weight: 500px;
}
.container .text-box h2 span{
color: #017143;
font-size: 1.2em;
font-weight: 900;
}
.container .text-box p{
color: #333;
}
.container .text-box a{
display: inline-block;
margin-top: 20px;
padding: 8px 20px;
background: #017143;
color: #fff;
border-radius: 40px;
font-weight: 500;
letter-spacing: 1px;
text-decoration: none;
}
.container .img-box{
width: 600px;
display: flex;
justify-content: flex-end;
padding-right: 50px;
margin-top: 50px;
}
.container .img-box img{
max-width: 340px;
}
.thumb{
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
display: flex;
}
.thumb li{
list-style: none;
display: inline-block;
margin: 0 20px;
padding: ;
cursor: pointer;
transition: 0.5s;
}
.thumb li:hover{
transform: translateY(-15px);
}
.thumb li img{
max-width: 600px;
}
.social{
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.social li {
list-style: none;
}
.social li a{
display: inline-block;
margin: 5px 0;
transform: scale(0.6);
filter: invert(1);
}
.circle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #017143;
clip-path: circle(600px at right 800px);
}All Image Download Link
https://drive.google.com/drive/folders/1OOjAy4cfM5tDKceT8-bEI5M78_98iRLV?usp=sharing
Conclusion:
As we wrap up our journey into the world of HTML and CSS, we’ve not just created a Starbucks Coffee Landing Page; we’ve crafted an immersive digital experience that mirrors the warmth and charm of a visit to your favorite coffeehouse. The combination of well-structured HTML and carefully styled CSS has allowed us to blend functionality with aesthetics, resulting in a visually stunning and user-friendly landing page.
Remember, web design is an ever-evolving art, and the skills you’ve honed in this tutorial are just the beginning. Keep experimenting, stay curious, and continue to refine your craft. Whether you’re a seasoned developer or just starting your coding journey, the ability to create visually appealing and functional web pages is a skill that will serve you well.
So, raise a virtual coffee cup to your newfound skills, and may your future web design endeavors be as rich and satisfying as a perfectly brewed cup of Starbucks coffee. Cheers to crafting excellence with HTML and CSS!
Thank you for reading this guide on building an awesome project with HTML and CSS! I hope it helps you in creating your own Coffee Landing Page. If you have any further questions [comment], feel free to ask.
Happy coding!
CodePicker :)
