|
|
| Line 185: |
Line 185: |
| | | | |
| | </STYLE> | | </STYLE> |
| - |
| |
| - | <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
| |
| - |
| |
| | | | |
| | <style type="text/css"> | | <style type="text/css"> |
| - | @import url(http://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;
| |
| - | }
| |
| - |
| |
| - | .container > header,
| |
| - | .codrops-top,
| |
| - | .container > section {
| |
| - | font-family: 'Lato', Arial, sans-serif;
| |
| - | }
| |
| - |
| |
| - | .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;
| |
| - | }
| |
| - |
| |
| - | }
| |
| - | </style>
| |
| - | <style type="text/css">
| |
| - | * {
| |
| - | position: relative;
| |
| - | -moz-box-sizing: border-box;
| |
| - | box-sizing: border-box;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | list-style: none;
| |
| - | }
| |
| - |
| |
| - | html,
| |
| - | body {
| |
| - | height: 100%;
| |
| - | }
| |
| | | | |
| | body { | | body { |
| Line 347: |
Line 193: |
| | } | | } |
| | | | |
| - | .component {
| |
| - | position: relative;
| |
| - | margin-bottom: 3em;
| |
| - | height: 15em;
| |
| - | background: rgba(0,0,0,0.05);
| |
| - | font-family: 'Lato', Arial, sans-serif;
| |
| - | }
| |
| - |
| |
| - | @media only screen and (max-width: 620px) {
| |
| - | .no-csstransforms li {
| |
| - | width: 4em;
| |
| - | height: 4em;
| |
| - | line-height: 4em;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | @media only screen and (max-width: 500px) {
| |
| - | .no-ccstransforms .cn-wrapper {
| |
| - | padding: .5em;
| |
| - | }
| |
| - |
| |
| - | .no-csstransforms .cn-wrapper li {
| |
| - | width: 4em;
| |
| - | height: 4em;
| |
| - | font-size: .9em;
| |
| - | line-height: 4em;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | @media only screen and (max-width: 480px) {
| |
| - | .csstransforms .cn-wrapper {
| |
| - | font-size: .68em;
| |
| - | }
| |
| - |
| |
| - | .cn-button {
| |
| - | font-size: 1em;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | @media only screen and (max-width:420px) {
| |
| - | .no-csstransforms .cn-wrapper li {
| |
| - | width: 100%;
| |
| - | height: 3em;
| |
| - | line-height: 3em;
| |
| - | }
| |
| - | }
| |
| | | | |
| | | | |
"
