cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<div id="top">
  <div class="row">
    <div class="col-md-6">
      <p id="name"><em>Averal Kandala</em>
      </p>
    </div>
    <div class="col-md-1">
      <a href="#aboutme">
      <button class="btn btn-block"><em>About Me</em>
      </button>
      </a>
    </div>
    <div class="col-md-1">
      <a href="#projects">
      <button class="btn btn-block"><em>Projects</em>
      </button>
      </a>
    </div>
    <div class="col-md-1">
      <a href="#history">
      <button class="btn btn-block"><em>History</em>
      </button>
      </a>
    </div>
    <div class="col-md-3">
    </div>
  </div>
</div>
<div class="container-fluid"><!--Main Body with text and sections-->
  <a name="aboutme"></a>
  <div class="row"style="margin-top: 60px;"> <!--1st block of text, w/ Projects header-->
    <div class="col-md-3"></div>
    <div class="col-md-6">
    <h2>Greetings!</h2>
    <hr/>
    <p class="greet">
   My name's Averal, and I am in the business of learning and making things. I am currently a student at UC Berkeley, studying Electrical Engineering and Computer Sciences with an intended focus in machine learning and artificial intelligence.
   </p>
   <p class="greet">
   I'm ridiculously interested in almost every aspect of math and computer science and have a soft spot for tinkering with electronics as well (see my MapBag project below!). 
   </p>
   <p class="greet">
   I've wanted to be an engineer since before I understood what engineering was, and my progress thus far in the field has only amplified this desire. I'd like to have a tangible impact on humanity as a whole in my lifetime, and I'm going about achieving this goal the only way I know how&dash; learning and making.
   </p>
   </div>
   <div class="col-md-3"></div>
   </div>
   <div class="row">
   <a name="projects"></a>
   <div class="col-md-3"></div>
   <div class="col-md-6">
   <h2>Projects</h2> 
   <hr/>
   </div>
   <div class="col-md-3"></div>
   </div>
  <div class="row"><!--Projects Matrix-->
    <div class="col-md-2"></div>
    <div class="col-md-2">
      <ul>
        <a href="http://www.bluestampengineering.com/portfolio-view/averal/">
       <li>MapBag</li>
       <img src="http://bluestampengineering.com/wp-content/uploads/MAP-BAGGGGG1.png" width="200" height="160">
       </a>
         <a href="https://avekan33.github.io/Chemotaxis/">
       <li>Chemotaxis</li>
       <img src="https://s3.amazonaws.com/media.slideroom.com/applicant/114/371/1173411/9953d9aa-c127-4729-a78c-3f8d7f045cfa.1280x1280.jpg?AWSAccessKeyId=AKIAJ4L22QH7HS4DKN4Q&Expires=1465145863&Signature=FLuBk%2f%2biFJXRuyh4yag7me4YSEo%3d" width="200" height="160">
       </a>
      </ul>
    </div>
    <div class="col-md-2">
      <ul>
        <a href="https://avekan33.github.io/AsteroidsGame/">
       <li>Asteroids</li>
       <img src="https://s3.amazonaws.com/media.slideroom.com/applicant/114/371/1173411/f2dcf44e-e19d-44d5-a46d-3c4ca06fa1d5.1280x1280.jpg?AWSAccessKeyId=AKIAJ4L22QH7HS4DKN4Q&Expires=1465145863&Signature=gmotmNkqmKvXIPLlaZElrw6G%2fv0%3d" width="200" height="160">
       </a>
        <a href="https://avekan33.github.io/Minesweeper/">
       <li>Minesweeper</li>
       <img src="https://s3.amazonaws.com/media.slideroom.com/applicant/114/371/1173411/56a49e01-8034-4281-8c62-10d665b93353.1280x1280.jpg?AWSAccessKeyId=AKIAJ4L22QH7HS4DKN4Q&Expires=1465145863&Signature=VNCZHD5yB8oZLG5BBXPqTl8CAhY%3d" width="200" height="160">
       </a>
      </ul>
    </div>
    <div class="col-md-2">
      <ul>
        <a href="https://github.com/avekan33/GoogleBillboardv2">
       <li>GoogleBillboard</li>
       <img src="https://cdn.smartrecruiters.com/blog/wp-content/uploads/2013/05/Google-Job-Ad.jpg" width="200" height="160">
       </a>
      </ul>
    </div>
    <div class="col-md-2">
      <ul>
        <a href="https://avekan33.github.io/SnakeGame/">
       <li>SnakeGame</li>
       <img src="https://lh4.ggpht.com/yJe6HqfvYKO2ej-qfsoWf50T71o4346gXkF6T66FMXBAjJ5DhMt7buBDESUMqYaeIqI=w300" width="200" height="160">
       </a>
      </ul>
    </div>
    <div class="col-md-2"></div>
  </div>
  <a name="history"></a>
  <div class="row"style="margin-bottom: 300px;">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <h2>Work</h2>
      <hr/>
      <ul>
        <li>Teaching Assistant at <a href="http://bluestampengineering.com/">BlueStamp Engineering</a>, 2015 & 2016
        </li>
      </ul>
      <h2>Education</h2>
      <hr/>
      <ul>
        <li><a href="http://engineering.berkeley.edu/">UC Berkeley College of Engineering</a>, 2016-  
        </li>
        <li><a href="http://lhs-sfusd-ca.schoolloop.com/">Lowell High School</a>, 2012-2016
        </li>
      </ul>
    </div>
    <div class="col-md-3"></div>
  </div>
</div>
<div id="footer">
  <div class="row" style="margin-top: 20px;">
  <p>
    <a href="mailto:avekan33@gmail.com" class"bot">
      avekan33@gmail.com
    </a>
    <a href="https://github.com/avekan33"class="bot">
      <i class="fa fa-github icons"></i>
    </a>
    <a href="https://www.linkedin.com/in/averal-kandala-577407120" class="bot">
      <i class="fa fa-linkedin icons"></i>
    </a>
    <a href="https://www.freecodecamp.com/avekan33" class="bot">
      (<i class="fa fa-fire"></i>)
    </a>
    
  </p>
  </div>
  <p>&copy; 2016 Averal Kandala</p>
</div>
            
          
!
            
              #footer{
				background-color: #e5e2e2;
				position: fixed;
				bottom:0;
				left:0;
				width: 100%;
				font-size: 17px;
        text-align: center;
				color: black;
				font-family: Monospace;
			}
#top{
  background-color: #e5e2e2;
	position: fixed;
  font-size: 30px;
  /*text-align: center;*/
	font-family: Monospace;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
.icons{
      margin-left: 5px;
}
button {
  background-color:black;
  color: white;
  margin-top: 8px;
  text-align: left;
}
a, a:visited {
  color:black;
}
a:hover, a:active{
  text-decoration: none;
  color: gray;
}

#name{
  text-align: center;
  margin-top:2px;
  color: black;
}

.btn:hover, .btn:active {
  background: white;
  color: black;
}
hr { width:100%; height:1px; background: black 
}
.verticalLine {
    border-left: thin solid black;
}
h2 {
  font-family: Monospace;
  text-align: center
}
.greet {
  font-family: Monospace;
  font-size: 125%;
}
ul {
  font-family: Monospace;
  font-size: 150%;
}
li {
  margin-top: 10px;
}

            
          
!
            
              $(document).ready(function() {
  //Scrolling Function
  $('a[href^="#"]').click(function(e){
    var target = $(this).attr('href');
    var strip = target.slice(1);
    var anchor = $("a[name='"+strip+"']");
    e.preventDefault();
    $('html,body').animate({
      scrollTop: anchor.offset().top
      
    },"slow");
    
  });

});
            
          
!
999px
Loading ..................

Console