Complete Responsive Registration Form Project using HTML & CSS

#CSSResponsive #CSSForm #CSSLogin
description:
Complete Responsive Registration Form Project using HTML & CSS. Anyone can create easily without the knowledge of Javascript skill using only Html and CSS as a project. Enjoy!
Also Check out:
How to create Gradient Text using Html and CSS
https://youtu.be/lIMt0yK53Ms
source code:
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Create an Account Column</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" href="./style.css">
<style>
*, *::before, *::after {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    background-color: #e7e7e7;
}

#account-form-section {
    width: 100%;
    min-width: 500px;
    max-width: 1100px;
    height: 700px;
    margin: 3.5% auto;
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    background-color: #ffffff;
    border-radius: 1rem;
}

.background-image-display {
    width: 100%;
    height: 100%;
    background-image: url("nature.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1rem;
}

.slider-card {
    width: 100%;
    min-width: 45%;
    max-width: 80%;
    margin: 30rem auto 0;
    padding: 1rem;
    text-align: center;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 95%;
    backdrop-filter: blur(10px);
    border-radius: 1rem;
}

.slider-card > h2 {
    margin-bottom: 1rem;
}

.form-wrapper {
    width: 100%;
    max-width: 90%;
    min-height: 100%;
    margin: 0 auto;
    padding: 1rem;
    border-radius: 1rem;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr 1fr;
}

.heading-and-links > h2 {
    margin-bottom: 1rem;
    text-align: center;
}

.heading-and-links > p {
    color: #b1b1b1;
    text-align: center;
}

.account-links button {
    display: block;
    margin: 1rem auto;
    width: 100%;
    padding: 0.6rem;
    border-radius: 0.5rem;
}

.icon-wrapper {
    border: 0.15rem solid #000000;
    border-radius: 0.5rem;
    padding: 0.6rem;
    margin: 1rem 0rem;
    background-color: #f5f5f5;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    gap: 0.4rem; 
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-wrapper > p {
    font-size: 0.9rem;
}

.icon {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#google {
    background-image: url("https://api.iconify.design/logos/google-icon.svg");
}

#apple {
    background-image: url("https://api.iconify.design/logos/apple.svg");
}

.separator {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
    color: #e1e1e1;
}

.separator::before {
    content: "";
    display: inline-block;
    width: 45%;
    height: 2px;
    margin-bottom: 3px;
    background-color: #e1e1e1;
}

.separator::after {
    content: "";
    display: inline-block;
    width: 45%;
    height: 2px;
    margin-bottom: 3px;
    background-color: #e1e1e1;
}

.account-form {
    width: 100%;
    height: 100%;
}

.name-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
}

.name-wrapper label, .account-form label, .account-form button {
    display: block;
}

.account-form label {
    margin-bottom: 0.5rem;
}

.account-form input, .account-form button {
    width: 100%;
    padding: 0.8rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.account-form input {
    background-color: #f1f1f1;
    border: none;
}

.account-form button {
    background-color: #019AA0;
    outline: none;
    font-size: 0.9rem;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.checkbox-wrapper {
    margin: 0.5rem 0rem 2rem;
}

.checkbox-wrapper input {
    width: initial;
}

#terms[type="checkbox"] {
    accent-color: #019AA0;
}

.account-sign-in {
    text-align: center;
    margin-top: 1rem;
}

.account-sign-in a {
    color: #019AA0;
    text-decoration: none;
}

@media screen and (max-width: 850px) {
    #account-form-section {
        width: 100%;
        min-width: 500px;
        max-width: 1100px;
        height: auto;
        margin: 3.5% auto;
        padding: 1rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 1rem;
        background-color: #ffffff;
        border-radius: 1rem;
    }
    
    .slider-card {
        margin: 45rem auto 0;
    }
}
</style>
</head>
<body>
<header>
</header>
<main>
    <section id="account-form-section">

        <div class="background-image-display">
            <div class="logo-image">
            </div>
            <div class="slider-card">
                <h2>Be a Helping Hand!</h2>
                <p>Volunteers are needed to support community activites, assist individuals, 
                   and distribute resources. Your efforts will help improve lives and strengthen
                   the community.</p>
            </div>
            <div class="slider-button">
            </div>
        </div>

        <div class="form-wrapper">
            <div class="heading-and-links">
                <h2>Create an account</h2>
                <p>By creating an account you will be able to join our workshop!</p>
                <div class="account-links">
                    <div class="icon-wrapper">
                        <div id="google" class="icon">
                        </div>
                        <p>Continue with Google</p>
                    </div>
                    <div class="icon-wrapper">
                        <div id="apple" class="icon">
                        </div>
                        <p>Continue with Apple</p>
                    </div>
                </div>
            </div>
            <div class="separator">
                <span>or</span>
            </div>
            <form class="account-form" action="" method="">
                <div class="name-wrapper">
                    <div class="">
                        <label id="name">Name</label>
                        <input id="name" type="text" name="name" placeholder="John"/>
                    </div>
                    <div class="">
                        <label id="surname">Surname</label>
                        <input id="surname" type="text" name="surname" placeholder="Dr."/>
                    </div>
                </div>
                <label id="email">Email</label>
                <input id="email" type="email" name="email" placeholder="example@website.com"/>
                <label id="phone">Phone Number</label>
                <input id="phone" type="tel" name="phone" placeholder="(555) 555-5555"/>
                <div class="checkbox-wrapper">
                    <input id="terms" type="checkbox" name="terms" value="agree" checked/>
                    <span id="terms">I agree to the Terms of Service and Privacy Policy</span>
                </div>
                <button type="submit">Create Account</button>
            </form>
            <div class="account-sign-in">
                <p>Already have an account? <a href="#">Sign In</a></p>
            </div>
        </div>

    </section>
</main>
<footer>
</footer>
</body>
</html>
Complete Responsive Registration Form Project using HTML & CSS

Contact Form
