Skip to content

Instantly share code, notes, and snippets.

@evansantos

evansantos/index.html

Created October 27, 2014 17:32
Show Gist options
  • Save evansantos/b4eb1d4ad6063d5a320f to your computer and use it in GitHub Desktop.
Save evansantos/b4eb1d4ad6063d5a320f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.osa,
.dots {
behavior: url(http://css3pie.com/pie/PIE.htc);
}
.osa {
border: #bababa thin solid;
background-color: #efefef;
border-radius: 180px;
margin: 4.5% 2%;
position: relative;
float: left;
}
.osa img {
height: 50%;
margin: 30% 0;
margin-left: 5%;
float: left;
}
.osa .dots {
position: absolute;
width: 25%;
height: 25%;
border-radius: 180px;
text-align: center;
}
.osa .dots.success {
background-color: #33cc33;
border: #248f24 thin solid;
margin: 0px;
padding: 0px;
}
.osa .dots.alert {
background-color: #ffcc33;
border: #ffbf00 thin solid;
margin: 0px;
padding: 0px;
}
.osa .dots.error {
background-color: #cc3333;
border: #8f2424 thin solid;
margin: 0px;
padding: 0px;
}
.osa .dots span {
width: 50%;
height: 50%;
background-size: 50% 50%;
margin: 25%;
color: #ffffff;
}
.osa .dots span:before {
font-size: 100%;
}
.osa .dots-1 {
top: -10%;
left: 40%;
}
.osa .dots-2 {
top: 0%;
left: 68%;
}
.osa .dots-3 {
top: 25%;
left: 87%;
}
.osa .dots-4 {
top: 55%;
left: 84%;
}
.osa .dots-5 {
top: 80%;
left: 68%;
}
.osa .dots-6 {
top: 88%;
left: 40%;
}
@media only screen and (min-width: 960px) {
body:after {
content: "Desktop";
position: absolute;
bottom: 0px;
}
.osa {
width: 256px;
height: 256px;
}
.osa .dots span {
font-size: 200%;
}
}
@media only screen and (min-width: 720px) and (max-width: 959px) {
body:after {
content: "Tablet";
position: absolute;
bottom: 0px;
}
.osa {
width: 192px;
height: 192px;
}
.osa .dots span {
font-size: 150%;
}
}
@media only screen and (max-width: 720px) {
body:after {
content: "Smartphone";
position: absolute;
bottom: 0px;
}
.osa {
width: 128px;
height: 128px;
}
.osa .dots span {
font-size: 100%;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<hr />
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div> <div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div> <div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div> <div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div> <div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div>
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"><\/script>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<hr />
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div> <div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div> <div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div> <div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div> <div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-indent-left"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-indent-right"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-picture"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-usd"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</div>
<div class="osa">
<img src="http://www.fashionmall.com.br/f01/img/servicos/img-via-facil.png" border="0" />
<div class="dots dots-1 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-2 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-3 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-4 success">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-5 alert">
<span class="glyphicon glyphicon-tags"></span>
</div>
<div class="dots dots-6 error">
<span class="glyphicon glyphicon-tags"></span>
</div>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">@desktop: ~"only screen and (min-width: 960px)";
@tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)";
@smartphone: ~"only screen and (max-width: 720px)";
.osa, .dots{
behavior: url(http://css3pie.com/pie/PIE.htc);
}
.osa{
border:#bababa thin solid;
background-color: #efefef;
border-radius:180px;
margin: 4.5% 2%;
position:relative;
float:left;
img{
height: 50%;
margin: 30% 0;
margin-left: 5%;
float:left;
}
.dots{
position: absolute;
width:25%;
height: 25%;
border-radius:180px;
text-align: center;
&.success{
background-color: #33cc33;
border: #248f24 thin solid;
margin:0px;
padding: 0px;
}
&.alert{
background-color: #ffcc33;
border: #ffbf00 thin solid;
margin:0px;
padding: 0px;
}
&.error{
background-color: #cc3333;
border: #8f2424 thin solid;
margin:0px;
padding: 0px;
}
span{
width: 50%;
height: 50%;
background-size: 50% 50%;
margin:25%;
color:#ffffff;
&:before{
font-size:100%;
}
}
&-1{
top: -10%;
left: 40%;
}
&-2{
top: 0%;
left: 68%;
}
&-3{
top: 25%;
left: 87%;
}
&-4{
top: 55%;
left: 84%;
}
&-5{
top: 80%;
left: 68%;
}
&-6{
top: 88%;
left: 40%;
}
}
}
@media @desktop {
body{
&:after{
content:"Desktop";
position:absolute;
bottom:0px;
}
}
.osa{
width:256px;
height:256px;
.dots{
span{
font-size: 200%;
}
}
}
}
@media @tablet {
body{
&:after{
content:"Tablet";
position:absolute;
bottom:0px;
}
}
.osa{
width:192px;
height:192px;
.dots{
span{
font-size: 150%;
}
}
}
}
@media @smartphone {
body{
&:after{
content:"Smartphone";
position:absolute;
bottom:0px;
}
}
.osa{
width:128px;
height:128px;
.dots{
span{
font-size: 100%;
}
}
}
}
</script>
</body>
</html>
Raw
jsbin.dozuq.css
.osa,
.dots {
behavior: url(http://css3pie.com/pie/PIE.htc);
}
.osa {
border: #bababa thin solid;
background-color: #efefef;
border-radius: 180px;
margin: 4.5% 2%;
position: relative;
float: left;
}
.osa img {
height: 50%;
margin: 30% 0;
margin-left: 5%;
float: left;
}
.osa .dots {
position: absolute;
width: 25%;
height: 25%;
border-radius: 180px;
text-align: center;
}
.osa .dots.success {
background-color: #33cc33;
border: #248f24 thin solid;
margin: 0px;
padding: 0px;
}
.osa .dots.alert {
background-color: #ffcc33;
border: #ffbf00 thin solid;
margin: 0px;
padding: 0px;
}
.osa .dots.error {
background-color: #cc3333;
border: #8f2424 thin solid;
margin: 0px;
padding: 0px;
}
.osa .dots span {
width: 50%;
height: 50%;
background-size: 50% 50%;
margin: 25%;
color: #ffffff;
}
.osa .dots span:before {
font-size: 100%;
}
.osa .dots-1 {
top: -10%;
left: 40%;
}
.osa .dots-2 {
top: 0%;
left: 68%;
}
.osa .dots-3 {
top: 25%;
left: 87%;
}
.osa .dots-4 {
top: 55%;
left: 84%;
}
.osa .dots-5 {
top: 80%;
left: 68%;
}
.osa .dots-6 {
top: 88%;
left: 40%;
}
@media only screen and (min-width: 960px) {
body:after {
content: "Desktop";
position: absolute;
bottom: 0px;
}
.osa {
width: 256px;
height: 256px;
}
.osa .dots span {
font-size: 200%;
}
}
@media only screen and (min-width: 720px) and (max-width: 959px) {
body:after {
content: "Tablet";
position: absolute;
bottom: 0px;
}
.osa {
width: 192px;
height: 192px;
}
.osa .dots span {
font-size: 150%;
}
}
@media only screen and (max-width: 720px) {
body:after {
content: "Smartphone";
position: absolute;
bottom: 0px;
}
.osa {
width: 128px;
height: 128px;
}
.osa .dots span {
font-size: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment