Category: Web Template

Light Simple Web Template

1.first download html css boilarplate by oleetech and open index page it was a blank page now add below code for design

<div class="w3-container main  ">
	<div class="w3-container w3-mobile w3-display-middle w3-light-gray w3-padding-16 w3-border" style="width: 500px ;max-width: 800px;">
		<h2 class="w3-center  w3-text-blue ">Login</h2>
		<div class="w3-container w3-card w3-round-xlarge w3-leftbar
">
			<label>User Name</label>
			<input class="w3-input" type="text">
			<label>Password</label>
			<input class="w3-input" type="text">
			<div class="w3-container w3-padding-small w3-center">
				<button class="w3-button w3-blue   w3-round-xxlarge">Login</button>
			</div>
		</div>
	</div>
</div>

If You Need Label After Input Then You Simply Place Your Label After Input

Form With Field Set

<div class="w3-container">
   <form action="">
      <fieldset >
         <legend>Account Details</legend>
         <div class="container">
            <div class="w3-row w3-section">
               <div class="w3-col  m6 ">
                  <p class="w3-bar">
                     <label class="w3-bar-item">First Name</label>
                     <input class="w3-bar-item w3-input w3-border" type="text">
                  </p>
                  <p class="w3-bar">
                     <label class="w3-bar-item">Last Name</label>
                     <input class="w3-bar-item w3-input w3-border" type="text">
                  </p>
                  <p class="w3-bar">
                     <label class="w3-bar-item">Email</label>
                     <input class="w3-bar-item w3-input w3-border" type="text">
                  </p>
               </div>
               <div class="w3-col  m6 ">
                  <p class="w3-bar">
                     <label class="w3-bar-item">First Name</label>
                     <input class="w3-bar-item w3-input w3-border" type="text">
                  </p>
                  <p class="w3-bar">
                     <label class="w3-bar-item">Last Name</label>
                     <input class="w3-bar-item w3-input w3-border" type="text">
                  </p>
                  <p class="w3-bar">
                     <label class="w3-bar-item">Email</label>
                     <input class="w3-bar-item w3-input w3-border" type="text">
                  </p>
               </div>
            </div>
         </div>
      </fieldset>
   </form>
</div>

Form Input With Icon

First Add Fontawesome Icon Library And Then Add This Code

<form action="/action_page.php" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">
<h2 class="w3-center">Contact Us</h2>
 
<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="first" type="text" placeholder="First Name">
    </div>
</div>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="last" type="text" placeholder="Last Name">
    </div>
</div>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="email" type="text" placeholder="Email">
    </div>
</div>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-phone"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="phone" type="text" placeholder="Phone">
    </div>
</div>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="message" type="text" placeholder="Message">
    </div>
</div>

<button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Send</button>

</form>