Responsive Contact Form Design with HTML CSS | Free Code

 
How to create contact page using  html and CSS

contact page




create a Responsive website using HTML AND CSS  

👇ஃ Create a  Contact us page à®ƒ

HTML CODE :-

<html>
    <head>
    <title>contact us form</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/
libs/font-awesome/
4.7.0/css/font-awesome.min.css">


</head>
<body>
    <div class="container">
 <h1><center><i>Contact Us</i></center>
</h1></br>
        <div class="content">
            <div class="left-side">
                <div class="address details">
                    <i class="fa fa-home"></i>
                    <div class="topic">
Address</div>
                    <div class="text-one">
satara</div>
</div>
 <div class="phone details">
    <i class ="fa fa-phone"></i>
    <div class ="topic">phone</div>
    <div class="text-one">+0198 9156 2356</div>
    <div class="text-two">+0125 9825 2725</div>
</div>
<div class="email details">
    <i class="fa fa-envelope"></i>
    <div class="topic">Email</div>
    <div class="text-one">shreesareeshop@gmail.
com</div>
    <div class="text-two">shree@gmail.com</div>
</div>

</div>
<div class="right-side">
    <div class="topic-text"><center>Shree
Saree Shop</center></div><br>
<p><small>if you have any work from me or any
types of quries
    related to my Shree Saree Shop, you can
send me message from here.
    It's my pleasure to help you.</small></p>
  <form action ="#">

    <div class="input-box">
        <input type="text" placeholder=
"Enter your name">
            </div>
            <div class="input-box">
                <input type="email"
placeholder="Enter your email">
            </div>
           
            <div class="input-box">
                <textarea rows="4" cols="50"
name="comment" form="usrform">
                    Enter text here...
</textarea>
          <div class="button">
            <input type="button" value
="send Now">
            </div>
            </form>
            </div>
            </div>
            </div>
        </body>
    </html>

How to create contact page using  html and CSS

CSS CODE :-

<style>

        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:"poppins",sans-serif;
        }
        body{
            height :100vh;
            width:100%;
            background:#c8e8e9;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .container{
            width: 85%;
            background:#fff;
            border-radius:6px;
            padding:20px 60px 30px 40px;
        box-shadow:0 5px 10px rgba(0,0,0,0.2);
              }
              .container .content {
                display:flex;
                align-items:center;
                justify-content:space-between;
              }
              .container .content .left-side{
                width:25%;
                height:100%;
                display:flex;
                flex-direction: column;
                align-items :center;
                justify-content: center;
                margin-top :15px;
                position :relative;
              }
              .content .left-side::before {
                content :'';
                position :absolute;
                height :70%;
                width :2px;
                right:-15px;
                top:50%;
                transform:translateY(-50%);
                background:#afafb6;
              }
              .content .left-side .details{
                margin:14px;
                text-align:center;
              }
              .content .left-side .details i{
                font-size:30px;
                color:#3e2093;
                margin-bottom:10px;
              }
              .content .left-side .details .topic{
                font-size:18px;
                font-weight:500;
              }
    .content .left-side .details .text-one,
     .content .left-side .details .text-two{
              font-size :14px;
                color:#afafb6;
              }
              .container .content .right-side{
                width:75%;
                margin-left:75px;
              }
              .content .right-side .topic-text{
                font-size:23px;
                font-weight:600;
                color:#3e2093;
              }
              .right-side .input-box{
                height:50px;
                width:100%;
                margin:12px 0;
              }
             
         .right-side .input-box input,
         .right-side .input-box textarea{
            height:100%;
            width:100%;
            border:none;
            outline:none;
            font-size:16px;
            background:#F0F1F8;
            border-radius:6px;
            padding:0 15px;
            resize:none;
                  }
                  .right-side .message-box{
                    min-height:110px;
                     }
            .right-side .input-box textarea{
                         padding-top:6px;
                     }
                     .right-side .button{
                        display:inline-block;
                        margin-top:12px;
                     }
             .right-side .button input
[type="button"]{
                        color:#fff;
                        font-size:18px;
                        outline:none;
                        border:none;
                        padding:8px 16px;
                        border-radius:6px;
                        background:#3e2093;
                        cursor:pointer;
                  transition: all 0.3s ease;
                         }
          .button input[type="button"]:hover{
                            background:#5029bc;
                         }
                         @media(max-width:950px){
                            .container{
                                width:90%;
              padding:30px 40px 40px 35px;
                               }
               .container .content .right-side{
                                width:75%;
                              margin-left:55px;
                               }
                            }
                     @media(max-width:820px){
                                .container{
                               margin:40px 0;
                               height:100%;
                                }
                        .container .content{
         flex-direction:column-reverse;
                                }
              .container .content .left-side{
                                  width:100%;
                        flex-direction:row;
                               margin-top:40px;
                 justify-content:center;
                              flex-wrap:wrap;
                                   
                                }
           .container .content .left-side::before{
                                display:none;
                           
                                }
         .container .content .right-side{
                                    width:100%;
                                margin-left:0;
                                }                          

                            }
            </style>

How to create contact page using  html and CSS

OUTPUT :-

 
contact us page using html & css


 

Related Post :- 

php if else statements

css box padding property

css element selector



Comments

Post a Comment

Popular posts from this blog

HTML Tag

Image
 HTML Tag  Html basic tag:-   <!DOCTYPE html> Html  first line of the code <!DOCTYPE html> is called a doctype declaration the browser which version of HTML the page is written . Html tag using the doctype the HTML5 , the most up-to-date version of  HTML language.The DOCTYPE declaration of the instruction to web browser of HTML the page is written in.  <HTML>:- <Html>.   </html> <html> tag tells the browser  this is HTML document . The <html> tag represent the root of  HTML document. The <html> tag is the container for other HTML elements  <!DOCTYPE> . The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.HTML is a computer language that makes up most web pages and online applications. A hypertext text used to reference other pieces of text, while a markup language is a series of markings that tells w...
Read more

CSS Text Color Explained with Syntax and HTML Examples

Image
 What Is CSS Text Color This Blog You Will Learn  à®ƒ   What Is CSS Text Color  à®ƒ   Syntax   à®ƒ   Purpose of Text Color  à®ƒ    Real world Use Cases  à®ƒ    What Is CSS Text Color  Example    à®ƒ   Output What Is CSS Text Color CSS text color refers to the color applied to text content on a web page using the color property in CSS. It controls how text appears visually and plays a major role in readability, accessibility, branding, and user experience . Syntax  selector{   color:value; } Purpose of Text Color ✅ Make content readable.  ✅ Highlight important information. ✅ Match brand identity. ✅ Create visual hierarchy. ✅ Improve user experience. Real world Use Cases Highlighting error messages. Emphasizing headings. Branding and theme design improving content readability. ஃ  structure diagram examples What Is CSS Text Color Example   <! DOCTYPE html > ...
Read more

HTML Input Type Submit Syntax and Example

Image
What is Input Type Submit in HTML The input type="submit" in HTML is used to create a submit button in a form. When a user clicks this button, it sends (submits) the form data to a server for processing. In simple words, a submit button helps users send the information they entered in a form, like login details, contact forms, or registration data. Syntax : <input type= "submit" value="submit"> type ="submit"  ➡ create a submit button  value ="send"    ➡ text shown on the button A button that submit the form.<input type ="submit"> defines  button for submitting form data  form-handler. The form-handler is typically server page with the  script for processing input data. the form -handler is specified in the forms action attribute.  ⭐ HTML Input Type Submit Syntax and Example  program <! DOCTYPE html > < html > < body > < h2 > Submit Button </ h2 > < p > The < strong >...
Read more