Discover how to create a visually stunning pet food shop template using HTML, CSS, and JavaScript. Elevate your online presence and attract more customers today!
Table of Contents
Welcome to our beginner-friendly guide to creating an awesome online pet food shop! If you've ever wanted to build your own website but felt overwhelmed, you're in the right place. We'll walk you through the basics of using HTML, CSS, and JavaScript to make a website that's easy to use and looks great. By the end, you'll have all the tools you need to create a website that pets (and their owners) will love! Let's get started!
Source Code
Step 1 (HTML Code):
The first thing we need to do is create our HTML File for pet food shop landing page. We'll start with well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Let's break down the different sections of the code to understand its components and functionality:
1. HTML Document Structure
The document starts with the <html> tag, specifying the language as English (lang="en"). The <head> section contains meta information and links to external resources:
2. Meta Tags and Title:
<meta charset="UTF-8">sets the character encoding to UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">ensures the website is responsive, adjusting to different screen sizes.<title>Pet Shop Template</title>sets the title of the webpage displayed in the browser tab.
External Resources:
<link rel="stylesheet" href="styles.css">links to an external CSS file for styling.<link rel="preconnect" href="https://font..m">and<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>improve performance by preconnecting to font resources.<link rel="stylesheet" href="https://cdn.jsdel..ns.min.css">and<link href="https://fonts.go..." rel="stylesheet">include external font and icon styles.<script src="https://kit.fo...f.js" crossorigin="anonymous"></script>,<script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>, and<script src="https://code.jq.."></script>link to external JavaScript libraries for functionality.<script src="script.js"></script>links to a custom JavaScript file for additional functionality.
3. Body Content
Header Section - The <header> section contains the navigation bar and branding:
<div class="logo">DOG'S BITE</div>displays the logo.<ul class="navigation">is an unordered list containing navigation links to different sections of the page (HOME, SHOP, ABOUT, REVIEWS, CONTACT).<div class="hamburger">and<div class="alert">manage the mobile navigation menu, utilizing icons for opening and closing.
Home Section - The <section class="banner" id="banner"> acts as the homepage banner:
<div class="title"><h1>YOUR BEST FRIEND<br>DESERVES THE<br>BEST MEAL</h1></div>displays a welcoming message.<a href="" class="btn">SHOP NOW</a>is a button linking to the shop section.
Shop Section - The <section class="shop" id="shop"> showcases new products:
<div class="title"><h2 class="titetext">NEW PRODUCTS</h2><p>Lorem ipsum...</p></div>provides a section title and description.<div class="content">contains multiple product boxes, each with an image, product name, price, and a "Buy Now" button.
About Section - The <section class="about" id="about"> describes the company:
<div class="title"><h2 class="titetext">ABOUT US</h2></div>sets the title.<div class="imgtext">includes an image and informational text about the company's values (Natural Ingredients, 100% Home Made, Sourced in US).
Reviews Section - The <section class="review" id="review"> features customer reviews:
<div class="title"><h2 class="titetext">DOGGO REVIEWS</h2><p>“ Dogs do speak...</p></div>introduces the section.<div class="container">contains a grid of images and text highlighting happy customers and their testimonials.
Contact Section - The <section class="contact" id="contact"> provides contact information and links:
<div class="footer">includes navigation links, informational text, customer service details, and social media links.
Form Section - The <section class="form"> invites users to join the community:
<h1>JOIN OUT FURRY COMMUNITY</h1><input type="email" placeholder="Enter your email here"><button>JOIN</button>creates a subscription form.
Credits Section - The <section class="strip"> gives design and coding credits:
<h1>Design and code by Gururaj</h1>credits the creator.- Social media icons link to the creator's profiles.
Step 2 (CSS Code):
Next, we need to style our pet food shop landing page by adding our CSS. This will give our pet food shop 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.
Let's break down the key parts:
1. Universal Selector (*):
- Resets margin and padding to 0 for all elements.
- box-sizing: border-box; ensures that padding and border are included in the element's total width and height.
- scroll-behavior: smooth; provides smooth scrolling behavior.
- Sets the default font family to 'Oswald' and fallback to a generic sans-serif font.
2. .alert:
- Styles for an alert component.
- Positioned fixed at the top right with some spacing.
- Uses a light background with dark text.
- Adds a box shadow for depth effect.
- Transitions the transform property for smooth animation.
- Has a close button (denoted by i tag).
3. .banner:
- Styles for a banner section, typically with a background image.
- Center aligns content vertically and horizontally.
- Uses a gradient overlay on the background image.
- Sets padding and margin to create space around the content.
4. header:
- Styles for a header/navigation bar.
- Positioned fixed at the top.
- Contains a logo, navigation links, and possibly a hamburger menu for smaller screens.
- Uses flexbox for layout.
5. .btn:
- Styles for buttons.
- Uses padding, background color, and transition for hover effect.
6. section:
- Applies padding to sections of the page.
7. .shop, .about, .review, .contact:
- Styles for different sections of the webpage.
8. Media Queries:
- Adjustments for responsiveness at different screen sizes.
- Changes layout and styling properties for various screen widths, ensuring the site looks good on different devices.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Oswald', sans-serif;
}
.alert {
position: fixed;
top: 5%;
right: 2%;
background: rgb(255,250,245);
color: #fff;
font-weight: 800;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
padding: 20px;
width: 300px;
height: 100vh;
border-radius: 10px;
transform: translateX(150%);
transition: transform 0.3s ease-in-out;
}
.alert .navigation1
{
display: flex;
flex-direction: column;
list-style: none;
text-align: center;
}
.alert .navigation1 li a
{
text-decoration: none;
color: #57557D;
}
.alert p {
margin: 30px;
letter-spacing: 1px;
}
.alert i {
display: flex;
justify-content: flex-end;
font-size: 30px;
cursor: pointer;
color: #57557D;
}
body
{
background: rgb(255,250,245);
}
.banner
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
position: relative;
background: rgb(255,250,245);
background: linear-gradient(rgba(0,0,0,0.40),rgba(0,0,0,0.40)),url(https://i.postimg.cc/Pr1sw3SW/wp11428610-dogs-and-cats-spring-wallpapers.jpg);
background-size: cover;
background-attachment: fixed;
padding-top: 100px;
margin: 0px 80px;
}
header .hamburger
{
display: none;
}
header
{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
top: 0;
left: 0;
z-index: 1;
padding: 20px 60px;
background: rgb(255,250,245);
position: fixed;
border-bottom: 1px solid #aaa;
}
header .logo
{
color: rgb(48,47,81);
font-weight: bold;
font-size: 2.5em;
text-decoration: none;
}
header ul
{
display: flex;
justify-content: space-between;
flex-direction: row;
gap: 60px;
list-style: none;
}
header .navigation li a
{
text-decoration: none;
color: rgb(48,47,81);
transition: .5s;
}
header .navigation li a:hover{
color: rgb(153, 150, 252);
}
.banner .title
{
max-width: 900px;
text-align: left;
}
.banner .title h1
{
text-align: center;
font-size: 3em;
color: #fff;
letter-spacing: 3px;
}
.btn
{
padding: 20px 30px;
color: #fff;
text-decoration: none;
background: rgb(48,47,81);
margin-top: 30px;
font-weight: 300;
transition: .5s;
}
.btn:hover
{
background: rgb(91, 89, 151);
}
section
{
padding: 100px 0;
}
.shop .title
{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 15px;
}
.title h2
{
font-size: 2.2em;
color: rgb(48,47,81);
}
.title p
{
font-size: 1.2em;
}
.shop .content
{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: 30px;
}
.shop .content .box
{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 30px;
gap: 10px;
}
.shop .content .box .text
{
font-size: 1.2em;
color: rgb(48,47,81);
}
.shop .content .box .price
{
color: rgb(48,47,81);
}
.shop .content .box .imgbtn a
{
text-decoration: none;
color: #fff;
background: rgb(48,47,81);
width: 100%;
padding: 5px 30px;
visibility: hidden;
}
.shop .content .box:hover .imgbtn a
{
visibility: visible;
}
.sall
{
text-decoration: none;
color: rgb(48,47,81);
border: 2px solid rgb(48,47,81);
padding: 5px 30px;
transition: .5s;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.sall:hover
{
background: rgb(48,47,81);
color: #fff;
}
.about .line
{
width: 100px;
border-top: 1px solid black;
}
.about
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.about .title h2
{
margin-bottom: 50px;
}
.imgtext
{
display: flex;
justify-content: space-between;
position: relative;
flex-wrap: wrap;
}
.imgtext img
{
height: 110vh;
background-size: cover;
width: 100%;
}
.imgtext .info
{
position: absolute;
background: rgb(244,195,91);
height: 100%;
opacity: .90;
left: 100px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
width: 450px;
padding: 110px;
color: rgb(48,47,81);
}
.imgtext .info .infocontent
{
padding: 10px 0;
border-bottom: 1px solid rgb(48,47,81);
}
.imgtext .info .infocontent h3
{
font-size: 2em;
}
.imgtext .info .infocontent p
{
font-style: italic;
padding: 10px 0;
}
.review .title
{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 15px;
}
.container
{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.container img
{
width: 300px;
height: 300px;
}
.container .bbox
{
width: 300px;
height: 300px;
}
.container .cbox2
{
background: #857C48;
color: #fff;
position: relative;
}
.container .cbox2 h1
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .cbox4
{
background: #57557D;
color: #fff;
position: relative;
}
.container .cbox4 .boxdetail
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .cbox5
{
background: #FEC74F;
color: rgb(48,47,81);
position: relative;
}
.container .cbox5 .boxdetail
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .cbox7
{
background: #F88D58;
color: rgb(48,47,81);
position: relative;
}
.container .cbox7 .boxdetail
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contact
{
margin: 0 80px;
border-top: 1px solid rgb(48,47,81);
border-bottom: 1px solid rgb(48,47,81);
}
.contact .footer
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer .links .navigation
{
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 20px;
list-style: none;
}
.footer .links .navigation li a
{
text-decoration: none;
color: rgb(48,47,81);
transition: .5s;
font-weight: bold;
font-size: 1.3em;
}
footer .links .navigation li a:hover{
color: rgb(153, 150, 252);
}
.footer .info
{
display: flex;
justify-content: center;
flex-direction: column;
gap: 10px;
width: 200px;
font-size: 1.1em;
}
.footer .info h1
{
color: rgb(48,47,81);
text-align: center;
}
.footer .cs
{
display: flex;
flex-direction: column;
color: rgb(48,47,81);
}
.footer .cs ul
{
margin-top: 10px;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 10px;
list-style: none;
}
.footer .cs li
{
text-decoration: none;
color: rgb(48,47,81);
transition: .5s;
font-size: 1.1em;
}
.footer .slinks
{
display: flex;
flex-direction: column;
color: rgb(48,47,81);
}
.footer .slinks .link
{
margin-top: 10px;
}
.form
{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
.form h1
{
font-size: 2em;
color: rgb(48,47,81);
}
.form input
{
padding: 10px 250px;
background: transparent;
}
.form button
{
padding: 10px 300px;
color: #fff;
background: #F88D58;
border: none;
cursor: pointer;
letter-spacing: 2px;
}
.strip
{
background: rgb(48,47,81);
width: 100%;
height: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.strip h1
{
color: #fff;
font-weight: 300;
}
.strip .icons a{
color: #fff;
}
@media (max-width: 991px){
.banner
{
margin: 0px;
}
.banner .title h1 {
font-size: 2em;
}
.btn {
padding: 10px 30px;
}
.shop .title p{
text-align: center;
}
.contact
{
margin: 0px;
}
.about
{
display: flex;
flex-direction: column;
}
.imgtext img
{
width: 350px;
object-fit: cover;
}
.imgtext .info
{
width: 300px;
left: 30px;
padding: 20px 20px;
}
.shop .content
{
justify-content: center;
}
.form input
{
padding: 10px 80px;
}
.form button
{
padding: 10px 80px;
}
.contact .footer
{
display: flex;
justify-content: center;
flex-direction: column;
background: rgb(48,47,81);
color: #fff;
}
.footer .links .navigation li a
{
color: #fff;
}
.footer .info h1
{
color: #fff;
text-align: left;
}
.footer .cs
{
color: #fff;
}
.footer .cs li
{
color: #fff;
}
.footer .slinks
{
color: #fff;
}
.footer .slinks .link a
{
text-decoration: none;
color: #fff;
}
.contact .footer {
padding: 30px 20px;
gap: 50px;
}
header .navigation
{
display: none;
}
header .hamburger
{
display: block;
}
header .logo
{
font-size: 1.5em;
}
}
@media (min-width: 768px)and (max-width: 991px){
.about
{
display: flex;
flex-direction: column;
}
.imgtext img
{
width: 700px;
object-fit: cover;
height: 700px;
}
.imgtext .info
{
width: 650px;
left: 30px;
justify-content: center;
gap: 60px;
}
header .hamburger
{
display: block;
}
header .logo
{
font-size: 1.5em;
}
} Step 3 (JavaScript Code):
The JavaScript code handles two main functionalities: displaying and hiding an alert, and revealing elements with a scroll effect.
1. Alert Functionality:
- When the document is ready ($(document).ready()), it sets up event listeners for three classes: .on, .close, and .out.
- When an element with the class .on is clicked, it moves the element with the class .alert to the left, making it visible on the screen.
- When an element with the class .close is clicked, it moves the .alert element back to the right, hiding it from view.
- Similarly, when an element with the class .out is clicked, it also moves the .alert element back to the right, hiding it.
2. Scroll Reveal:
- It initializes the ScrollReveal library with the reset option set to true.
- Then, it applies the reveal effect to several elements on the page, such as .banner, .shop, .about, .review, .contact, .form, and .strip.
- Each element is revealed with a specified easing effect ("ease-in") and a delay of 100 milliseconds after scrolling.
$(document).ready(function(){
$(".on").click(function() {
$('.alert').css({
'transform': 'translateX(0)',
});
});
$(".close").click(function() {
$('.alert').css({
'transform': 'translateX(150%)',
});
});
$(".out").click(function(){
$('.alert').css({
'transform': 'translateX(150%)',
});
})
})
ScrollReveal({ reset: true });
ScrollReveal().reveal('.banner', { easing:"ease-in", delay: 100});
ScrollReveal().reveal('.shop', { easing: "ease-in", delay: 100});
ScrollReveal().reveal('.about', { easing: "ease-in", delay: 100 });
ScrollReveal().reveal('.review', { easing: "ease-in", delay: 100 });
ScrollReveal().reveal('.contact', { easing: "ease-in", delay: 100 });
ScrollReveal().reveal('.form', { easing: "ease-in", delay: 100 });
ScrollReveal().reveal('.strip', { easing: "ease-in", delay: 100 });Final Output:
Conclusion:
Congratulations on completing our guide to crafting an engaging online pet food shop template! By now, you've learned how to use HTML, CSS, and JavaScript to create a website that not only looks fantastic but also provides a seamless browsing experience for your customers.
Remember, the key to success is to prioritize user experience, ensuring that your website is easy to navigate and visually appealing across all devices. Additionally, don't forget the importance of search engine optimization (SEO) to attract more visitors to your site.
With your newfound knowledge and skills, you're well-equipped to embark on your journey of building and optimizing your very own pet food shop website. So go ahead, unleash your creativity, and watch your online pet store thrive!
Code by: Gururaj Math
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 😊
