Line 5: | Line 5: | ||
<title>ULV-LC-CV</title> | <title>ULV-LC-CV</title> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
+ | |||
+ | <style> | ||
+ | html { | ||
+ | background-color: #e6e9e9; | ||
+ | background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
+ | background-image: url(kidimagination.jpg); | ||
+ | rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | } /* modifies main html section */ | ||
+ | |||
+ | /* Snippet fopr the navigation area */ | ||
+ | @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800); | ||
+ | .snip1226 { | ||
+ | font-family: 'Raleway', Arial, sans-serif; | ||
+ | text-align: left; | ||
+ | font-size: 0.8em; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 500; | ||
+ | } | ||
+ | .snip1226 * { | ||
+ | box-sizing: border-box; | ||
+ | -webkit-transition: all 0.35s ease; | ||
+ | transition: all 0.35s ease; | ||
+ | } | ||
+ | .snip1226 li { | ||
+ | display: inline-block; | ||
+ | list-style: outside none none; | ||
+ | margin: 0 0.4em; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .snip1226 a { | ||
+ | padding: 0.3em 0; | ||
+ | color: *rgba(255, 255, 255, 0.5); | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | letter-spacing: 0.5px; | ||
+ | margin: 0; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | .snip1226 a:before, | ||
+ | .snip1226 a:after { | ||
+ | position: absolute; | ||
+ | -webkit-transition: all 0.35s ease; | ||
+ | transition: all 0.35s ease; | ||
+ | } | ||
+ | .snip1226 a:before { | ||
+ | bottom: 100%; | ||
+ | display: block; | ||
+ | height: 3px; | ||
+ | width: 100%; | ||
+ | content: ""; | ||
+ | background-color: #e67e22; | ||
+ | } | ||
+ | .snip1226 a:after { | ||
+ | padding: 0.3em 0; | ||
+ | position: absolute; | ||
+ | bottom: 100%; | ||
+ | left: 0; | ||
+ | content: attr(data-hover); | ||
+ | color: saddlebrown; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | .snip1226 li:hover a, | ||
+ | .snip1226 .current a { | ||
+ | transform: translateY(100%); | ||
+ | } | ||
+ | /* Demo purposes only */ | ||
+ | body { | ||
+ | background-color: #212121; | ||
+ | padding: 50px 0; | ||
+ | } | ||
+ | /* Ending of the nav snippet */ | ||
+ | </style> | ||
</head> | </head> | ||
<header> | <header> |
Revision as of 23:15, 5 July 2016