what did css ever do to you

<!DOCTYPE html>
<html>
<head>
	<title>Profile Page</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css">

	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<style type="text/css">
		body {
    		font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif;
    		background-color: #CEF2E7;
		}
		li{
			width:140px;
			padding-top: 28px;
		}
	</style>
</head>
<body>
<nav class="navbar navbar-default" style="background-color:#FFFFFF;height:80px">
  <div class="container">
  	<ul class="nav navbar-nav navbar-left">
  		<a href="#"><img src="https://jcirn.tjhsst.edu/static/images/logo_simple.png" width="220px" height="75px" alt="brand"></a>
  	</ul>
  	<ul class="nav navbar-nav navbar-right">
  		<li><a href="#">About JCIRN</a></li>
  		<li><a href="#">Projects</a></li>
  		<li><a href="#">Join JCIRN</a></li>
  		<li><a href="#">STEM Corner</a></li>
  		<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Get Involved<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Volunteer</a></li>
            <li><a href="#">Donate</a></li>
            <li><a href="#">Partner</a></li>
          </ul>
        </li>
  		<li class="active"><a href="#">My Profile</a></li>
  	</ul>
  </div>
</nav>
<div class="container">
<ul class="nav nav-pills">
  <li ><a href="#">Home <span class="badge">42</span></a></li>
  <li class="active"><a href="#">Profile <span class="badge"></span></a></li>
  <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

</div>
<div class="container" style="background-color:#FFFFFF;">

	<h1 class="option animated rubberBand">JCIRN Innovating Collaboration</h1>
	<div class="row" style="height:100px">
		<div class="col-xs-6 col-md-1" style="border:1px solid black;height:80px;margin-left:20px;margin-top:10px;text-align:center">User Pic</div>
		<div class="col-xs-12 col-md-8">
			<h3>Welcome <% User Name %>!</h3>
			<p>Any Important Text goes here (Project updates so on)</p>
		</div>
		<div class="btn-group">
  <a href="#" class="btn btn-primary">Edit</a>
  <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Preferences</a></li>
    <li><a href="#">Account</a></li>
  </ul>
</div>


	</div>
	<br>
	<h4>Projects You Are Involved In:</h4>
	<div class="container" style="height:650px">

		<div class="row" style = "float:left;">
<div class="container" style = "width:300px">

  <div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">Curing Cancer</h4>
      <p class="list-group-item-text">Members: Me, Myself, I</p>
    </a>
    <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">Global Warming Solution</h4>
      <p class="list-group-item-text">Members: You, Yourself</p>
    </a>
    <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">People Who Like Animesh</h4>
      <p class="list-group-item-text">Members: No one :( </p>
    </a>
  </div>
</div>
<div class="container" style = "width:600px">

  <form class="form-horizontal" style="width:50%">
  <fieldset>
    <legend>Registration</legend>

    <div class="form-group">
      <label for="inputEmail" class="col-lg-2 control-label">TJHSST Email</label>
      <div class="col-lg-10">
        <input type="text" class="form-control" id="inputEmail" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-lg-2 control-label">Name</label>
      <div class="col-lg-5">
        <input type="password" class="form-control" id="inputPassword" placeholder="First">
      </div>
      <div class="col-lg-5">
        <input type="password" class="form-control" id="inputPassword" placeholder="Last">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-lg-2 control-label">Profile Picture</label>
      <div class="col-lg-5">
      <input class="form-control" type="file" name="pic" accept="image/*">
        </div>
    </div>

    </form>
        <div class="form-group">
          <label for="inputPassword" class="col-lg-2 control-label">Password</label>
          <div class="col-lg-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            <input type="password" class="form-control" id="inputPassword" placeholder="Re-enter Password">
          </div>
        </div>
        <br>
        <div class="form-group">
          <label for="textArea" class="col-lg-2 control-label">Work and Volunteer Experience</label>
          <div class="col-lg-10">
            <textarea class="form-control" rows="3" id="textArea"></textarea>
            <span class="help-block">Briefly describe any volunteer or work positions you have held.</span>
          </div>
        </div>
        <br>
        <div class="form-group">
          <label for="textArea" class="col-lg-2 control-label">Skills or Proficiencies</label>
          <div class="col-lg-10">
            <textarea class="form-control" rows="3" id="textArea"></textarea>
          </div>
        </div>
        <br>
        <div class="form-group">
          <label class="col-lg-2 control-label">Areas of Interest</label>
          <div class="col-lg-10">
            <div class="checkbox">
            <table>
              <tr>
              <td><label>
                <input type="checkbox"> Chemistry
              </label></td>
              <td><label>
                <input type="checkbox"> Physics
              </label></td>
                </tr>
                <tr>
              <td><label>
                <input type="checkbox"> Computer Science
              </label></td>
              <td><label>
                <input type="checkbox"> Neuroscience
              </label></td>
                </tr>
                <tr>
              <td><label>
                <input type="checkbox"> Biology
              </label></td>
              <td><label>
                <input type="checkbox"> Bioinformatics
              </label></td>
                </tr>
                <tr>
              <td><label>
                <input type="checkbox"> Astronomy
              </label></td>
              <td><label>
                <input type="checkbox"> Web/Mobile App Development
              </label></td>
                </tr>
                <tr>
              <td><label>
                <input type="checkbox"> Energy Systems
              </label></td>
              <td><label>
                <input type="checkbox"> Robotics
              </label></td>
                </tr>
                <tr>
              <td><label>
                <input type="checkbox"> Mechanical Engineering
              </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
              <td><label>
                <input type="checkbox"> Electrical Engineering
              </label></td>
                </tr>
          </table>
            </div>
          </div>
        </div>
        <br>
        <div class="form-group">
          <label class="col-lg-2 control-label">Senior Research Lab (if applicable)</label>
          <div class="col-lg-10">
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
                Chemistry Analysis
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Energy Systems
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Neuroscience
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Mobile/Web Development
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Computer Systems
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Biotechnology
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Robotics and Automation
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Astronomy and Astrophysics
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Communication Systems
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Microelectronics
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Prototyping and Engineering Materials
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Oceanography and Geophysical Systems
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Computer Assisted Design
              </label>
            </div>
          <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Quantum Physics
              </label>
            </div>
          </div>

        </div>
        <br>
        <div class="form-group">
          <label for="select" class="col-lg-2 control-label">Graduation Year</label>
          <div class="col-lg-10">
            <select class="form-control" id="select">
              <option>2000</option>
              <option>2001</option>
              <option>2002</option>
              <option>2003</option>
            </select>
            <span class="help-block">Click to select.</span>
          </div>
        </div>
        <div class="form-group">
          <div class="col-lg-10 col-lg-offset-2">
            <button type="reset" class="btn btn-default">Cancel</button>
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </div>
      </fieldset>
    </form>

</div>


		</div>
	</div>

</div>
</body>
</html>