Home
CSS
HTML

How to make responsive website section using html & css | Contact Us | 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.


HTML

<!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>Contact Us</title>
    </head>
    <body>
        <section class="contactUs">
            <div class="container">
                <div class="content">
                    <h1 class="head-text">Contact Us</h1>
                    <p class="body_text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore
                        magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation
                    </p>
                    <div class="message_container">
                        <input type="text" class="message" />
                        <button class="btn_message">Send</button>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

.contactUs{
  width: 100%;
  height: 100vh;
}

.content{
  text-align: center;
}

.container{
  max-width: 1280px;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.head-text{
  color: #000;
  font-size: 64px;
  font-weight: 700;
}

.body_text{
  max-width: 782px;
  color: #8a8a8a;
  font-size: 18px;
  font-weight: 400;
  margin: 16px 0 32px;
}

.message_container{
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
}

.message{
  max-width: 370px;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 3px;
  border: 1px solid #dadada;
  padding: 12px;
  transition: border-color 0.3s ease-in;
}

.message:focus{
  border: 3px solid #555;
}

.btn_message{
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  border: none;
  padding: 0 28px;
  background: #c86dd7;
}

@media screen and (max-width:780px){
  .container{
    padding: 0 24px;
  }
  .head-text{
    font-size: 48px;
  }

  .body_text{
    font-size: 16px;
  }
}

@media screen and (max-width:480px){
    .gallery{
        padding: 48px 20px;
    }

    .photo_container{
        grid-template-columns: repeat(1,1fr);
    }
    .left{
        text-align: center;
    }

    .head_text{
        margin: 0 auto;
    }

    .body_text{
        margin: 18px auto 0;
    }
}
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