StudentData

by joshmoto

HTML

<div id="wrapper">
  <div id="header">
    <div>Student Registration Form</div>
  </div>
  <div id="content">
    <div id="form-container">
      <div id="form">
        <div>
          <p>Add Student</p>
        </div>
        <div class="general-alignment">
          <label class="data-lbls">Full Name</label>
          <input placeholder="Enter Full Name" />
        </div>
        <div class="general-alignment">
          <div class="data-lbls">
            <label>Gender</label>
          </div>
          <div class="items-container">
            <label class="item-input">
              <input type="radio" name="gender" value="female">Female</label>
            <label class="item-input">
              <input type="radio" name="gender" value="male">Male</label>
          </div>
        </div>
        <div class="general-alignment">
          <div class="data-lbls">
            <label>Date of Birth</label>
          </div>
          <div class="items-container">
            <select>
              <option value="day">Day</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
            </select>
            <select>
              <option value="month">Month</option>
              <option value="jan">Jan</option>
              <option value="feb">Feb</option>
              <option value="mar">Mar</option>
              <option value="april">April</option>
            </select>
            <select>
              <option value="year">Year</option>
              <option value="1994">1994</option>
              <option value="1995">1995</option>
              <option value="1996">1996</option>
              <option value="1997">1997</option>
            </select>
          </div>
        </div>
        <div class="general-alignment">
          <div class="edu-lbls">
            <div class="data-lbls">
              <label>University</label>
   ...

CSS

body {
          margin: 0 0 0 0;
          position: relative;
        }
        
        #wrapper {
          width: 100%;
          height: 100%;
          background-color: lightcyan;
        }
        
        #header {
          position: relative;
        }
        
        #content {}
        
        #header>div {
          background-color: seagreen;
          margin-left: auto;
          margin-right: auto;
          width: 400px;
          text-align: center;
        }
        
        #form-container {
          width: 500px;
          background-color: pink;
          margin-bottom: 100px;
          float: left;
        }
        
        .general-alignment {
          margin-left: 50px;
        }
        
        .data-lbls {
          width: 150px;
          float: left;
        }
        
        .item-input {
          display: block;
        }
        
        .items-container {
          overflow: hidden;
        }
        
        #form {
          background-color: blueviolet;
          width: 90%;
          margin-left: auto;
          margin-right: auto;
        }
        
        .edu-lbls {
          float: left;
        }
        
        #address-lbl {
          width: 150px;
          position: absolute;
          top: 50px;
        }
        
        #address-input {
          width: 200px;
          height: 100px;
          position: relative;
          left: 150px;
        }
        
        #btns-container {
          width: 200px;
          margin-left: auto;
          margin-right: auto;
        }
        
        #data-table-container {
          background-color: yellow;
          float: left;
        }
        
        #data-table {
          background-color: blueviolet;
          width: 90%;
          margin-left: auto;
          margin-right: auto;
        }
        
        table {
          position: relative;
          border: solid;
          width: 70px;
        }
        
        #footer-container {
         ...