|
|
Line 11,483: |
Line 11,483: |
| } | | } |
| } | | } |
− |
| |
− | <!--Test1-->
| |
− |
| |
− | @import url(http://fonts.googleapis.com/css?family=Dosis:300,400,500,700&subset=latin,latin-ext);
| |
− |
| |
− | body {
| |
− | font-family: 'Dosis', sans-serif;
| |
− | }
| |
− |
| |
− |
| |
− | ul li {
| |
− | font-size: 16px;
| |
− | }
| |
− |
| |
− | section .container {
| |
− | padding-right: 25px;
| |
− | padding-left: 25px;
| |
− |
| |
− | }
| |
− |
| |
− | body.index a {
| |
− | color: #e63638;
| |
− | font-weight: 600;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | section h2 {
| |
− | margin-left: -25px;
| |
− | }
| |
− |
| |
− | h2 {
| |
− | font-size: 20px;
| |
− | font-weight: 500;
| |
− | color: #777;
| |
− | margin-top: 40px;
| |
− | margin-bottom: 20px;
| |
− | }
| |
− |
| |
− | h1 {
| |
− | font-size: 30px;
| |
− | font-weight: 400;
| |
− | }
| |
− |
| |
− |
| |
− | header {
| |
− | padding-top: 100px;
| |
− | padding-bottom: 100px;
| |
− | background: #27b0d1;
| |
− | color: #fff;
| |
− | }
| |
− | header h1 {
| |
− | font-size: 46px;
| |
− | font-weight: 300;
| |
− | margin-top: 20px;
| |
− | margin-bottom: 40px;
| |
− | }
| |
− | header p {
| |
− | font-size: 18px;
| |
− | font-weight: 500;
| |
− | color: rgba(255,255,255,0.7);
| |
− | }
| |
− | section {
| |
− | margin-top: 50px;
| |
− | }
| |
− | section p {
| |
− | font-size: 16px;
| |
− | }
| |
− | .section-content {
| |
− | padding-left: 50px;
| |
− | padding-right: 50px;
| |
− | }
| |
− |
| |
− | .btns-header{
| |
− | margin-top: 50px;
| |
− | }
| |
− |
| |
− | #examples {
| |
− | border-top: 1px solid #ddd;
| |
− | padding-bottom: 40px;
| |
− | padding-left: 15px;
| |
− | padding-top: 30px;
| |
− | }
| |
− |
| |
− | #examples ul {
| |
− | list-style: none;
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | }
| |
− |
| |
− | #examples li {
| |
− | list-style: none;
| |
− | font-size: 18px;
| |
− | }
| |
− |
| |
− | #examples h2 {
| |
− | margin-left: -15px;
| |
− | color: #222;
| |
− | font-weight: 600;
| |
− | margin-top: 10px;
| |
− | }
| |
− |
| |
− | #bef_int {
| |
− | border-top: 1px solid #ddd;
| |
− | padding-top: 30px;
| |
− | }
| |
− |
| |
− | section#bef_int p {
| |
− | font-size: 18px;
| |
− | }
| |
− |
| |
− |
| |
− | body.index a.btn-jprt-lg {
| |
− | padding: 15px 30px;
| |
− | background: none;
| |
− | border: 1px solid #fff;
| |
− | color: #fff;
| |
− | font-size: 20px;
| |
− | border-radius: 10px;
| |
− | margin: 10px;
| |
− | font-weight: 300;
| |
− | }
| |
− | body.index a.btn-jprt-lg:hover {
| |
− | background: rgba(255,255,255,1);
| |
− | text-decoration: none;
| |
− | color: #27b0d1;
| |
− | }
| |
− | .btn-jprt-lg {
| |
− | padding: 15px 30px;
| |
− | background: none;
| |
− | border: 1px solid #fff;
| |
− | color: #fff;
| |
− | font-size: 20px;
| |
− | border-radius: 10px;
| |
− | margin: 10px;
| |
− | font-weight: 300;
| |
− | }
| |
− | .btn-jprt-lg:hover {
| |
− | background: rgba(255,255,255,1);
| |
− | text-decoration: none;
| |
− | color: #27b0d1;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | h2.example-h2 {
| |
− | color: #27b0d1;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | footer a {
| |
− | color: #e63638;
| |
− | font-weight: 600;
| |
− | }
| |
− |
| |
− | footer {
| |
− | padding-top: 100px;
| |
− | padding-bottom: 100px;
| |
− | margin-top: 100px;
| |
− | background: #444;
| |
− | color: #fff;
| |
− | }
| |
− |
| |
− | @media (max-width: 992px) {
| |
− | footer {
| |
− | text-align: center;
| |
− | }
| |
− | footer li {
| |
− | list-style: none;
| |
− | }
| |
− | footer ul {
| |
− | padding: 0;
| |
− | margin-bottom: 30px;
| |
− | }
| |
− | }
| |
− |
| |
− | footer .index_in_footer {
| |
− | list-style: none;
| |
− | }
| |
− | footer .index_in_footer li {
| |
− | font-size: 18px;
| |
− | }
| |
− | footer h1 {
| |
− | font-size: 22px;
| |
− | color: #aaa;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | #decorations-img-1 {
| |
− | max-width: 500px;
| |
− | margin: auto;
| |
− | margin-top: 30px;
| |
− | margin-bottom: 30px;
| |
− | width: 80%;
| |
− | }
| |
− | #decorations-img-2 {
| |
− | max-width: 800px;
| |
− | margin: auto;
| |
− | margin-top: 30px;
| |
− | margin-bottom: 30px;
| |
− | width: 80%;
| |
− | }
| |
− |
| |
− | #doc_index ul {
| |
− | list-style: none;
| |
− | }
| |
− | #doc_index li {
| |
− | list-style: none;
| |
− | font-size: 22px;
| |
− | }
| |
− |
| |
− | /******* demo.csss ******/
| |
− | #demo {
| |
− | margin-top: 40px;
| |
− | margin-bottom: 40px;
| |
− | }
| |
− | #demo h1 {
| |
− | font-size: 40px;
| |
− | }
| |
− | .jprt-buttons p {
| |
− | margin-top: 20px;
| |
− | font-size: 18px;
| |
− | color: #444;
| |
− | }
| |
− |
| |
− | /* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+git+less&plugins=line-highlight+line-numbers */
| |
− | /**
| |
− | * okaidia theme for JavaScript, CSS and HTML
| |
− | * Loosely based on Monokai textmate theme by http://www.monokai.nl/
| |
− | * @author ocodia
| |
− | */
| |
− |
| |
− | code[class*="language-"],
| |
− | pre[class*="language-"] {
| |
− | color: #f8f8f2;
| |
− | text-shadow: 0 1px rgba(0, 0, 0, 0.3);
| |
− | font-family: Consolas, Monaco, 'Andale Mono', monospace;
| |
− | direction: ltr;
| |
− | text-align: left;
| |
− | white-space: pre;
| |
− | word-spacing: normal;
| |
− | word-break: normal;
| |
− | line-height: 1.5;
| |
− |
| |
− | -moz-tab-size: 4;
| |
− | -o-tab-size: 4;
| |
− | tab-size: 4;
| |
− |
| |
− | -webkit-hyphens: none;
| |
− | -moz-hyphens: none;
| |
− | -ms-hyphens: none;
| |
− | hyphens: none;
| |
− | }
| |
− |
| |
− | /* Code blocks */
| |
− | pre[class*="language-"] {
| |
− | padding: 1em;
| |
− | margin: .5em 0;
| |
− | overflow: auto;
| |
− | border-radius: 0.3em;
| |
− | }
| |
− |
| |
− | :not(pre) > code[class*="language-"],
| |
− | pre[class*="language-"] {
| |
− | background: #272822;
| |
− | }
| |
− |
| |
− | /* Inline code */
| |
− | :not(pre) > code[class*="language-"] {
| |
− | padding: .1em;
| |
− | border-radius: .3em;
| |
− | }
| |
− |
| |
− | .token.comment,
| |
− | .token.prolog,
| |
− | .token.doctype,
| |
− | .token.cdata {
| |
− | color: slategray;
| |
− | }
| |
− |
| |
− | .token.punctuation {
| |
− | color: #f8f8f2;
| |
− | }
| |
− |
| |
− | .namespace {
| |
− | opacity: .7;
| |
− | }
| |
− |
| |
− | .token.property,
| |
− | .token.tag,
| |
− | .token.constant,
| |
− | .token.symbol,
| |
− | .token.deleted {
| |
− | color: #f92672;
| |
− | }
| |
− |
| |
− | .token.boolean,
| |
− | .token.number {
| |
− | color: #ae81ff;
| |
− | }
| |
− |
| |
− | .token.selector,
| |
− | .token.attr-name,
| |
− | .token.string,
| |
− | .token.char,
| |
− | .token.builtin,
| |
− | .token.inserted {
| |
− | color: #a6e22e;
| |
− | }
| |
− |
| |
− | .token.operator,
| |
− | .token.entity,
| |
− | .token.url,
| |
− | .language-css .token.string,
| |
− | .style .token.string,
| |
− | .token.variable {
| |
− | color: #f8f8f2;
| |
− | }
| |
− |
| |
− | .token.atrule,
| |
− | .token.attr-value,
| |
− | .token.function {
| |
− | color: #e6db74;
| |
− | }
| |
− |
| |
− | .token.keyword {
| |
− | color: #66d9ef;
| |
− | }
| |
− |
| |
− | .token.regex,
| |
− | .token.important {
| |
− | color: #fd971f;
| |
− | }
| |
− |
| |
− | .token.important,
| |
− | .token.bold {
| |
− | font-weight: bold;
| |
− | }
| |
− | .token.italic {
| |
− | font-style: italic;
| |
− | }
| |
− |
| |
− | .token.entity {
| |
− | cursor: help;
| |
− | }
| |
− |
| |
− | pre[data-line] {
| |
− | position: relative;
| |
− | padding: 1em 0 1em 3em;
| |
− | }
| |
− |
| |
− | .line-highlight {
| |
− | position: absolute;
| |
− | left: 0;
| |
− | right: 0;
| |
− | padding: inherit 0;
| |
− | margin-top: 1em; /* Same as .prism’s padding-top */
| |
− |
| |
− | background: hsla(24, 20%, 50%,.08);
| |
− | background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
| |
− | background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
| |
− | background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
| |
− | background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
| |
− |
| |
− | pointer-events: none;
| |
− |
| |
− | line-height: inherit;
| |
− | white-space: pre;
| |
− | }
| |
− |
| |
− | .line-highlight:before,
| |
− | .line-highlight[data-end]:after {
| |
− | content: attr(data-start);
| |
− | position: absolute;
| |
− | top: .4em;
| |
− | left: .6em;
| |
− | min-width: 1em;
| |
− | padding: 0 .5em;
| |
− | background-color: hsla(24, 20%, 50%,.4);
| |
− | color: hsl(24, 20%, 95%);
| |
− | font: bold 65%/1.5 sans-serif;
| |
− | text-align: center;
| |
− | vertical-align: .3em;
| |
− | border-radius: 999px;
| |
− | text-shadow: none;
| |
− | box-shadow: 0 1px white;
| |
− | }
| |
− |
| |
− | .line-highlight[data-end]:after {
| |
− | content: attr(data-end);
| |
− | top: auto;
| |
− | bottom: .4em;
| |
− | }
| |
− | pre.line-numbers {
| |
− | position: relative;
| |
− | padding-left: 3.8em;
| |
− | counter-reset: linenumber;
| |
− | }
| |
− |
| |
− | pre.line-numbers > code {
| |
− | position: relative;
| |
− | }
| |
− |
| |
− | .line-numbers .line-numbers-rows {
| |
− | position: absolute;
| |
− | pointer-events: none;
| |
− | top: 0;
| |
− | font-size: 100%;
| |
− | left: -3.8em;
| |
− | width: 3em; /* works for line-numbers below 1000 lines */
| |
− | letter-spacing: -1px;
| |
− | border-right: 1px solid #999;
| |
− |
| |
− | -webkit-user-select: none;
| |
− | -moz-user-select: none;
| |
− | -ms-user-select: none;
| |
− | user-select: none;
| |
− |
| |
− | }
| |
− |
| |
− | .line-numbers-rows > span {
| |
− | pointer-events: none;
| |
− | display: block;
| |
− | counter-increment: linenumber;
| |
− | }
| |
− |
| |
− | .line-numbers-rows > span:before {
| |
− | content: counter(linenumber);
| |
− | color: #999;
| |
− | display: block;
| |
− | padding-right: 0.8em;
| |
− | text-align: right;
| |
− | }
| |
− | .depth-over-caption {
| |
− | z-index: 3;
| |
− | }
| |
− | .depth-over-hover {
| |
− | z-index: 7;
| |
− | }
| |
− | .depth-over-content {
| |
− | z-index: 11;
| |
− | }
| |
− | /*** grid ***/
| |
− | .jprt-container {
| |
− | position: relative;
| |
− | padding: 0;
| |
− | }
| |
− | .jprt-item {
| |
− | position: absolute;
| |
− | text-align: center;
| |
− |
| |
− | -webkit-transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
| |
− | -moz-transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
| |
− | -o-transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
| |
− | transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
| |
− | z-index: 2;
| |
− | }
| |
− | .jprt-caption h1 {
| |
− | margin: 0;
| |
− | }
| |
− |
| |
− | .jprt-content {
| |
− | position: absolute;
| |
− | display: none;
| |
− | width: 100%;
| |
− | top: 0;
| |
− | left: 0;
| |
− | overflow-y: hidden;
| |
− |
| |
− | -webkit-transition: height 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
| |
− | -moz-transition: height 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
| |
− | -o-transition: height 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
| |
− | transition: height 1s ease, top 1s ease, left 1s ease, opacity 0.5s ease;
| |
− | z-index: 10;
| |
− | }
| |
− | .jprt-content.show_new_section {
| |
− | display: inline-block;
| |
− | z-index: 4;
| |
− | }
| |
− |
| |
− | .jprt-hover {
| |
− | position: absolute;
| |
− |
| |
− | opacity: 0;
| |
− | width: 100%;
| |
− | top: 0;
| |
− | left: 0;
| |
− |
| |
− | -webkit-transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.25s ease;
| |
− | -moz-transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.25s ease;
| |
− | -o-transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.25s ease;
| |
− | transition: width 1s ease, top 1s ease, left 1s ease, opacity 0.25s ease;
| |
− | z-index: 6;
| |
− | }
| |
− |
| |
− | .jprt-item:hover {
| |
− | cursor: pointer;
| |
− | }
| |
− | .jprt-item:hover .jprt-hover {
| |
− | opacity: 1;
| |
− | }
| |
− | /**** decorations ****/
| |
− | .jprt-features {
| |
− | position: absolute;
| |
− | top: 15px;
| |
− | left: 0;
| |
− | }
| |
− | .jprt-features ul {
| |
− | list-style: none;
| |
− | padding: 0;
| |
− | }
| |
− | .jprt-features li {
| |
− | list-style: none;
| |
− | margin-bottom: 6px;
| |
− | padding: 3px 6px;
| |
− | font-size: 12px;
| |
− | }
| |
− |
| |
− | .jprt-item-status {
| |
− | position: absolute;
| |
− | top: 10px;
| |
− | right: 10px;
| |
− | font-size: 14px;
| |
− | }
| |
− |
| |
− | .jprt-item-tags {
| |
− | position: absolute;
| |
− | bottom: 0;
| |
− | padding: 5px 10px;
| |
− | width: 100%;
| |
− | }
| |
− | .jprt-item-title {
| |
− | position: absolute;
| |
− | top: 40%;
| |
− | width: 100%;
| |
− | font-size: 24px;
| |
− | padding: 10px;
| |
− | }
| |
− | h1.jprt-item-title {
| |
− | margin-top: -13px;
| |
− | }
| |
− |
| |
− | .jprt-caption-img {
| |
− | width: 30%;
| |
− | height: auto;
| |
− | top: 50px;
| |
− | position: relative;
| |
− | }
| |
− |
| |
− |
| |
− | /**************** STYLES GENERAL *************************/
| |
− | .jprt-btn-transparent-white {
| |
− | color: #fff;
| |
− | background: none;
| |
− | border: 1px solid #fff;
| |
− | padding: 10px 20px;
| |
− | outline: none;
| |
− | }
| |
− | .jprt-btn-transparent-white:hover {
| |
− | background: rgba(255,255,255,0.3);
| |
− | outline: none;
| |
− | }
| |
− | .jprt-arrow-down-border {
| |
− | display: none;
| |
− | width: 60px;
| |
− | height: 60px;
| |
− | position: absolute;
| |
− | bottom: 0;
| |
− | background: #444;
| |
− | padding: 2px;
| |
− | left: 50%;
| |
− | margin-left: -30px;
| |
− | border-radius: 50%;
| |
− | z-index: 15;
| |
− | margin-bottom: -30px;
| |
− | }
| |
− | .jprt-arrow-down-back {
| |
− | width: 56px;
| |
− | height: 56px;
| |
− | position: absolute;
| |
− | background: #fff;
| |
− | top: 2px;
| |
− | left: 2px;
| |
− | border-radius: 50%;
| |
− | }
| |
− | .jprt-arrow-down {
| |
− | transform: rotate(45deg) ;
| |
− | -webkit-transform: rotate(45deg) ;
| |
− | -moz-transform: rotate(45deg) ;
| |
− | -o-transform: rotate(45deg) ;
| |
− | -ms-transform: rotate(45deg) ;
| |
− | background: none;
| |
− | border-bottom: 2px solid #444;
| |
− | border-right: 2px solid #444;
| |
− | border-radius: 2px;
| |
− | position: relative;
| |
− | width: 20px;
| |
− | height: 20px;
| |
− | margin: auto;
| |
− | margin-top: 15px;
| |
− | }
| |
− |
| |
− | /* backgrounds */
| |
− | .jprt-bg-build-area {
| |
− | background: repeating-linear-gradient(
| |
− | -45deg,
| |
− | #444,
| |
− | #444 15px,
| |
− | #dab91f 15px,
| |
− | #dab91f 30px
| |
− | );
| |
− | }
| |
− | .jprt-bg-build-area {
| |
− | background: repeating-linear-gradient(
| |
− | -45deg,
| |
− | #444,
| |
− | #444 10px,
| |
− | #dab91f 10px,
| |
− | #dab91f 20px
| |
− | );
| |
− | }
| |
− |
| |
− |
| |
− | /**********************************************************/
| |
− | /**********************************************************/
| |
− | /****************** STYLE DEFAULT *************************/
| |
− | /**********************************************************/
| |
− | /**********************************************************/
| |
− | /*** buttons ***/
| |
− | .jprt-buttons {
| |
− | margin-top: 20px;
| |
− | margin-bottom: 20px;
| |
− | text-align: center;
| |
− | }
| |
− | .jprt-buttons .jprt-btn {
| |
− | background: #27b0d1;
| |
− | color: #fff;
| |
− | font-size: 16px;
| |
− | padding: 10px 15px;
| |
− | margin: 10px;
| |
− | box-shadow: none;
| |
− | border: 2px solid #27b0d1;
| |
− | outline-style: none;
| |
− | }
| |
− | .jprt-buttons .jprt-btn:hover {
| |
− | background: #27dbd1;
| |
− | color: #fff;
| |
− | border: 2px solid #27dbd1;
| |
− | outline-style: none;
| |
− | }
| |
− | .jprt-buttons .jprt-btn.jprt-btn-active {
| |
− | background: #fff;
| |
− | color: #27bbd1;
| |
− | outline-style: none;
| |
− | border: 2px solid #27dbd1;
| |
− | }
| |
− | .jprt-buttons .jprt-btn.jprt-btn-active:hover {
| |
− | background: #27dbd1;
| |
− | color: #fff;
| |
− | border: 2px solid #27dbd1;
| |
− | outline-style: none;
| |
− | }
| |
− |
| |
− | /*** grid ***/
| |
− | .jprt-item {
| |
− | background: #ddd;
| |
− | }
| |
− | .jprt-item:nth-child(odd) .jprt-caption {
| |
− | background: #27b0d1;
| |
− | }
| |
− | .jprt-item:nth-child(even) .jprt-caption {
| |
− | background: #27bbd1;
| |
− | }
| |
− | .jprt-hover {
| |
− | background: #27d1a9;
| |
− | }
| |
− | .jprt-content {
| |
− | background: #777;
| |
− | color: #eee;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | /*** item caption ***/
| |
− | .jprt-caption h1 {
| |
− | color: #fff;
| |
− | }
| |
− |
| |
− |
| |
− | /**** decorations ***/
| |
− | .jprt-features li {
| |
− | background: #fff;
| |
− | color: #27b0d1;
| |
− | }
| |
− |
| |
− | .jprt-item-status {
| |
− | color: #fff;
| |
− | }
| |
− |
| |
− | .jprt-item-tags {
| |
− | background: rgba(0,0,0,0.2);
| |
− | color: #fff;
| |
− | }
| |
− | .jprt-item-title {
| |
− | background: rgba(0,0,0,0.2);
| |
− | color: #fff;
| |
− | }
| |
− | .fruit_veg_img {
| |
− | width: 40%;
| |
− | max-width: 200px;
| |
− | padding-top: 50%;
| |
− | margin-top: -20%;
| |
− | }
| |
− |
| |
− | .fruit_veg_img_in_cnt {
| |
− | margin-top: 40px;
| |
− | margin-bottom: 40px;
| |
− | }
| |
− | .custom-content-title{
| |
− | margin-top: 100px;
| |
− | color: #444;
| |
− | font-size: 36px;
| |
− | }
| |
− | .jprt-content {
| |
− | background: #b6e86e;
| |
− | }
| |
− |
| |
− | #apple_item {
| |
− | background: #66ca66;
| |
− | }
| |
− | #carrot_item {
| |
− | background: #e9983f;
| |
− | }
| |
− | #arbuz_item {
| |
− | background: #df7158;
| |
− | }
| |
− | #beans_item {
| |
− | background: #8cb666;
| |
− | }
| |
− | #banana_item {
| |
− | background: #eae15a;
| |
− | }
| |
− | #celery_item {
| |
− | background: #c0f491;
| |
− | }
| |
− | #citrus_item {
| |
− | background: #ffeb63;
| |
− | }
| |
− | #radish_item {
| |
− | background: #ff8391;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
| | | |
| | | |
| </style> | | </style> |
| </html> | | </html> |