darkcode

Web Design and Web Development Tutorials

Post Page Advertisement [Top]


In this Blog Post you will see how to create an amazing contact form by using only HTML & CSS.



HTML CODE:

<!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>Contact Page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <!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>Contact Page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contact-page">
        <h1 class="contact-page-title">
            <div class="back-title">Contact</div>
            <div class="front-title">Get In <span>Touch</span></div>
        </h1>

        <div class="contact-boxes">
            <div class="contact-box">
                <h2 class="box-title"><i class="box-icon fas fa-location-pin"></i>Location</h2>
                <div class="box-content">
                    Newyor, USA <br>
                    25 Bolvard
                </div>
            </div>
            <div class="contact-box">
                <h2 class="box-title"><i class="box-icon fas fa-envelope"></i>Email</h2>
                <div class="box-content">
                    alias@domain.tld
                </div>
            </div>
            <div class="contact-box">
                <h2 class="box-title"><i class="box-icon fas fa-phone"></i>Phone</h2>
                <div class="box-content">
                    +18852684455
                </div>
            </div>
        </div>


        <form action="" class="contact-form">
            <input type="text" class="nameInput" placeholder="Name">
            <input type="email" class="emailInput" placeholder="Email">
            <input type="text" class="subjectInput" placeholder="Subject">
            <textarea  class="msgArea" placeholder="Your Message"></textarea>
            <input type="submit" class="sendbtn" placeholder="Send Message">
        </form>
    </div>
</body>

</html>


CSS CODE:

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}

body{
    background-color: #111;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.contact-page{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.contact-page-title{
    position: relative;
    text-transform: uppercase;
    text-align: center;
}

.back-title{
    text-align: center;
    -webkit-text-stroke: 1px #ffffff12;
    color: transparent;
    font-size: 110px;
    letter-spacing: 6px;
}

.front-title{
    color: #f1f1f1;
    font-weight: 900;
    font-size: 50px;
    transform: translateY(-95px);
}

.front-title span{
    color: #0fbcf9;
}

.contact-boxes{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact-box{
    background-color: #ffffff12;
    padding: 20px;
    border-radius: 3px ;
    border-left: 2px solid #0fbcf9;
    width: 100%;
    max-width: 360px;
    margin-bottom: 40px;
}

.box-title{
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
}

.box-icon{
    background: #0fbcf9;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
}

.box-content{
    color: #858585;
    font-size: 14px;
    font-weight: 500;
}

.contact-form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

input{
    width: 100%;
    margin-bottom: 10px;
    background: #ffffff12;
    padding: 14px;
    color: #fff;
    border: 0;
}

textarea{
    width: 100%;
    margin-bottom: 10px;
    background: #ffffff12;
    padding: 14px;
    color: #fff;
    border: 0;
    resize: none;
    height: 160px;
}

input::placeholder{
    color: #888;
}

.nameInput,.emailInput{
    width: calc(50% - 5px);
}

.nameInput{
    border-top-left-radius: 10px;
}

.emailInput{
    border-top-right-radius: 10px;
}

.sendbtn{
    background-color: #0fbcf9;
    border-radius: 0 0 10px 10px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 500;
    transition: .3s linear;
}

.sendbtn:hover{
    opacity: .7;
}

@media screen and (max-width:1200px) {
    .contact-box{
        max-width: 100%;
    }

    .nameInput,.emailInput{
        width: 100%;
        border-radius: 0;
    }

    .nameInput{
        border-radius: 10px 10px 0 0;
    }
}

You can Download The Full Source Code From HERE.


2 comments:

Subscribe to: Post Comments (Atom)

Bottom Ad [Post Page]

Copyright 2021, darkcode. All rights Reserved.