Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
HOME
NEWS
VIDEOS
PICTURES
ABOUT
CONTACT
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } @import "compass/css3"; html { background-color: rgb(125,126,125); @include filter-gradient(#7d7e7d, #777777, vertical); @include background-image(linear-gradient(top, rgba(125,126,125,1) 0%,rgba(119,119,119,1) 100%)); height: 100%; } * { box-sizing: border-box; } ul { list-style: none; margin: 0; padding: 0; width: 15em; li { background-color: rgb(69,72,77); @include filter-gradient(#45484d, #444444, vertical); @include background-image(linear-gradient(top, rgba(69,72,77,1) 0%,rgba(68,68,68,1) 100%)); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.9); cursor: pointer; font-family: 'Noto Sans', sans-serif; font-size: 1.2em; height: 3em; line-height: 2.8; padding-left: 1em; position: relative; text-shadow: 1px 1px 4px rgba(black, 0.3),-1px -1px 4px rgba(white, 0.1); transition: 0.4s border ease-in-out; width: 100%; &:before { color: rgba(white,0.9); font-family: 'FontAwesome', sans-serif; font-size: 1.8em; line-height: 1.6; position: absolute; left: -1.3em; top: 0; } &:first-child { border-left: 6px solid #2ecc72; &:before { content: '\f015'; font-size: 2.2em; line-height: 1.4; left: -1.2em; } &:hover { border-left: 3em solid #2ecc72; } } &:nth-child(2) { border-left: 6px solid #8e45ad; &:before { content: '\f073'; left: -1.3em; } &:hover { border-left: 3em solid #8e45ad; } } &:nth-child(3) { border-left: 6px solid #e67e12; &:before { content: '\f008'; left: -1.4em; } &:hover { border-left: 3em solid #e67e12; } } &:nth-child(4) { border-left: 6px solid #e74c4c; &:before { content: '\f03e'; left: -1.4em; } &:hover { border-left: 3em solid #e74c4c; } } &:nth-child(5) { border-left: 6px solid #3499db; &:before { content: '\f05a'; font-size: 2.1em; left: -1.2em; line-height: 1.5; } &:hover { border-left: 3em solid #3499db; } } &:nth-child(6) { border-left: 6px solid #f2c40f; &:before { content: '\f003'; } &:hover { border-left: 50px solid #f2c40f; } } } }
console.log("Event Fired")