Skip to content

Instantly share code, notes, and snippets.

@manichabba

manichabba/index.html

Created August 13, 2016 03:00
Show Gist options
  • Save manichabba/3fc85ddfa3489c2d68789efbb956a2f3 to your computer and use it in GitHub Desktop.
Save manichabba/3fc85ddfa3489c2d68789efbb956a2f3 to your computer and use it in GitHub Desktop.
Download ZIP
oLmLyo
Raw
index.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Mani Chabba</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#resume">RESUME</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<!-- Container (About Section) -->
<div id="about" class="container-fluid bg-grey headers" >
<div class="row">
<div class="col-sm-8">
<h2>Data Enthusiast</h2>
<h4>Mani Chabba</h4>
<p>Data Analyst with 4+ years of hand-on experience in identifying complex issues, collecting information, and developing practical solutions to problems. Enjoy working with complex and unstructured data sets, to dig deep, clean, analyze and find insights. Self-motivated with a desire to advance professionally in the field of data science.</p>
</div>
<div class="col-sm-4">
<span>
<div class="thumbnail">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/48614-200.png" alt="dataanalyst" width="400" height="300" >
</div>
</span>
</div>
</div>
</div>
<!-- Container (Resume Section) -->
<div id="resume" class="container-fluid text-center">
<h2>RESUME</h2>
<ul class="timeline">
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-stats" style="color:#f4511e" ></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Data Analyst <a href="http://social27.com/">@Social27 inc</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i>Aug 2016-present</small></h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-education"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Masters in Information Systems <a href="http://gsb.uark.edu/master-of-information-systems/">@UARK</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i>Aug 2015-Aug 2016</small></h4>
</div>
</div>
</li>
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-stats" style="color:#f4511e" ></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Graduate Assistent <a href="https://walton.uark.edu/">@UARK</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i>Aug 2015-Aug 2016</small></h4>
</div>
</div>
</li>
<li>
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-stats" style="color:#f4511e" ></i></div>
<div class="timeline-panel" >
<div class="timeline-heading">
<h4 class="timeline-title">Growth & marketing Data Analyst <a href="http://social27.com/">@Social27 inc.</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i>June 2014-June 2015</small></h4>
<div class="timeline-panel" border: "2px">
<div class="timeline-heading">
<h4 class="timeline-title">Business Data Analyst <a href="http://iturnupp.com/">@MyActivityPal inc.</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i>June 2014-Feb 2015</small></h4>
</div>
</div>
</div>
</li>
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-stats" style="color:#f4511e" ></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Content Analyst<a href="http://www.gracenote.com/">@gracenote</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i>Jan 2014-Apr 2014</small></h4>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-education"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Management and Project Management Diploma<a href="http://extension.berkeley.edu/static/international/idp/12month/">@UC Berkeley</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i> May 2013-Apr 2014</small></h4>
</div>
</div>
</li>
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-stats" style="color:#f4511e" ></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Business Analyst<a href="http://nricollegeofnursing.com/"> @College of Nursing</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i>July 2011-Apr 2013</small></h4>
</div>
</div>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-education"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Diploma in Financial Management<a href="http://addoe.amity.edu/WebForms/AmityOnlineNew/program-details.aspx?PROGID=6"> @Amity University</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i> July 2012-Apr 2013</small></h4>
</div>
</div>
</li>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-education"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Bachelor of Business Administration<a href="http://puchd.ac.in/">@Punjab University</a><br>
<small class="text-muted"><i class="glyphicon glyphicon-time"></i> July 2008-May 2011</small></h4>
</div>
</div>
</li>
</ul>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center bg-grey">
<h2>Portfolio</h2><br>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://blackdoorcreative.com/wp-content/uploads/2012/09/responsive-web-design-infographic-rhode-island-350x250.jpeg" alt="">
<div class="overlay">
<h2>Placeholder 1</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://visualovations.com/wp-content/uploads/2016/01/Webdesign1.jpg" alt="">
<div class="overlay">
<h2>Placeholder 2</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="https://www.penjurumedia.co.id/data/2015/12/Website-Development-350x250.jpg" alt="">
<div class="overlay">
<h2>Placeholder 3</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://www.sqa.org.uk/sqa/images/260710%20SCQF-%20Website%20image.JPG" alt="">
<div class="overlay">
<h2>Placeholder 4</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://fwdid.com/wp-content/uploads/wordpress-website-benefits-350x250.jpg" alt="">
<div class="overlay">
<h2>Placeholder 5</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://cdn2.business2community.com/wp-content/uploads/2014/01/Good_design_thumbnail.jpg" alt="">
<div class="overlay">
<h2>Placeholder 6</h2>
<p>
<a href="#">LINK HERE</a>
</p>
</div>
</div>
</div>
</div>
<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Get in touch! </p>
<p><span class="glyphicon glyphicon-map-marker"></span> Redmond, WA</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> [email protected]</p>
</br>
<div class="text-left center-block">
<a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
<a href="https://github.com/"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
<a href="https://plus.google.com/"><i id="social-gp" class="fa fa-github-square fa-3x social"></i></a>
<a href="mailto:[email protected]"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
</div>
</div>
<div class="col-sm-7">
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-warning btn-send btn-block" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="googleMap" style="height:400px;width:100%;"></div>
</div>
<footer class="container-fluid text-center">
<a href="#about" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Made By Mani Chabba<a href="http://www.w3schools.com" title="Visit w3schools"> using Bootstrap theme</a></p>
</footer>
Raw
script.js
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
<!-- Add Google Maps -->
var myCenter = new google.maps.LatLng(47.6740, -122.1215);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
Raw
style.css
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #f4511e;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 10px;
}
.jumbotron {
background-color: #f4511e;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
}
.container-fluid {
padding: 10px 10px;
}
.headers {
padding: 60px 60px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #f4511e;
font-size: 50px;
}
.logo {
color: #f4511e;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
background: transparent;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #f4511e;
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff !important;
color: #f4511e;
}
.panel-heading {
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: #f4511e !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 5px 0;
background-color: #f4511e;
color: #fff;
}
.navbar {
margin-bottom: 0;
background-color: black;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 5px;
color: #f4511e;
}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 50%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li.timeline-inverted + li:not(.timeline-inverted),
.timeline > li:not(.timeline-inverted) + li.timeline-inverted {
margin-top: -60px;
}
.timeline > li:not(.timeline-inverted) {
padding-right:90px;
}
.timeline > li.timeline-inverted {
padding-left:90px;
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 14px;
left: 50%;
margin-left: -25px;
background-color: black;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
width: 55%;
height: 81%;
left: 22%;
top: 10%;
border-radius: 80%;
border: 2px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(50%,50%,0);
transform: translate3d(50%,50%,0);
}
.hovereffect:hover .overlay {
background-color: rgba(244,81,30,0.3);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1.4" /><feFuncG type="linear" slope="1.4" /><feFuncB type="linear" slope="1.4" /></feComponentTransfer></filter></svg>#filter');
filter: brightness(1.4);
-webkit-filter: brightness(1.4);
}
.hovereffect h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background-color: transparent;
color: white;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-150%,-400%,0);
transform: translate3d(-150%,-400%,0);
}
.hovereffect a, .hovereffect p {
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-150%,-400%,0);
transform: translate3d(-150%,-400%,0);
}
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2, .hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.social {
-webkit-transform: scale(0.8);
/* Browser Variations: */
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
/*
Multicoloured Hover Variations
*/
#social-fb {
color: #f4511e;
}
#social-tw{
color: #f4511e;
}
#social-gp {
color: #f4511e;
}
#social-em{
color: #f4511e;
}
#social-fb:hover {
color: #3B5998;
}
#social-tw:hover {
color: #4099FF;
}
#social-gp:hover {
color: grey;
}
#social-em:hover {
color: #f39c12;
}
.btn-warning {
background: #f4511e;
color: white;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment