Skip to content

Instantly share code, notes, and snippets.

@jorgejr568

jorgejr568/grupo_ab.html

Last active April 11, 2017 23:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jorgejr568/7b15977b30cffb5834224b64cabf1869 to your computer and use it in GitHub Desktop.
Save jorgejr568/7b15977b30cffb5834224b64cabf1869 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grupo_ab.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,700');
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
.navbar-ab{
background-color: #F78302;
text-align: center;
}
.navbar-header{
padding: 15px;
text-align: center;
width: 100%;
}
.navbar-ab a.navbar-brand{
font-family: 'Comfortaa', cursive;
color: white;
font-weight: 700;
float: none;
}
#footer {
background-color: #F78302;
padding: 10px;
color: white;
}
#footer a{
color: white;
font-weight: bolder;
}
#footer p{
position: relative;
top: 5px;
}
.panel-heading{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
text-align: center;
}
.panel-body{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.panel-ab{
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
cursor: pointer;
border-color: #F78302;
}
.panel-ab:hover .panel-heading{
background-color: white;
color: #F78302;
}
.panel-ab:hover .panel-body{
background-color: #F78302;
}
.panel-ab:hover .panel-body i{
color: white;
}
.panel-ab .panel-heading{
font-family: 'Comfortaa', cursive;
font-weight: 700;
background-color: #F78302;
color: white;
font-size: 24px;
}
.ab{
color: #F78302;
}
.fa-ab{
font-size: 200px;
}
a{
text-decoration: none !important;
}
body{
padding: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-ab">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">GRUPO AB</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<a class="col-sm-4" href="#">
<div class="panel panel-ab">
<div class="panel-heading">EMAIL</div>
<div class="panel-body text-center">
<i class="fa fa-ab fa-envelope fa-fw ab"></i>
</div>
</div>
</a><a class="col-sm-4" href="#">
<div class="panel panel-ab">
<div class="panel-heading">SUPORTE</div>
<div class="panel-body text-center">
<i class="fa fa-life-ring fa-fw fa-ab ab" aria-hidden="true"></i>
</div>
</div>
</a><a class="col-sm-4" href="#">
<div class="panel panel-ab">
<div class="panel-heading">INTRANET</div>
<div class="panel-body text-center">
<i class="fa fa-ab fa-globe fa-fw ab"></i>
</div>
</div>
</a>
</div>
</div>
</div>
<footer class="container-fluid text-center" id="footer">
<p>Developed by: <a href="https:://portfolio.jorgejuniorx.com.br" target="_blank">JJWS</a></p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
var wh=$('#wrapper').height();
var bh=$(window).height();
var fh=$('#footer').height();
console.log([
wh,
bh,
fh
]);
$('#wrapper').css({
"padding-bottom": (bh-wh-fh-20)+"px"
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment