<section class="contactDesign1">
            <form action="#">
                <section id="userInput">
                    <h1 class="title">Write Us</h1>
                    <hr>
                    <div class="formInput"><label for="username">Name</label><input type="text"></div>
                    <div class="formInput"><label for="email">Email</label><input type="email"></div>
                    <div class="formInput">
                        <label for="Verification" class="checky">Verification</label>
                        <label class="checkbox">
                            <input type="checkbox"/>
                            <span class="overlay">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="10"
                                    height="10"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    class="icon">
                                <polyline points="20 6 9 17 4 12"/>
                                </svg>
                            </span>
                            </label>
                        <span class="text">I am not a robot</span>
                    </div>
                </section>
                <section id="userMessage">
                    <label for="message">Message</label>
                    <textarea name="message" placeholder="Write text here..."></textarea>
                    <button>Send Message</button>
                </section>
            </form>
        </section>
        <section class="contactDesign2">
            <form action="#">
                <section class="contactInfo">
                    <h1 class="title">Contact Us</h1>
                    <ul class="contactDetails">
                        <li><i class="fas fa-map-marker"></i>Castle Black, Westeros</li>
                        <li><i class="fas fa-envelope"></i>jonsnow@nightwatch.com</li>
                        <li><i class="fas fa-user-circle"></i>Johnathon Snow</li>
                        <li><i class="fas fa-mobile-alt"></i>+33 (345)-546-6435</li>
                    </ul>
                    <ul class="socialMedia">
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                    </ul>
                </section>
                <section class="contactInput">
                    <h1 class="title">Get in Touch</h1>
                    <p>Feel free to drop a line below</p>
                    <input type="text" placeholder="Name">
                    <input type="email" placeholder="Email">
                    <textarea placeholder="Type your message here"></textarea>
                    <button>Send</button>
                </section>
            </form>
        </section>

@import url("https://fonts.googleapis.com/css?family=Montserrat:300,500,700");@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css");*,*::before,*::after{margin:0;padding:0;outline:0;box-sizing:border-box}
html,body{width:100%;height:100%}html{font-family:"Montserrat",sans-serif;box-sizing:border-box}
.container{width:100%;max-width:1200px;margin:0 auto}img{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}.contactDesign1{height:100vh;display:flex;background-image:linear-gradient(120deg,#d4fc79 0,#96e6a1 100%)}
.contactDesign1 form{background:#fafafa;color:#232931;width:100%;max-width:700px;margin:auto;display:flex;padding-top:2.5em;box-shadow:5px 5px 10px 2px #222}
.contactDesign1 form label{color:#666}.contactDesign1 form #userInput{width:300px;padding:0 50px 50px 50px;border-right:1px solid #c9d6df}
.contactDesign1 form #userInput .title{font-size:2em;margin-bottom:.5em}.contactDesign1 form #userInput hr{margin-bottom:1em;background:#96e6a1;border:#96e6a1;height:3px;width:60px}
.contactDesign1 form #userInput .formInput{margin-bottom:1.25em}.contactDesign1 form #userInput .formInput label{display:block;margin-bottom:.5em;font-size:.75em}
.contactDesign1 form #userInput .formInput input[type="text"],.contactDesign1 form #userInput .formInput input[type="email"]{width:100%;font-size:1em;background:transparent;border:0;border-bottom:2px solid #c9d6df;color:#333;padding-bottom:.25em}
.contactDesign1 form #userInput .formInput .checkbox input{position:absolute;opacity:0}
.contactDesign1 form #userInput .formInput .checkbox .overlay{position:absolute;height:20px;width:20px;background-color:transparent;border:2px solid #96e6a1}
.contactDesign1 form #userInput .formInput .checkbox .icon{color:#232931;display:none}
.contactDesign1 form #userInput .formInput .checkbox input:checked ~ .overlay{background-color:#96e6a1;transform:rotate(0);opacity:1;border:2px solid #96e6a1;padding-left:2px;padding-top:2px}
.contactDesign1 form #userInput .formInput .checkbox input:checked ~ .overlay .icon{display:block;transform:scale(1.75)}
.contactDesign1 form #userInput .formInput .text{margin-left:1.75em;font-size:.85em}
.contactDesign1 form #userMessage{width:400px;display:flex;flex-direction:column}
.contactDesign1 form #userMessage label{padding-left:1.25em;font-size:.75em;margin:.5em 0}
.contactDesign1 form #userMessage textarea{padding-left:1em;resize:none;height:100%;border:0;background:transparent;font-size:1em}
.contactDesign1 form #userMessage button{height:60px;background:#96e6a1;border:0;color:#232931;font-size:1em;text-transform:uppercase;font-weight:bold;width:100%}
.contactDesign2{height:100vh;display:flex;background:linear-gradient(to right,#ff416c,#ff4b2b);box-shadow:5px 5px 10px 2px #fff}
.contactDesign2 form{background:#fff;color:#232931;width:100%;max-width:700px;margin:auto;display:flex;padding:50px 0 50px 50px;position:relative}
.contactDesign2 form .title{font-size:1.75em;font-weight:300}.contactDesign2 form .contactInfo{background:#233142;width:300px;position:absolute;left:-80px;padding:1.25em 1.25em 2.5em 1.25em;color:#fafafa;height:80%}
.contactDesign2 form .contactInfo .title{margin-bottom:1.25em}.contactDesign2 form .contactInfo ul{list-style:none}
.contactDesign2 form .contactInfo .contactDetails li{margin-bottom:2em}.contactDesign2 form .contactInfo .contactDetails i{margin-right:1em}
.contactDesign2 form .contactInfo .socialMedia{margin-top:2.5em}.contactDesign2 form .contactInfo .socialMedia li{display:inline;padding:1.25em}
.contactDesign2 form .contactInfo .socialMedia li a:hover{color:#ff4b2b}.contactDesign2 form .contactInput{margin-left:200px;padding-top:1.25em;width:100%;padding-right:3em}
.contactDesign2 form .contactInput .title{margin-bottom:.25em}.contactDesign2 form .contactInput p{margin-bottom:1.25em}
.contactDesign2 form .contactInput input{margin-bottom:1.25em;display:block;width:100%;font-size:1em;background:rgba(200,200,200,0.3);border:0;color:#333;height:40px;padding-left:.75em}
.contactDesign2 form .contactInput textarea{margin-bottom:1.25em;display:block;padding:1em;resize:none;background:rgba(200,200,200,0.3);border:0;height:120px;width:100%;font-size:1em}
.contactDesign2 form .contactInput button{background:#ff4b2b;border-radius:50px;width:120px;border:0;text-transform:uppercase;color:#fafafa;font-size:1.25em;height:40px}