Create Full Responsive Website with Registration Form by using html, css and js

website with registration form

Creating a responsive website with a registration modal form using HTML, CSS, and JavaScript involves several steps. I'll provide you with a high-level overview and a simplified example to get you started. You can expand and customize it to fit your specific needs.

Step 1: Set Up Your Project Structure Create a project folder and organize it:

Step 2: Create the HTML Structure In your index.html file, create the basic HTML structure for your webpage. Include the necessary meta tags and link to your CSS and JavaScript files.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create Full Responsive Website with Registration Form by using html, css and js | Assignment Hippo</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>

  <header>
      <nav class="nav">
          <span class="hamburger-btn material-symbols-rounded">menu</span>
          <a href="#" class="logo">
              <h2>Assignment Hippo</h2>
          </a>
          <ul class="links">
              <span class="close-button material-symbols-rounded">close</span>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Contact</a></li>
          </ul>
          <button class="signin-button">SIGN IN</button>
      </nav>
  </header>

  <div class="blur-overlay"></div>
  <div class="form-model">
      <span class="close-button material-symbols-rounded">close</span>
      <div class="form login">
          <div class="content">
              <h2>SIGNIN</h2>
              <form action="#">
                  <div class="input-box">
                      <input type="text" required>
                      <label>Email</label>
                  </div>
                  <div class="input-box">
                      <input type="password" required>
                      <label>Password</label>
                  </div>
                  <a href="#" class="forgot-link">Forgot password?</a>
                  <button type="submit">Sign In</button>
              </form>
              <div class="bottom-link">
                  Don't have an account?
                  <a href="#" id="signup-link">Signup</a>
              </div>
          </div>
      </div>
      <div class="form signup">
          <div class="content">
              <h2>SIGNUP</h2>
              <form action="#">
                  <div class="input-box">
                      <input type="text" required>
                      <label>Email</label>
                  </div>
                  <div class="input-box">
                      <input type="password" required>
                      <label>Password</label>
                  </div>
                  <div class="policy-text">
                      <input type="checkbox" id="policy">
                      <label for="policy">
                          I agree the
                          <a href="#" class="option">Terms & Conditions</a>
                      </label>
                  </div>
                  <button type="submit">Sign Up</button>
              </form>
              <div class="bottom-link">
                  Already have an account? 
                  <a href="#" id="login-link">Sign In</a>
              </div>
          </div>
      </div>
  </div>
</body>
</html>
    

Step 3: Style Your Website In your style.css file, apply styles to make your website responsive and design the registration modal.


@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");

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

body {
    height: 100vh;
    width: 100%;
    background-color: lightblue;
    background-image: url('/banner.jpg');
    background-size: cover;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 0 10px;
    background-color: #000;
}

.nav {
    display: flex;
    padding: 22px 0;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
}

.nav .hamburger-btn {
    display: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}

.nav .logo {
    text-decoration: none;
}
.nav .logo h2 {
    color: #fff;
    font-weight: 600;
    font-size: 1.7rem;
}

.nav .links {
    display: flex;
    gap: 35px;
    list-style: none;
    align-items: center;
}

.nav .close-button {
    position: absolute;
    right: 20px;
    top: 20px;
    display: none;
    color: #000;
    cursor: pointer;
}

.nav .links a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.1s ease;
}

.nav .links a:hover {
    color: #ff1962;
}

.nav .signin-button {
    border: none;
    outline: none;
    background: #fff;
    color: #602742;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 45px;
    cursor: pointer;
    transition: 0.15s ease;
}

.nav .signin-button:hover {
    background: #ddd;
}

.form-model {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    max-width: 500px;
    background: #fff;
    border-radius: 10px;
    border: 2px solid #fff;
    transform: translate(-50%, -70%);
}

.show-popup .form-model {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.1s;
}

.form-model .close-button {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #878484;
    cursor: pointer;
}

.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}

.show-popup .blur-overlay {
    opacity: 1;
    pointer-events: auto;
}

.form-model .form {
    display: flex;
}

.form .content {
    width: 100%;
    padding: 35px;
}

.form h2 {
    text-align: center;
    margin-bottom: 29px;
}

form .input-box {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
}

.input-box input {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    font-size: 0.95rem;
    padding: 0 15px;
    border: 1px solid #717171;
    border-radius: 45px;
}

.input-box input:focus {
    border: 1px solid #d40075;
}

.input-box label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #4a4646;
    pointer-events: none;
    transition: 0.2s ease;
}

.input-box input:is(:focus, :valid) {
    padding: 16px 15px 0;
}

.input-box input:is(:focus, :valid)~label {
    transform: translateY(-120%);
    color: #d40058;
    font-size: 0.75rem;
}

.form a {
    color: #d4006d;
    text-decoration: none;
}

.form a:hover {
    text-decoration: underline;
}

form :where(.forgot-link, .policy-text) {
    display: inline-flex;
    margin-top: 13px;
    font-size: 0.95rem;
}

form button {
    width: 100%;
    color: #fff;
    border: none;
    outline: none;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 45px;
    cursor: pointer;
    margin: 25px 0;
    background: #d40058;
    transition: 0.2s ease;
}

form button:hover {
    background: #a7004b;
}

.content .bottom-link {
    text-align: center;
}

.form-model .signup,
.form-model.show-signup .login {
    display: none;
}

.form-model.show-signup .signup {
    display: flex;
}

.signup .policy-text {
    display: flex;
    margin-top: 14px;
    align-items: center;
}

.signup .policy-text input {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

@media (max-width: 950px) {
    .nav :is(.hamburger-btn, .close-button) {
        display: block;
    }

    .nav {
        padding: 15px 0;
    }

    .nav .logo img {
        display: none;
    }

    .nav .logo h2 {
        font-size: 1.4rem;
    }

    .nav .links {
        position: fixed;
        top: 0;
        z-index: 10;
        left: -100%;
        display: block;
        height: 100vh;
        width: 100%;
        padding-top: 60px;
        text-align: center;
        background: #fff;
        transition: 0.2s ease;
    }

    .nav .links.show-menu {
        left: 0;
    }

    .nav .links a {
        display: inline-flex;
        margin: 20px 0;
        font-size: 1.2rem;
        color: #000;
    }

    .nav .links a:hover {
        color: #d40043;
    }

    .nav .signin-button {
        font-size: 0.9rem;
        padding: 7px 10px;
    }
}

@media (max-width: 760px) {
    .form-model {
        width: 95%;
    }

    .form .content {
        padding: 30px 20px;
    }
}
       
         
Step 4: Add JavaScript Functionality
In your script.js file, write JavaScript code to handle the modal and form submission.

          const navbarMenu = document.querySelector(".nav .links");
          const hamburgerBtn = document.querySelector(".hamburger-btn");
          const hideMenuBtn = navbarMenu.querySelector(".close-button");
          const showPopupBtn = document.querySelector(".signin-button");
          const formPopup = document.querySelector(".form-model");
          const hidePopupBtn = formPopup.querySelector(".close-button");
          const signupLoginLink = formPopup.querySelectorAll(".bottom-link a");
          
          hamburgerBtn.addEventListener("click", () => {
              navbarMenu.classList.toggle("show-menu");
          });
          
          hideMenuBtn.addEventListener("click", () =>  hamburgerBtn.click());
          
          showPopupBtn.addEventListener("click", () => {
              document.body.classList.toggle("show-popup");
          });
          
          hidePopupBtn.addEventListener("click", () => showPopupBtn.click());
          
          signupLoginLink.forEach(link => {
              link.addEventListener("click", (e) => {
                  e.preventDefault();
                  formPopup.classList[link.id === 'signup-link' ? 'add' : 'remove']("show-signup");
              });
          }); 
         

Step 5: Implement Form Validation and Submission Within the form submission event listener, implement form validation and submission logic using JavaScript. You can check if the fields are filled out correctly and then send the data to your backend or perform any necessary actions.

This is a simplified example to get you started. Depending on your project's complexity, you may need to add more features, such as server-side validation, user authentication, and database integration. Additionally, you should enhance the styles and responsiveness of your website to create a polished user experience.