Contact Form with Html & Css

Developer ali mirza September 27, 2022

create two files named:

  • index.html
  • style.css

Html Code:(index.html)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/f8d1b1ce75.js" crossorigin="anonymous"></script>
</head>
<body>
    <section>
        <div class="heading">
            <h2>contact us</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa ab tenetur labore sit! Eos sequi facere hic vero, nulla pariatur doloribus a debitis numquam laudantium porro amet aliquam cumque itaque. Minus, amet nulla tenetur quis eaque provident! Aspernatur dicta nemo dolor in distinctio illo obcaecati repellendus magni, consectetur reprehenderit pariatur.</p>
        </div>
        <div class="container">
            <div class="contactinfo">
                <div class="box">
                    <div class="icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="text">
                        <h3>Address</h3>
                        <address>
                            510-b third Avenue<br/>
                            baral colony<br/>
                            mangla cantt<br/>
                        </address>
                    </div>
                    </div>
                    <div class="box">
                    <div class="icon">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <div class="text">
                        <h3>phone number</h3>
                        <address>03170068650</address>
                    </div>
                    </div>
                    <div class="box">
                    <div class="icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="text">
                        <h3>Email</h3>
                        <address>muhammadalimirza90@gmail.com</address>
                    </div>
                </div>
                </div>
                <div class="contactform">
                    <h2>Send Message</h2>
                    <form action="">
                        <div class="inputbox">
                            <input type="text" name="" id="" required>
                            <span>Enter full name</span>
                        </div>
                        <div class="inputbox">
                            <input type="email" name="" id="" required>
                            <span>Enter Email</span>
                        </div>
                        <div class="inputbox">
                            <textarea name="" id="" required></textarea>
                            <span>Type your message</span>
                        </div>
                        <div class="inputbox">
                            <input type="submit" value="submit" name="" id="">
                        </div>
                    </form>
                </div>
        </div>
    </section>
</body>
</html>

Css Code:(style.css)

*{
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
section{
    position: relative;
    /* min-height: 100vh; */
    padding: 50px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: 100vw 100vh;
    background-color: pink;
    border: 2px solid black;
}
.heading{
    max-width: 800px;
    text-align: center;
}
.heading h2{
    font-size: 36px;
    font-weight: 500;
}
.heading p{
    font-weight: 300;
}
.container{
    display: flex;
    width:100%;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}
.contactinfo{
    width:50%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.box{
    position: relative;
    padding:20px 0;
    display: flex;
}
.icon{
    width: 60px;
    height: 60px;
    padding:12px;
    font-size: 35px;
    border: 2px solid black;
    border-radius: 50%;
    cursor: pointer;
}
.icon:hover{
    background-color: red;
    color: blue;
}
.text{
    margin-left: 20px;
}
.text h3{
    color:blue;
    font-weight: 700;
}
.contactform{
    width:40%;
    padding:60px;
    margin: 25px 0 0 0;
    padding: 25px;
    border: 2px solid black;
    background-color: white;
}
.contactform h2{
    font-size: 30px;
    font-weight: 500;
}
.inputbox{
    margin-top:10px;
    position: relative;
    width:100%;
}
input,textarea{
    width: 100%;
    padding: 5px 0;
    font-size: 16px;
    margin:10px 0;
    border:none;
    border-bottom: 2px solid blue;
    outline: none;
    resize: none;
}
textarea{
    border:2px solid blue;
}
span{
    position: absolute;
    left:0;
    padding: 5px 0;
    font-size: 16px;
    margin: 10px 0;
    pointer-events: none;
    color:black;
    transition:0.5s;
}
.inputbox input:focus~span,
.inputbox input:valid~span,
.inputbox textarea:focus~span,
.inputbox textarea:valid~span{
    font-size: 12px;
    color: red;
    top: -20px;
}
input[type=submit]{
    width:100%;
    background-color:lightblue;
    border-bottom: none;
    color:blue;
    font-weight: 500;
    font-size: 22px;
    cursor: pointer;
}
@media screen and (max-width:1000px){
    .container{
        flex-direction: column;
    }
    .contactinfo{
        margin-bottom: 50px;
        width: 100%;
    }
    .contactform{
        width: 100%;
    }
}
@media screen and (max-width:450px) {
    section{
        padding: 30px;        
    }
    .text{
        margin-left: 10px;
    }
}

Post a Comment

0 Comments