<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!--https://dribbble.com/shots/1582109-Weather-Dashboard-Fullscreen-ALL-GIF-->
<!--http://www.behance.net/gallery/Weather-Dashboard-Global-Outlook/12748107-->
<div class="wrapper">
<div class="main">
<div class="lines lineTop"></div>
<div class="lines lineRight"></div>
<div class="lines lineLeft"></div>
<div class="lines lineBottom"></div>
<div class="icon top topGrad">
<svg class="inner" version="1.1" x="0px" y="0px" viewBox="-10 -10 30 30" enable-background="new -10 -10 30 30" xml:space="preserve">
<rect x="-8.2" y="-5.2" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" width="26.8" height="18.8"/>
<ellipse fill="#FFFFFF" cx="12.4" cy="-0.6" rx="2.4" ry="2.3"/>
<polygon fill="#FFFFFF" points="-6.4,11 16.4,11 12.4,5 8.7,8 1.2,0.8 "/>
</svg>
</div>
<div class="icon right">
<svg class="inner" x="0px" y="0px" viewBox="-10 -10 30 30" enable-background="new -10 -10 30 30" xml:space="preserve">
<g id="Layer_1_1_">
</g>
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M18.5,5c0,5.5-6,9.9-13.5,9.9 c-2.3,0-4.5-0.4-6.3-1.2c-0.7-0.3-4.1,2.2-4.8,1.8c-0.6-0.4,1.5-3.6,1-4c-2.1-1.7-3.3-4-3.3-6.5c0-5.5,6-9.9,13.5-9.9 S18.5-0.5,18.5,5z"/>
</svg>
</div>
<div class="icon bottom">
<svg class="inner" x="0px" y="0px" viewBox="-10 -10 30 30" enable-background="new -10 -10 30 30" xml:space="preserve">
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M5.5,16.8C0.7,16.8-7.8,5.9-7.8,1s1.7-7.8,5.4-7.8c2.8,0,6.4,2,7.4,4.2c1-2.2,4.2-4.2,7-4.2c3.7,0,5.8,2.8,5.8,7.7 S9.8,16.7,5.5,16.8z"/>
</svg>
</div>
<div class="icon left">
<svg class="inner" x="0px" y="0px" viewBox="-10 -10 30 30" enable-background="new -10 -10 30 30" xml:space="preserve">
<circle fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" cx="5" cy="4.9" r="6.3"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="5" y1="-9" x2="5" y2="-4.1"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="5" y1="13.9" x2="5" y2="18.8"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="14.8" y1="-4.9" x2="11.4" y2="-1.5"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="-1.4" y1="11.3" x2="-4.8" y2="14.7"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="18.9" y1="4.9" x2="14" y2="4.9"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="-4" y1="4.9" x2="-8.9" y2="4.9"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="14.8" y1="14.7" x2="11.4" y2="11.3"/>
<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="-1.4" y1="-1.5" x2="-4.8" y2="-4.9"/>
</svg>
</div>
<div class="info">
<div class="outer">
<div class="inner">
<div class="content area1">
<p class="diamond">♦</p>
<svg class="iconLrg" x="0px" y="0px" viewBox="-10 -10 30 30" enable-background="new -10 -10 30 30" xml:space="preserve">
<linearGradient y2="1" x2="1" id="gradTop" spreadMethod="reflect">
<stop stop-color="#0ed7c4" offset="0"/>
<stop stop-color="#0ec3f8" offset="1"/>
</linearGradient>
<rect x="-8.2" y="-5.2" fill="none" stroke="url(#gradTop)" stroke-width="2" stroke-miterlimit="10" width="26.8" height="18.8"/>
<ellipse fill="url(#gradTop)" cx="12.4" cy="-0.6" rx="2.4" ry="2.3"/>
<polygon fill="url(#gradTop)" points="-6.4,11 16.4,11 12.4,5 8.7,8 1.2,0.8 "/>
</svg>
<h1>385</h1>
<p>Gallery</p>
<p class="diamond">♦</p>
</div><!--content area1-->
<div class="content area2">
<p class="diamond">♦</p>
<svg class="iconLrg" x="0px" y="0px" viewBox="-10 -10 30 30" enable-background="new -10 -10 30 30" xml:space="preserve">
<linearGradient y2="1" x2="1" id="gradRight" spreadMethod="reflect">
<stop stop-color="#fb374b" offset="0"/>
<stop stop-color="#ffcb2d" offset="1"/>
</linearGradient>
<path fill="none" stroke="url(#gradRight)" stroke-width="2" stroke-miterlimit="10" d="M18.5,5c0,5.5-6,9.9-13.5,9.9 c-2.3,0-4.5-0.4-6.3-1.2c-0.7-0.3-4.1,2.2-4.8,1.8c-0.6-0.4,1.5-3.6,1-4c-2.1-1.7-3.3-4-3.3-6.5c0-5.5,6-9.9,13.5-9.9 S18.5-0.5,18.5,5z"/>
</svg>
<h1>2,014</h1>
<p>Comments</p>
<p class="diamond">♦</p>
</div><!--content area2-->
<div class="content area3">
<p class="diamond">♦</p>
<svg class="iconLrg" x="0px" y="0px" viewBox="-10 -10 30 30" enable-background="new -10 -10 30 30" xml:space="preserve">
<linearGradient y2="1" x2="1" id="gradBottom" spreadMethod="reflect">
<stop stop-color="#b2c6f9" offset="0"/>
<stop stop-color="#1dfbee" offset="1"/>
</linearGradient>
<path fill="none" stroke="url(#gradBottom)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M5.5,16.8C0.7,16.8-7.8,5.9-7.8,1s1.7-7.8,5.4-7.8c2.8,0,6.4,2,7.4,4.2c1-2.2,4.2-4.2,7-4.2c3.7,0,5.8,2.8,5.8,7.7 S9.8,16.7,5.5,16.8z"/>
</svg>
<h1>23</h1>
<p>Likes</p>
<p class="diamond">♦</p>
</div><!--content area3-->
<div class="content area4">
<p class="diamond">♦</p>
<svg class="iconLrg" x="0px" y="0px" viewBox="-10 -10 30 30" enable-background="new -10 -10 30 30" xml:space="preserve">
<linearGradient y2="1" x2="1" id="gradLeft" spreadMethod="reflect">
<stop stop-color="#95ff29" offset="0"/>
<stop stop-color="#4fff5f" offset="1"/>
</linearGradient>
<circle fill="none" stroke="url(#gradLeft)" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" cx="5" cy="4.9" r="6.3"/>
<line fill="none" stroke="#95ff29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="5" y1="-9" x2="5" y2="-4.1"/>
<line fill="none" stroke="#4fff5f" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="5" y1="13.9" x2="5" y2="18.8"/>
<line fill="none" stroke="#4fff5f" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="14.8" y1="-4.9" x2="11.4" y2="-1.5"/>
<line fill="none" stroke="#95ff29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="-1.4" y1="11.3" x2="-4.8" y2="14.7"/>
<line fill="none" stroke="#4fff5f" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="18.9" y1="4.9" x2="14" y2="4.9"/>
<line fill="none" stroke="#95ff29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="-4" y1="4.9" x2="-8.9" y2="4.9"/>
<line fill="none" stroke="#4fff5f" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="14.8" y1="14.7" x2="11.4" y2="11.3"/>
<line fill="none" stroke="#95ff29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="-1.4" y1="-1.5" x2="-4.8" y2="-4.9"/>
</svg>
<h1>28°</h1>
<p>Sunny</p>
<p class="diamond">♦</p>
</div><!--content area4-->
</div><!--inner-->
</div>
</div><!--info-->
<div class="clear"></div>
</div>
</div><!--wrapper-->
<script>
function resetDash() {
$(".icon").removeClass("topGrad rightGrad bottomGrad leftGrad");
$(".lines").hide();
}
$( ".top" ).mouseover(function() {
$(".info .inner").css({"left":"0"});
resetDash();
$(this).addClass("topGrad");
$( ".lineTop" ).show();
});
$( ".right" ).mouseover(function() {
$(".info .inner").css({"left":"-110px"});
resetDash()
$(this).addClass("rightGrad");
$( ".lineRight" ).show();
});
$( ".bottom" ).mouseover(function() {
$(".info .inner").css({"left":"-220px"});
resetDash()
$(this).addClass("bottomGrad");
$( ".lineBottom" ).show();
});
$( ".left" ).mouseover(function() {
$(".info .inner").css({"left":"-330px"});
resetDash()
$(this).addClass("leftGrad");
$( ".lineLeft" ).show();
});
</script>
body {
color: white;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
/*background-image: url(../images/moulin.png);*/
background: #e2e2e2;
background: -moz-radial-gradient(center, ellipse cover, #e2e2e2 0%, #b5b5b5 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#e2e2e2), color-stop(100%,#b5b5b5));
background: -webkit-radial-gradient(center, ellipse cover, #e2e2e2 0%,#b5b5b5 100%);
background: -o-radial-gradient(center, ellipse cover, #e2e2e2 0%,#b5b5b5 100%);
background: -ms-radial-gradient(center, ellipse cover, #e2e2e2 0%,#b5b5b5 100%);
background: radial-gradient(ellipse at center, #e2e2e2 0%,#b5b5b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#b5b5b5',GradientType=1 );
}
/*TYPE*/
h1 {
font-size: 35px;
line-height: 35px;
}
p {
font-size: 13px;
line-height: 15px;
margin-top: 5px;
margin-bottom: 8px;
}
/*MAIN*/
.wrapper { width:960px; margin: 20px auto 0;
padding-top: 80px;
padding-bottom: 80px;
background: url(http://upload.wikimedia.org/wikipedia/commons/c/c5/Moraine_Lake_17092005.jpg) no-repeat center center;
background-size:960px ;
border-bottom: 5px solid #333;
border-top: 10px solid #333;
}
.wrapper::after {
content: "";
opacity: 0.4;
top: 0;
left: 50%;
position: absolute;
z-index: 1;
background-color: white;
width: 960px;
height: 660px;
margin-left: -480px;
margin-top: 30px;
}
.main {
width: 500px;
height: 500px;
margin-right: auto;
margin-left: auto;
position: relative;
border-radius:100%;
background: url(http://upload.wikimedia.org/wikipedia/commons/c/c5/Moraine_Lake_17092005.jpg) no-repeat center center;
background-size:960px ;
z-index: 2;
-webkit-box-shadow: inset -1px -1px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset -1px -1px 7px rgba(0, 0, 0, 0.3);
box-shadow: inset -1px -1px 7px rgba(0, 0, 0, 0.3);
}
.main::after {
content: "";
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
background: url(https://googledrive.com/host/0BxTz8uiHWZpeNmtZZkJvdDNyRUE/dot.svg) repeat ;
background-size: 20px 20px;
border-radius:100%;
}
/*ICONS*/
.icon {
width: 70px;
height: 70px;
float: left;
position: absolute;
border-radius:100%;
text-align: center;
z-index: 3;
}
.top {
top: -35px;
left: 50%;
margin-left: -35px;
}
.right {
top: 50%;
right: 0;
margin-top: -35px;
margin-right: -35px;
}
.bottom {
left: 50%;
top: 100%;
margin-top: -35px;
margin-left: -35px;
}
.left {
left: 0;
top: 50%;
margin-top: -35px;
margin-left: -35px;
}
.inner {
width: 30px;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
/*INFO*/
.info {
width: 170px;
height: 170px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -85px;
margin-left: -85px;
border-radius:100%;
z-index: 3;
overflow: hidden;
}
.outer {
width: 110px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.info .inner {
width: 440px;
margin-top: 0px;
text-align: center;
position: relative;
left: 0;
z-index: -1;
height: 170px;
}
/*CONTENT*/
.content {
width: 110px;
height: 170px;
float: left;
padding-top: 3px;
}
.diamond {
font-size: 8px;
margin-top: 5px;
margin-bottom: 5px;
}
.iconLrg {
width: 50px;
height: 50px;
margin-right: auto;
margin-left: auto;
margin-bottom: 5px;
}
/*LINES*/
.lineTop, .lineRight, .lineBottom, .lineLeft {
z-index: 2;
position: absolute;
display: none;
}
.lineTop {
height: 50%;
width: 1px;
border-right: 2px solid #0ec3f8;
left: 50%;
margin-left: -1px;
display: block;
}
.lineRight {
height: 1;
width: 50%;
border-top: 2px solid #fb374b;
left: 50%;
top: 50%;
}
.lineBottom {
height: 50%;
width: 1px;
border-right: 2px solid #b2c6f9;
left: 50%;
top: 50%;
margin-left: -1px;
}
.lineLeft {
height: 1;
width: 50%;
border-top: 2px solid #4fff5f;
left: 0;
top: 50%;
}
/*GRAD SHAD */
.icon, .info {
background: #2c3b49;
background: -moz-linear-gradient(-45deg, #2c3b49 0%, #23292d 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#2c3b49), color-stop(100%,#23292d));
background: -webkit-linear-gradient(-45deg, #2c3b49 0%,#23292d 100%);
background: -o-linear-gradient(-45deg, #2c3b49 0%,#23292d 100%);
background: -ms-linear-gradient(-45deg, #2c3b49 0%,#23292d 100%);
background: linear-gradient(135deg, #2c3b49 0%,#23292d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c3b49', endColorstr='#23292d',GradientType=1 );
-webkit-box-shadow: inset -1px -1px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset -1px -1px 7px rgba(0, 0, 0, 0.3);
box-shadow: inset -1px -1px 7px rgba(0, 0, 0, 0.3);
/*-webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));*/
}
.topGrad {
background: #0ed7c4;
background: -moz-linear-gradient(-45deg, #0ed7c4 0%, #0ec3f8 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0ed7c4), color-stop(100%,#0ec3f8));
background: -webkit-linear-gradient(-45deg, #0ed7c4 0%,#0ec3f8 100%);
background: -o-linear-gradient(-45deg, #0ed7c4 0%,#0ec3f8 100%);
background: -ms-linear-gradient(-45deg, #0ed7c4 0%,#0ec3f8 100%);
background: linear-gradient(135deg, #0ed7c4 0%,#0ec3f8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ed7c4', endColorstr='#0ec3f8',GradientType=1 );
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.rightGrad {
background: #fb374b;
background: -moz-linear-gradient(-45deg, #fb374b 0%, #ffcb2d 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fb374b), color-stop(100%,#ffcb2d));
background: -webkit-linear-gradient(-45deg, #fb374b 0%,#ffcb2d 100%);
background: -o-linear-gradient(-45deg, #fb374b 0%,#ffcb2d 100%);
background: -ms-linear-gradient(-45deg, #fb374b 0%,#ffcb2d 100%);
background: linear-gradient(135deg, #fb374b 0%,#ffcb2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb374b', endColorstr='#ffcb2d',GradientType=1 );
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.bottomGrad {
background: #b2c6f9;
background: -moz-linear-gradient(-45deg, #b2c6f9 0%, #1dfbee 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b2c6f9), color-stop(100%,#1dfbee));
background: -webkit-linear-gradient(-45deg, #b2c6f9 0%,#1dfbee 100%);
background: -o-linear-gradient(-45deg, #b2c6f9 0%,#1dfbee 100%);
background: -ms-linear-gradient(-45deg, #b2c6f9 0%,#1dfbee 100%);
background: linear-gradient(135deg, #b2c6f9 0%,#1dfbee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2c6f9', endColorstr='#1dfbee',GradientType=1 );
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.leftGrad {
background: #95ff29;
background: -moz-linear-gradient(-45deg, #95ff29 0%, #4fff5f 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#95ff29), color-stop(100%,#4fff5f));
background: -webkit-linear-gradient(-45deg, #95ff29 0%,#4fff5f 100%);
background: -o-linear-gradient(-45deg, #95ff29 0%,#4fff5f 100%);
background: -ms-linear-gradient(-45deg, #95ff29 0%,#4fff5f 100%);
background: linear-gradient(135deg, #95ff29 0%,#4fff5f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95ff29', endColorstr='#4fff5f',GradientType=1 );
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*SCREENS*/
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
.wrapper { width: 768px; }
.wrapper::after {
width: 768px;
margin-left: -384px;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.wrapper { width: 768px; }
.wrapper::after {
width: 768px;
margin-left: -384px;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 767px) {
.wrapper { width: 420px; }
.wrapper::after {
width: 420px;
margin-left: -210px;
height: 500px;
}
.main {
width: 340px;
height: 340px;
}
}
