Colors Variations

6 Colors VariationsThe main color of JSN Epic 2 is White, and there are 6 color variations which are Blue, Green, Violet, Red, Orange and Grey. These color options are styles for important elements such as icon, button, logo, menu item or content background. They make delicate changes in layout styles and keep the main concept staying the same.BlueGreenVioletRedOrangeGrey ._NYd6gvae { position: relative; } ._KzlwM38p { position: relative; } ._VWvqNvR9 { vertical-align: middle; } ._7XqAY8_A > span:last-child { line-height: inherit; } ._7XqAY8_A[class*="dropcap--"] > span:first-child { display: block; margin-right: 10px; float: left; font-size: 2em; background: #919da9; color: black; width: 50px; height: 50px; line-height: 50px; } ._7XqAY8_A[class*="dropcap--"]:not(.dropcap--none) > span:first-child { margin-right: 20px; text-align: center; } ._7XqAY8_A.dropcap--none > span:first-child { text-align: inherit; line-height: 1 !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0; } ._7XqAY8_A.dropcap--circle > span:first-child { border-radius: 100%; } ._7XqAY8_A:not([class*="dropcap--"]) > span { margin-right: 0 !important; } // ._7XqAY8_A[class*="dropcap--"] > span:last-child { // display: inherit; // } ._7XqAY8_A ol, ._7XqAY8_A ul { list-style-position: inside; } ._7XqAY8_A blockquote { font-size: inherit; } ._O689JW7n { position: relative; } ._pDNE0kYl { position: relative; } ._pDNE0kYl { margin: 0 -15px; } ._DblQBlAM { position: relative; } ._DblQBlAM { clear: both; } ._DblQBlAM[data-parallax="true"] { position: relative; } ._DblQBlAM__parallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } ._DblQBlAM[data-parallax="true"] .parallax-bg { position: absolute; left: 50%; bottom: 0; max-width: 100%; min-width: 100%; min-height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); object-fit: cover; will-change: transform; } ._DblQBlAM { box-sizing: border-box; padding: 15px 0; position: relative; } ._DblQBlAM__container { width: auto; margin: auto; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } ._ngb5Wk8q { font-size: 1em; vertical-align: middle; text-align: center; width: auto; height: auto; } ._ngb5Wk8q--diamond, ._ngb5Wk8q--circle, ._ngb5Wk8q--square { width: 50px; height: 50px; line-height: 50px; border: 1px solid; } ._ngb5Wk8q--circle { border-radius: 100%; } ._ngb5Wk8q--diamond { transform: rotate(45deg); -webkit-transform: rotate(45deg); } ._ngb5Wk8q--diamond:before { display: block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } ._qaQP6rvk > a { color: inherit !important; } ._qaQP6rvk { word-break: break-word; } ._qaQP6rvk__icon--left i { margin-right: 0.3em; } ._qaQP6rvk__icon--right i { margin-left: 0.3em; } ._qaQP6rvk__icon--top i { margin-bottom: 0.5em; } ._qaQP6rvk__icon--top > span, ._qaQP6rvk__icon--top > a, ._qaQP6rvk__icon--top > span[data-empty][contenteditable] { display: block; } ._qaQP6rvk [class*="--diamond"] { margin-right: 1em; } ._epNwrNGv { position: relative; overflow: hidden; display: inline-flex; justify-content: flex-start; align-items: flex-start; vertical-align: middle; } ._epNwrNGv picture { width: 100%; } ._epNwrNGv img { display: inline-block; object-fit: cover; max-width: 100%; max-height: 100%; height: auto; text-align: center; width: 100%; vertical-align: middle; } ._epNwrNGv.image--rounded { border-radius: 10px; } ._epNwrNGv.image--circle { border-radius: 100%; } @media all { .__pf_7bwrc ._YWB0hakK[data-id="_YWB0hakK"] { margin: 7px 0px; } .__pf_7bwrc ._3Xp4S_Xd[data-id="_3Xp4S_Xd"] { margin: 0px; } .__pf_7bwrc ._gRm1TdRQ[data-id="_gRm1TdRQ"] { padding: 11px 30px; border-width: 0px 1px 1px; border-style: none; border-color: rgb(231, 234, 238); border-image: initial; } .__pf_7bwrc ._zR0GTzVx[data-id="_zR0GTzVx"] { text-align: center; background-image: linear-gradient(-180deg, rgb(247, 247, 247) 93%, rgb(255, 255, 255) 99%); box-shadow: rgb(218, 218, 218) 0px 0px 5px 0px; border-radius: 5px; border: 1px none rgb(241, 241, 241); } .__pf_7bwrc ._krezToRe[data-id="_krezToRe"] { padding: 11px 30px; border-width: 0px 1px 1px; border-style: none; border-color: rgb(231, 234, 238); border-image: initial; } .__pf_7bwrc ._anOlTQw0[data-id="_anOlTQw0"] { text-align: center; background-image: linear-gradient(-180deg, rgb(247, 247, 247) 93%, rgb(255, 255, 255) 99%); box-shadow: rgb(218, 218, 218) 0px 0px 5px 0px; border-radius: 5px; border: 1px none rgb(241, 241, 241); } .__pf_7bwrc ._6nAvTBER[data-id="_6nAvTBER"] { padding: 11px 30px; border-width: 0px 1px 1px; border-style: none; border-color: rgb(231, 234, 238); border-image: initial; } .__pf_7bwrc ._GV5oTvNw[data-id="_GV5oTvNw"] { text-align: center; background-image: linear-gradient(-180deg, rgb(247, 247, 247) 93%, rgb(255, 255, 255) 99%); box-shadow: rgb(218, 218, 218) 0px 0px 5px 0px; border-radius: 5px; border: 1px none rgb(241, 241, 241); } .__pf_7bwrc ._mrXKTYow[data-id="_mrXKTYow"] { padding: 11px 30px; border-width: 0px 1px 1px; border-style: none; border-color: rgb(231, 234, 238); border-image: initial; } .__pf_7bwrc ._9rxZTO4r[data-id="_9rxZTO4r"] { text-align: center; background-image: linear-gradient(-180deg, rgb(247, 247, 247) 93%, rgb(255, 255, 255) 99%); box-shadow: rgb(218, 218, 218) 0px 0px 5px 0px; border-radius: 5px; border: 1px none rgb(241, 241, 241); } .__pf_7bwrc ._ZrYBTMwk[data-id="_ZrYBTMwk"] { padding: 11px 30px; border-width: 0px 1px 1px; border-style: none; border-color: rgb(231, 234, 238); border-image: initial; } .__pf_7bwrc .__VPZTvVj[data-id="__VPZTvVj"] { text-align: center; background-image: linear-gradient(-180deg, rgb(247, 247, 247) 93%, rgb(255, 255, 255) 99%); box-shadow: rgb(218, 218, 218) 0px 0px 5px 0px; border-radius: 5px; border: 1px none rgb(241, 241, 241); } .__pf_7bwrc ._Xn4dTyRM[data-id="_Xn4dTyRM"] { padding: 11px 30px; border-width: 0px 1px 1px; border-style: none; border-color: rgb(231, 234, 238); border-image: initial; } .__pf_7bwrc ._6w9ZTprX[data-id="_6w9ZTprX"] { text-align: center; background-image: linear-gradient(-180deg, rgb(247, 247, 247) 93%, rgb(255, 255, 255) 99%); box-shadow: rgb(218, 218, 218) 0px 0px 5px 0px; border-radius: 5px; border: 1px none rgb(241, 241, 241); } .__pf_7bwrc ._rkMpSak_[data-id="_rkMpSak_"] { margin: 0px -7.5px; } .__pf_7bwrc ._GYd5uWAo[data-id="_GYd5uWAo"] { padding: 0px 0px 15px; } .__pf_7bwrc ._YvgzH3kA[data-id="_YvgzH3kA"] { font-size: 18px; margin: 0px 0px 8px; } .__pf_7bwrc ._3Lg4H2vm[data-id="_3Lg4H2vm"] { width: 100%; display: block; } .__pf_7bwrc ._2pLnHNvd[data-id="_2pLnHNvd"] { font-size: 12px; margin: 0px; } .__pf_7bwrc ._yvZjHPLZ[data-id="_yvZjHPLZ"] { width: 100%; display: block; } .__pf_7bwrc ._BpJ7HA0d[data-id="_BpJ7HA0d"] { font-size: 12px; margin: 0px; } .__pf_7bwrc ._QAYpHXdL[data-id="_QAYpHXdL"] { width: 100%; display: block; } .__pf_7bwrc ._x8jDHaAv[data-id="_x8jDHaAv"] { font-size: 12px; margin: 0px; } .__pf_7bwrc ._0RGoH0wR[data-id="_0RGoH0wR"] { width: 100%; display: block; } .__pf_7bwrc ._YkgzHr38[data-id="_YkgzHr38"] { font-size: 12px; margin: 0px; } .__pf_7bwrc ._1AoVH6A6[data-id="_1AoVH6A6"] { width: 100%; display: block; } .__pf_7bwrc ._68l9HqD0[data-id="_68l9HqD0"] { font-size: 12px; margin: 0px; } .__pf_7bwrc ._rv5XHBvE[data-id="_rv5XHBvE"] { width: 100%; display: block; } .__pf_7bwrc ._M86YHK8r[data-id="_M86YHK8r"] { font-size: 12px; margin: 0px; } } @media only screen and (max-width: 767px) { } @media only screen and (min-width: 768px) and (max-width: 991px) { } @media only screen and (min-width: 992px) and (max-width: 1199px) { } @media only screen and (min-width: 1200px) { }

Warnung

Colors Variations

6 Colors Variations

Blue

Green

Violet

Red

Orange

Grey

Das Neueste von