Line 372: | Line 372: | ||
width: 3em; | width: 3em; | ||
} | } | ||
+ | } | ||
+ | @import url(//fonts.googleapis.com/css?family=Lato:300,400,700); | ||
+ | @font-face { | ||
+ | font-family: 'codropsicons'; | ||
+ | src:url('../fonts/codropsicons/codropsicons.eot'); | ||
+ | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), | ||
+ | url('../fonts/codropsicons/codropsicons.woff') format('woff'), | ||
+ | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), | ||
+ | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | font-family: 'Lato', Arial, sans-serif; | ||
+ | } | ||
+ | |||
+ | a, button { | ||
+ | outline: none; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .container > header { | ||
+ | margin: 0 auto; | ||
+ | padding: 2em; | ||
+ | text-align: center; | ||
+ | background: rgba(0,0,0,0.01); | ||
+ | } | ||
+ | |||
+ | .container > header h1 { | ||
+ | font-size: 2.625em; | ||
+ | line-height: 1.3; | ||
+ | margin: 0; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | .container > header span { | ||
+ | display: block; | ||
+ | font-size: 60%; | ||
+ | opacity: 0.7; | ||
+ | padding: 0 0 0.6em 0.1em; | ||
+ | } | ||
+ | |||
+ | /* To Navigation Style */ | ||
+ | .codrops-top { | ||
+ | background: #f06060; | ||
+ | background: rgba(255, 255, 255, 0.1); | ||
+ | text-transform: uppercase; | ||
+ | width: 100%; | ||
+ | font-size: 0.69em; | ||
+ | line-height: 2.2; | ||
+ | } | ||
+ | |||
+ | .codrops-top a { | ||
+ | text-decoration: none; | ||
+ | padding: 0 1em; | ||
+ | letter-spacing: 0.1em; | ||
+ | color: #fff; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .codrops-top a:hover { | ||
+ | background: rgba(255,255,255,0.95); | ||
+ | color: #777; | ||
+ | } | ||
+ | |||
+ | .codrops-top span.right { | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | .codrops-top span.right a { | ||
+ | float: left; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .codrops-icon:before { | ||
+ | font-family: 'codropsicons'; | ||
+ | margin: 0 4px; | ||
+ | speak: none; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | font-variant: normal; | ||
+ | text-transform: none; | ||
+ | line-height: 1; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | } | ||
+ | |||
+ | .codrops-icon-drop:before { | ||
+ | content: "\e001"; | ||
+ | } | ||
+ | |||
+ | .codrops-icon-prev:before { | ||
+ | content: "\e004"; | ||
+ | } | ||
+ | |||
+ | /* Demo Buttons Style */ | ||
+ | .codrops-demos { | ||
+ | padding-top: 1em; | ||
+ | font-size: 0.9em; | ||
+ | } | ||
+ | |||
+ | .codrops-demos a { | ||
+ | text-decoration: none; | ||
+ | outline: none; | ||
+ | display: inline-block; | ||
+ | margin: 0.5em; | ||
+ | padding: 0.7em 1.1em; | ||
+ | border: 3px solid #fff; | ||
+ | color: #fff; | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | |||
+ | .codrops-demos a:hover, | ||
+ | .codrops-demos a.current-demo, | ||
+ | .codrops-demos a.current-demo:hover { | ||
+ | opacity: 0.6; | ||
+ | } | ||
+ | |||
+ | .container > section { | ||
+ | padding: 2em; | ||
+ | font-size: 1.4em; | ||
+ | max-width: 50em; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .container > section p { | ||
+ | padding: 0.8em 0; | ||
+ | text-align: justify; | ||
+ | opacity: 0.5; | ||
+ | font-weight: 300; | ||
+ | line-height: 1.4; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 25em) { | ||
+ | |||
+ | .codrops-icon span { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
} | } | ||
Revision as of 20:34, 25 July 2017