Horizontal Signup Form with Package Details

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="bg-light d-flex justify-content-center align-items-center vh-100">
      <div class="container main-div bg-white shadow px-5 py-4">
        <div class="row">
          <div class="col-md-8 pl-md-5 pt-3">
            <div class="logo d-flex" style="width: 30%">
              <img
                src="https://miro.medium.com/v2/0*iFUTku6aErcAH4R7.png"
                alt=""
                style="background-color: white"
              />
              <h4 class="ml-2">asana</h4>
            </div>
            <div class="mt-5 mb-4 heading-div">
              <h2><b>SIGN UP</b></h2>
              <p class="text-secondary mt-3">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Labore, asperiores!
              </p>
            </div>

<div class="form">
              <input
                type="text"
                class="form-control rounded-0 text-secondary"
                placeholder="name@company.com"
              />
              <input
                type="submit"
                class="form-control rounded-0 btn-primary mt-3"
              />
            </div>
          </div>
          <div class="col-md-4 bg-light p-4">
            <div class="img text-center">
              <img
                src="https://cdn.iconscout.com/icon/free/png-512/free-wallet-588-456730.png?f=webp&w=512"
                style="width: 80px"
                alt=""
              />
            </div>
            <h5 class="text-secondary text-center mt-4">Your Plans Includes</h5>

<div class="list mt-4">
              <ul>
                <li class="d-flex text-success">
                  <i class="far fa-check-circle"></i>
                  <p>Unlimited task and projects</p>
                </li>
                <li class="d-flex text-success">
                  <i class="far fa-check-circle"></i>
                  <p>Unlimited storage</p>
                </li>

<li class="d-flex text-success">
                  <i class="far fa-check-circle"></i>
                  <p>List, Board, and Calendar Views</p>
                </li>

.heading-div {
  width: 90%;
}

.form {
        width: 90%;
      }

      .logo img {
        width: 18%;
      }

      ul li {
        list-style: none;
      }

      li i {
        font-size: 18px;
        margin-right: 10px;
        padding: 5px;
      }

      li p {
        margin-bottom: 0;
        padding: 0;
      }

      @media screen and (max-width: 768px) {
        .form {
          width: 100%;
        }
        .heading-div {
          width: 100%;
        }
      }

      @media screen and (max-width: 480px) {
        .row {
          display: block;
        }

        .logo img {
          width: 40%;
        }

        .col-8,
        .col-4 {
          width: 100%;
          text-align: center;
          margin: 0 auto;
        }
        .col-md-4 {
          margin: 5px 0px;
          padding: 5px 0px;
        }
      }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css

Copy CDN

https://code.jquery.com/jquery-3.4.1.slim.min.js

Copy CDN

https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

Copy CDN

Login and Signup

Asana Sign up Form

AdBlock Detected!