Creating a Responsive Pet Store Landing Page using HTML and CSS (Source Code)

Faraz

By Faraz -

Learn to create a pet store landing page with HTML and CSS. Our tutorial includes source code, making it easy for beginners to create a responsive and visually appealing website.

Join us on Telegram
Creating a Responsive Pet Store Landing Page using HTML & CSS.jpg
Read AlsoResponsive Real Estate Landing Page using html css and javascript.webpResponsive Real Estate Website using HTML, CSS, and JavaScript (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

Creating an attractive and responsive landing page for your pet store is a crucial step in establishing a strong online presence. In this comprehensive tutorial, we will walk you through the process of building a visually appealing and mobile-friendly pet store landing page using HTML and CSS.

We'll guide you step by step, from setting up your project and structuring the HTML to applying styles with CSS and making your page responsive. Additionally, we'll include the source code, allowing you to dissect and understand each element of the design.

Let's embark on this journey together, and by the end of this tutorial, you'll have a pet store landing page that not only captures the essence of your brand but also adapts seamlessly to the screens of your diverse audience. Let the coding begin!

Source Code

Step 1 (HTML Code):

Start by creating a basic HTML structure for your pet store. Use tags to define essential elements like headers, paragraphs, and images.

How to:

  1. Open a text editor.
  2. Create an HTML document.
  3. Define the structure using tags (e.g., <head>, <body>).
  4. Add content within appropriate tags.

Let's break down the code:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used (HTML5 in this case).

2. <html lang="en">: The root element of the HTML document, indicating that the page is in English.

3. <head>: This section contains meta-information about the document, such as the character set, viewport settings, external stylesheets, and the page title.

  • <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport properties for responsive design.
  • <link> elements: Include external resources like fonts and stylesheets.
  • <title>: Sets the title of the page that appears in the browser tab.

4. <body>: The main content of the HTML document starts here.

  • <header>: Contains the banner and navigation menu for the pet store.
  • <nav>: The navigation section with the store logo, a list of menu items, and utility icons for search and shopping cart.
  • <section class="hero">: Represents a hero section with a title and buttons for shopping and booking services.
  • <section>: Two sections for shopping by pet and displaying services offered by the pet store.
  • <section id="locate">: A section providing information about the store's location and hours, with buttons to find a store or contact the store.
  • <footer>: The footer section contains links to product categories, shop by pet, services, and company information.

5. Inside various sections, there are <ul>, <li>, and <a> elements forming lists and links, and <button> elements for interactive buttons.

6. SVG (<svg>) elements are used for the store logo and some icons within the page.

7. External CSS is linked using <link rel="stylesheet" href="styles.css"> to apply additional styles to the HTML structure.

Read AlsoText-based drawing app in javascript.jpgCreating a Text-Based Drawing App with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Enhance the visual appeal of your pet store landing page by styling it with CSS. Customize fonts, colors, and layout to create a cohesive and attractive design.

How to:

  1. Link your HTML file to a CSS stylesheet.
  2. Select and style elements using CSS rules.
  3. Experiment with colors, fonts, and spacing for a pleasing aesthetic.

Let's break down the key sections:

1. :root: Defines global CSS variables (custom properties) that can be used throughout the stylesheet. These variables are used for defining colors, box shadows, transition timings, and other values.

2. *: Applies a box-sizing rule to all elements on the page to include padding and border in the element's total width and height.

3. body: Styles the body element, setting the font, background color, and other properties. It also includes responsive settings to handle overflow on smaller screens.

4. header, .banner, nav: Styles for header, banner, and navigation elements, including positioning, colors, and sizes.

5. nav ul.navigation-menu: Styles for the navigation menu, specifying its layout and appearance.

6. .card-large, .card-med: Styles for large and medium-sized cards, including box shadows, border radius, and hover effects.

7. .card-image: Styles for card images, including dimensions, border radius, and overflow properties.

8. button: Styles for buttons, including font size, weight, padding, and border-radius. Different button styles are defined, such as .btn-outline and .btn-filled-dark.

9. section, footer: Styles for sections and footer elements, including padding and positioning.

10. @media queries: Responsive design rules based on different screen sizes. The styles are adjusted for small screens (max-width: 600px), medium screens (600px to 1199px), and large screens (1200px and above).

:root {
    --text-01: #45413E;
    --light-01: #F9F9F9;
    --light-02: #FFFFFF;
    --brand-01: #DB7F67;
    --brand-02: #F4CFC6;
    --card-hover: 0px 4px 24px rgba(0, 0, 0, 0.15);
    --card-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
    --hover-timing: all 0.2s ease;
    --nav-card-size: 240px;

    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    transition: var(--hover-timing);
    background: var(--light-01);
	width: 100vw;
	overflow-x: hidden;

}

header {
    /*    width: 100%;*/
    height: auto;
    position: sticky;
    top: 0;
    /*    border: 1px solid red;*/
    z-index: 100;
}

.banner {
    background: var(--brand-01);
    color: var(--light-01);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;

}

nav {
    color: var(--text-01);
    font-weight: 600;
    height: 64px;
    background: var(--light-01);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pg-margin);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 100;
}

nav ul.navigation-menu {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: center;
    position: relative;
    top: 0;
}

nav .navigation-menu a {
    font-size: 16px;
    text-decoration: none;
    color: var(--text-01);

}

nav .navigation-menu > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*    justify-items: center;*/
}

nav .navigation-menu > li > a {
    position: relative;
    /*    border: 1px solid purple;*/
    padding: 0 20px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-items: center;
}

nav .navigation-menu > li:hover ul.subnav {
    visibility: visible;
    opacity: 1;
    top: 64px;

}


nav .navigation-menu > li > ul.subnav {
    /*    border: 1px solid green;*/
    visibility: hidden;
    position: absolute;
    display: flex;
    flex-direction: row;
    top: 66px;
    background: var(--light-01);
    box-shadow: var(--card-hover);
    border-radius: 12px;
    opacity: 0;
    transition: var(--hover-timing);
}


nav > #logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-gap: 8px;
    line-height: 100%;
}

nav > #logo > span {
    font-size: 32px;
}

nav > #utility {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-gap: 16px;
}

.card-large,
.card-med {
    /*    border: 1px solid orange;*/
    flex: 1;
    /*    width: var(--nav-card-size);*/

    position: relative;
    display: flex;
    flex-direction: column;
    /*    padding: 24px;*/
    transition: var(--hover-timing);
    cursor: pointer;
}


.card-large {
    box-shadow: var(--card-shadow);
    border-radius: 12px;
    overflow: hidden;
    /*    padding-bottom: 32px;*/
}



.card-large:hover {
    box-shadow: var(--card-hover);
    transform: scale(1.01);
}

.card-med:hover .card-image {
    transform: scale(1.01);
}


.card-image {
    width: 100%;
    /*    height: 90%;*/
    aspect-ratio: 1/1;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--hover-timing);
}

.card-large > .card-image {
    aspect-ratio: 3/2;
}

.card-image > img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: contain;



}

.card-large a {
    text-decoration: none;
    font-weight: 600;
}

.card-large > .card-image > a {
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
    font-size: 24px;
    line-height: 1.2;
}




.card-large > ul {
    /*    padding: 16px 0 24px;*/
    display: flex;
    flex-direction: column;
    grid-gap: 8px;
    flex: 1;
    /*    border: 1px solid blue;*/

    color: var(--text-01);

    padding: 0 40px 40px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;
}



.card-large > ul > li a {
    line-height: 32px;
    font-size: 14px;
    /*    border: 1px solid red;*/
}


.card-large#sup-dog,
.card-med#sup-dog > .card-image {
    background: linear-gradient(45deg, #463631 0%, #976C5B 100%);
}


button.btn-outline {
    color: var(--light-01);
    border-color: var(--light-01);
}


.card-large#sup-cat,
.card-med#sup-cat > .card-image {
    background: linear-gradient(45deg, #F6AE6C 0%, #ECBD73 100%);
}


.card-large#sup-bird,
.card-med#sup-bird > .card-image {
    background: linear-gradient(45deg, #EFEFEF 0%, #F2F2F2 100%);
}


.card-large#sup-fish,
.card-med#sup-fish > .card-image {
    background: linear-gradient(45deg, #1E4782 0%, #709DDF 100%);
}


.card-large.card-dark a,
.card-large.card-dark > ul {
    color: var(--text-01);
}

.card-large.card-light a,
.card-large.card-light > ul {
    color: var(--light-01);
}



button {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    padding: 12px 24px;
    border-radius: 48px;
    display: flex;
    flex-direction: row;
    grid-gap: 8px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}



button.btn-outline-light {
    color: var(--light-01);
    background: none;
    color: var(--light-01);
    border: 2px solid var(--light-01);
}

button.btn-outline-dark {
    color: var(--text-01);
    background: none;
    color: var(--text-01);
    border: 2px solid var(--text-01);
}

button.btn-filled-dark {
    color: var(--light-01);
    background: var(--text-01);
    color: var(--light-01);
    border: 2px solid var(--text-01);
}

.btn-outline-dark:hover {
    background: var(--text-01);
    border: 2px solid var(--text-01);
}

.btn-outline-light:hover {
    background: var(--light-01);
    border: 2px solid var(--light-01);
    color: var(--text-01);
}


button:hover,
.btn-outline-dark.btn-hover-color:hover {
    color: var(--light-01);
    border: 2px solid var(--brand-01);
    background: var(--brand-01);
    transition: var(--hover-timing);
    box-shadow: var(--card-hover);
}


section,
footer {
    position: relative;
    width: 100%;
    padding: 0 var(--pg-margin);
}




section.hero {
    /*    width: 100%;*/
    height: auto;
    background: var(--brand-02) url('https://ouch-cdn2.icons8.com/hxxz5Qr551KY1597yq-mz9zWRTkAT-cob5eZ8UreBBo/rs:fit:368:338/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNzcy/L2UxYjU4YWUwLTc3/YjQtNGQ1OC05NjJl/LWUzODQ1Y2IyYzBi/Ny5wbmc.png') no-repeat center right;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    grid-gap: 48px;
    display: inline-flex;

}

.btn-group {
    display: flex;
    flex-direction: row;
    grid-gap: 16px;
}

section.hero h1 {
    font-size: var(--hero-text);
    font-weight: 600;
    line-height: 1.2;
    width: 40%;

    color: var(--text-01);
}

.card-med {
    width: var(--nav-card-size);
    height: auto;
    /*    border: 1px solid green;*/
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.card-med > a {
    display: flex;
    flex-direction: column;
    grid-gap: 4px;
    padding: 12px 16px 0px;
}

.card-med > a > span {
    width: 100%;
    /*    border: 1px solid blue;*/
}

.card-med > a > span:nth-of-type(1) {
    width: 100%;
    /*    border: 1px solid blue;*/
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.card-med > a > span:nth-of-type(2) {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-gap: 6px;
}

.card-med > a > span:nth-of-type(2) > span {
    font-size: 18px;
}

#serv-groom > .card-image {
    background: linear-gradient(45deg, #45828C 0%, #A7D4D8 100%);
}

#serv-board > .card-image {
    background: linear-gradient(45deg, #EDDAA9 0%, #B87D93 100%);
}

.card-med:hover .card-image {
    box-shadow: var(--card-hover);
}


.card-med > .card-image {
    box-shadow: var(--card-shadow);
}

.card-med > .card-image > img {
    width: 80%;
    height: 80%;
    /*    border: 1px solid red;*/
}

section:not(.hero) {
    padding: calc(var(--pg-margin)/2) var(--pg-margin);
}

section h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--text-01);
    margin-bottom: 32px;
    /*    padding-bottom: 24px;*/
}


.card-wide {
    flex-direction: row;
    padding: 0;
}

.card-wide .card-image {
    width: 50%;
    border-radius: 0;
}

.card-image img {
    width: 80%;
    height: 80%;
}

.card-wide > ul {
    padding: 40px;
}

.card-wide > ul > li {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    grid-gap: 24px;
    margin-bottom: 16px;
}


.card-wide .subtitle {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    /*    margin-top: 8px;*/
    margin-bottom: 24px;
}

.card-wide > ul > li span {
    font-size: 16px;
}

.card-large > ul > li:last-of-type {
    margin-bottom: 40px;
}


.card-large button {
    margin-top: auto;
}

#locate > div {
    background: var(--brand-02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    transition: var(--hover-timing);
    cursor: pointer;
}

#locate > div:hover {
    box-shadow: var(--card-hover);
}

#locate h2 {
    margin-top: 0;
}

#locate p {
    line-height: 1.5;
    margin-bottom: 40px;
    width: 50%;
    text-align: center;
}


.btn-group {
    display: flex;
    flex-direction: row;
    grid-gap: 16px;
}

footer {
    background: var(--text-01);
    padding: 80px 80px 0px;
    margin-top: 80px;
    display: flex;
}



footer ul {
    display: flex;
    flex-direction: column;
    grid-gap: 24px;
    box-shadow: none;
    flex: 1;
    color: var(--light-01);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 80px;

}


footer ul li a {
    color: var(--light-01);
    text-decoration: none;
    font-size: 14px;
}


footer ul li {
    color: var(--light-01);
    padding: 0;

}



@media only screen and (max-width: 600px) {
    :root {
        --pg-margin: 16px;
    }

    section.hero {
        aspect-ratio: 1/1;
        padding-top: 64px;

    }

    section.hero h1 {
        --hero-text: 40px;
        width: 80%;
    }

    section.hero {
        background-size: 85%;
        background-position: 360% 60%;
    }

    nav {
        position: relative;
    }

    nav ul.navigation-menu {
        position: absolute;
        position: absolute;
        top: 64px;
        background: var(--light-01);
        left: 0;
        z-index: -1;
        width: 100vw;
    }

    nav ul.navigation-menu li a {
        font-size: 16px;
        /*        padding: 0 12px;*/
        white-space: nowrap;
    }

    nav ul.navigation-menu .subnav {
        display: none;
    }

    nav ul.navigation-menu > li:hover .subnav {
        display: none;
    }


    .btn-group {
        flex-direction: column;
    }

    .shop-pets,
    .services {
        display: flex;
        flex-direction: column;
        grid-gap: 24px;
        width: 100%;
    }

    .services > li {
        display: flex;
        flex-direction: column;
    }

    .services > li > .card-image {
        width: 100%;
    }

    section:not(.hero) {
        padding: var(--pg-margin);
    }

    #locate p {

        width: 80%;
    }

    footer {
        flex-direction: column;
        text-align: center;
    }


}

@media only screen and (min-width: 600px) {
    :root {
        --pg-margin: 24px;
    }

    section.hero h1 {
        --hero-text: 40px;
        width: 60%;
    }

    section.hero {
        aspect-ratio: 3/2;
        background-size: 50%;
        background-position: 90% 70%;
        padding-top: 64px;

    }

    nav {
        position: relative;

    }

    nav ul.navigation-menu {
        position: absolute;
        top: 64px;
        background: var(--light-01);
        left: 0;
        z-index: -1;
        width: 100vw;
    }

    nav ul.navigation-menu li a {
        font-size: 16px;
        white-space: nowrap;
    }

    nav ul.navigation-menu .subnav {
        display: none;
    }

    nav ul.navigation-menu > li:hover .subnav {
        display: none;
    }

    .btn-group {
        display: flex;
        flex-direction: column;
    }

    .shop-pets {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: auto auto;
        grid-column-gap: 24px;
        grid-row-gap: 24px;
    }

    .services {
        display: flex;
        flex-direction: column;
        grid-gap: 24px;
    }

    section:not(.hero) {
        padding: var(--pg-margin);
    }

    #locate p {

        width: 60%;
    }

    footer {
        flex-direction: column;
        text-align: center;
    }
}

@media only screen and (min-width: 1200px) {
    :root {
        --pg-margin: 48px;
    }

    section.hero h1 {
        --hero-text: 48px;
    }

    section.hero {
        aspect-ratio: 2/1;

    }

    .btn-group {
        flex-direction: row;
    }

    .shop-pets,
    .services {
        display: flex;
        flex-direction: row;
        grid-gap: 24px;
    }

    ul.subnav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: auto auto;
        grid-column-gap: 24px;
        grid-row-gap: 24px;
        padding: 48px;
    }


    nav ul.navigation-menu {
        top: 0;
        z-index: 1;
        background: none;
        width: auto;
        position: relative;
    }

    nav ul.navigation-menu .subnav {
        display: flex;
    }

    nav ul.navigation-menu > li:hover .subnav {
        display: flex;
    }

    #locate p {
        width: 40%;
    }

    footer {
        flex-direction: row;
        text-align: left;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    :root {
        --pg-margin: 80px;
    }

    section.hero h1 {
        --hero-text: 56px;
    }

    nav .navigation-menu > li > ul.subnav {
        padding: 48px;
        grid-gap: 24px;
    }

    section.hero {
        aspect-ratio: 3/1;
        background-size: 30%;
        background-position: 90% 60%;
    }

    .shop-pets,
    .services {
        display: flex;
        flex-direction: row;
        grid-gap: 24px;
    }

    nav ul.navigation-menu {
        top: 0;
        z-index: 1;
        background: none;
        width: auto;
        position: relative;
    }

    ul.subnav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row: auto auto;
        grid-column-gap: 24px;
        grid-row-gap: 24px;
        padding: 48px;
    }

    nav ul.navigation-menu > li:hover .subnav {
        display: grid;
    }

    #locate p {

        width: 40%;
    }

    footer {
        flex-direction: row;
        text-align: left;
    }
}

Final Output:

Creating a Responsive Pet Store Landing Page using HTML & CSS.gif
Read AlsoCrafting a User-Friendly Hotel Booking Website using HTML, CSS, and JavaScript.jpgCrafting a User-Friendly Hotel Booking Website using HTML, CSS, and JavaScript

Conclusion:

Congratulations on successfully crafting your responsive pet store landing page using HTML and CSS! Throughout this tutorial, we've covered essential aspects of web development, from setting up your project to incorporating responsive design principles.

In summary, you've learned how to structure a webpage using semantic HTML tags, enhance its visual appeal with CSS styling, and make it adaptable to different devices. The inclusion of source code ensures you can revisit and reinforce your newfound skills.

Thank you for joining us on this coding adventure. Embrace the endless possibilities of web development, and may your pet store landing page captivate visitors from every corner of the internet. Happy coding!

Code by: Jackie Zen

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 😊

Tags: responsive web design, html, css, pet store landing page, source code, mobile-friendly pet store website, html5 and css3 web design, pet store homepage design, web development tutorial, responsive design best practices
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post