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.
Here’s a detailed breakdown of the HTML structure and elements:
Document Type Declaration and HTML Tag:
<!DOCTYPE html> <html lang="en">
<!DOCTYPE html>: Declares the document type as HTML5.<html lang="en">: The root element of the HTML document, with lang="en" indicating English as the language.
Head Section:
<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="styles.css">
<title>Starbucks Coffee Website Landing Page</title>
</head>
<meta charset="UTF-8">: Specifies UTF-8 character encoding.<meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures compatibility with the latest Internet Explorer rendering engine.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport width to device width for responsive design.<link rel="stylesheet" href="styles.css">: Links to an external CSS file for styling.<title>Starbucks Coffee Website Landing Page</title>: Sets the title of the webpage that appears in the browser tab.
Body Section:
<body>
<section>
.
.
</section>
</body>
<section>: Contains the main content of the landing page.
Header:
<header>
<a href="#"><img src="https://drive.google.com/file/d/1TmXEA2x-c-wKd14DkVV2UIbYT3REXQcE/view?usp=drive_link" 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>
- Contains the logo and navigation links for the website.
Container Div:
<div class="container">
<div class="text-box">
<h2>Its not just a Coffee <br>Its <span>Starbucks</span></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor modi consequatur nulla, fugit odit rerum quaerat illo at! Nihil velit tempore debitis. Doloribus quasi perspiciatis fuga nulla aspernatur necessitatibus adipisci.</p>
<a href="#">learn More</a>
</div>
<div class="img-box">
<img src="https://drive.google.com/file/d/1g3ZO3gPPgpgXhXawtKR8rZWzS0DuJ-R1/view?usp=drive_link" class="starbucks" alt="">
</div>
</div>
- Text Box: Includes a heading, paragraph, and a "learn more" link.
- Image Box: Displays an image related to Starbucks.
Thumbnail Navigation:
<ul class="thumb">
<li><img src="https://drive.google.com/file/d/1lx91JUOSflnEy3nq4cduH-B1YdpKll3C/view?usp=drive_link" onclick="imgSlider('images/img1.png');changeCircleColor('#017143')"></li>
<li><img src="https://drive.google.com/file/d/1BqFVVNATc6ZmOuSPz62_l9i_ovCwcKmN/view?usp=drive_link" onclick="imgSlider('images/img2.png');changeCircleColor('#0eb7495')"></li>
<li><img src="https://drive.google.com/file/d/1erhdRxMppfhzzUnz9vqBb3qv9A_QQAVQ/view?usp=drive_link" onclick="imgSlider('images/img3.png');changeCircleColor('#d752b1')"></li>
</ul>
- Displays thumbnail images that trigger a JavaScript function (imgSlider and changeCircleColor) to change the main image and circle color.
Social Media Links:
<ul class="social">
<li><a href="#"><img src="https://drive.google.com/file/d/1vilrzZKrDgWw4VEE-Ofiu-6_J3AvAMwc/view?usp=drive_link"></a></li>
<li><a href="#"><img src="https://drive.google.com/file/d/1MV9s1q3unU-psjoxYnZMRRJdYaO3Sa1F/view?usp=drive_link"></a></li>
<li><a href="#"><img src="https://drive.google.com/file/d/11CpXI-0cYMDDKcBOLtS7XYF5uWcBHR9D/view?usp=drive_link"></a></li>
</ul>
- Provides links to social media profiles with corresponding icons.
JavaScript:
<script src="script.js"></script>
- Links to an external JavaScript file for interactivity.
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.
.jpg)
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.
Here's a breakdown of each section and its functionality:
1. Font Import and Global Styles
@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;
}
- @import: Imports multiple fonts from Google Fonts.
- * { ... }: Resets margin and padding for all elements and sets box-sizing to border-box, making it easier to manage layouts. The default font for the page is set to 'Poppins'.
2. Section Styling
section{
position: relative;
width: 100%;
min-width: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
}
- position: relative;: Establishes a positioning context for child elements.
- width: 100%;: Sets the section to span the full width of its container.
- min-width: 100vh;: Ensures the section's minimum width is the height of the viewport.
- padding: 100px;: Adds padding around the content.
- display: flex;: Uses Flexbox for layout, aligning items centrally, and distributing space between them.
- background: #fff;: Sets the background color to white.
3. Header Styling
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;
}
- header: Positioned absolutely at the top, spans the full width, and uses Flexbox to arrange its items.
- .logo: Sets a maximum width for the logo image.
- ul: Displays navigation items in a horizontal row.
- li: Removes default list styling.
- a: Styles navigation links with color, weight, and spacing.
4. Container Styling
.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;
}
- .container: A Flexbox container that aligns and spaces its children.
- .text-box: Contains text elements with maximum width settings.
- h2: Styles the heading with color and font size, highlighting the word "Starbucks" with a different color and weight.
- p: Styles the paragraph text.
- a: Styles the "learn more" button with padding, background color, and rounded corners.
- .img-box: Styles the image container to align its content to the right with specific padding and margin.
- img: Sets a maximum width for the image inside .img-box.
5. Thumbnail Navigation
.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;
}
- .thumb: Positions the thumbnail navigation at the bottom center of the page.
- li: Styles each thumbnail with margins and a transition effect on hover.
- img: Sets a maximum width for thumbnail images.
6. Social Media Links
.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);
}
- .social: Positions social media links vertically centered on the right side.
- li: Removes default list styling.
- a: Styles social media icons with margins, scaling, and color inversion.
7. Circle Effect
.circle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #017143;
clip-path: circle(600px at right 800px);
}
- .circle: Creates a circular background effect that covers the entire section with a green color.
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);
} Step 3 (JavaScript Code):
Function Definition:
function imgSlider(anything) { ... }defines a function named imgSlider that takes one parameter, anything.
Parameter:
- The parameter anything is expected to be a string, specifically the URL or path of an image file.
Document Query:
document.querySelector('.starbucks')selects the first HTML element in the document that has the class name starbucks.
Change Image Source:
.src= anything changes the src attribute of the selected element to the value passed as the anything parameter.
function imgSlider(anything){ document.querySelector('.starbucks').src = anything; }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 😊
