|
|
| Line 80: |
Line 80: |
| | | | |
| | /******** circle nav ********/ | | /******** circle nav ********/ |
| − | @import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
| + | <head> |
| − | | + | <link rel="stylesheet" type="text/css" href="https://tympanus.net/Tutorials/CircularNavigation/css/component1.css"> |
| − | * {
| + | </head> |
| − | -moz-box-sizing: border-box;
| + | |
| − | box-sizing: border-box;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | list-style: none;
| + | |
| − | position: relative
| + | |
| − | }
| + | |
| − | | + | |
| − | html,
| + | |
| − | body {
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | body {
| + | |
| − | background: #f06060;
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper {
| + | |
| − | font-size: 1em;
| + | |
| − | width: 26em;
| + | |
| − | height: 26em;
| + | |
| − | overflow: hidden;
| + | |
| − | position: fixed;
| + | |
| − | z-index: 10;
| + | |
| − | bottom: -13em;
| + | |
| − | left: 50%;
| + | |
| − | border-radius: 50%;
| + | |
| − | margin-left: -13em;
| + | |
| − | -webkit-transform: scale(0.1);
| + | |
| − | -ms-transform: scale(0.1);
| + | |
| − | -moz-transform: scale(0.1);
| + | |
| − | transform: scale(0.1);
| + | |
| − | pointer-events: none;
| + | |
| − | -webkit-transition: all .3s ease;
| + | |
| − | -moz-transition: all .3s ease;
| + | |
| − | transition: all .3s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .opened-nav {
| + | |
| − | border-radius: 50%;
| + | |
| − | pointer-events: auto;
| + | |
| − | -webkit-transform: scale(1);
| + | |
| − | -moz-transform: scale(1);
| + | |
| − | -ms-transform: scale(1);
| + | |
| − | transform: scale(1);
| + | |
| − | }
| + | |
| − | | + | |
| − | .cn-overlay {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | background-color: rgba(0,0,0,0.6);
| + | |
| − | position: fixed;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | bottom: 0;
| + | |
| − | right: 0;
| + | |
| − | opacity: 0;
| + | |
| − | visibility: hidden;
| + | |
| − | -webkit-transition: all .3s ease;
| + | |
| − | -moz-transition: all .3s ease;
| + | |
| − | transition: all .3s ease;
| + | |
| − | z-index: 2;
| + | |
| − | }
| + | |
| − | | + | |
| − | .cn-overlay.on-overlay {
| + | |
| − | visibility: visible;
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | .cn-button {
| + | |
| − | border: none;
| + | |
| − | background: none;
| + | |
| − | color: #f06060;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 1.8em;
| + | |
| − | padding-bottom: 1em;
| + | |
| − | height: 3.5em;
| + | |
| − | width: 3.5em;
| + | |
| − | background-color: #fff;
| + | |
| − | position: fixed;
| + | |
| − | left: 50%;
| + | |
| − | margin-left: -1.75em;
| + | |
| − | bottom: -1.75em;
| + | |
| − | border-radius: 50%;
| + | |
| − | cursor: pointer;
| + | |
| − | z-index: 11;
| + | |
| − | }
| + | |
| − | | + | |
| − | .cn-button:hover,
| + | |
| − | .cn-button:active,
| + | |
| − | .cn-button:focus {
| + | |
| − | color: #aa1010;
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li {
| + | |
| − | position: absolute;
| + | |
| − | font-size: 1.5em;
| + | |
| − | width: 10em;
| + | |
| − | height: 10em;
| + | |
| − | -webkit-transform-origin: 100% 100%;
| + | |
| − | -moz-transform-origin: 100% 100%;
| + | |
| − | -ms-transform-origin: 100% 100%;
| + | |
| − | transform-origin: 100% 100%;
| + | |
| − | overflow: hidden;
| + | |
| − | left: 50%;
| + | |
| − | top: 50%;
| + | |
| − | margin-top: -1.3em;
| + | |
| − | margin-left: -10em;
| + | |
| − | -webkit-transition: border .3s ease;
| + | |
| − | -moz-transition: border .3s ease;
| + | |
| − | transition: border .3s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li a {
| + | |
| − | display: block;
| + | |
| − | font-size: 1.18em;
| + | |
| − | height: 14.5em;
| + | |
| − | width: 14.5em;
| + | |
| − | position: absolute;
| + | |
| − | bottom: -7.25em;
| + | |
| − | right: -7.25em;
| + | |
| − | border-radius: 50%;
| + | |
| − | text-decoration: none;
| + | |
| − | color: #fff;
| + | |
| − | padding-top: 1.8em;
| + | |
| − | text-align: center;
| + | |
| − | -webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
| + | |
| − | -ms-transform: skew(-50deg) rotate(-70deg) scale(1);
| + | |
| − | -moz-transform: skew(-50deg) rotate(-70deg) scale(1);
| + | |
| − | transform: skew(-50deg) rotate(-70deg) scale(1);
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | -webkit-transition: opacity 0.3s, color 0.3s;
| + | |
| − | -moz-transition: opacity 0.3s, color 0.3s;
| + | |
| − | transition: opacity 0.3s, color 0.3s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li a span {
| + | |
| − | font-size: 1.1em;
| + | |
| − | opacity: 0.7;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* for a central angle x, the list items must be skewed by 90-x degrees
| + | |
| − | in our case x=40deg so skew angle is 50deg
| + | |
| − | items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li:first-child {
| + | |
| − | -webkit-transform: rotate(-10deg) skew(50deg);
| + | |
| − | -ms-transform: rotate(-10deg) skew(50deg);
| + | |
| − | -moz-transform: rotate(-10deg) skew(50deg);
| + | |
| − | transform: rotate(-10deg) skew(50deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li:nth-child(2) {
| + | |
| − | -webkit-transform: rotate(30deg) skew(50deg);
| + | |
| − | -ms-transform: rotate(30deg) skew(50deg);
| + | |
| − | -moz-transform: rotate(30deg) skew(50deg);
| + | |
| − | transform: rotate(30deg) skew(50deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li:nth-child(3) {
| + | |
| − | -webkit-transform: rotate(70deg) skew(50deg);
| + | |
| − | -ms-transform: rotate(70deg) skew(50deg);
| + | |
| − | -moz-transform: rotate(70deg) skew(50deg);
| + | |
| − | transform: rotate(70deg) skew(50deg)
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li:nth-child(4) {
| + | |
| − | -webkit-transform: rotate(110deg) skew(50deg);
| + | |
| − | -ms-transform: rotate(110deg) skew(50deg);
| + | |
| − | -moz-transform: rotate(110deg) skew(50deg);
| + | |
| − | transform: rotate(110deg) skew(50deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li:nth-child(5) {
| + | |
| − | -webkit-transform: rotate(150deg) skew(50deg);
| + | |
| − | -ms-transform: rotate(150deg) skew(50deg);
| + | |
| − | -moz-transform: rotate(150deg) skew(50deg);
| + | |
| − | transform: rotate(150deg) skew(50deg);
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li:nth-child(odd) a {
| + | |
| − | background-color: #a11313;
| + | |
| − | background-color: hsla(0, 88%, 63%, 1);
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li:nth-child(even) a {
| + | |
| − | background-color: #a61414;
| + | |
| − | background-color: hsla(0, 88%, 65%, 1);
| + | |
| − | }
| + | |
| − | | + | |
| − | /* active style */
| + | |
| − | .csstransforms .cn-wrapper li.active a {
| + | |
| − | background-color: #b31515;
| + | |
| − | background-color: hsla(0, 88%, 70%, 1);
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* hover style */
| + | |
| − | .csstransforms .cn-wrapper li:not(.active) a:hover,
| + | |
| − | .csstransforms .cn-wrapper li:not(.active) a:active,
| + | |
| − | .csstransforms .cn-wrapper li:not(.active) a:focus {
| + | |
| − | background-color: #b31515;
| + | |
| − | background-color: hsla(0, 88%, 70%, 1);
| + | |
| − | }
| + | |
| − | .csstransforms .cn-wrapper li:not(.active) a:focus
| + | |
| − | {
| + | |
| − | position:fixed;
| + | |
| − | }
| + | |
| − |
| + | |
| − | | + | |
| − | /* fallback */
| + | |
| − | .no-csstransforms .cn-button {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .no-csstransforms .cn-wrapper li {
| + | |
| − | position: static;
| + | |
| − | float: left;
| + | |
| − | font-size: 1em;
| + | |
| − | height: 5em;
| + | |
| − | width: 5em;
| + | |
| − | background-color: #eee;
| + | |
| − | text-align: center;
| + | |
| − | line-height: 5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .no-csstransforms .cn-wrapper li a {
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | text-decoration: none;
| + | |
| − | color: inherit;
| + | |
| − | font-size: 1.3em;
| + | |
| − | border-right: 1px solid #ddd;
| + | |
| − | }
| + | |
| − | | + | |
| − | .no-csstransforms .cn-wrapper li a:last-child {
| + | |
| − | border: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .no-csstransforms .cn-wrapper li a:hover,
| + | |
| − | .no-csstransforms .cn-wrapper li a:active,
| + | |
| − | .no-csstransforms .cn-wrapper li a:focus {
| + | |
| − | background-color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | .no-csstransforms .cn-wrapper li.active a {
| + | |
| − | background-color: #6F325C;
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .no-csstransforms .cn-wrapper {
| + | |
| − | font-size: 1em;
| + | |
| − | height: 5em;
| + | |
| − | width: 25.15em;
| + | |
| − | bottom: 0;
| + | |
| − | margin-left: -12.5em;
| + | |
| − | overflow: hidden;
| + | |
| − | position: fixed;
| + | |
| − | z-index: 10;
| + | |
| − | left: 50%;
| + | |
| − | border: 1px solid #ddd;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width:480px) {
| + | |
| − | .csstransforms .cn-wrapper {
| + | |
| − | font-size: .68em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .cn-button {
| + | |
| − | font-size: 1em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .csstransforms .cn-wrapper li {
| + | |
| − | font-size: 1.52em;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width:320px) {
| + | |
| − | .no-csstransforms .cn-wrapper {
| + | |
| − | width: 15.15px;
| + | |
| − | margin-left: -7.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .no-csstransforms .cn-wrapper li {
| + | |
| − | height: 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;
| + | |
| − | }
| + | |
| − | | + | |
| − | }
| + | |
| | | | |
| | /******** Links n' such (NavBar)********/ | | /******** Links n' such (NavBar)********/ |
