Learn how to create a professional-looking Starbucks coffee landing page with pure CSS and HTML. Our tutorial will guide you through the process of designing a responsive, easy-to-navigate website layout.
Table of Contents
In this guide, we'll be showing you how to create a Starbucks coffee website landing page using pure CSS and HTML. Whether you're a web design novice or a seasoned pro, our step-by-step tutorial will guide you through the process of designing a responsive, easy-to-navigate website layout. We'll cover everything from planning and creating the HTML structure to styling the website with pure CSS and adding those final touches.
Planning
Before you start building your Starbucks coffee website landing page, it's important to plan out the key elements of your website layout. This includes the header, navigation menu, main content area, and footer. You'll want to create a simple and clean design that is easy to navigate and matches the Starbucks branding. Consider using a color scheme that is consistent with the Starbucks logo and products.
This project is re-created by Ishfaq Ahmed
Orginal Creator: Online Tutorials
All Image Download Link
https://drive.google.com/drive/folders/1OOjAy...Let's start making these amazing Starbucks Coffee Website Landing Page Using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Starbucks coffee website landing page.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our Starbucks coffee website landing page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the Starbucks landing page is in place, the next step is to add styling to the Starbucks landing page using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our Starbucks landing page. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our Starbucks landing page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@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);
} Final Output:
Conclusion:
In conclusion, creating a Starbucks coffee website landing page using pure CSS and HTML is a fun and rewarding project for web designers of all skill levels. By following our step-by-step tutorial, you'll be able to create a professional-looking website that is fully responsive, easy to navigate, and matches the Starbucks branding. So why not give it a try and build your own Starbucks coffee website landing page today?
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
