Contact Form Style 3

HTML

<section class="cf-section">
    <div class="cf-container">
        <div class="cf-row">
            <div class="cf-col">
                <div class="cf-box">
                    <div class="cf-col-grid">
                        <h3 class="cf-title">
                            Contact Us
                        </h3>
                        <h3 class="cf-subtitle">
                            Enim tempor eget pharetra facilisis sed maecenas adipiscing. 
Eu leo molestie vel, ornare non id blandit netus.
                        </h3>
                        <form action="" class="cf-form">
                            <input class= "textbox" type="name" id="name" value="" placeholder="Name">

                            <input class= "textbox" type="email" id="email" value="" placeholder=" E-mail">

                            <input type="tel" id="telNo" class= "textbox" name="telNo"  required placeholder="Your contact number" />

                            <select name="media" id="media_list" class="selectbox" placeholder="How did you find us?">
                                <option value=""disabled selected hidden>How did you find us?</option>
                                <option value="instagram">Instagram</option>
                                <option value="linkedin">LinkedIn</option>
                                <option value="facebook">Facebook</option>
                                <option value="twitter">Twitter</option>
                                <option value="youtube">YouTube</option>
                                <option value="ads">Advertisements</option>
                                <option value="mouth">Word of Mouth</option>
                                <option value="other">Other</option>
                              </select>
                        
                            <button class="btn-style-1"><p class="cf-btn-desc">Send</p></button>
                        </form>
                        <div class="cf-media">
                            <div class="cf-contact-info">
                                <div class="admin-info">
                                    <i class="fa-solid fa-location-dot cf-font-icon"></i>
                                    <p class="cf-admin-info">
                                        <a class="btn-style-3" href="https://goo.gl/maps/yvURrzP2K41HvzDQ9">Akshya Nagar 1st Block 1st Cross, Rammurthy
     nagar, Bangalore-560016</a>
                                    </p>
                                </div>
                                <div class="admin-flex">
                                    <div class="admin-info">
                                        <i class="fa-solid fa-envelope cf-font-icon"></i>
                                        <p class="cf-admin-info"><a class="btn-style-3" href="mailto:someone@example.com">somebody@example.com</a>
                                        </p>
                                    </div>
                                    <div class="admin-info">
                                        <i class="fa-solid fa-phone cf-font-icon"></i>
                                        <p class="cf-admin-info"><a class="btn-style-3" href="tel:+910000000000">+91 000 000 0000</a>
                                        </p>
                                    </div>
                                 </div>
                            </div>
                            <div class="cf-social-media">
                                <a href="https://www.instagram.com/nuit_solutions/" class="btn-style-2">
                                    <i class="fa-brands fa-instagram cf-media-icon instagram"></i>
                                </a>
                                <a href="https://twitter.com/Cristiano" class="btn-style-2">
                                    <i class="fa-brands fa-twitter cf-media-icon twitter"></i>
                                </a>
                                <a href="https://www.facebook.com/nuitsolutions/" class="btn-style-2">
                                    <i class="fa-brands fa-facebook cf-media-icon facebook"></i>
                                </a>
                                <a href="https://www.youtube.com/channel/UCInQKlooYV87vPYhPSQ69Ig" class="btn-style-2">
                                    <i class="fa-brands fa-youtube cf-media-icon youtube"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="cf-col-map">
                        <div class="cf-rectangle-map">
                            <iframe class="cf-map-link" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3764.5378877169424!2d72.8469661!3d19.3458488!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7ae4d9465d77f%3A0x8cd6f6c00e3ee101!2sNUIT%20Solutions!5e0!3m2!1sen!2sin!4v1692602150094!5m2!1sen!2sin" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</section>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat';
}
.cf-col-grid {
    padding: 20px;
    background: #eeeeeea1;
}
.cf-box {
    display: grid;
    grid-template-columns: 70% 30%;
}
.cf-form {
    display: grid;
    margin-block: 15px;
    width: fit-content;
}
.cf-title {
    font-size: 54px;
    font-weight: 600;
    letter-spacing: 0.54px;
    margin-block: 20px;
    width: fit-content;
    color: #FF2171;
    position: relative;
}
.cf-subtitle {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.16px;
    max-width: 600px;
    line-height: 1.6;
}
.cf-col-grid input, .cf-col-grid textarea, .cf-col-grid select{
    width: 501px;
    height: 55px;
    font-family: 'Montserrat';
    font-size: 16px;
    padding-inline: 1.5%;
    border: 3px solid #828282;
    outline: transparent;
    border-radius: 12px;
    margin-block: 10px;
    color: #828282;
}
textarea {
    padding-block: 15px;
    overflow: hidden;
}
.cf_checkbox {
    margin-block: 10px;
    color: #383C3E;
    font-size: 14px;
    margin-inline: 1%;
    width: 501px;
    column-gap: 2%;
    display: flex;
    align-items: center;
}
.cf_checkbox input{
    width: 20px;
}
.terms_agreed{
    margin-block: 5px;
}
.cf-form .btn-style-1 {
    color: var(--primeraly-white, #FFF);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 40px;
    border: 3px solid transparent;
    background: #FF2171;
    display: flex;
    width: 80%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    padding: 0;
}
.cf-form .btn-style-1::after {
    position: absolute;
    content: '';
    width: 610px;
    height: 155px;
    border-radius: 50%;
    background: #FFF;
    border: 1px solid #FF2171;
    top: -85px;
    left: -605px;
    transition: 1s;
}
.cf-form .btn-style-1:hover::after {
   left: 0px;
    top: -50px;
}
.cf-btn-desc{
    z-index: 99;
    width: 100%;
    padding: 16px 0px;
    margin: 0;
    transition: 0.5s;
}
.cf-btn-desc:hover{
    color: #FF2171;
    transition: 0.5s;
}
.btn-style-1:hover {
    /* background: white; */
    border: 3px solid #FF2171;
    color: #FFF;
    transition: 0.5s;
}
.cf-media{
    max-width: 501px;
}
.cf-contact-info{
    margin: 20px;
}
.cf-admin-info, .cf-admin-info .btn-style-3{
    color: #000;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    text-decoration: none;
    line-height: 1.4;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}
.cf-admin-info .btn-style-3:hover{
    color: #FF2171;
}
.admin-info {
    display: flex;
    column-gap: 3%;
    text-align: center;
    justify-content: center;
    margin: 10px 10px;
    width: 100%;
}
.cf-font-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF2171;
    font-size: 18px;
}
.btn-style-2 {
    border: 2px solid transparent;
    background: transparent;
    margin-inline: 10px;
    padding: 5px;
    transition: 0.5s;
}
.btn-style-2:hover {
    border: 2px solid #FF2171;
    border-radius: 7px;
}
.cf-media-icon{
    font-size: 25px;
}
.cf-social-media {
    display: flex;
    margin: auto;
    max-width: fit-content;
}
.instagram{
    color:  #d62976; 
}
.twitter{
    color: #1DA1F2;
}
.facebook{
    color: 	#1877F2;
}
.youtube{
    color: #CD201F;
}
.cf-rectangle-map {
    width: 560px;
    height: 610px;
    border-radius: 20px;
    border: 5px solid #FF2171;
    position: relative;
    top: 90px;
    right: 310px;
    box-shadow: 0 0 16px 2px #00000094;
}
.cf-map-link {
    object-fit: cover;
    border-radius: 15px;
}
.cf-col-map {
    background: #FF2171;
}
.admin-flex {
    display: flex;
    width: 96%;
    margin: auto;
}
.cf-form .textbox::placeholder{
    color: #82828282;
}
@media(max-width:1180px){
    .cf-contact-info{
        margin-block: 0px;
    }
    .cf-box {
        grid-template-columns: 100%;
        grid-template-rows: 72% 31%;
    }
    .cf-title, .cf-subtitle, .cf-form{
        margin: 20px auto;
    }
    .cf-media {
        display: grid;
        width: 100%;
        margin: auto;
    }
    .cf-social-media{
        justify-self: start;
        margin-block: 0px;
    }
    .cf-col-map {
        height: revert;
    }
    .cf-rectangle-map {
        max-width: 900px;
        height: 390px;
        top: -70px;
        right: 0px;
        margin: auto;
    }
}
@media(max-width:480px){
    .cf-rectangle-map {
        width: 300px;
        top: -140px;
    }
    .cf-title {
        font-size: 40px;
    }
    .cf-col-grid input,.cf-col-grid textarea, .cf-col-grid.btn-style-1, .cf_checkbox, .cf-col-grid select{
        width: 300px;
    }    
    .cf-media{
        margin: 0 0 110px 0;
    }
    .cf_checkbox input {
        width: 20px;
    }
    .cf-form .btn-style-1{
        width: 300px;
    }
    .admin-flex {
    display: block;
        width: 100%;
    }
    .cf-admin-info, .cf-admin-info .btn-style-3{
        justify-content: start;
        flex-wrap: nowrap;
    }
    .admin-info{
    text-align: start;
    justify-content: start;
    }
    .cf-social-media{
        padding-block: 30px;
    }
}

Links

<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<!-- font awesome -->
<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" />

Contact Form Style 3

Contact Us

Enim tempor eget pharetra facilisis sed maecenas adipiscing. Eu leo molestie vel, ornare non id blandit netus.

HTML

CSS

Links