A responsive hero section with content right is an element that makes your site’s design unique and attracts users’ attention.

Responsive Hero Section with Content Right Using HTML and CSS

Byjvcodes

A responsive hero section with content right is an element that makes your site’s design unique and attracts users’ attention.

This layout positions your content well on the right and leaves the page looking neat and balanced. This hero section will come in handy when creating anything from simple, personal blog, and portfolio websites to even professional business websites.

Plus, the complete source code is included and is free of charge!

GitHub Source: Responsive Hero Section with Content Right

Features

Here are some notable features of the responsive hero section with content right:

  • Content on Right: The general layout keeps the content-area on the right side of the screen, so it can be noticed.
  • Responsive: There is the ability to adjust the design to the various screen sizes of the desktop, laptops and other portable devices.
  • Easy to Customize: It is easy to change text, color, and image to match your branding.
  • Compatibility: Fully compatible with all current browsers, including Chrome, Firefox, Safari, and even Edge.
  • Clean Code: The source code is relatively compact, clearly structured, easy to comprehend for a beginner.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Responsive Hero Section

Follow these easy steps to create the responsive hero section with content right for your project:

  • Create Project Folder: Begin by making a new folder through which all files related to this project shall be stored.
  • Create index.html: Create an HTML file with the name index.html in your folder.
  • Create style.css: When you are designing your hero section you should include a CSS file named style.css.
  • Copy & Paste the Code: Just copy and paste the code at the bottom of this article in to the respected files.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<!-- Designed by JV Codes at www.jvcodes.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Health & Fitness Training</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section id="hero-856">
        <div class="cs-container">
            <div class="cs-content">
                <span class="cs-topper">Empowering Your Health</span>
                <h1 class="cs-title">Achieve Your Fitness Goals with Expert Guidance</h1>
                <p class="cs-text">
                    Unlock your potential with tailored fitness programs designed for your lifestyle. Start your journey towards a healthier, happier you today with our professional training and support.
                </p>
                <a href="#" class="cs-button-solid">Get Started Now</a>
            </div>
            <!--Hero Image-->
            <picture class="cs-picture">
                <!-- WebP format for Mobile -->
                <source type="image/webp" media="(max-width: 600px)" srcset="images/fitness.webp">
                
            
                <!-- WebP format for Tablet -->
                <source type="image/webp" media="(min-width: 601px) and (max-width: 1023px)" srcset="images/fitness.webp">
            
                <!-- WebP format for Desktop -->
                <source type="image/webp" media="(min-width: 1024px)" srcset="images/fitness.webp">
                            
                <!-- Final fallback: JPEG format -->
                <img aria-hidden="true" decoding="async" src="images/fitness.webp" alt="Fitness Training" width="570" height="701">
            </picture>
        </div>
        
        <svg class="cs-wave" width="1920" height="179" viewBox="0 0 1920 179" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1920 179V91.3463C1835.33 91.3463 1715.47 76.615 1549.2 32.9521C1299.48 -32.3214 1132.77 12.1006 947.32 61.5167C810.762 97.9044 664.042 137 466.533 137C331.607 137 256.468 123.447 188.082 111.113C130.974 100.812 78.5746 91.3609 0 91.3609V179H1920Z" fill="white"/>
        </svg>
    </section>
</body>
</html>

CSS

Here is the complete code for style.css file to style the hero section:

/* Include font from Google Fonts or a custom source */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap');

:root {
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    --fontPrimary: 'Poppins', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--fontPrimary);
}

*, *:before, *:after {
    box-sizing: border-box;
}

/* Typography Styles */
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

@media only screen and (min-width: 0rem) {
    #hero-856 {
        text-align: center;
        padding: clamp(7.25rem, 16.82vw, 10.25rem) 1rem clamp(3.75rem, 7.82vw, 6.25rem);
        background-color: #f7f7f7;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

    #hero-856 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 3rem;
    }

    #hero-856 .cs-content {
        max-width: 39.375rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #hero-856 .cs-title {
        font-size: clamp(2.4375rem, 5vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: center;
        max-width: 23ch;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
        position: relative;
    }

    #hero-856 .cs-text {
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        line-height: 1.5em;
        text-align: center;
        width: 100%;
        max-width: 33.1875rem;
        margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
        color: var(--bodyTextColor);
    }

    #hero-856 .cs-button-solid {
        font-size: 1rem;
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
    }

    #hero-856 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }

    #hero-856 .cs-button-solid:hover:before {
        width: 100%;
    }

    #hero-856 .cs-picture {
        width: 100%;
        max-width: 35.625rem;
        height: clamp(25rem, 95vw, 44.5rem);
        border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0 clamp(6.25rem, 17vw, 12.5rem);
        box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
        overflow: hidden;
        display: block;
        position: relative;
    }

    #hero-856 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: top;
    }

    #hero-856 .cs-wave {
        width: 320%;
        height: auto;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translateX(-50%);
        z-index: -1;
    }
}

@media only screen and (min-width: 64rem) {
    #hero-856 {
        text-align: left;
    }

    #hero-856 .cs-container {
        flex-direction: row;
        justify-content: space-between;
    }

    #hero-856 .cs-content {
        width: 40vw;
        flex: none;
        align-items: flex-start;
        order: 2;
    }

    #hero-856 .cs-title,
    #hero-856 .cs-text {
        text-align: left;
    }

    #hero-856 .cs-picture {
        height: clamp(38.9375rem, 60vw, 50.875rem);
    }

    #hero-856 .cs-wave {
        width: 200%;
    }
}

Download Source Code

From the button below you can download the full source code for the responsive hero section with the content. The code is copyright free, which means that it can be used without any thought of legal consequences. You may even apply it into your projects freely.

Download Source Code

Conclusion

The responsive hero section with content right is an easy and simple design to implement that also suitable for newcomers and will help in websites creation. It is also an effective method of enhancing the attractiveness of the site, and the ease with which users will navigate through it.

For those of you who will be using this code, please be kind enough to give credit to JV Source Codes by linking back to this post. Save the video and also subscribe to the channel for more such tutorials. If you have any questions about this or any other topic please leave a comment below and I will be glad to assist.

Download JV Source Codes

Similar Posts

Google Drive Direct Download Link Generator
| |

Google Drive Direct Download Link Generator Tool in HTML, CSS, JavaScript (Free Source Code)

Do you want to make tool for direct downloading files from Google Drive with less time and effort? You will be glad to know that the Google Drive Direct Download Link Generator Tool in HTML, CSS, and JavaScript is ready for you. Here I am going to provide you free source codes of your own…

Responsive Salary Calculator Using HTML, CSS and JavaScript (Free Source Code)
| |

Responsive Salary Calculator Using HTML, CSS and JavaScript (Free Source Code)

Responsive Salary Calculator is an easy to use salary calculating tool where you can add your basic amount and this will immediately give you your pay per hour, pay per day, pay per week, pay per month and yearly pay without Hassel. Whether you are self-employed or an employer, this calculator can reduce the level…

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript
| | |

Responsive Side Navigation Bar With Tooltips in HTML, CSS and JavaScript

A responsive side navigation bar not only helps to improve the navigation of your website but also address the issue of neatly placing links that enhance the experience of users. By using tooltips, it is possible to make the users aware of functions of each link, including when the design is compact. In this tutorial,…

Navigation Bar with Dark and Light Mode
| | |

Navigation Bar with Dark and Light Mode in HTML, CSS and JavaScript

If you want to add a simple, but a modern and responsive menu bar on your website, the perfect solution is the Navigation Bar with Dark and Light Mode in HTML, CSS, JavaScript. Now, I’ll give you the free source code that has a beautiful navigation bar, has a built-in Dark and Light mode. Not…

Age Calculator Source Code
| |

Age Calculator Using HTML, CSS and JavaScript (Free Source Code)

Determining an exact age reliably is a valuable resource in site development, especially in services that differentiate between certain ages. I’m happy to give you a free source code for Age Calculator Using HTML, CSS, and JavaScript; it’s more efficient to use, and a simple yet effective way to calculate the age instantly. This code…

Leave a Reply

Your email address will not be published. Required fields are marked *