Registration Form Design in HTML and CSS with Code

Hey, developers welcome to Day 18 of our 90Days 90Projects challenge. And in Day 18 we are going to create a Registration Form Design in HTML and CSS with Code

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

Registration Form Design in HTML and CSS with Code

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Contact Us Page </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <section class="contact-section">
        <h2 class="hading"> Contact Us </h2>
        <input type="text" name="name" id="name" placeholder="Name">
        <input type="text" name="email" id="email" placeholder="Email">
        <input type="tel" name="ph" id="phone" placeholder="Phone">
        <div class="communication-method">
            <p> Preffered method of communication </p>
            <input type="radio" name="method" id=""> Email
            <input type="radio" name="method" id=""> Phone
        </div>

        <textarea name="message" id="message" placeholder="Message"></textarea>
        <button class="submit-btn"><a href="#"> Submit </a></button>
    </section>

</body>
</html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

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

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(171, 7, 138);
}

.contact-section {
    background-color: #fff;
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    margin: 1rem;
}

h2 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: rgb(73, 72, 72);
}

.contact-section input {
    outline: none;
    border: none;
    margin-bottom: 1.3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgb(214, 203, 185);
    resize: none;
}

textarea {
    border: none;
    resize: none;
    border-bottom: 1px solid rgb(214, 203, 185);
    outline: none;
}

.communication-method {
    margin-top: 0.5rem 0 1rem 0;
}

p {
    font-size: 1rem;
    margin-bottom: 5px;
}

.submit-btn {
    margin: 2rem 0 1rem 0;
    background-color: rgb(235, 37, 83);
    border: none;
    padding: .5rem;
    border-radius: 2rem;
    color: #fff;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

1 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad