"gnome"
Bootstrap 3.2.0 Snippet by dannychan

<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>

Related: See More


Questions / Comments: