Skip to content

Instantly share code, notes, and snippets.

@terrancebryant

terrancebryant/jsbin.ikACiBE.css

Created October 21, 2013 23:37
Show Gist options
  • Save terrancebryant/7092685 to your computer and use it in GitHub Desktop.
Save terrancebryant/7092685 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.ikACiBE.css
@import url(http://fonts.googleapis.com/css?family=Allerta);
* {padding:0; margin: 0;}
.widget {
width: 290px;
background: #000;
height:100%;
border-radius: 15px;
}
.header {
color:#FFF;
font-family: 'Allerta', sans-serif;
background: #262626; /* Old browsers */
background: -moz-linear-gradient(top, #262626 0%, #3e3e3e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#262626), color-stop(100%,#3e3e3e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #262626 0%,#3e3e3e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #262626 0%,#3e3e3e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #262626 0%,#3e3e3e 100%); /* IE10+ */
background: linear-gradient(to bottom, #262626 0%,#3e3e3e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#3e3e3e',GradientType=0 ); /* IE6-9 */
padding: 15px 0px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding-left: 18px;
}
.footer {
color:#FFF;
font-family: 'Allerta', sans-serif;
background: #3e3e3e; /* Old browsers */
background: -moz-linear-gradient(top, #3e3e3e 0%, #262626 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e3e3e), color-stop(100%,#262626)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3e3e3e 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3e3e3e 0%,#262626 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3e3e3e 0%,#262626 100%); /* IE10+ */
background: linear-gradient(to bottom, #3e3e3e 0%,#262626 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3e3e', endColorstr='#262626',GradientType=0 ); /* IE6-9 */
padding: 15px 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
padding-right: 18px;
text-align: right;
}
.icon{
border-radius: 100%;
background: #00ff1e;
height: 8px;
width: 8px;
margin: 0 0 0 20px;
}
.icon-red{
border-radius: 100%;
background: red;
height: 8px;
width: 8px;
margin: 0 0 0 20px;
}
.icon-yellow{
border-radius: 100%;
background: yellow;
height: 8px;
width: 8px;
margin: 0 0 0 20px;
}
.name {
margin: 0 0 0 15px;
border-right: 1px solid #000;
width: 65px;
}
.number {
width:150px;
float:right;
padding-left: 20px;
}
.email, .phone, .add {padding-bottom: 10px;}
.email {text-decoration: underline; color: #28b3b8;}
.personal-info {
text-align: left;
color: #FFF;
font-family: 'Allerta', sans-serif;
font-size:12px;
background: #212121;
border-top: 1px solid #000;
padding:10px 0;
}
.personal-info:nth-of-type(even)
{
background: #1a1a1a;
}
.personal-info:nth-of-type(odd)
{
background: #212121;
}
.personal-info li{
display: inline-block;
}
Raw
jsbin.ikACiBE.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="widget">
<div class="header">Contacts</div>
<ul class="personal-info">
<li><div class="icon"></div></li>
<li class="name">Cristian</li>
<li class="number">
<ul>
<li class="email">email@yahoo.com</li>
<li class="phone">737-383-3883</li>
<li class="add">1308 E Badillo St.<br />
Los Angeles. Ca 90015
</li>
</ul><!-- End number -->
</li>
</ul>
<ul class="personal-info">
<li><div class="icon"></div></li>
<li class="name">Rich</li>
<li class="number">
<ul>
<li class="email">email@yahoo.com</li>
<li class="phone">737-383-3883</li>
<li class="add">1308 E Badillo St.<br />
Los Angeles. Ca 90015
</li>
</ul><!-- End number -->
</li>
</ul>
<ul class="personal-info">
<li><div class="icon"></div></li>
<li class="name">Scott</li>
<li class="number">
<ul>
<li class="email">email@yahoo.com</li>
<li class="phone">737-383-3883</li>
<li class="add">1308 E Badillo St.<br />
Los Angeles. Ca 90015
</li>
</ul><!-- End number -->
</li>
</ul>
<ul class="personal-info">
<li><div class="icon"></div></li>
<li class="name">Danny</li>
<li class="number">
<ul>
<li class="email">email@yahoo.com</li>
<li class="phone">737-383-3883</li>
<li class="add">1308 E Badillo St.<br />
Los Angeles. Ca 90015
</li>
</ul><!-- End number -->
</li>
</ul>
<ul class="personal-info">
<li><div class="icon-red"></div></li>
<li class="name">Taka</li>
<li class="number">
<ul>
<li class="email">email@yahoo.com</li>
<li class="phone">737-383-3883</li>
<li class="add">1308 E Badillo St.<br />
Los Angeles. Ca 90015
</li>
</ul><!-- End number -->
</li>
</ul>
<ul class="personal-info">
<li><div class="icon-yellow"></div></li>
<li class="name">Tim</li>
<li class="number">
<ul>
<li class="email">email@yahoo.com</li>
<li class="phone">737-383-3883</li>
<li class="add">1308 E Badillo St.<br />
Los Angeles. Ca 90015
</li>
</ul><!-- End number -->
</li>
</ul>
<ul class="personal-info">
<li><div class="icon"></div></li>
<li class="name">Patrick</li>
<li class="number">
<ul>
<li class="email">email@yahoo.com</li>
<li class="phone">737-383-3883</li>
<li class="add">1308 E Badillo St.<br />
Los Angeles. Ca 90015
</li>
</ul><!-- End number -->
</li>
</ul>
<ul class="personal-info">
<li><div class="icon-yellow"></div></li>
<li class="name">Jacques</li>
<li class="number">
<ul>
<li class="email">email@yahoo.com</li>
<li class="phone">737-383-3883</li>
<li class="add">1308 E Badillo St.<br />
Los Angeles. Ca 90015
</li>
</ul><!-- End number -->
</li>
</ul>
<div class="footer">
<select name="" id="myselect">
<option value="1">Email Address</option>
<option value="2">Phone Number</option>
</select>
</div>
</div>
</body>
</html>
Raw
jsbin.ikACiBE.js
/* $(".phone, .add").hide(); */
$(".email, .add").hide();
/* $( "input[value='Hot Fuzz']" ) */
$("select").change(function(){
if($("#myselect").val() == 1){
$(".phone, .add").hide();
$(".email").show();
} else if ($("#myselect").val() == 2){
$(".email, .add").hide();
$(".phone").show();
}
});
var $this = $(this);
$(".personal-info").mouseover(function(){
$this.show();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment