Responsive Hero Section using HTML & CSS

Responsive Hero Section using HTML & CSS

Hello developers, today in this blog, you'll learn to create a Responsive Hero Section using HTML & CSS.


A hero section is a full-screen section that consists of a background image, or video, or illustrations, or animations, with some text and a button which will redirect to the linked page. The hero section is a website design term that is used to describe an oversized banner image at the top of a website that usually extends full width.

A hero section should consist of a title, a short description, a high-quality image or video, and a link to direct the user to the other page. Hero images are used to catch the visitor's attention and draw them into reading the article on the page.

In this blog (Responsive Hero Section), there is a heading, a title, a short description, a button which is named Click Me and there is a high-quality background image. The CSS media query property is used to make the page responsive.

The source code of this Responsive Hero Section is given below, if you want the source code of this program, you can copy it. You can use this Responsive Hero Section with your creativity and can take this project to the next level.

Responsive Hero Section [Source Code]

To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Hero section || Learning Robo</title> </head> <body> <section id="hero"> <div class="container"> <div class="info"> <h1>This is a title</h1> <h2>Lorem ipsum dolor sit amet consectetur.</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem vero ratione vitae dicta explicabo perferendis amet quis provident molestiae magni!</p> <a class="click" href="https://www.learningrobo.com/">Click Me</a> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> </section> </body> </html>
CSS provides style to an HTML page. To make the page attractive and responsive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: "Roboto Mono";
  font-size: 18px;
}
#hero {
  height: 100vh;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.342), rgba(0, 0, 0, 0.342)),
    url("https://cdn.pixabay.com/photo/2020/06/14/15/31/leaf-5298312__480.jpg")
      no-repeat center bottom / cover;
  color: whitesmoke;
}
.container {
  width: 90%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: left;
}
#hero .info h1 {
  font-size: 3rem;
  margin-bottom: .5rem;
  font-family: cursive;
}
#hero .info h2 {
    font-family: cursive;
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
#hero .info p {
  font-size: 1.2rem;
  max-width: 50%;
}
#hero .info .click{
  text-decoration: none;
  display: inline-block;
  background-color: #fff;
  border-radius: 4px;
  font-size: 1rem;
  padding: 0.5em 2em;
  margin-top: 2rem;
  color: black;
}

#hero .info .credit{
    color: #fff;
    margin-top: 2rem;
  }

  #hero .info .credit a{
    text-decoration: none;
    color: violet;
    margin-top: 2rem;
  }
@media only screen and (max-width: 768px) {
  html {
    font-size: 10px;
  }
}
We hope you would like this Responsive Hero Section.

Thank you for reading our blog. If you face any problem in creating this Responsive Hero Section, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome