Form

Snippet #1

Design
HTML

Book for Speaking or Workshops

Call me at: 123-567-7890 or Book online by fill below form.

<div class="pt-10 pb-0">
																<div class="container-fluid">
																  <div class="row g-0 ">
																	<div class="col-md-3 col-12">
																	  <img src="../assets/images/gallery-img-1.jpg" alt="" class="img-fluid border-right border-white h-lg-100">
																	</div>

																	<div class="col-md-3 col-12">
																	  <img src="../assets/images/gallery-img-2.jpg" alt="" class="img-fluid border-bottom border-white h-lg-100">

																	  <img src="../assets/images/gallery-img-3.jpg" alt="" class="img-fluid border-bottom border-white h-lg-100 ">
																	</div>

																	<div class="col-md-3 col-12">
																	  <img src="../assets/images/gallery-img-4.jpg" alt="" class="img-fluid border-bottom border-white h-lg-100 border-left">

																	  <img src="../assets/images/gallery-img-5.jpg" alt="" class="img-fluid border-bottom border-white h-lg-100 border-left">
																	</div>
																	<div class="col-md-3 col-12">
																	  <img src="../assets/images/gallery-img-6.jpg" alt="" class="img-fluid border-left border-white h-lg-100">
																	</div>
																  </div>
																</div>
																<!-- workshop form -->
																<div class="container">
																  <div class="row">
																	<div class="offset-lg-3 col-lg-6 offset-md-1 col-md-10 col-12">
																	  <div class="card mt-lg-n18 mt-n12 text-center">
																		<div class="card-body p-5">
																		  <div class="mb-4">
																			<h2 class="mb-3">Book for Speaking or Workshops</h2>
																			<p class="mb-0 font-14">
																			  Call me at:<span class="form-label"> 123-567-7890 </span>or
																			  Book online by fill below form.
																			</p>
																		  </div>
																		  <form>
																			<div class="mb-3">
																			  <input type="text" class="form-control " placeholder="Name" required="">
																			</div>
																			<div class="mb-3">
																			  <input type="email" class="form-control " placeholder="Email" required="">
																			</div>
																			<div class="mb-3">
																			  <select class="form-select">
																				<option selected="">Select Workshops</option>
																				<option value="1">Business Coaching</option>
																				<option value="2">Relationship</option>
																				<option value="3">Lifecoaching</option>
																			  </select>
																			</div>
																			<div class="d-grid">
																			<button type="submit" class="btn btn-primary ">
																			  Book Now
																			</button>
																		</div>
																		  </form>
																		</div>
																	  </div>
																	</div>
																  </div>
																</div>
															  </div>

Snippet #2

Design
HTML

Join the Program

This Masterclass is absolutely FREE and plays in your local
time. You can choose your preferred session below.

Name

Date

Time

By clicking the button above, you are creating an account with Coach and agree to our Privacy Policy and Terms of Use, including receiving emails.

  <div class="py-9">
                              <div class="row">
                                <div class="offset-lg-2 col-lg-8 col-md-12 col-12 mb-5">
                                  <div class="card z-1">
                                    <div class="card-body p-4 p-lg-9">
                                      <div class="mb-8 text-center">
                                        <h2 class="mb-3">Join the Program</h2>
                                        <p>
                                          This Masterclass is absolutely FREE and plays in your local
                                          <br />time. You can choose your preferred session below.
                                        </p>
                                      </div>
                                      <form class="row">
                                        <div class=" col-12 col-md-6 mb-3">
                                          <label for="name" class="form-label">Name</label>
                                          <input type="text" class="form-control" id="name" placeholder="Name" name="name"
                                            required="" />
                                        </div>
                                        <div class=" col-12 col-md-6 mb-3">
                                          <label for="email" class="form-label">Email</label>
                                          <input type="email" class="form-control" id="email" placeholder="Email"
                                            name="email" required="" />
                                        </div>
                                        <div class="mb-3 col-12 col-md-6 mb-3">
                                          <label for="program-date" class="form-label">Date</label>
                                          <input type="text" id="program-date" class="form-control "
                                            placeholder="Select Date" />
                                        </div>
                                        <div class="mb-3 col-12 col-md-6 mb-4">
                                          <label for="time" class="form-label">Time</label>
                                          <select class="form-select" id="time">
                                            <option selected="">Select time</option>
                                            <option value="1">10:00 AM</option>
                                            <option value="2">12:00 PM</option>
                                            <option value="3">02:40 PM</option>
                                          </select>
                                        </div>
                                        <div class="col-12 ">
                                          <div class="d-grid">
                                            <button type="submit" class="btn btn-primary">
                                              Reserve My Spot Now
                                            </button>
                                          </div>
                                        </div>
                                        <div class="col-12">
                                          <p class="mt-3 text-muted mb-0 small ">
                                            By clicking the button above, you are creating an account
                                            with Coach and agree to our
                                            <a href="#" class="text-secondary font-weight-semi-bold">
                                              Privacy Policy</a>
                                            and
                                            <a href="#" class="text-secondary font-weight-semi-bold">Terms of Use</a>,
                                            including receiving emails.
                                          </p>
                                        </div>
                                      </form>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

Make following your passion your full time job

Learn How To Play A Different Game In Business With Your Own Rules

<div class="pb-12 pt-6">
					<div class="container">
					   <div class="row">
						  <div class="offset-lg-3 col-lg-6 col-md-12 col-12">
							 <div class="mb-5 text-center">
								<h2 class="h1 mb-3">
								   Make following your passion your full time job
								</h2>
								<p>
								   Learn How To Play A Different Game In Business With Your Own
								   Rules
								</p>
							 </div>
						  </div>
						  <div class="offset-lg-2 col-lg-8 col-md-12 col-12">
							 <form class="row">
								<div class="mb-3 mb-2 mb-lg-0 col-lg-5 col-md-5 col-12">
								   <label for="name" class="sr-only">name</label>
								   <input type="text" class="form-control" id="name" name="name" placeholder="Name" required="">
								</div>
								<div class="mb-3 mb-2 mb-lg-0 col-lg-5 col-md-5 col-12">
								   <label for="email" class="sr-only"></label>
								   <input type="email" class="form-control" id="email" name="email" placeholder="Email" required="">
								</div>
								<div class="col-lg-2 col-md-2 col-12">
								   <button class="btn btn-warning" type="submit">Submit</button>
								</div>
								<div class="col-12 mt-2">
								   <small class="text-muted">We will never send you spam.</small>
								</div>
							 </form>
						  </div>
					   </div>
					</div>
				 </div>

Snippet #4

Design
HTML

Get Connect

Our team gets hundreds of emails, notes, and requests for different opportunities every day. And yes, my team members and I do read every single email that comes through.

I love Hearing From You

If you are looking for advice, please fill out this form. We will
find you and get in touch.

<div class="py-9">
                              <div class="row">
                                <div class="offset-lg-2 col-lg-8 col-md-12 col-12 mb-5">
                                  <div class="card z-1">
                                    <div class="card-body p-4 p-lg-9">
                                      <div class="mb-8 text-center">
                                        <h2 class="mb-3">Join the Program</h2>
                                        <p>
                                          This Masterclass is absolutely FREE and plays in your local
                                          <br />time. You can choose your preferred session below.
                                        </p>
                                      </div>
                                      <form class="row">
                                        <div class=" col-12 col-md-6 mb-3">
                                          <label for="name" class="form-label">Name</label>
                                          <input type="text" class="form-control" id="name" placeholder="Name" name="name"
                                            required="" />
                                        </div>
                                        <div class=" col-12 col-md-6 mb-3">
                                          <label for="email" class="form-label">Email</label>
                                          <input type="email" class="form-control" id="email" placeholder="Email"
                                            name="email" required="" />
                                        </div>
                                        <div class="mb-3 col-12 col-md-6 mb-3">
                                          <label for="program-date" class="form-label">Date</label>
                                          <input type="text" id="program-date" class="form-control "
                                            placeholder="Select Date" />
                                        </div>
                                        <div class="mb-3 col-12 col-md-6 mb-4">
                                          <label for="time" class="form-label">Time</label>
                                          <select class="form-select" id="time">
                                            <option selected="">Select time</option>
                                            <option value="1">10:00 AM</option>
                                            <option value="2">12:00 PM</option>
                                            <option value="3">02:40 PM</option>
                                          </select>
                                        </div>
                                        <div class="col-12 ">
                                          <div class="d-grid">
                                            <button type="submit" class="btn btn-primary">
                                              Reserve My Spot Now
                                            </button>
                                          </div>
                                        </div>
                                        <div class="col-12">
                                          <p class="mt-3 text-muted mb-0 small ">
                                            By clicking the button above, you are creating an account
                                            with Coach and agree to our
                                            <a href="#" class="text-secondary font-weight-semi-bold">
                                              Privacy Policy</a>
                                            and
                                            <a href="#" class="text-secondary font-weight-semi-bold">Terms of Use</a>,
                                            including receiving emails.
                                          </p>
                                        </div>
                                      </form>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

Snippet #5

Design
HTML

Boost Your Sales Efficiency by 10x to Close Faster

Execute latest Sales Marketing Strategies to Change Your Game In The Face of Uncertainty.

Speakers

Bradley Williams

Sales Executive Coach

Maria Wicker

Customer Success Coach

27th Dec 2020, 10AM GMT

Define the business objectives and direction which the sales and marketing strategies are supporting. Ensure clarity and understanding. Broad customer segmentation completed, including demographic profiles, purchasing behaviour, needs and value.

Against the key brand values and desired outcomes by customers (for example: price, speedy turnaround, high quality), define the position that the company should occupy within the marketplace.

Key Learning

Building your talent management dream team
Empowering managers to recruit and retain top talent
Building your marketing strategy strong

Register for the webinar now!

Email*

First Name*

Last Name*

Company Name(optional)

Phone

City

State

<div class="p-3 p-lg-10">

                              <div class="row">
                                <div class="col-lg-6 col-md-12 col-12">
                                  <h1 class="mb-3">Boost Your Sales Efficiency by 10x to Close Faster
                                  </h1>
                                  <p class="lead mb-4">Execute latest Sales Marketing Strategies to Change Your Game In The
                                    Face of Uncertainty.</p>
                                  <h4>Speakers</h4>
                                  <div class="d-flex mt-3 align-items-center">
                                    <img src="../assets/images/avatar-3.png" alt="" class="avatar-md rounded-circle">
                                    <div class="ms-3">
                                      <h6 class="mb-0">Bradley Williams</h6>
                                      <span class="font-12">Sales Executive Coach</span>
                                    </div>
                                  </div>
                                  <div class="d-flex mt-3 mb-5 align-items-center">
                                    <img src="../assets/images/avatar-4.png" alt="" class="avatar-md rounded-circle">
                                    <div class="ms-3">
                                      <h6 class="mb-0">Maria Wicker</h6>
                                      <span class="font-12">Customer Success Coach</span>
                                    </div>
                                  </div>
                                  <h4>27th Dec 2020, 10AM GMT</h4>
                                  <p>Define the business objectives and direction which the sales and marketing strategies
                                    are supporting. Ensure clarity and understanding. Broad customer segmentation completed,
                                    including demographic profiles, purchasing behaviour, needs
                                    and value.</p>
                                  <p>Against the key brand values and desired outcomes by customers (for example: price,
                                    speedy turnaround, high quality), define the position that the company should occupy
                                    within the marketplace. </p>
                                  <h4>Key Learning</h4>
                                  <ul class="list-unstyled">
                                    <li><i class="fe fe-chevron-right"></i>Building your talent management dream team</li>
                                    <li><i class="fe fe-chevron-right"></i>Empowering managers to recruit and retain top
                                      talent</li>
                                    <li><i class="fe fe-chevron-right"></i>Building your marketing strategy strong</li>
                                  </ul>

                                </div>
                                <div class="col-md-6 col-12">
                                  <div class="card rounded-3 shadow-sm">

                                    <div class="card-body p-6">
                                      <h3 class="mb-4">Register for the webinar now!</h3>
                                      <form>
                                        <div class="row">

                                          <div class="mb-3 col-md-12 col-12">
                                            <label for="email" class="form-label"> Email<span
                                                class="text-danger">*</span></label>
                                            <input type="email" id="email" class="form-control" placeholder="Email Address"
                                              required="">
                                          </div>
                                          <div class="mb-3 col-md-6 col-12">
                                            <label for="fname" class="form-label"> First Name<span
                                                class="text-danger">*</span></label>
                                            <input type="text" id="fname" class="form-control" placeholder="First Name"
                                              required="">
                                          </div>
                                          <div class="mb-3 col-md-6 col-12">
                                            <label for="lname" class="form-label"> Last Name<span
                                                class="text-danger">*</span></label>
                                            <input type="text" id="lname" class="form-control" placeholder="Last Name"
                                              required="">
                                          </div>
                                          <div class="mb-3 col-md-12 col-12">
                                            <label for="companyName" class="form-label"> Company Name<span
                                                class="text-muted">(optional)</span></label>
                                            <input type="text" id="companyName" class="form-control"
                                              placeholder="Company Name">
                                          </div>
                                          <div class="mb-3 col-md-12 col-12">
                                            <label for="phone" class="form-label">Phone</label>
                                            <input type="text" id="phone" class="form-control" placeholder="Phone">
                                          </div>
                                          <div class="mb-3 col-12 col-md-12">
                                            <label class="form-label for=" city">City</label>
                                            <select class="form-select" id="city">
                                              <option selected="">Select City</option>
                                              <option value="1">Ahmedabad</option>
                                              <option value="2">Jaipur</option>
                                              <option value="3">Bombay</option>
                                            </select>

                                          </div>
                                          <div class="mb-3 col-12 col-md-12">
                                            <label class="form-label" for="state">State</label>
                                            <select class="form-select" id="state">
                                              <option selected="">Select State</option>
                                              <option value="1">Gujarat</option>
                                              <option value="2">Rajasthan</option>
                                              <option value="3">Maharashtra</option>
                                            </select>
                                          </div>
                                          <div class="col-12 col-md-12">
                                            <div class="d-grid">
                                            <button class="btn btn-primary" type="submit">Register</button>
                                          </div>
                                          </div>
                                        </div>

                                      </form>
                                    </div>
                                  </div>
                                </div>
                              </div>

                            </div>

Snippet #6

Design
HTML

Simple Ways to Transform Your Life - Life Hack

5 Simple Ways to Transform Your Life – and Change the World in the Process.

Download the eBook

First Name*

Last Name*

Email*

Company Name

By submitting your information, you agree to Coach Terms of Service and Privacy Policy. You can opt out anytime.

 <div class="bg-shape bg-dark border-top border-primary border-top-4">
                              <div class="container">
                                <div class="row">
                                  <div class="offset-lg-3 col-lg-6 col-md-12 col-12">
                                    <div class=" py-12 pt-lg-10 pb-lg-15 text-center">
                                      <div class="mb-5">
                                        <a href="../index.html"><img src="../assets/images/logo.svg" alt=""></a>
                                      </div>
                                      <h1 class="text-white mb-4">
                                        Simple Ways to Transform Your Life - Life Hack
                                      </h1>
                                      <p class="lead">
                                        5 Simple Ways to Transform Your Life – and Change the World in the Process.
                                      </p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

                            <div class="container mt-n10 mt-lg-n13 pb-10">
                              <div class="row">
                                <div class="offset-lg-1 col-lg-10 col-md-12 col-12">
                                  <div class="card ">
                                    <div class="row g-0 ">
                                      <div
                                        class="col-12 col-md-12 col-lg-6 rounded-start bg-light text-center d-flex align-item-center position-relative ">
                                        <img src="../assets/images/book.png" alt="" class="img-fluid ">

                                        <div class="d-none d-md-block position-absolute bottom-0 left-0 ms-n13 mb-n10">
                                          <img src="../assets/images/shape.svg" alt="">
                                        </div>
                                      </div>
                                      <div class="col-lg-6 col-md-12 col-12">
                                        <div class="card-body p-6 rounded-end">
                                          <h3 class="mb-3">Download the eBook</h3>
                                          <form>
                                            <div class="mb-3">
                                              <label class="form-label" for="fname">First Name<span
                                                  class="text-danger">*</span></label>
                                              <input class="form-control" type="text" name="last name" id="fname"
                                                placeholder="First Name" required="">
                                            </div>
                                            <div class="mb-3">
                                              <label class="form-label" for="lname">Last Name<span
                                                  class="text-danger">*</span></label>
                                              <input class="form-control" type="text" name="last name" id="lname"
                                                placeholder="Last Name" required="">
                                            </div>
                                            <div class="mb-3">
                                              <label class="form-label" for="email">Email<span
                                                  class="text-danger">*</span></label>
                                              <input class="form-control" type="email" name="email" id="email"
                                                placeholder="Email Address" required="">
                                            </div>
                                            <div class="mb-3">
                                              <label class="form-label" for="companyname">Company Name</label>
                                              <input class="form-control" type="text" name="companyname" id="companyname"
                                                placeholder="Company Name" required="">
                                            </div>

                                            <div>
                                              <div class="d-grid mb-2">
                                              <button type="submit" class="btn btn-primary">
                                                Download Book
                                              </button>
                                            </div>
                                              <span class="font-13">By submitting your information, you agree to Coach
                                                <a href="#">Terms of Service </a>and
                                                <a href="#">Privacy Policy</a>. You can opt out
                                                anytime.</span>
                                            </div>
                                          </form>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>

Snippet #7

Design
HTML

Call Us: +1 123.456.7890

Let’s talk about your business.

Your 60-minute Free Coaching Session is the next step to realizing your dream for your business—and your life.

Our Coaching Program is designed for owners and CEOs who want more— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed felis a ex faucibus vehicula. Praesent suscipit id diam at semper.

Get Started

First Name*

Last Name*

Email*

What's your phone number?*

What's your biggest frustration? *

Anything else we should know?

<!-- content -->
                              <div class="container-fluid ps-lg-0 pe-lg-0">
                                 <div class="row g-0">
                                    <div class="col-lg-6 col-md-12 col-12">
                                       <div class="p-xl-12 py-4 pe-xl-9 p-lg-8">
                                          <div class="d-flex justify-content-between mb-7 align-items-center">
                                             <a href="../index.html"><img src="../assets/images/logo-dark.svg" alt=""></a>
                                             <span class="font-14 font-weight-bold text-dark">Call Us: +1 123.456.7890</span>
                                          </div>
                                          <div class="mb-10 ">
                                             <h1 class="display-4 mb-4">Let’s talk about your business.</h1>
                                             <p class="lead">
                                                Your 60-minute Free Coaching Session is the next step to realizing your dream for
                                                your business—and your life.
                                             </p>
                                             <p>
                                                Our Coaching Program is designed for owners and CEOs who want more— Lorem ipsum
                                                dolor sit amet, consectetur adipiscing elit. Phasellus sed felis a ex faucibus
                                                vehicula. Praesent suscipit id diam at semper.
                                             </p>
                                             <div id="scroll-nav">
                                                <a href="#form" class="btn btn-dark mt-3">Get Started</a>
                                             </div>
                                          </div>
                                          <!-- form section -->
                                          <div id="form">
                                             <form class="row">
                                                <div class="mb-3 col-6">
                                                   <label class="form-label" for="firstname">First Name<span
                                                      class="text-danger">*</span></label>
                                                   <input class="form-control" type="text" name="last name" id="firstname"
                                                      placeholder="First Name" required="">
                                                </div>
                                                <div class="mb-3 col-6">
                                                   <label class="form-label" for="lastname">Last Name<span
                                                      class="text-danger">*</span></label>
                                                   <input class="form-control" type="text" name="last name" id="lastname"
                                                      placeholder="Last Name" required="">
                                                </div>
                                                <div class="mb-3 col-12">
                                                   <label class="form-label" for="formemail">Email<span
                                                      class="text-danger">*</span></label>
                                                   <input class="form-control" type="email" name="formemail" id="formemail"
                                                      placeholder="Email Address" required="">
                                                </div>
                                                <div class="mb-3 col-12">
                                                   <label class="form-label" for="formphone">What's your phone number?<span
                                                      class="text-danger">*</span></label>
                                                   <input class="form-control" type="text" name="phone" id="formphone"
                                                      placeholder="Phone" required="">
                                                </div>
                                                <div class="mb-3 col-12">
                                                   <label class="form-label" for="frustration">What's your biggest frustration?
                                                   <span class="text-danger">*</span></label>
                                                   <textarea class="form-control" id="frustration" rows="3"></textarea>
                                                </div>
                                                <div class="mb-3 col-12">
                                                   <label class="form-label" for="messages">Anything else we should know?</label>
                                                   <textarea class="form-control" id="messages" rows="3"></textarea>
                                                </div>
                                                <div class="mb-3 col-12">
                                                   <div class="d-grid">
                                                      <button type="submit" class="btn btn-primary">
                                                      Request a Call
                                                      </button>
                                                   </div>
                                                </div>
                                             </form>
                                          </div>
                                       </div>
                                    </div>
                                    <!-- image -->
                                    <div class="col-lg-6 d-lg-flex align-items-center d-none d-md-none d-lg-block bg-cover"
                                       style="background-image: url(../assets/images/avatar-big-1.jpg); 																		">
                                    </div>
                                 </div>
                              </div>

Snippet #8

Design
HTML

Your avatar

PNG or JPG no bigger than 800px wide and tall.

Upload Photo Delete Photo

General information

First Name*

Last Name*

Email*

Phone

Address

Address Line 1

Address Line 2

City

Country

Zip

<div class="card rounded-3 mb-4 ">
					<div class="card-body p-4">
					   <div class="d-lg-flex align-items-center justify-content-between">
						  <div class="d-flex align-items-center mb-4 mb-lg-0">
							 <img src="../assets/images/avatar-1.png" id="img-uploaded" class="avatar-xl rounded-circle " alt="">
							 <div class="ms-3">
								<h4 class="mb-0">Your avatar</h4>
								<p class=" mb-0">PNG or JPG no bigger than 800px wide and tall.</p>
							 </div>
						  </div>
						  <div>
							 <a href="#" class="btn btn-primary btn-sm">Upload Photo</a>
							 <a href="#" class="btn btn-light btn-sm ">Delete Photo</a>
						  </div>
					   </div>
					   <hr class="my-5">
					   <div>
						  <form class="row">
							 <div class="col-12 col-md-12">
								<h4 class="mb-3">General information</h4>
							 </div>
							 <div class="mb-3 col-12 col-md-6">
								<label class=" text-dark" for="fname">First Name<span class="text-danger">*</span></label>
								<input type="text" id="fname" class="form-control" placeholder="First Name" required="">
							 </div>
							 <div class="mb-3 col-12 col-md-6">
								<label class=" text-dark" for="lname">Last Name<span class="text-danger">*</span></label>
								<input type="text" id="lname" class="form-control" placeholder="Last Name" required="">
							 </div>
							 <div class="mb-3 col-12 col-md-6">
								<label class=" text-dark" for="email">Email<span class="text-danger">*</span></label>
								<input type="text" id="email" class="form-control" placeholder="Email address here" required="">
							 </div>
							 <div class="mb-3 col-12 col-md-6">
								<label class=" text-dark" for="phone">Phone</label>
								<input type="text" id="phone" class="form-control" placeholder="Phone" required="">
							 </div>
							 <div class="col-12 col-md-12">
								<h4 class="mb-3 mt-3">Address</h4>
							 </div>
							 <div class="mb-3 col-12 col-md-12">
								<label class=" text-dark" for="address">Address Line 1</label>
								<input type="text" id="address" class="form-control" placeholder="Address" required="">
							 </div>
							 <div class="mb-3 col-12 col-md-12">
								<label class=" text-dark" for="address2">Address Line 2</label>
								<input type="text" id="address2" class="form-control" placeholder="Address" required="">
							 </div>
							 <div class="mb-3 col-12 col-md-4">
								<label class=" text-dark">City</label>
								<select class="form-select">
								   <option selected="">Select City</option>
								   <option value="1">Ahmedabad</option>
								   <option value="2">Jaipur</option>
								   <option value="3">Bombay</option>
								</select>
							 </div>
							 <div class="mb-3 col-12 col-md-4">
								<label class=" text-dark">Country</label>
								<select class="form-select">
								   <option selected="">Select Country</option>
								   <option value="1">India</option>
								   <option value="2">UK</option>
								   <option value="3">USA</option>
								</select>
							 </div>
							 <div class="mb-3 col-12 col-md-4">
								<label class=" text-dark" for="zipcode">Zip</label>
								<input type="text" id="zipcode" class="form-control" placeholder="ex: 044" required="">
							 </div>
							 <div class="col-12">
								<button class="btn btn-primary" type="submit">Save Profile</button>
							 </div>
						  </form>
					   </div>
					</div>
				 </div>

Snippet #9

Design
HTML

Password

Forgot your password?

<div class="card rounded-3 mb-4 ">
					<div class="card-header bg-white p-4 d-flex justify-content-between align-items-center">
					   <h3 class="mb-0 h4">Password</h3>
					   <a href="#" class="text-reset font-14">Forgot your password?</a>
					</div>
					<div class="card-body p-4">
					   <form class="row">
						  <div class="mb-3 col-12 col-md-8">
							 <label class=" text-dark" for="currentPassword">Current Password</label>
							 <input type="password" id="currentPassword" class="form-control" placeholder="************" required="">
						  </div>
						  <div class="col-12 col-md-4">
						  </div>
						  <div class="mb-3 col-12 col-md-8">
							 <label class=" text-dark" for="newPassword">New Password</label>
							 <input type="password" id="newPassword" class="form-control" placeholder="************" required="">
						  </div>
						  <div class="col-12 col-md-4">
						  </div>
						  <div class="mb-3 col-12 col-md-8">
							 <label class=" text-dark" for="confirmPassword">Confirm Password</label>
							 <input type="password" id="confirmPassword" class="form-control" placeholder="************" required="">
						  </div>
						  <div class="col-12 col-md-4">
						  </div>
						  <div class="col-12">
							 <button class="btn btn-primary" type="submit">Update Password</button>
						  </div>
					   </form>
					</div>
				 </div>

Snippet #10

Design
HTML

Add New

Back to User

First Name*

Last Name*

Email*

Password *

Select Role*

Department*

Allow Permission

Administrator

Supervisor

Operator

<div class="card rounded-3 ">
					<div class="card-header bg-white px-4  py-3 d-flex justify-content-between align-items-center">
					   <h3 class="mb-0 h4">Add New </h3>
					   <a href="#" class="btn btn-light btn-sm">Back to User</a>
					</div>
					<div class="card-body p-4">
					   <form class="row">
						  <div class="mb-3 col-md-6 col-12">
							 <label for="firstName">First Name<span class="text-danger">*</span></label>
							 <input type="text" name="firstname" id="firstName" placeholder="First Name" class="form-control" required="">
						  </div>
						  <div class="mb-3 col-md-6 col-12">
							 <label for="lastName">Last Name<span class="text-danger">*</span></label>
							 <input type="text" name="lastname" id="lastName" placeholder="Last Name" class="form-control" required="">
						  </div>
						  <div class="mb-3 col-md-6 col-12">
							 <label for="email">Email<span class="text-danger">*</span></label>
							 <input type="email" name="email" id="email" placeholder="Email address here" class="form-control" required="">
						  </div>
						  <div class="mb-3 col-md-6 col-12">
							 <label for="password">Password</label>
							 <input type="password" name="password" id="password" placeholder="*******" class="form-control" required="">
						  </div>
						  <div class="mb-3 col-md-6 col-12">
							 <label for="role">Select Role<span class="text-danger">*</span></label>
							 <select class="form-select" id="role">
								<option selected="">Select Role</option>
								<option value="1">Admin</option>
								<option value="2">Developer</option>
								<option value="3">Designer</option>
							 </select>
						  </div>
						  <div class="mb-3 col-md-6 col-12">
							 <label for="department">Department<span class="text-danger">*</span></label>
							 <select class="form-select" id="department">
								<option selected="">Select Department</option>
								<option value="1">Admin</option>
								<option value="2">User</option>
								<option value="3">Front end Developer</option>
							 </select>
						  </div>
						  <div class="col-12 mt-3">
							 <h5 class="mb-3">Allow Permission</h5>
							 <div class="form-check   form-check-inline">
								<input type="checkbox" class="form-check-input" id="administrator" checked="">
								<label class="form-check-label" for="administrator">Administrator</label>
							 </div>
							 <div class="form-check   form-check-inline">
								<input type="checkbox" class="form-check-input" id="supervisor">
								<label class="form-check-label" for="supervisor">Supervisor</label>
							 </div>
							 <div class="form-check   form-check-inline">
								<input type="checkbox" class="form-check-input" id="operator">
								<label class="form-check-label" for="operator">Operator</label>
							 </div>
						  </div>
						  <div class="col-12 mt-3">
							 <button class="btn btn-primary btn-sm" type="submit">Save</button>
						  </div>
					   </form>
					</div>
				 </div>