Skip to content

Instantly share code, notes, and snippets.

/untitled Secret

Created June 27, 2015 01:01
Show Gist options
  • Save anonymous/c567d3c66a515fa20c8a to your computer and use it in GitHub Desktop.
Save anonymous/c567d3c66a515fa20c8a to your computer and use it in GitHub Desktop.
Download ZIP
Adding a rainbow banner to the top of a page
Raw
untitled
## How we added a rainbow stripe to the top of the UCSC home page on June 26, 2015
- We added this to the `<head>`
````css
body {
position: relative;
padding-top: 10px !important;
}
.love-wins {
width: 100%;
height:10px;
position: absolute;
left:0;
top:0;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e40303), color-stop(20%,#ff8c00), color-stop(40%,#ffed00), color-stop(60%,#008026), color-stop(80%,#004dff), color-stop(100%,#750787));
background: -o-linear-gradient(left, #e40303 0%, #ff8c00 20%, #ffed00 40%, #008026 60%, #004dff 80%, #750787 100%);
background: -moz-linear-gradient(left, #e40303 0%, #ff8c00 20%, #ffed00 40%, #008026 60%, #004dff 80%, #750787 100%);
background: -webkit-gradient(left, #e40303 0%, #ff8c00 20%, #ffed00 40%, #008026 60%, #004dff 80%, #750787 100%);
background: -ms-linear-gradient(left, #e40303 0%, #ff8c00 20%, #ffed00 40%, #008026 60%, #004dff 80%, #750787 100%);
background: linear-gradient(to right, #e40303 0%, #ff8c00 20%, #ffed00 40%, #008026 60%, #004dff 80%, #750787 100%);
}
.love-wins a {
display:block;
width:100%;
height:10px;
}
````
- Then we added this just inside the `<body>`
````html
<div class="love-wins"><a href="http://news.ucsc.edu/2015/06/rev-fall-15-alumni-profile-perry.html?ref=rainbow-banner"></a></div>
````
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment