Init
This commit is contained in:
Dmytro Tkachenko
@@ -0,0 +1,19 @@
|
||||
.badge {
|
||||
@extend .poppins-medium;
|
||||
height: 25px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
padding: 0 6px;
|
||||
border: .5px solid #D9D9D9;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
background-color: #FAFAFA;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #484848;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&--source {
|
||||
background: #EEE7F7;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.box {
|
||||
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.breadcrumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
&__list {
|
||||
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
&__link {
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__separator {
|
||||
transform: rotate(45deg);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-top: 1px solid #000;
|
||||
border-right: 1px solid #000;
|
||||
margin: 0 16px;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
@import '../fonts/poppins';
|
||||
|
||||
.button {
|
||||
@extend .poppins-regular;
|
||||
height: 56px;
|
||||
line-height: 52px;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
border: 2px solid #000;
|
||||
|
||||
&__primary {
|
||||
color: #000;
|
||||
transition: all .3s ease;
|
||||
|
||||
&:hover, &.active {
|
||||
border-color: transparent;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
&.active {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__secondary {
|
||||
color: #FFF;
|
||||
background-color: #000;
|
||||
transition: all .3s ease;
|
||||
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.15);
|
||||
display: inline-block;
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
background: #444;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.checkbox {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
|
||||
+ label {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
//border: 1px solid #484848;
|
||||
border-radius: 4px;
|
||||
//box-shadow: 0 1px 3px 0 rgba(43, 33, 30, 0.08);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
color: #484848;
|
||||
|
||||
&:before {
|
||||
background: #484848;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml,%3Csvg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M11.1382 0.195262C11.3985 0.455612 11.3985 0.877722 11.1382 1.13807L4.47149 7.80474C4.21114 8.06509 3.78903 8.06509 3.52868 7.80474L0.86201 5.13807C0.601661 4.87772 0.601661 4.45561 0.86201 4.19526C1.12236 3.93491 1.54447 3.93491 1.80482 4.19526L4.00008 6.39052L10.1953 0.195262C10.4557 -0.0650874 10.8778 -0.0650874 11.1382 0.195262Z" fill="%23FFF"/%3E%3C/svg%3E');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
:root {
|
||||
--rt-opacity: 1 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 20px;
|
||||
font-size: 16px;
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
@include lg {
|
||||
padding: 120px 20px;
|
||||
}
|
||||
|
||||
@include xl {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
padding-top: 70px;
|
||||
|
||||
@include lg {
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-container {
|
||||
margin: 0 auto;
|
||||
max-width: 735px;
|
||||
color: #8A8A8A;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.skip-to-content-link {
|
||||
left: 50%;
|
||||
top: -10%;
|
||||
position: absolute;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
.product-card {
|
||||
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 10px;
|
||||
//overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@include lg {
|
||||
display: flex;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
&__data {
|
||||
flex: 1 1 auto;
|
||||
padding: 42px 42px 90px 42px;
|
||||
position: relative;
|
||||
|
||||
h2 {
|
||||
cursor: pointer;
|
||||
padding-right: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&__information {
|
||||
@extend .volkhov-bold-italic;
|
||||
font-size: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
right: 42px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__confidence {
|
||||
&-container {
|
||||
position: absolute;
|
||||
bottom: 42px;
|
||||
left: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
.product {
|
||||
position: relative;
|
||||
|
||||
@include lg {
|
||||
display: flex;
|
||||
gap: 65px;
|
||||
height: 640px;
|
||||
margin-top: 90px;
|
||||
}
|
||||
|
||||
&__slider {
|
||||
|
||||
@include lg {
|
||||
flex: 1 1 auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
&__data {
|
||||
position: relative;
|
||||
|
||||
&--desktop {
|
||||
flex: 0 1 460px;
|
||||
padding: 38px 0;
|
||||
|
||||
.product {
|
||||
&__title, &__subtitle, &__confidence {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include lg {
|
||||
border: 1px solid #D9D9D9;
|
||||
padding: 38px 32px;
|
||||
|
||||
.product {
|
||||
&__title, &__subtitle, &__confidence {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--mobile {
|
||||
border: none;
|
||||
|
||||
@include lg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@extend .poppins-medium;
|
||||
font-size: 30px;
|
||||
text-align: left;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
}
|
||||
|
||||
&__badge-list {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@extend .poppins-medium;
|
||||
font-size: 12px;
|
||||
margin: 16px 0;
|
||||
line-height: 26px;
|
||||
color: #484848;
|
||||
|
||||
}
|
||||
|
||||
&__confidence {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
margin-bottom: 28px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__media {
|
||||
&-item {
|
||||
line-height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-slider {
|
||||
height: 550px;
|
||||
width: auto;
|
||||
|
||||
@include sm {
|
||||
height: 580px;
|
||||
}
|
||||
|
||||
@include lg {
|
||||
position: relative;
|
||||
height: 640px;
|
||||
width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-list {
|
||||
border: 1px solid rgba(217, 217, 217, 1);
|
||||
height: 480px;
|
||||
|
||||
@include lg {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
@include md {
|
||||
margin-right: 98px;
|
||||
height: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
bottom: 0;
|
||||
|
||||
@include md {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 94px;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
margin: 0 5px;
|
||||
border: 1px solid rgba(217, 217, 217, 1);
|
||||
width: 15%;
|
||||
height: 50px;
|
||||
|
||||
@include sm {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
@include md {
|
||||
width: 94px;
|
||||
height: 114px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include lg {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&.slick-active {
|
||||
border: 2px solid rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
.slick-slider {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@include lg {
|
||||
height: 260px;
|
||||
width: 620px;
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 30px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(-45deg);
|
||||
border-bottom: 2px solid #000;
|
||||
border-right: 2px solid #000;
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
left: 30px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
transform: rotate(-135deg);
|
||||
border-top: 2px solid #000;
|
||||
border-right: 2px solid #000;
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev, .slick-next {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
|
||||
&:hover, &:focus, &:active {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
.tooltip {
|
||||
&__data {
|
||||
display: flex;
|
||||
line-height: 26px;
|
||||
|
||||
div {
|
||||
&:first-child {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
b {
|
||||
@extend .poppins-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
&--Social_Media_Influence {
|
||||
@extend .poppins-semibold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #D9D9D9;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: inline-block;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
//margin-bottom: 6px;
|
||||
}
|
||||
|
||||
&__information {
|
||||
@extend .volkhov-bold-italic;
|
||||
border-radius: 50%;
|
||||
top: 42px;
|
||||
right: 42px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #FAFAFA;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 12px;
|
||||
color: #484848;
|
||||
line-height: 18px;
|
||||
margin-left: 8px;
|
||||
border: .5px solid #D9D9D9;
|
||||
}
|
||||
|
||||
&__confidence {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #8A8A8A;
|
||||
text-transform: capitalize;
|
||||
display: inline-block;
|
||||
margin-top: 15px;
|
||||
|
||||
&--high, &--average, &--low {
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
vertical-align: bottom;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&--high {
|
||||
&:before {
|
||||
background: #70E9C7;
|
||||
}
|
||||
}
|
||||
|
||||
&--average {
|
||||
&:before {
|
||||
background: #EADF3D;
|
||||
}
|
||||
}
|
||||
|
||||
&--low {
|
||||
&:before {
|
||||
background: #EA653D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@import '../fonts/poppins';
|
||||
@import '../fonts/volkhov';
|
||||
@import '../helpers/space';
|
||||
|
||||
body {
|
||||
@extend .poppins-regular;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@extend .volkhov-regular;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
color: #484848;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@extend .poppins-medium;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@extend .poppins-medium;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
Reference in New Issue
Block a user