<div class="form-body">
    <div class="form-image"></div>
    <div class="form-textarea">
        <h1>Contact us</h1>
        <div class="line"></div>
        <form method="post" name="contact_form" action="contacts.php">
            <textarea class="textbox smallBox" name="firstName" placeholder="First Name" maxlength="15" required accept-charset="utf-8"></textarea>
            <textarea class="textbox smallBox" name="lastName" placeholder="Last name" maxlength="15" required accept-charset="utf-8"></textarea>
            <textarea class="textbox smallBox" name="email" placeholder="E-mail" maxlength="30" required accept-charset="utf-8"></textarea>
            <textarea class="textbox smallBox" name="phoneNumber" placeholder="Phone number" maxlength="15" required accept-charset="utf-8"></textarea>
            <textarea class="textbox bigBox" name="messageText" placeholder="Write your message here" maxlength="600" required accept-charset="utf-8"></textarea>
            <button class="submit-btn" onclick="popUp()">SEND</button>
        </form>

    </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,900&display=swap');

html {
    font-size: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;}

*, *::before, *::after {box-sizing: inherit;}

body {
    margin: 0;
    padding: 0;
    line-height: 1.3;
    background-color: rgba(212, 212, 212, 1);
    font-family: 'Poppins', sans-serif;}

.form-body {
    width: 96vw;
    height: calc(96vh - 50px);
    margin: 2vh 2vw;
    background-color: white;
    border-radius: 20px;}
.form-image {
    display: none;}
.form-textarea {
    width: 100%;
    height: 100%;
    text-align: center;}
.form-textarea h1 {
    font-size: 10vw;
    width: 100%;
    padding-top: 2vh;
    margin: 0;}
.line {
    height: 4px;
    background-color: rgba(0, 173, 181, 1);
    margin: 0 20%;
    border-radius: 20px;
    margin-bottom: 2vh;
    -webkit-animation: line-expand 1s;
    -moz-animation: line-expand 1s; 
    -ms-animation: line-expand 1s; 
    -o-animation: line-expand 1s; 
    animation: line-expand 1s;}
@keyframes line-expand {
from { width: 10%;
    margin: 0 45% 2vh 45%; }
to { width: 60%; 
    margin: 0 20% 2vh 20%;}}
@-moz-keyframes line-expand {
from { width: 10%;
    margin: 0 45% 2vh 45%; }
to  { width: 60%; 
    margin: 0 20% 2vh 20%;}}
@-webkit-keyframes line-expand {
from { width: 10%;
    margin: 0 45% 2vh 45%; }
to { width: 60%; 
    margin: 0 20% 2vh 20%;}}
@-ms-keyframes line-expand {
from { width: 10%;
    margin: 0 45% 2vh 45%; }
to { width: 60%; 
    margin: 0 20% 2vh 20%;}}
@-o-keyframes line-expand {
from { width: 10%;
    margin: 0 45% 2vh 45%; }
to { width: 60%; 
    margin: 0 20% 2vh 20%;}}
.textbox {
    width: 80%;
    font-size: 5vw;
    padding-left: 3vw;
    padding-top: 1.4vh;
    margin-bottom: 2.5vh;
    outline: none;
    border: 1px solid rgba(0, 173, 181, 1);
    border-radius: 10px;
    background-color: rgba(230, 230, 230, 0.8)}
.textbox:focus {
    transition: .5s;
    background-color: rgba(245, 245, 245, 0.8)}
.smallBox {
    height: 6vh;}
.bigBox {
    margin-left: 1%;
    height: 30vh;}
textarea {
    resize: none;}
.submit-btn {
    font-size: 5vw;
    font-weight: 600;
    width: 40%;
    border-radius: 50px;
    background-color: rgba(0, 173, 181, 1);
    padding: .5vh 2vw;
    cursor: pointer;
    outline: none;
    border: none;
    color: #fff;
    transition: .3s;
    text-align: center;}

/*Tablet Portrait*/
@media screen and (min-width: 760px) {
.form-textarea h1 {
    font-size: 8vw;}
.textbox {
    font-size: 4vw;
    padding-left: 2vw;
    padding-top: 1vh;}
.submit-btn {
    font-size: 4vw;
    width: 30%;}
}

/*Laptop & PC*/
@media screen and (min-width: 1050px) {
.form-body {
    background-color: rgba(212, 212, 212, 1);
    width: 60vw;
    height: 80vh;
    margin: 5vh 20vw;
    border-radius: 30px;
    display: flex;
    overflow: hidden;}
.form-image {
    z-index: 1;
    display: inline-block;
    width: 50%;
    height: 100%;
    background: url(https://res.cloudinary.com/ogiboii/image/upload/v1604534030/callPerson_wwsbsp.jpg) center center no-repeat;
    background-size: cover;}
.form-textarea {
    background-color: white;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    z-index: 0;
    display: inline-block;
    width: 50%;
    height: 100%;
    margin-left: 0;
    -webkit-animation: expand 1s;
    -moz-animation: expand 1s; 
    -ms-animation: expand 1s; 
    -o-animation: expand 1s; 
    animation: expand 1s;}
@keyframes expand {
from {margin-left: -50%;}
to {margin-left: 0;}}
@-moz-keyframes expand {
from {margin-left: -50%;}
to {margin-left: 0;}}
@-webkit-keyframes expand {
from {margin-left: -50%;}
to {margin-left: 0;}}
@-ms-keyframes expand {
from {margin-left: -50%;}
to {margin-left: 0;}}
@-o-keyframes expand {
from {margin-left: -50%;}
to {margin-left: 0;}}
.form-textarea h1 {
    font-size: 2vw;}
.textbox {
    font-size: 1.2vw;
    padding-left: 1vw;
    padding-top: 1.2vh;
    margin-bottom: 1vh;}
.textbox:hover {
    transition: .5s;
    background-color: rgba(210, 210, 210, 0.8)}
.textbox:focus {
    transition: .5s;
    background-color: rgba(245, 245, 245, 0.8)}
.smallBox {
    height: 5vh;}
.submit-btn {
    font-size: 1.4vw;
    width: 30%; }
.submit-btn:hover {
    background-color: rgba(0, 173, 181, 1);
    opacity: .8;}
footer {
    margin: 0;
    position: fixed;
    bottom: 0;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.