Pet Food Shop Website Using Html CSS and JavaScript
Introduction
Hello coders, welcome to another new blog. Today in this article we’ll build a kitter pet shop which is Frontend project made up of HTML, CSS and JavaScript. This project is about a pet food store where you can get all the essential pet food for your loved one pet animals.
To create this pet food store we’ve used HTML, CSS and JavaScript. Using these three core frontend technologies we’ve build our Pet food store. HTML sets up the basic structure of our website while the CSS adds interactive styling to our webpage and makes our UI better and visually appealing. JavaScript adds functionality to our webpage for smaller screens.
If you guys also want to create this type of project then all you need is the knowledge of HTML, CSS and JavaScript. If you’ve good command in these techs then you’re good to go. Usually this type of interactive project enhances our coding and UI skills which are important to industry point of view. Let’s dive into our code.
HTML (index.html)
Get Discount on Top Educational Courses
This is our HTML code which sets up the basic structure of our website. In other words we can say that it builds a skeleton of our website. Let’s breakdown the code.
- <! DOCTYPE html> : This defines the type of our document and ensures that our file a HTML code file.
- <title> : It sets the title of our portfolio page.
- <link> : This tag links external CSS file and all the other links required for our project like favicon etc.
- <body> : This contains all the content of the page.
- <header> : Header contains all the content on the head part of the project. It contains logo, navbar and other essential buttons. Header contains some div tags in which all the content of logo, navbar and cta buttons are wrapped. It contains different tags and attributes according to the section.
- <section class=”hero”> : This section contains a background image, heading, text and a button. This is what the hero section contains.
- <section class=”category”> : Category section contains a container div in which all the content is wrapped. This section contains some heading and then for each product it contains a image and descriptive name.
- <section class=”offer”> : This section contains all the latest deals and offers on the store. A main container div contains all the content on the section including a image, text and read more button.
- <section class=”product”> : It starts with a heading on the top of the section. For each product there is div with the class product card. Each div with this class contains two images, add to cart button and some outline icon. One image will show the front part of product and other will show other part on hover.
- <section class=”services”> : Services section contains all the pet services provided by the store. It contains a image on top of it then some heading and then four card with the services and description.
- <section class=”cta”> : CTA section contains a bg image as well as some heading, text and button to setup the entire section.
- <section class=”brand”> : Brand section contains one heading at top of the section and then some cards wrapped in div to display all the brand affiliated to the store.
- <footer> : footer contains all the quick links along with address and contact info of the store so that user can easily contact and locate the store.
- There is a button called scroll to top which will work after adding functionality.
- <script> : This tag links all the script files to the HTML page.
<!--
- primary meta tag
-->
<title>Kitter - Hight Quality Pet Food</title>
<!--
- favicon
-->
<!--
- custom css link
-->
<!--
- google font link
-->
<!--
- preload images
-->
<!--
- #HEADER
-->
<header class="header" data-header>
<div class="container">
<button class="nav-toggle-btn" aria-label="toggle manu" data-nav-toggler>
</button>
<a href="#" class="logo">Kitter</a>
<nav class="navbar" data-navbar>
<ul class="navbar-list">
<li class="navbar-item">
<a href="#home" class="navbar-link" data-nav-link>Home</a>
</li>
<li class="navbar-item">
<a href="#shop" class="navbar-link" data-nav-link>Shop</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link" data-nav-link>Collections</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link" data-nav-link>Blogs</a>
</li>
<li class="navbar-item">
<a href="#" class="navbar-link" data-nav-link>Contact</a>
</li>
</ul>
<a href="#" class="navbar-action-btn">Log In</a>
</nav>
<div class="header-actions">
<button class="action-btn" aria-label="Search">
</button>
<button class="action-btn user" aria-label="User">
</button>
<button class="action-btn" aria-label="cart">
<span class="btn-badge">0</span>
</button>
</div>
</div>
</header>
<main>
<article>
<!--
- #HERO
-->
<section class="section hero has-bg-image" id="home" aria-label="home" style="background-image: url('./assets/images/hero-banner.jpg')">
<div class="container">
<h1 class="h1 hero-title">
<span class="span">High Quality</span> Pet Food
</h1>
<p class="hero-text">Sale up to 40% off today</p>
<a href="#" class="btn">Shop Now</a>
</div>
</section>
<!--
- #CATEGORY
-->
<section class="section category" aria-label="category">
<div class="container">
<h2 class="h2 section-title">
<span class="span">Top</span> categories
</h2>
<ul class="has-scrollbar">
<li class="scrollbar-item">
<div class="category-card">
<figure class="card-banner img-holder" style="--width: 330;--height: 300">
<img loading="lazy" decoding="async" src="./assets/images/category-1.jpg" width="330" height="300" loading="lazy" alt="Cat Food" class="img-cover">
</figure>
<h3 class="h3">
<a href="#" class="card-title">Cat Food</a>
</h3>
</div>
</li>
<li class="scrollbar-item">
<div class="category-card">
<figure class="card-banner img-holder" style="--width: 330;--height: 300">
<img loading="lazy" decoding="async" src="./assets/images/category-2.jpg" width="330" height="300" loading="lazy" alt="Cat Toys" class="img-cover">
</figure>
<h3 class="h3">
<a href="#" class="card-title">Cat Toys</a>
</h3>
</div>
</li>
<li class="scrollbar-item">
<div class="category-card">
<figure class="card-banner img-holder" style="--width: 330;--height: 300">
<img loading="lazy" decoding="async" src="./assets/images/category-3.jpg" width="330" height="300" loading="lazy" alt="Dog Food" class="img-cover">
</figure>
<h3 class="h3">
<a href="#" class="card-title">Dog Food</a>
</h3>
</div>
</li>
<li class="scrollbar-item">
<div class="category-card">
<figure class="card-banner img-holder" style="--width: 330;--height: 300">
<img loading="lazy" decoding="async" src="./assets/images/category-4.jpg" width="330" height="300" loading="lazy" alt="Dog Toys" class="img-cover">
</figure>
<h3 class="h3">
<a href="#" class="card-title">Dog Toys</a>
</h3>
</div>
</li>
<li class="scrollbar-item">
<div class="category-card">
<figure class="card-banner img-holder" style="--width: 330;--height: 300">
<img loading="lazy" decoding="async" src="./assets/images/category-5.jpg" width="330" height="300" loading="lazy" alt="Dog Sumpplements" class="img-cover">
</figure>
<h3 class="h3">
<a href="#" class="card-title">Dog Sumpplements</a>
</h3>
</div>
</li>
</ul>
</div>
</section>
<!--
- #OFFERS
-->
<section class="section offer" aria-label="offer">
<div class="container">
<ul class="grid-list">
<li>
<div class="offer-card has-bg-image img-holder" style="background-image: url('./assets/images/offer-banner-1.jpg');--width: 540;--height: 374">
<p class="card-subtitle">Selected Items. Online Only.</p>
<h3 class="h3 card-title">
Hot Summer <span class="span">Deals</span>
</h3>
<a href="#" class="btn">Read More</a>
</div>
</li>
<li>
<div class="offer-card has-bg-image img-holder" style="background-image: url('./assets/images/offer-banner-2.jpg');--width: 540;--height: 374">
<p class="card-subtitle">Treats & Grooming</p>
<h3 class="h3 card-title">
Spoil your true <span class="span">love</span>
</h3>
<a href="#" class="btn">Read More</a>
</div>
</li>
<li>
<div class="offer-card has-bg-image img-holder" style="background-image: url('./assets/images/offer-banner-3.jpg');--width: 540;--height: 374">
<p class="card-subtitle">Our Brand You Will Love</p>
<h3 class="h3 card-title">
New in this <span class="span">year</span>
</h3>
<a href="#" class="btn">Read More</a>
</div>
</li>
</ul>
</div>
</section>
<!--
- #PRODUCT
-->
<section class="section product" id="shop" aria-label="product">
<div class="container">
<h2 class="h2 section-title">
<span class="span">Best</span> Seller
</h2>
<ul class="grid-list">
<li>
<div class="product-card">
<div class="card-banner img-holder" style="--width: 360;--height: 360">
<img loading="lazy" decoding="async" src="./assets/images/product-1.jpg" width="360" height="360" loading="lazy" alt="Commodo leo sed porta" class="img-cover default">
<img loading="lazy" decoding="async" src="./assets/images/product-1_0.jpg" width="360" height="360" loading="lazy" alt="Commodo leo sed porta" class="img-cover hover">
<button class="card-action-btn" aria-label="add to card" title="Add To Card">
</button>
</div>
<div class="card-content">
<div class="wrapper">
<div class="rating-wrapper">
</div>
<span class="span">(1)</span>
</div>
<h3 class="h3">
<a href="#" class="card-title">Commodo leo sed porta</a>
</h3>
$15.00
</div>
</div>
</li>
<li>
<div class="product-card">
<div class="card-banner img-holder" style="--width: 360;--height: 360">
<img loading="lazy" decoding="async" src="./assets/images/product-2.jpg" width="360" height="360" loading="lazy" alt="Purus consequat congue sit" class="img-cover default">
<img loading="lazy" decoding="async" src="./assets/images/product-2_0.jpg" width="360" height="360" loading="lazy" alt="Purus consequat congue sit" class="img-cover hover">
<button class="card-action-btn" aria-label="add to card" title="Add To Card">
</button>
</div>
<div class="card-content">
<div class="wrapper">
<div class="rating-wrapper gray">
</div>
<span class="span">(0)</span>
</div>
<h3 class="h3">
<a href="#" class="card-title">Purus consequat congue sit</a>
</h3>
$45.00
</div>
</div>
</li>
<li>
<div class="product-card">
<div class="card-banner img-holder" style="--width: 360;--height: 360">
<img loading="lazy" decoding="async" src="./assets/images/product-3.jpg" width="360" height="360" loading="lazy" alt="Morbi vel arcu scelerisque" class="img-cover default">
<img loading="lazy" decoding="async" src="./assets/images/product-3_0.jpg" width="360" height="360" loading="lazy" alt="Morbi vel arcu scelerisque" class="img-cover hover">
<button class="card-action-btn" aria-label="add to card" title="Add To Card">
</button>
</div>
<div class="card-content">
<div class="wrapper">
<div class="rating-wrapper gray">
</div>
<span class="span">(0)</span>
</div>
<h3 class="h3">
<a href="#" class="card-title">Morbi vel arcu scelerisque</a>
</h3>
$45.00
</div>
</div>
</li>
<li>
<div class="product-card">
<div class="card-banner img-holder" style="--width: 360;--height: 360">
<img loading="lazy" decoding="async" src="./assets/images/product-4.jpg" width="360" height="360" loading="lazy" alt="Morbi vel arcu scelerisque" class="img-cover default">
<img loading="lazy" decoding="async" src="./assets/images/product-4_0.jpg" width="360" height="360" loading="lazy" alt="Morbi vel arcu scelerisque" class="img-cover hover">
<button class="card-action-btn" aria-label="add to card" title="Add To Card">
</button>
</div>
<div class="card-content">
<div class="wrapper">
<div class="rating-wrapper gray">
</div>
<span class="span">(0)</span>
</div>
<h3 class="h3">
<a href="#" class="card-title">Morbi vel arcu scelerisque</a>
</h3>
$49.00
</div>
</div>
</li>
<li>
<div class="product-card">
<div class="card-banner img-holder" style="--width: 360;--height: 360">
<img loading="lazy" decoding="async" src="./assets/images/product-5.jpg" width="360" height="360" loading="lazy" alt="Morbi vel arcu scelerisque" class="img-cover default">
<img loading="lazy" decoding="async" src="./assets/images/product-5_0.jpg" width="360" height="360" loading="lazy" alt="Morbi vel arcu scelerisque" class="img-cover hover">
<button class="card-action-btn" aria-label="add to card" title="Add To Card">
</button>
</div>
<div class="card-content">
<div class="wrapper">
<div class="rating-wrapper gray">
</div>
<span class="span">(0)</span>
</div>
<h3 class="h3">
<a href="#" class="card-title">Morbi vel arcu scelerisque</a>
</h3>
$85.00
</div>
</div>
</li>
<li>
<div class="product-card">
<div class="card-banner img-holder" style="--width: 360;--height: 360">
<img loading="lazy" decoding="async" src="./assets/images/product-6.jpg" width="360" height="360" loading="lazy" alt="Nam justo libero porta ege" class="img-cover default">
<img loading="lazy" decoding="async" src="./assets/images/product-6_0.jpg" width="360" height="360" loading="lazy" alt="Nam justo libero porta ege" class="img-cover hover">
<button class="card-action-btn" aria-label="add to card" title="Add To Card">
</button>
</div>
<div class="card-content">
<div class="wrapper">
<div class="rating-wrapper gray">
</div>
<span class="span">(0)</span>
</div>
<h3 class="h3">
<a href="#" class="card-title">Nam justo libero porta ege</a>
</h3>
$85.00
</div>
</div>
</li>
<li>
<div class="product-card">
<div class="card-banner img-holder" style="--width: 360;--height: 360">
<img loading="lazy" decoding="async" src="./assets/images/product-7.jpg" width="360" height="360" loading="lazy" alt="Nam justo libero porta ege" class="img-cover default">
<img loading="lazy" decoding="async" src="./assets/images/product-7_0.jpg" width="360" height="360" loading="lazy" alt="Nam justo libero porta ege" class="img-cover hover">
<button class="card-action-btn" aria-label="add to card" title="Add To Card">
</button>
</div>
<div class="card-content">
<div class="wrapper">
<div class="rating-wrapper gray">
</div>
<span class="span">(0)</span>
</div>
<h3 class="h3">
<a href="#" class="card-title">Nam justo libero porta ege</a>
</h3>
$85.00
</div>
</div>
</li>
<li>
<div class="product-card">
<div class="card-banner img-holder" style="--width: 360;--height: 360">
<img loading="lazy" decoding="async" src="./assets/images/product-8.jpg" width="360" height="360" loading="lazy" alt="Etiam commodo leo sed" class="img-cover default">
<img loading="lazy" decoding="async" src="./assets/images/product-8_0.jpg" width="360" height="360" loading="lazy" alt="Etiam commodo leo sed" class="img-cover hover">
<button class="card-action-btn" aria-label="add to card" title="Add To Card">
</button>
</div>
<div class="card-content">
<div class="wrapper">
<div class="rating-wrapper gray">
</div>
<span class="span">(0)</span>
</div>
<h3 class="h3">
<a href="#" class="card-title">Etiam commodo leo sed</a>
</h3>
$55.00
</div>
</div>
</li>
</ul>
</div>
</section>
<!--
- #SERVICE
-->
<section class="section service" aria-label="service">
<div class="container">
<img loading="lazy" decoding="async" src="./assets/images/service-image.png" width="122" height="136" loading="lazy" alt="" class="img">
<h2 class="h2 section-title">
<span class="span">What your pet needs,</span> when they need it.
</h2>
<ul class="grid-list">
<li>
<div class="service-card">
<figure class="card-icon">
<img loading="lazy" decoding="async" src="./assets/images/service-icon-1.png" width="70" height="70" loading="lazy" alt="service icon">
</figure>
<h3 class="h3 card-title">Free Same-Day Delivery</h3>
<p class="card-text">
Order by 2pm local time to get free delivery on orders $35+ today.
</p>
</div>
</li>
<li>
<div class="service-card">
<figure class="card-icon">
<img loading="lazy" decoding="async" src="./assets/images/service-icon-2.png" width="70" height="70" loading="lazy" alt="service icon">
</figure>
<h3 class="h3 card-title">30 Day Return</h3>
<p class="card-text">
35% off your first order plus 5% off all future orders.
</p>
</div>
</li>
<li>
<div class="service-card">
<figure class="card-icon">
<img loading="lazy" decoding="async" src="./assets/images/service-icon-3.png" width="70" height="70" loading="lazy" alt="service icon">
</figure>
<h3 class="h3 card-title">Security payment</h3>
<p class="card-text">
25% off your online order of $50+. Available at most locations.
</p>
</div>
</li>
<li>
<div class="service-card">
<figure class="card-icon">
<img loading="lazy" decoding="async" src="./assets/images/service-icon-4.png" width="70" height="70" loading="lazy" alt="service icon">
</figure>
<h3 class="h3 card-title">24/7 Support</h3>
<p class="card-text">
Shop online to get orders over $35 shipped fast and free.
</p>
</div>
</li>
</ul>
</div>
</section>
<!--
- #CTA
-->
<section class="cta has-bg-image" aria-label="cta" style="background-image: url('./assets/images/cta-bg.jpg')">
<div class="container">
<figure class="cta-banner">
<img loading="lazy" decoding="async" src="./assets/images/cta-banner.png" width="900" height="660" loading="lazy" alt="cat" class="w-100">
</figure>
<div class="cta-content">
<img loading="lazy" decoding="async" src="./assets/images/cta-icon.png" width="120" height="35" loading="lazy" alt="taste guarantee" class="img">
<h2 class="h2 section-title">Taste it, love it or we’ll replace it… Guaranteed!</h2>
<p class="section-text">
At Petio, we believe your dog and cat will love their food so much that if they don’t … we’ll help you
find a
replacement. That’s our taste guarantee.
</p>
<a href="#" class="btn">Find out more</a>
</div>
</div>
</section>
<!--
- #BRAND
-->
<section class="section brand" aria-label="brand">
<div class="container">
<h2 class="h2 section-title">
<span class="span">Popular</span> Brands
</h2>
<ul class="has-scrollbar">
<li class="scrollbar-item">
<div class="brand-card img-holder" style="--width: 150;--height: 150">
<img loading="lazy" decoding="async" src="./assets/images/brand-1.jpg" width="150" height="150" loading="lazy" alt="brand logo" class="img-cover">
</div>
</li>
<li class="scrollbar-item">
<div class="brand-card img-holder" style="--width: 150;--height: 150">
<img loading="lazy" decoding="async" src="./assets/images/brand-2.jpg" width="150" height="150" loading="lazy" alt="brand logo" class="img-cover">
</div>
</li>
<li class="scrollbar-item">
<div class="brand-card img-holder" style="--width: 150;--height: 150">
<img loading="lazy" decoding="async" src="./assets/images/brand-3.jpg" width="150" height="150" loading="lazy" alt="brand logo" class="img-cover">
</div>
</li>
<li class="scrollbar-item">
<div class="brand-card img-holder" style="--width: 150;--height: 150">
<img loading="lazy" decoding="async" src="./assets/images/brand-4.jpg" width="150" height="150" loading="lazy" alt="brand logo" class="img-cover">
</div>
</li>
<li class="scrollbar-item">
<div class="brand-card img-holder" style="--width: 150;--height: 150">
<img loading="lazy" decoding="async" src="./assets/images/brand-5.jpg" width="150" height="150" loading="lazy" alt="brand logo" class="img-cover">
</div>
</li>
</ul>
</div>
</section>
</article>
</main>
<!--
- #FOOTER
-->
<footer class="footer" style="background-image: url('./assets/images/footer-bg.jpg')">
<div class="footer-top section">
<div class="container">
<div class="footer-brand">
<a href="#" class="logo">Kitter</a>
<p class="footer-text">
If you have any question, please contact us at <a href="mailto:support@gmail.com" class="link">support@gmail.com</a>
</p>
<ul class="contact-list">
<li class="contact-item">
<address class="address">
30 Buttonwood St.Pataskala OH 43062
</address>
</li>
<li class="contact-item">
<a href="tel:+16234567891011" class="contact-link">(+1)-6234-56-789-1011</a>
</li>
</ul>
<ul class="social-list">
<li>
<a href="#" class="social-link">
</a>
</li>
<li>
<a href="#" class="social-link">
</a>
</li>
<li>
<a href="#" class="social-link">
</a>
</li>
<li>
<a href="#" class="social-link">
</a>
</li>
</ul>
</div>
<ul class="footer-list">
<li>
<p class="footer-list-title">Corporate</p>
</li>
<li>
<a href="#" class="footer-link">Careers</a>
</li>
<li>
<a href="#" class="footer-link">About Us</a>
</li>
<li>
<a href="#" class="footer-link">Contact Us</a>
</li>
<li>
<a href="#" class="footer-link">FAQs</a>
</li>
<li>
<a href="#" class="footer-link">Vendors</a>
</li>
<li>
<a href="#" class="footer-link">Affiliate Program</a>
</li>
</ul>
<ul class="footer-list">
<li>
<p class="footer-list-title">Information</p>
</li>
<li>
<a href="#" class="footer-link">Online Store</a>
</li>
<li>
<a href="#" class="footer-link">Privacy Policy</a>
</li>
<li>
<a href="#" class="footer-link">Refund Policy</a>
</li>
<li>
<a href="#" class="footer-link">Shipping Policy</a>
</li>
<li>
<a href="#" class="footer-link">Terms of Service</a>
</li>
<li>
<a href="#" class="footer-link">Track Order</a>
</li>
</ul>
<ul class="footer-list">
<li>
<p class="footer-list-title">Services</p>
</li>
<li>
<a href="#" class="footer-link">Grooming</a>
</li>
<li>
<a href="#" class="footer-link">Positive Dog Training</a>
</li>
<li>
<a href="#" class="footer-link">Veterinary Services</a>
</li>
<li>
<a href="#" class="footer-link">Petco Insurance</a>
</li>
<li>
<a href="#" class="footer-link">Pet Adoption</a>
</li>
<li>
<a href="#" class="footer-link">Resource Center</a>
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p class="copyright">
© 2022 Made with ♥ by <a href="#" class="copyright-link">codewithsadee.</a>
</p>
<img loading="lazy" decoding="async" src="./assets/images/payment.png" width="397" height="32" loading="lazy" alt="payment method" class="img">
</div>
</div>
</footer>
<!--
- #BACK TO TOP
-->
<a href="#top" class="back-top-btn" aria-label="back to top" data-back-top-btn>
</a>
<!--
- custom js link
-->
<!--
- ionicon link
-->
CSS (Style.css)
This is our CSS code which styles our HTML elements. This code adds interactive styling to our webpage. It enhances user experience and keep engaging the user to our website. Let’s breakdown the code.
- Code starts by defining root elements for each general styling of the page like colors, font, shadow, transition etc.
- Pseudo selectors are used to reset and margin padding.
- All the general basic styling are applied to the root tags of HTML which will applied to all the elements of the page.
- The header sits at the top of the page and remains fixed even when you scroll down. It contains a menu that’s fantastic on the phone as well, with a tiny button to open and close it to your convenience.
- The hero section displays a headline, some text, and a button in the center. On large screens, it divides into two halves — text on one half, image on the other. The button also slightly alters when you hover over it.
- Category cards show different categories of products along with nice pictures. When hovering over a card, the image is zoomed in and the color of the title changes to provide it with a fresh look. The structure fits itself evenly to all sizes of screens.
- The offers section displays some special offers in a grid format. Each offer card contains a small title, a big bold headline, and a button. If you hover over a card with your mouse, the background color changes to highlight it. The layout also adjusts depending on the size of your screen.
- The product section displays all the products in a neat manner. Each product contains an image that changes on hover, star ratings, prices, and an “Add to Cart” button that responds when clicked. The products are stacked differently on mobile and large screens so everything appears neat.
- The services page shows what the business or store provides. Every service includes an icon, a heading, and a brief description. On large screens, the services are shown in 3 or 4 columns so that it will be neat and readable.
- Call to action (CTA) portion has a foreground image with bold headline. The portion has an element that ever so slightly elevates when you hover your cursor over it. On bigger displays, the area divides into two sides — word on one and image on another.
- The brand section displays logos of various brands horizontally in a row. On smaller devices, you scroll. On larger ones, they’re just placed side by side neatly without scrolling.
- Dark bottom footer is divided into sections — quick links, contact details, social media icons, and a sign-up form. All are created in white and gray, and the icons turn colorful on hover.
- The back-to-top button is a tiny button which appears when scrolled down. It will smoothly move you to the top of the page when you press it. It’s disguised if you already are at the top.
Media queries are applied throughout to ensure the site is pretty on every screen size – mobile, tablet, laptop, or desktop. It scales font sizes, layouts, margins, and even hides or displays some things based on the device.
:root {
/**
* colors
*/
--bright-yellow-crayola: hsl(36, 94%, 57%);
--portland-orange: hsl(15, 84%, 57%);
--battleship-gray: hsl(0, 0%, 53%);
--silver-chalice: hsl(0, 0%, 70%);
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(208, 7%, 46%);
--raisin-black: hsl(228, 6%, 17%);
--eerie-black: hsl(210, 3%, 13%);
--bittersweet: hsl(9, 96%, 69%);
--light-gray: hsl(0, 0%, 80%);
--platinum: hsl(0, 0%, 91%);
--amber: hsl(45, 100%, 51%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--onyx: hsl(220, 2%, 24%);
/**
* typography
*/
--ff-bangers: 'Bangers', cursive;
--ff-carter_one: 'Carter One', cursive;
--ff-nunito_sans: 'Nunito Sans', sans-serif;
--fs-1: 6.5rem;
--fs-2: 3.2rem;
--fs-3: 2.4rem;
--fs-4: 2rem;
--fs-5: 1.8rem;
--fs-6: 1.5rem;
--fs-7: 1.4rem;
--fs-8: 1rem;
--fw-400: 400;
--fw-700: 700;
/**
* spacing
*/
--section-padding: 40px;
/**
* shadow
*/
--shadow-1: 0 8px 16px hsla(0, 0%, 0%, 0.15);
--shadow-2: 0 8px 8px hsla(0, 0%, 0%, 0.2);
/**
* radius
*/
--radius-4: 4px;
--radius-10: 10px;
/**
* transition
*/
--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
}
/*-----------------------------------*\
#RESET
\*-----------------------------------*/
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li { list-style: none; }
a,
img,
span,
button,
ion-icon { display: block; }
a {
color: inherit;
text-decoration: none;
}
img { height: auto; }
button {
background: none;
border: none;
font: inherit;
cursor: pointer;
}
ion-icon { pointer-events: none; }
address { font-style: normal; }
html {
font-family: var(--ff-nunito_sans);
font-size: 10px;
scroll-behavior: smooth;
}
body {
background-color: var(--white);
color: var(--black);
font-size: 1.6rem;
line-height: 1.5;
}
:focus-visible { outline-offset: 4px; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }
::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
/*-----------------------------------*\
#REUSED STYLE
\*-----------------------------------*/
.container { padding-inline: 15px; }
.section { padding-block: var(--section-padding); }
.has-bg-image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.h1,
.h2,
.h3 { line-height: 1.1; }
.h1 {
color: var(--white);
font-family: var(--ff-bangers);
font-size: var(--fs-1);
font-weight: var(--fw-400);
letter-spacing: 1px;
}
.h2,
.h3 { color: var(--eerie-black); }
.h2 { font-size: var(--fs-2); }
.h3 { font-size: var(--fs-3); }
.btn {
background-color: var(--black);
color: var(--white);
max-width: max-content;
padding: 8px 25px;
font-weight: var(--fw-700);
border-radius: 50px;
transition: var(--transition-1);
}
.section-title {
text-align: center;
margin-block-end: 30px;
}
.section-title .span {
display: inline;
color: var(--portland-orange);
}
.img-holder {
aspect-ratio: var(--width) / var(--height);
background-color: var(--light-gray);
overflow: hidden;
}
.img-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.has-scrollbar {
display: flex;
align-items: center;
gap: 30px;
overflow-x: auto;
scroll-snap-type: inline mandatory;
padding-block-end: 20px;
margin-block-end: -20px;
}
.scrollbar-item {
min-width: 100%;
scroll-snap-align: start;
}
.has-scrollbar::-webkit-scrollbar { height: 10px; }
.has-scrollbar::-webkit-scrollbar-track {
outline: 2px solid var(--portland-orange);
border-radius: var(--radius-10);
}
.has-scrollbar::-webkit-scrollbar-thumb {
border-radius: var(--radius-10);
background-color: var(--portland-orange);
border: 2px solid var(--white);
}
.has-scrollbar::-webkit-scrollbar-button { width: calc(25% - 30px); }
.grid-list {
display: grid;
gap: 30px;
}
.w-100 { width: 100%; }
/*-----------------------------------*\
#HEADER
\*-----------------------------------*/
.action-btn.user { display: none; }
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: var(--white);
padding-block: 20px;
z-index: 4;
}
.header.active {
position: fixed;
box-shadow: var(--shadow-1);
}
.header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.nav-toggle-btn {
font-size: 30px;
transition: var(--transition-1);
}
.nav-toggle-btn.active .menu-icon,
.nav-toggle-btn .close-icon { display: none; }
.nav-toggle-btn .menu-icon,
.nav-toggle-btn.active .close-icon { display: block; }
.logo {
font-family: var(--ff-carter_one);
font-size: 3rem;
}
.header-actions {
display: flex;
gap: 15px;
}
.header .action-btn {
position: relative;
font-size: 22px;
transition: var(--transition-1);
}
.header .btn-badge {
position: absolute;
top: -8px;
right: -10px;
background-color: var(--portland-orange);
color: var(--white);
font-size: var(--fs-8);
min-width: 18px;
height: 18px;
line-height: 18px;
border-radius: 50px;
}
.nav-toggle-btn:is(:hover, :focus),
.header .action-btn:is(:hover, :focus) { transform: scale(1.1); }
.navbar {
position: fixed;
top: 85px;
left: -320px;
bottom: 0;
background-color: var(--white);
max-width: 320px;
width: 100%;
padding: 20px 10px;
box-shadow: var(--shadow-2);
transition: 0.25s var(--cubic-out);
overflow-x: hidden;
overflow-y: auto;
}
.navbar.active {
transform: translateX(320px);
transition-timing-function: var(--cubic-in);
}
.navbar-link {
color: var(--eerie-black);
font-size: var(--fs-6);
padding: 10px 15px;
}
.navbar-action-btn {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
background-color: var(--sonic-silver);
color: var(--white);
font-weight: var(--fw-700);
text-transform: uppercase;
text-align: center;
}
/*-----------------------------------*\
#HERO
\*-----------------------------------*/
.hero {
margin-block-start: 85px;
min-height: 360px;
background-position: left;
text-align: center;
}
.hero-title .span { font-size: 0.5em; }
.hero-text {
color: var(--white);
margin-block: 15px 25px;
}
.hero .btn { margin-inline: auto; }
.hero .btn:is(:hover, :focus) { background-color: var(--portland-orange); }
/*-----------------------------------*\
#CATEGORY
\*-----------------------------------*/
.category-card .card-banner { border-radius: var(--radius-10); }
.category-card .img-cover { transition: var(--transition-2); }
.category-card:is(:hover, :focus-within) .img-cover { transform: scale(1.08); }
.category-card .card-title {
margin-block-start: 15px;
text-align: center;
transition: var(--transition-1);
}
.category-card .card-title:is(:hover, :focus) { color: var(--portland-orange); }
/*-----------------------------------*\
#OFFERS
\*-----------------------------------*/
.offer-card {
border-radius: var(--radius-10);
padding: 20px;
display: grid;
align-content: center;
}
.offer-card .card-subtitle {
font-size: var(--fs-7);
text-transform: uppercase;
font-weight: var(--fw-700);
}
.offer-card .card-title {
color: var(--black);
margin-block: 5px 24px;
}
.offer-card .btn { background-color: var(--portland-orange); }
.offer-card .btn:is(:hover, :focus) { background-color: var(--black); }
/*-----------------------------------*\
#PRODUCT
\*-----------------------------------*/
.product .img-cover.hover,
.product-card .card-action-btn { display: none; }
.product-card { text-align: center; }
.product-card .card-banner {
border: 1px solid var(--platinum);
border-radius: var(--radius-10);
margin-block-end: 20px;
}
.product-card :is(.wrapper, .rating-wrapper) { display: flex; }
.product-card .wrapper {
justify-content: center;
align-items: center;
gap: 5px;
color: var(--silver-chalice);
font-size: var(--fs-7);
}
.product-card .rating-wrapper {
color: var(--amber);
gap: 2px;
}
.product-card .rating-wrapper.gray { color: unset; }
.product-card .h3 {
--fs-3: 1.8rem;
margin-block: 8px 10px;
}
.product-card .card-title { transition: var(--transition-1); }
.product-card .card-title:is(:hover, :focus) { color: var(--portland-orange); }
.product-card .card-price {
color: var(--portland-orange);
font-size: var(--fs-4);
font-weight: var(--fw-700);
}
/*-----------------------------------*\
#SERVICE
\*-----------------------------------*/
.service .img {
margin-inline: auto;
margin-block-end: 30px;
}
.service .section-title { margin-block-end: 60px; }
.service-card { text-align: center; }
.service-card .card-icon {
max-width: max-content;
margin-inline: auto;
}
.service-card .card-title { margin-block: 10px; }
.service-card .card-text { color: var(--spanish-gray); }
/*-----------------------------------*\
#CTA
\*-----------------------------------*/
.cta { background-position: 75%; }
.cta-banner { display: none; }
.cta-content { padding-block: 80px var(--section-padding); }
.cta .section-title {
text-align: left;
margin-block: 10px 20px;
}
.cta .section-text { margin-block-end: 30px; }
.cta .btn:is(:hover, :focus) {
background-color: var(--white);
color: var(--black);
}
/*-----------------------------------*\
#BRAND
\*-----------------------------------*/
.brand { --section-padding: 100px; }
.brand .has-scrollbar { gap: 0; }
.brand .scrollbar-item { min-width: 50%; }
.brand .scrollbar-item:not(:last-child) { border-inline-end: 1px solid var(--platinum); }
.brand-card {
max-width: max-content;
margin-inline: auto;
}
/*-----------------------------------*\
#FOOTER
\*-----------------------------------*/
.footer {
background-color: var(--raisin-black);
color: var(--battleship-gray);
background-repeat: no-repeat;
background-size: 100%;
background-position: top;
}
.footer-top {
padding-block-start: 100px;
border-block-end: 1px solid var(--onyx);
}
.footer-top .container {
display: grid;
gap: 30px;
}
.footer .logo {
color: var(--white);
margin-block-end: 10px;
}
.footer-text {
font-size: var(--fs-6);
margin-block-end: 25px;
}
.footer-text .link {
display: inline-block;
color: var(--portland-orange);
}
.contact-item {
margin-block-end: 15px;
color: var(--white);
font-weight: var(--fw-700);
display: flex;
align-items: center;
gap: 15px;
}
.contact-item ion-icon {
flex-shrink: 0;
font-size: 22px;
color: var(--portland-orange);
}
.social-list {
display: flex;
gap: 10px;
}
.social-link {
background-color: var(--white);
color: var(--black);
padding: 12px;
border-radius: 50%;
transition: var(--transition-1);
}
.social-link:is(:hover, :focus) {
background-color: var(--portland-orange);
color: var(--white);
}
.footer-list-title {
color: var(--white);
font-size: var(--fs-5);
font-weight: var(--fw-700);
padding-block: 10px;
}
.footer-link {
padding-block: 4px;
transition: var(--transition-1);
}
.footer-link:is(:hover, :focus) { color: var(--portland-orange); }
.footer-bottom { padding-block: 20px; }
.copyright { margin-block-end: 10px; }
.copyright-link { display: inline-block; }
.footer-bottom .img {
width: 100%;
max-width: max-content;
}
/*-----------------------------------*\
#BACK TO TOP
\*-----------------------------------*/
.back-top-btn {
position: fixed;
bottom: 10px;
right: 20px;
background-color: var(--portland-orange);
color: var(--white);
font-size: 25px;
padding: 10px;
border-radius: 50%;
box-shadow: var(--shadow-2);
opacity: 0;
visibility: hidden;
transition: var(--transition-1);
z-index: 4;
}
.back-top-btn.active {
opacity: 1;
visibility: visible;
transform: translateY(-10px);
}
/*-----------------------------------*\
#MEDIA QUERIES
\*-----------------------------------*/
/**
* responsive for large than 575px screen
*/
@media (min-width: 575px) {
/**
* CUSTOM PROPERTY
*/
:root {
/**
* typography
*/
--fs-2: 4rem;
--fs-3: 2.6rem;
}
/**
* REUSED STYLE
*/
.scrollbar-item { min-width: calc(50% - 15px); }
.grid-list { grid-template-columns: 1fr 1fr; }
/**
* HERO
*/
.hero {
display: grid;
padding-inline-start: 20px;
justify-content: flex-start;
align-items: center;
}
/**
* OFFER
*/
.offer .grid-list { grid-template-columns: 1fr; }
/**
* PRODUCT
*/
.product-card .card-banner { position: relative; }
.product-card .card-action-btn,
.product-card .card-banner .hover {
display: block;
position: absolute;
}
.product-card .card-banner .hover {
top: 0;
left: 0;
}
.product-card:is(:hover, :focus-within) .default,
.product-card .hover { opacity: 0; }
.product-card .default,
.product-card:is(:hover, :focus-within) .hover { opacity: 1; }
.product-card .card-action-btn {
top: 15px;
right: 15px;
color: var(--eerie-black);
font-size: 20px;
background-color: var(--white);
border: 1px solid var(--platinum);
padding: 12px;
border-radius: 50%;
transition: var(--transition-1);
opacity: 0;
}
.product-card .card-action-btn:is(:hover, :focus) {
background-color: var(--portland-orange);
border-color: var(--portland-orange);
color: var(--white);
}
.product-card:is(:hover, :focus-within) .card-action-btn { opacity: 1; }
/**
* CTA
*/
.cta .img { width: 250px; }
.cta .h2 { --fs-2: 3.2rem; }
/**
* BRAND
*/
.brand .scrollbar-item { min-width: 25%; }
/**
* FOOTER
*/
.footer-top .container { grid-template-columns: 1fr 1fr; }
}
/**
* responsive for large than 768px screen
*/
@media (min-width: 768px) {
/**
* CUSTOM PROPERTY
*/
:root {
/**
* typography
*/
--fs-1: 9rem;
}
/**
* REUSED STYLE
*/
.scrollbar-item { min-width: calc(33.33% - 20px); }
.grid-list { grid-template-columns: repeat(3, 1fr); }
/**
* HERO
*/
.hero {
aspect-ratio: 1512 / 784;
padding-inline-start: 10%;
}
.hero-text { font-size: 2.4rem; }
/**
* OFFER
*/
.offer .grid-list { grid-template-columns: repeat(3, 1fr); }
/**
* CTA
*/
.cta-banner { display: block; }
.cta .container {
display: grid;
grid-template-columns: 1fr 0.75fr;
align-items: flex-end;
}
/**
* FOOTER
*/
.footer-bottom .container {
display: flex;
justify-content: space-between;
align-items: center;
}
}
/**
* responsive for large than 992px screen
*/
@media (min-width: 992px) {
/**
* CUSTOM PROPERTY
*/
:root {
/**
* typography
*/
--fs-1: 12rem;
--fs-3: 3rem;
/**
* spacing
*/
--section-padding: 50px;
}
/**
* REUSED STYLE
*/
.container { padding-inline: 30px; }
.scrollbar-item { min-width: calc(20% - 24px); }
/**
* HEADER
*/
.nav-toggle-btn,
.navbar-action-btn { display: none; }
.header {
--color: var(--white);
background: none;
}
.header.active {
--color: var(--black);
background-color: var(--white);
}
.header .logo,
.header .action-btn { color: var(--color); }
.header .action-btn.user { display: block; }
.logo { font-size: 3.8rem; }
.navbar,
.navbar.active {
all: unset;
margin-inline-end: auto;
}
.navbar-list {
display: flex;
gap: 10px;
}
.navbar-link {
color: var(--color);
--fs-6: 1.7rem;
font-weight: var(--fw-700);
transition: var(--transition-1);
}
.header.active .navbar-link:is(:hover, :focus) { color: var(--portland-orange); }
/**
* HERO
*/
.hero { margin-block-start: 0; }
/**
* CATEGORY
*/
.category-card .h3 { --fs-3: 2rem; }
/**
* SERVICE
*/
.service .grid-list { grid-template-columns: repeat(4, 1fr); }
.service-card .h3 { --fs-3: 2.4rem; }
/**
* BRAND
*/
.brand .scrollbar-item { min-width: 20%; }
/**
* FOOTER
*/
.footer-top .container { grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr; }
}
/**
* responsive for large than 1200px screen
*/
@media (min-width: 1200px) {
/**
* CUSTOM PROPERTY
*/
:root {
/**
* typography
*/
--fs-1: 15rem;
--fs-3: 3.2rem;
}
/**
* REUSED STYLE
*/
.grid-list { grid-template-columns: repeat(4, 1fr); }
/**
* CTA
*/
.cta-content { padding-block: 100px; }
/**
* BRAND, FOOTER
*/
:is(.brand, .footer) .container {
max-width: 1200px;
width: 100%;
margin-inline: auto;
}
.footer { padding-block-start: 40px; }
}
Javascript (Script.js)
This is our JavaScript code which adds functionality to our webpage. The JavaScript is usually used to adds interactive functionality to our webpages. Let’s understand the code.
- Code starts with the use strict mode which helps to catch mistakes.
- Next, we’ve added some event on the elements. It’s stored in variable and function contains some parameters and using those parameter type or callback event are handled in this function.
- Navbar toggle section code is used to toggle or appear navbar on smaller screen on click event. First of all we access all the essential elements from the HTML, then created a function for the active and close navbar.
- When the click event runs the navbar appears and add classlist and when navtoggler clicked the classlist will be removed and the navbar will disappear.
- Same happens when we click on the navlinks, the navbar will be closed.
- Then we accessed the header and back to top button from the HTML document.
- Then we creates a function, where if user scrolls down to the 100px then the header will appear and some CSS classes will be added to it. Otherwise the default class will be applicable to header.
- And lastly this function is called with the scroll event.
This was all about our code.
'use strict';
/**
* add event on element
*/
const addEventOnElem = function (elem, type, callback) {
if (elem.length > 1) {
for (let i = 0; i 100) {
header.classList.add("active");
backTopBtn.classList.add("active");
} else {
header.classList.remove("active");
backTopBtn.classList.remove("active");
}
}
addEventOnElem(window, "scroll", activeElemOnScroll);
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
10+ Login & Signup Forms using HTML CSS JS (Modern + Stylish) Introduction Hello friends, welcome to today’s new blog post. Today …
10+ Free Cryptocurrency & Bitcoin Website Using HTML, CSS, JavaScript & PHP Introduction Hello all of you are welcome to today’s new …
Pet Food Shop Website Using Html CSS and JavaScript Introduction Hello coders, welcome to another new blog. Today in this article we’ll …
TUI Expense Tracker Using Textual in Python Introduction: Managing money is a very important skill in life. But many people still use …
Get Huge Discounts
More Python Projects
