Skip to content

Instantly share code, notes, and snippets.

@gormus

gormus/index.html

Created May 18, 2017 01:07
Show Gist options
  • Save gormus/8c30e49c897fc88b294bf30f986595df to your computer and use it in GitHub Desktop.
Save gormus/8c30e49c897fc88b294bf30f986595df to your computer and use it in GitHub Desktop.
Download ZIP
CCC - Quicklinks // source https://jsbin.com/zubixep
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CCC - Quicklinks</title>
<link href="http://cms-prod.clackamas.edu/ResourcePackages/Bootstrap/assets/dist/css/main.min.css" rel="stylesheet" type="text/css" />
<link href="http://cms-prod.clackamas.edu/ResourcePackages/Bootstrap/assets/dist/css/jquery.mb.YTPlayer/jquery.mb.YTPlayer.min.css" rel="stylesheet" type="text/css" />
<link href="http://cms-prod.clackamas.edu/ResourcePackages/Bootstrap/assets/dist/css/theme.min.css" rel="stylesheet" type="text/css" />
<style id="jsbin-css">
.ccc-widget-quicklinks ul li:first-child {
border-top: 1px solid #f0f0f0;
}
.ccc-widget-quicklinks ul li {
border-bottom: 1px solid #f0f0f0;
padding: 6px 0;
max-width: 430px;
}
.ccc-widget-quicklinks ul li a {
display: block;
text-decoration: none;
position: relative;
padding: 1em 0;
}
.ccc-widget-quicklinks ul li a img {
vertical-align: middle;
display: none;
}
.ccc-widget-quicklinks ul li a .arrow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 25px;
color: #7b7e81;
transition: all 0.5s ease;
text-align: center;
}
.ccc-widget-quicklinks ul li a .arrow .glyphicon {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.ccc-widget-quicklinks ul li a:hover .arrow {
background: #c52033;
color: #FFFFFF;
}
@media (min-width: 768px) {
.ccc-widget-quicklinks ul li a {
padding: 0;
}
.ccc-widget-quicklinks ul li a img {
display: inline;
}
}
</style>
</head>
<body>
<div class="container">
<div clas="row">
<div class="col-sm-12">
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<div clas="row">
<div class="col-sm-12">
<div class="ccc-widget-quicklinks">
<ul class="list-unstyled">
<li><a href="#">
<img src="https://dummyimage.com/190x75/dddddd/444.png" alt="">
Oregon Promise
<span class="arrow"><i class="glyphicon glyphicon-menu-right" aria-hidden="true"></i></span>
</a></li>
<li><a href="#">
<img src="https://dummyimage.com/190x75/dddddd/444.png" alt="">
Oregon Promise
<span class="arrow"><i class="glyphicon glyphicon-menu-right" aria-hidden="true"></i></span>
</a></li>
<li><a href="#">
<img src="https://dummyimage.com/190x75/dddddd/444.png" alt="">
Oregon Promise
<span class="arrow"><i class="glyphicon glyphicon-menu-right" aria-hidden="true"></i></span>
</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script id="jsbin-source-css" type="text/css">.ccc-widget-quicklinks {
ul li:first-child {
border-top: 1px solid #f0f0f0;
}
ul li {
border-bottom: 1px solid #f0f0f0;
padding: 6px 0;
max-width: 430px;
}
ul li a {
display: block;
text-decoration: none;
position: relative;
padding: 1em 0;
img {
vertical-align: middle;
display: none;
}
.arrow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 25px;
color: #7b7e81;
transition: all 0.5s ease;
text-align: center;
.glyphicon {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
&:hover .arrow {
background: #c52033;
color: #FFFFFF;
}
@media (min-width: 768px) {
& {
padding: 0;
img {
display: inline;
}
}
}
}
}
</script>
</body>
</html>
Raw
jsbin.zubixep.css
.ccc-widget-quicklinks ul li:first-child {
border-top: 1px solid #f0f0f0;
}
.ccc-widget-quicklinks ul li {
border-bottom: 1px solid #f0f0f0;
padding: 6px 0;
max-width: 430px;
}
.ccc-widget-quicklinks ul li a {
display: block;
text-decoration: none;
position: relative;
padding: 1em 0;
}
.ccc-widget-quicklinks ul li a img {
vertical-align: middle;
display: none;
}
.ccc-widget-quicklinks ul li a .arrow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 25px;
color: #7b7e81;
transition: all 0.5s ease;
text-align: center;
}
.ccc-widget-quicklinks ul li a .arrow .glyphicon {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.ccc-widget-quicklinks ul li a:hover .arrow {
background: #c52033;
color: #FFFFFF;
}
@media (min-width: 768px) {
.ccc-widget-quicklinks ul li a {
padding: 0;
}
.ccc-widget-quicklinks ul li a img {
display: inline;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment