Skip to content

Instantly share code, notes, and snippets.

@robertwclark

robertwclark/jsbin.korupubu.css

Created April 9, 2014 17:49
Show Gist options
  • Save robertwclark/10296642 to your computer and use it in GitHub Desktop.
Save robertwclark/10296642 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.korupubu.css
@charset "UTF-8";
/* CSS Document - general css here */
html p h1 h2 h3 h4 h5 {
font-family: 'Source Sans Pro', sans-serif;
color:#424242;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
p {
font-size:1.1em;
margin-top: 10px;
}
/* ribbon css */
.ribbon_wrapper {
position: relative;
z-index: 1;
width: 100%;
}
.ribbon {
border-radius: 4px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: linear-gradient(
to bottom,
#78A74D,
#709c47 50%,
#709c47 50%,
#78A74D);
background-size: 95% 10px;
color: #fff;
margin: 2em auto auto 3em;
position: relative;
text-align: center;
width: 90%;
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -0em;
border: 2.5em solid #6c9645;
z-index: -1;
}
.ribbon:before {
left: -2.5em;
border-right-width: 4.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2.5em;
border-left-width: 4.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #62893f transparent transparent transparent;
bottom: -0em;
}
.rewards_stats {
background: #ffffff;
border-radius: 6px;
margin-right: .25em;
margin-bottom: .5em;
padding-top: .5em;
width: 30%;
height: auto;
display: table;
position: relative;
}
.rewards_stats h3{
color: #cccccc;
font-size: 1em;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.rewards_level {
background-color: #fbf9d5;
color: #F57E20;
font-size: 1.2em;
text-shadow: #cccccc 0 1px 0;
-o-text-shadow: #cccccc 0 1px 0;
-moz-text-shadow: #cccccc 0 1px 0;
-webkit-text-shadow: #cccccc 0 1px 0;
-ms-text-shadow: #cccccc 0 1px 0;
}
.rewards_points {
background-color: #fbf9d5;
color: #F57E20;
font-size: 1.4em;
line-height: 2.3em;
text-shadow: #cccccc 0 1px 0;
-o-text-shadow: #cccccc 0 1px 0;
-moz-text-shadow: #cccccc 0 1px 0;
-webkit-text-shadow: #cccccc 0 1px 0;
-ms-text-shadow: #cccccc 0 1px 0;
}
.rewards_awards {
background-color: #fbf9d5;
color: #F57E20;
font-size: 1.2em;
text-shadow: #cccccc 0 1px 0;
-o-text-shadow: #cccccc 0 1px 0;
-moz-text-shadow: #cccccc 0 1px 0;
-webkit-text-shadow: #cccccc 0 1px 0;
-ms-text-shadow: #cccccc 0 1px 0;
}
Raw
jsbin.korupubu.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta name="description" content="ribbon banner" />
<meta charset="utf-8">
<title>ribbon banner</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
<!-- Bootstrap and custom -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/splash.css" rel="stylesheet">
<link href="css/explore.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class=" container ribbon_wrapper">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ribbon">
<h1><strong class="ribbon-content">Great Job!</strong></h1>
<div class="row">
<div class="col-xs-11 col-xs-offset-1 col-sm-11 col-sm-offset-1 col-md-11 col-md-offset-1 col-lg-11 col-lg-offset-1 ">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 rewards_stats rewards_level">
<img class=".img-responsive" src="http://i.imgur.com/WxR5l4F.png" height="50" width="50">
<p class="rewards_level">2</p>
<h3>Level</h3>
</div><!-- end col rewards_stats-->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 rewards_stats rewards_points">
<h1 class="rewards_points">25,000</h1>
<h3>Points</h3>
</div><!-- end col -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 rewards_stats rewards_awards">
<img class=".img-responsive" src="http://i.imgur.com/ImqkBBs.png" height="50" width="46">
<p class="rewards_awards">24</p>
<h3>Awards</h3>
</div><!-- end col rewards_stats-->
</div><!-- end row -->
</div><!-- end col -->
</div><!-- end row -->
</div><!-- end col -->
</div><!-- end row -->
</div> <!-- end container ribbon_wrapper -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment