<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body style="background: url(http://eskipaper.com/images/blur-background-1.jpg) no-repeat">
<!-- navbar-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" data-toggle="modal" data-target="#myModal">Actividades</a>
</div>
<ul class="nav navbar-nav">
<li><a class="timee" style="" data-toggle="modal" data-target="#weat"><div id="box-time"></div></a></li>
</ul>
</div>
</nav>
<!-- Modal weather-->
<div class="modal fade" id="weat" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="background-color: transparent;" >
<div class="modal-body">
<div class="row">
<div class="col">
<div class="weather-card one">
<div class="top">
<div class="wrapper">
<p style="color: white;font-size: 45;">Bogotá</p>
</div>
</div>
<div class="bottom">
<div id="cont_a6f2080028e4688fb5a0d70d094493e1">
<script type="text/javascript">
conte = document.getElementById("cont_a6f2080028e4688fb5a0d70d094493e1");
if (conte) {
conte.style.cssText = "margin-left: -15px;margin-top: -20px; width: 100%; color: #868686; background-color:#FFFFFF; font-family: Roboto;";
elem = document.createElement("iframe");
elem.style.cssText = "width:105%; color:#868686; height:100%;";
elem.id = "a6f2080028e4688fb5a0d70d094493e1";
elem.src = "https://www.tiempo.com/getwid/a6f2080028e4688fb5a0d70d094493e1";
elem.frameBorder = 0;
elem.allowTransparency = true;
elem.scrolling = "no";
elem.name = "flipe";
conte.appendChild(elem);
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog1">
<p style="color:#ffffff">Some text in the modal.</p>
</div>
</div>
<div style="width: 90%;height: 70%">
<div class="icon-bar" style="margin-top: 10%">
<a style="cursor: hand" class="filled-button hover-outline-out hide-on-mobile"><span class="glyphicon glyphicon-cloud-download" style="color: orange"></span></a>
<a style="cursor: hand" class="filled-button hover-outline-out hide-on-mobile"><span class="glyphicon glyphicon-globe" style="color: #3399ff"></span></a>
<a style="cursor: hand" class="filled-button hover-outline-out hide-on-mobile"><span class="glyphicon glyphicon-headphones" style="color: #3399ff"></span></a>
<a style="cursor: hand" class="filled-button hover-outline-out hide-on-mobile"><span class="glyphicon glyphicon-headphones" style="color: #3399ff"></span></a>
<a style="cursor: hand" class="filled-button hover-outline-out hide-on-mobile"><span class="glyphicon glyphicon-headphones" style="color: #ff6699"></span></a>
</div>
</div>
<script type="text/javascript">/* hora*/
(function() {
function formatTime(n) {
return (n < 10) ? "0" + n : n;
};
function checkTime() {
var today = new Date(),
h = formatTime(today.getHours()),
min = formatTime(today.getMinutes()),
hour = h,
w = "a.m.";
if (hour >= 12) {
hour = formatTime(hour - 12);
w = "p.m.";
};
if (hour == 0) {
hour = 12;
};
document.getElementById("box-time").innerHTML = "<span class='hm-time'>" + hour + ":" + min + "</span> <span class='s-time'>" + w + "</span>";
var d = setTimeout(function() {
checkTime()
}, 500);
};
checkTime();
})();
</script>
</div>
</body>
<style>/*modal*/
.modal-content{
}
.modal-backdrop{
background-color: transparent;
}
.modal-content{
box-shadow:0 0px 0px rgba(0,0,0,.5);
border:0;
}
.row{
margin-top:-50px;
}
</style>
<style>
.modal-dialog1{
width: 90%;
height: 90%;
margin-top: 30px;
margin-left: 30px;
background-color: rgba(0,0,0,0.5);
border-radius: 9px;
}
.modal-backdrop{
background-color: transparent;
}
</style>
<style>
.timee{
margin-left:700px;
margin-top:-10px;
}
</style>
<style>/* time*/
#box-time {
color: white;
font-size: 15px;
width: 100%;
float: right;
margin-top: 10px;
cursor: pointer;
}
</style>
<style>/*bar*/
body {margin:0}
.icon-bar {
width: 90px;
background-color: rgba(0,0,0,0.5);
border-radius: 0px 9px 9px 0px;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #007399;
border-radius: 0px 9px 9px 0px;
}
.active {
background-color: #4CAF50 !important;
}
</style>
<style>/*hover*/
a {
width: 100%;
}
a:hover {
width: 110%;
}
</style>
<style type="text/css">/*dock*/
.filled-button
{
color: white;
font-size: 16px;
text-decoration: none;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 50px;
padding-right: 50px;
letter-spacing: 1px;
border-radius: 0px 9px 9px 0px;
}
.hover-outline-out
{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
border-radius: 0px 9px 9px 0px;
}
.hover-outline-out:before
{
content: '';
position: absolute;
border-radius: 0px 9px 9px 0px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top,right,bottom,left;
transition-property: top,right,bottom,left;
}
.hover-outline-out:hover:before, .hover-outline-out:focus:before, .hover-outline-out:active:before
{
top: -6px;
right: -6px;
bottom: -6px;
border-radius: 0px 9px 9px 0px;
left: -6px;
border: #007399 solid 3px;
}
a:hover
{
color:#fff;
text-decoration:none;
}
</style>
<style type="text/css">/*weather*/
.weather-card {
margin: 60px auto;
height: 440px;
width: 370px;
background: #fff;
box-shadow: 0 1px 38px rgba(0, 0, 0, 0.15), 0 5px 12px rgba(0, 0, 0, 0.25);
overflow: hidden;
border-radius: 9px
}
.weather-card .top {
position: relative;
height: 270px;
width: 100%;
overflow: hidden;
background: url("https://s-media-cache-ak0.pinimg.com/564x/cf/1e/c4/cf1ec4b0c96e59657a46867a91bb0d1e.jpg") no-repeat;
background-size: cover;
background-position: center center;
text-align: center;
}
.weather-card .top .wrapper {
padding: 30px;
position: relative;
z-index: 1;
}
.weather-card .top:after {
content: "";
height: 100%;
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
}
</style>
<style>
.caja{
margin-top: -30%;
}
</style>
