Create Responsive Contact Us Form Page HTML & CSS

<!DOCTYPE html>
<html lang="en">

<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
    <style>
        /*------------------------ Google Fonts - Poppins ------------------------*/
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

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

:root {
            --primary-color: #46b5d1;
        }

body {
            background-color: #f8f9fa;
        }

.wrapper {
            padding: 7rem 0rem;
            width: 73%;
            margin: auto;
        }

.row-1 ul {
            display: flex;
            list-style: none;
        }

ul li {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

ul li .icons {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--primary-color);
            margin-bottom: 20px;
        }

ul li .icons {
            display: flex;
            align-items: center;
            justify-content: center;
        }

ul li p {
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 0;
        }

ul li p span:first-child {
            text-transform: capitalize;
        }

ul li p span:last-child {
            padding-left: 5px;
        }

ul li + li p span:last-child {
            color: var(--primary-color);
        }

ul li:first-child p span:last-child {
            color: #666666;
        }

.row-2 {
            display: flex;
            margin-top: 4.5rem;
        }

.row-2 .col-1 {
            width: 100%;
            padding: 3rem;
        }

.row-2 .col-1 h1 {
            text-transform: capitalize;
            font-size: 1.75rem;
            line-height: 1.75rem;
            font-weight: 400;
            margin-bottom: 1.5rem;
            color: black;
        }

form .input-field-row-1 {
            display: flex;
            gap: 1.8rem;
        }

form .input-field-row-1 .input-field {
            width: 100%;
        }

form .input-field {
            display: flex;
            flex-direction: column;
            margin-bottom: 1rem;
        }

form .input-field label {
            color: black;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
        }

form .input-field input,
        form .input-field textarea {
            width: 100%;
            line-height: 1.5rem;
            outline: none;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 2px;
            font-size: 16px;
            color: #666666;
            transition: all 0.2s linear;
        }

form .input-field input {
            height: 36px;
        }

form .input-field textarea {
            resize: none;
        }

form .input-field input:focus,
        form .input-field textarea:focus {
            background-color: white;
            border-color: var(--primary-color);
        }

form .input-field input::placeholder {
            color: rgba(0, 0, 0, 0.3);
        }

form input[type="submit"] {
            outline: none;
            border: none;
            border-width: 1px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 400;
            padding: 12px 16px;
            text-transform: capitalize;
            background-color: var(--primary-color);
            box-shadow: 0px 10px 20px -6px rgba(0, 0, 0, 0.12);
            margin-bottom: 20px;
            color: #f8f9fa;
        }

form input[type="submit"]:hover,
        form input[type="submit"]:focus {
            border-color: #2d9bb7 !important;
            background: #2d9bb7 !important;
        }

.row-2 .col-2 figure {
            width: 28.9rem;
            height: 35.2rem;
        }

.col-2 figure img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

@media (max-width: 1280px) {
            .wrapper {
                width: 90%;
            }
        }

@media (max-width: 1024px) {
            .row-2 .col-2 figure {
                width: 23.9rem;
                height: 29.2rem;
            }
        }

@media (max-width: 768px) {
            .row-1 ul {
                flex-wrap: wrap;
            }
            ul li {
                width: 50%;
            }
            .row-2 {
                flex-direction: column;
            }
            .row-2 .col-2 {
                display: none;
            }
        }
    </style>
    <title>Create Responsive Contact Us Form Page HTML & CSS</title>
</head>

<body>
    <div class="wrapper">
        <div class="row-1">
            <ul>
                <li>
                    <div class="icons">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <path fill="#f8f9fa"
                                d="M12 12q.825 0 1.413-.588T14 10q0-.825-.588-1.413T12 8q-.825 0-1.413.588T10 10q0 .825.588 1.413T12 12Zm0 10q-4.025-3.425-6.012-6.362T4 10.2q0-3.75 2.413-5.975T12 2q3.175 0 5.588 2.225T20 10.2q0 2.5-1.988 5.438T12 22Z" />
                        </svg>
                    </div>
                    <p>
                        <span>address:</span>
                        <span>198 West 21th Street, Suite 721 New York NY 10016</span>
                    </p>
                </li>
                <li>
                    <div class="icons"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                            viewBox="0 0 24 24">
                            <path fill="#f8f9fa"
                                d="M19.95 21q-3.125 0-6.175-1.363t-5.55-3.862q-2.5-2.5-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.4 8.45L6.975 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 17l2.35-2.35q.225-.225.588-.338t.712-.062l3.45.7q.35.1.575.363T21 15.9v4.05q0 .45-.3.75t-.75.3Z" />
                        </svg></div>
                    <p>
                        <span>phone:</span>
                        <span>+ 1235 2355 98</span>
                    </p>
                </li>
                <li>
                    <div class="icons">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <g fill="none">
                                <path
                                    d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z" />
                                <path fill="#f8f9fa"
                                    d="m21.433 4.861l-6 15.5a1 1 0 0 1-1.624.362l-3.382-3.235l-2.074 2.073a.5.5 0 0 1-.853-.354v-4.519L2.309 9.723a1 1 0 0 1 .442-1.691l17.5-4.5a1 1 0 0 1 1.181 1.329ZM19 6.001L8.032 13.152l1.735 1.66L19 6Z" />
                            </g>
                        </svg>
                    </div>
                    <p>
                        <span>email:</span>
                        <span>info@yoursite.com</span>
                    </p>
                </li>
                <li>
                    <div class="icons"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                            viewBox="0 0 24 24">
                            <path fill="#f8f9fa"
                                d="m11.8 20.025l.15-4.225l3.05-3h1.95v1.85l2.275.35q.275-.7.438-1.45t.162-1.55q0-2.225-1.112-4.063T15.8 5.05V8h-3v3h-2v3H8.775L6.8 11h-1v1l-1.775 1.975q.65 2.6 2.813 4.325t4.962 1.725Zm4-6.025h-3v-2h3v2Zm0-6h2.025l-1 3h-2.05L15.8 8Zm-4 14q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T1.8 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T11.8 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T21.8 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T11.8 22Z" />
                        </svg></div>
                    <p>
                        <span>website:</span>
                        <span>yoursite.com</span>
                    </p>
                </li>
            </ul>
        </div>
        <div class="row-2">
            <div class="col-1">
                <h1>contact us</h1>
                <form action="">
                    <div class="input-field-row-1">
                        <div class="input-field">
                            <label for="name">full name</label>
                            <input type="text" placeholder="Name">
                        </div>
                        <div class="input-field">
                            <label for="email">email address</label>
                            <input type="email" placeholder="Email">
                        </div>
                    </div>
                    <div class="input-field">
                        <label for="subject">subject</label>
                        <input type="text" placeholder="Subject">
                    </div>
                    <div class="input-field">
                        <label for="message">message</label>
                        <textarea name="w3review" rows="4" cols="30"></textarea>
                    </div>

</html>