How to make responsive website section using html & css | hero section | 1

        Hello guys. Welcome to my notes. If you want to see the steps making this tutorial, you can directly watch the video below.  and If you want the code from the tutorial, just scroll down.


<!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</title> </head> <body> <section class="hero"> <div class="container"> <h1 class="hero_head"> Empowering Your Journey Leading the Digital Revolution </h1> <p class="hero_text"> We're at the forefront of the digital revolution, connecting businesses, empowering growth, and leading the way in an ever-changing world. With our solutions, your journey to success begins here. </p> <div class="button_container"> <button class="btn btn_primary">Get Started</button> <button class="btn btn_secondary">Start a demo</button> </div> </div> </section> </body> </html> >


@import url(';500;600;700;800;900&family=Michroma&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } .hero{ background-image: url(src/wave.svg); background-position: center; background-size: cover; } .container{ max-width: 1280px; width: 100%; min-height: 100vh; padding: 0 48px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .hero_head{ color: #14192b; font-size: 68px; font-weight: 600; } .hero_text{ color: #888b94; font-size: 24px; line-height: 36px; margin: 24px 0 36px; max-width: 760px; } .button_container{ display: flex; flex-direction: row; gap: 24px; } .btn { padding: 22px 44px; border: none; border-radius: 4px; cursor: pointer; position: relative; color: white; } .btn_primary{ background: #0144e4; transform: translateY(0); transition: transform 0.2s ease-in; } .btn_secondary{ border: 1px solid #888b94; transform: translateY(0); transition: transform 0.2s ease-in; color: #14192b; } .btn_primary:hover{ transform: translateY(-5px); } .btn_secondary:hover{ color: #0144e4; transform: translateY(-5px); border: 1px solid #0144e4; } @media screen and (max-width:760px){ .container{ padding: 0 20px; } .hero_head{ font-size: 42px; } .hero-text{ font-size: 18px; } } @media screen and (max-width:480px){ .btn{ padding: 18px 36px; } }

or you can get full code in by clicking button bellow :

Download Code

Buy Me A Coffee

Thank You for coming to my notes, if you wanna see another tutorial , you can check to my notes or you can subscribe to my Youtube channel , where I post new tips&tricks and tutorials about HTML, CSS and Javascript. See You !!!

Post a Comment