Coffee landing Page using HTML and CSS with free source code
Introduction
Hello coders, our today’s project is about a coffee shop landing page. We’ve developed this simple landing page using HTML and CSS. We’ve used HTML to create structure of the webpage and later on CSS is used to style our webpage. Images are used in this project as well.
A coffee is that we generally use in our day to day life. Creating this type of landing page isn’t a challenging task, all you need is knowledge of html and css. If you want to add some functionality then you can explore JavaScript as well.
This project is a one page simple landing page. By creating this you can develop your coding skills and revise all your previous knowledge. You can add your own idea’s in this project to make it even more better. We’ve used HTML and CSS to make this project.
Let’s see and and understand our code.
index.html
Any coffee shop business requires an online presence to interface with the clientele satisfactorily. This landing page is more or less like an eye-catcher that sets the tone for a proper customer experience. Let us now see how a structure for a very rudimentary but powerful coffee shop landing page can be represented in HTML and CSS.
The HTML code gives us the framework of our landing page with an explicit semantic structure. At the top, we declare that it shall be an HTML5 document, associated with the declaration: <!DOCTYPE html>. On top, we identify the language to be English with <html lang=”en”> and the character set is to be set at UTF-8 for maximum compatibility and proper display of text.
In the head section, adding meta tags like <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> and <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> will enhance the compatibility and responsiveness so that our page will show up perfectly on all devices. Linking to an external CSS file by <link rel=”stylesheet” href=”styles.css”> enables one to keep all the styling completely separate from our HTML. It allows our code to remain clean and easier for management.
In the <body> section, we have all the content that will be displayed to the user. For that, we have a main wrapper, <div class=”container”>, centering our content. The <nav> element includes the logo with a link, <a href=”#” id=”logo”>Coffe</a>, and a navigation menu with different links to sections in the site, which improves navigation for the user.
Main content goes inside a <div class=”content”>. Inside of that, the text is further enclosed within a <div class=”text”>, which has a big <h1> heading and a single descriptive paragraph. The text is an introduction to the specialty offerings of the coffee shop which will engage and incite the visitor to find out more. Beside that, in a <div class=”image”> there is an <img> element with an appealing image of coffee and pastries to be attractive.
This is, in effect, an overview of the HTML that can form the basis of a visually appealing and user-friendly coffee shop landing page. It includes a compelling online presence when joined with thoughtful CSS styling to draw customers in and reflect the style of a coffee shop as a whole.
<!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">
<title>Document</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/07/post3-768x366.png 768w, https://developergoutam.com/wp-content/uploads/2024/07/post3-300x143.png 300w, https://developergoutam.com/wp-content/uploads/2024/07/post3-1024x488.png 1024w, https://developergoutam.com/wp-content/uploads/2024/07/post3-1536x732.png 1536w, https://developergoutam.com/wp-content/uploads/2024/07/post3-150x71.png 150w, https://developergoutam.com/wp-content/uploads/2024/07/post3-450x214.png 450w, https://developergoutam.com/wp-content/uploads/2024/07/post3-1200x572.png 1200w, https://developergoutam.com/wp-content/uploads/2024/07/post3-600x286.png 600w, https://developergoutam.com/wp-content/uploads/2024/07/post3.png 1853w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<nav>
<a href="#" id="logo">Coffe</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content">
<div class="text">
<h1>Specialty Coffee <br> and Delicious Treats</h1>
<p>Indulge in the rich aroma of freshly brewed coffee and savor the exquisite flavors of our handcrafted pastries. Our cozy coffee shop is the perfect spot to relax, recharge, and enjoy your favorite brew.</p>
</div>
<div class="image">
<img decoding="async" src="img.png" alt="coffee and pastries">
</div>
</div>
</div>
</body>
</html>
styles.css
Font and Global Styles
The first responsibility towards creating a stylish web page is to introduce an appropriate font and setting for global styles. Importing the “Poppins” font from Google Fonts gives us a clean and modern look that corresponds perfectly with the atmosphere in a coffee shop. Global styles, margin, padding, or box-sizing, are set in a manner that keeps everything consistent and provides a clean slate for all elements.
Background and Layout
The body of the webpage will be gradient-filled, flowing into deep coffee hues, which gives off a very warm feeling. Flexbox layout assures a centering effect on content and equal spacing. In addition to this, a circular background effect gives beauty and depth to the design.
Container and Navigation
The outer container has styles that center the content, space it, and provide a semitransparent background that lets the gradient show through. It also has rounded corners and a blur effect with a very subtle shadow. The navigation bar is styled using Flexbox, which aligns items horizontally and spaces out the elements.
Logo and Navigation Links
The logo is styled with uppercase text, white color, and a transition effect on hover, thus making the logo an interactive visual. Navigation links are styled to remove default styles and add a hover effect that changes color and underlines the link using the defined theme color, providing visual continuity.
Content Area
The content area uses flexbox for the positioning of text and pictures side by side. An important message and image come straight into view for the visitor. On the text side, there is a large, bold heading and a paragraph of text setting out what the offer is of this coffee shop, and on the image side, a relevant visual, increasing the overall appeal.
Responsive Design
The media query permits adaptation of the styles concerning screen size, guaranteeing excellent display of the webpage on all devices. The layout changes to a vertical orientation on tablets and small screens, and adjustments are made to font sizes and spacing to retain readability and usability for effective functioning. This adjustment shall ensure fluent experience for all the users using any of the devices.
Conclusion:
Carefully selecting fonts, declaring global styles, and working out advanced CSS techniques for flexbox and media queries, we will create a trendy and responsive landing page for a coffee shop. It gives a sense of warmth and cosiness, making users want to know more and come to the coffee shop. Apply these techniques, and you’ll soon have your captivating online presence that showcases the soul of your coffee shop and attracts prospects.
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
--coffe : #C8835A;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
background: linear-gradient(to left,#2b1301
, #491f04
);
display: flex;
height: 100vh;
}
body::after{
content: '';
position: absolute;
inset: 0;
background: var(--coffe);
clip-path: circle(30% at right);
z-index: -1;
}
.container{
width: 80%;
min-height: 80%;
margin: auto;
padding: 1rem 0;
color: white;
background: rgba(255, 255, 255, 0.046);
border-radius: 1rem;
backdrop-filter: blur(10px);
box-shadow: 3px 3px 15px rgba(0, 0, 0, .5);
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
margin: auto;
padding: 1rem 0;
}
#logo{
font-size: 40px;
text-transform: uppercase;
text-decoration: none;
color: white;
font-weight: 200;
letter-spacing: 5px;
transition: all .2s ease-in;
}
#logo:hover{
letter-spacing: 12px;
color: var(--coffe);
}
nav ul{
list-style: none;
display: flex;
justify-content: end;
flex: 1;
gap: 7rem;
}
nav ul li a{
all: unset;
font-weight: 200;
font-size: 20px;
letter-spacing: 1px;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.543);
cursor: pointer;
transition: .3s ease-in;
position: relative;
}
nav ul li a:hover{
color: var(--coffe);
}
nav ul li a::after{
content: '';
position: absolute;
bottom: -2px;
left: 0%;
width: 0%;
height: 2px;
background: var(--coffe);
border-radius: 1rem;
transition: .2s ease-in;
}
nav ul li a:hover::after{
width: 100%;
}
.content{
display: flex;
justify-content: space-between;
gap: 1rem;
width: 80%;
margin: auto;
align-items: center;
min-height: 60vh;
}
.content .text{
width: 50%;
}
.content .text h1{
font-size: 3vw;
text-transform: uppercase;
letter-spacing: 3px;
color: white;
line-height: 110%;
margin-bottom: 1.5rem;
}
.content .text p{
font-weight: 300;
font-size: 1vw;
}
.content img{
width: 250px;
}
@media only screen and (max-width: 850px){
nav, .content, .text{
width: 90% !important;
}
nav #logo{
font-size: 23px;
}
nav ul{
gap: 2rem;
}
.content{
flex-direction: column-reverse;
justify-content: center;
text-align: center;
width: 100%;
margin-bottom: 1rem;
}
.content h1{
font-size: 40px !important;
}
.content p{
font-size: 16px !important;
text-align: center;
}
.content img{
width: 150px;
}
}
@media only screen and (max-width: 550px){
nav ul{
gap: 1.5rem;
}
nav ul a{
font-size: 14px !important;
}
.content h1{
font-size: 30px !important;
}
.content p{
font-size: 14px !important;
}
.content img{
width: 100px;
}
}