Nav-Appaiya
5/16/2015 - 10:05 PM
My bootstrap landingpage for navappaiya.me - UPATED V1.2
My bootstrap landingpage for navappaiya.me - UPATED V1.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Nav Appaiya development host, setup to test, serve, or host stuff. http://navappaiya.nl">
<meta name="author" content="Nav Appaiya">
<title>Nav Appaiya - Development</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css"/>
<link href="//bootswatch.com/yeti/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="startpage/style.css" rel="stylesheet" type="text/css"/>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Nav Appaiya </h1>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">
Installations and endpoints
<small class="pull-right"><?php echo date("Y-m-h h:i:s"); ?></small>
</h3>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="list-group">
<!-- Wordpress -->
<div class="list-group-item">
<h4 class="list-group-item-heading">
<a href="/wp">Wordpress</a>
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="Wordpress shop with WooCommerce and Jigoshop">
<i class="fa fa-question-circle"></i>
</a>
</h4>
<p class="list-group-item-text">
<span class="label label-success">Operational</span>
</p>
</div>
<!-- Magento -->
<div class="list-group-item">
<h4 class="list-group-item-heading">
<a href="/magento">Magento</a>
<a href="/magento" data-toggle="tooltip" data-placement="bottom"
title="Missing sample products and configuration.">
<i class="fa fa-question-circle"></i>
</a>
</h4>
<p class="list-group-item-text">
<span class="label label-danger">Not Operational</span>
</p>
</div>
<!-- API Endpoints -->
<div class="list-group-item">
<h4 class="list-group-item-heading">
<a href="#">API Endpoints</a>
<a href="#" data-toggle="tooltip" data-placement="bottom"
title="Various data endpoints, will be sharing some soon.">
<i class="fa fa-question-circle"></i>
</a>
</h4>
<p class="list-group-item-text">
<span class="label label-success">Operational</span>
</p>
</div>
<!-- And finally this Social stuff cuz i have to fill this page. xP -->
<div class="list-group-item">
<div class="text-left center-block">
<p class="get-social">For any feedback or questions: </p>
<!-- Facebook -->
<a href="https://www.facebook.com/NavAppaiya">
<i id="social" class="fa fa-facebook-square fa-3x social-fb"></i>
</a>
<!-- Twitter -->
<a href="https://twitter.com/navvvv">
<i id="social" class="fa fa-twitter-square fa-3x social-tw"></i>
</a>
<!-- Google Plus, please dont. :/ -->
<a href="https://plus.google.com/u/0/+NavAppaiya">
<i id="social" class="fa fa-google-plus-square fa-3x social-gp"></i>
</a>
<!-- Mail to me -->
<a href="mailto:navarajh@gmail.com">
<i id="social" class="fa fa-envelope-square fa-3x social-em"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Tooltips -->
<script>
$(function () {
$('a').tooltip();
});
</script>
<!-- Hover effect on the social buttons -->
<style>
#social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
#social {
-webkit-transform: scale(0.8);
-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;
}
/* Give the hover some colors */
.social-fb:hover {
color: #3B5998;
}
.social-tw:hover {
color: #4099FF;
}
.social-gp:hover {
color: #d34836;
}
.social-em:hover {
color: #f39c12;
}
</style>
<!--
Created by Nav Appaiya on 16 may 2015
For further info: http://navappaiya.nl
-->
</body>
</html>