Merge branch '1.1' of https://github.com/merdiano/orient-site into 1.1
This commit is contained in:
commit
540bb0fc0f
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -0,0 +1,90 @@
|
|||
@mixin transition {
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
-moz-transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
@mixin transition-bg {
|
||||
transition: background 0.2s ease-in-out 0s;
|
||||
-moz-transition: background 0.2s ease-in-out 0s;
|
||||
}
|
||||
@mixin transition-border {
|
||||
transition: border 0.2s ease-in-out 0s;
|
||||
-moz-transition: border 0.2s ease-in-out 0s;
|
||||
}
|
||||
@mixin fullImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
-o-object-fit: cover;
|
||||
}
|
||||
@mixin transformY {
|
||||
transform: translateY(-50%);
|
||||
-moz-ransform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
}
|
||||
@mixin transformX {
|
||||
transform: translateX(-50%);
|
||||
-moz-ransform: translateX(-50%);
|
||||
-o-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
-webkit-transform: translateX(-50%);
|
||||
}
|
||||
@mixin transform {
|
||||
transform: translate(-50%, -50%);
|
||||
-moz-ransform: translate(-50%, -50%);
|
||||
-o-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
}
|
||||
@mixin transformReset {
|
||||
transform: translate(0, 0);
|
||||
-moz-ransform: translate(0, 0);
|
||||
-o-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
-webkit-transform: translate(0, 0);
|
||||
}
|
||||
@mixin rotate {
|
||||
transform: rotate(90deg);
|
||||
-webkit-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
}
|
||||
@mixin rotate180deg {
|
||||
transform: rotate(180deg);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
}
|
||||
@mixin rotate270deg {
|
||||
transform: rotate(270deg);
|
||||
-webkit-transform: rotate(270deg);
|
||||
-o-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
-moz-transform: rotate(270deg);
|
||||
}
|
||||
|
||||
@mixin xxsm-xsm {
|
||||
@media (max-width: 374px) { @content; }
|
||||
}
|
||||
@mixin xsm-sm {
|
||||
@media (max-width: 540px) { @content; }
|
||||
}
|
||||
@mixin sm-md {
|
||||
@media (max-width: 700px) { @content; }
|
||||
}
|
||||
@mixin md-lg {
|
||||
@media (max-width: 768px) { @content; }
|
||||
}
|
||||
@mixin lg-xlg {
|
||||
@media (max-width: 1024px) { @content; }
|
||||
}
|
||||
|
||||
@mixin xlg-xxlg {
|
||||
@media (max-width: 1400px) { @content; }
|
||||
}
|
||||
@mixin xxlg-xxxlg {
|
||||
@media (max-width: 1640px) { @content; }
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
/***
|
||||
|
||||
====================================================================
|
||||
Reset
|
||||
====================================================================
|
||||
|
||||
***/
|
||||
// :root {
|
||||
// font-size: calc(1vw + 0.6em);
|
||||
// }
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
/***
|
||||
====================================================================
|
||||
Global Settings
|
||||
====================================================================
|
||||
***/
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
line-height: 1.7em;
|
||||
font-weight: 400;
|
||||
background: #fff;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
margin: 0px;
|
||||
background: none;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
/* Typography */
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 34px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 22px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
}
|
||||
p {
|
||||
position: relative;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
.auto__container {
|
||||
position: relative;
|
||||
max-width: 1440px;
|
||||
padding: 0px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.mr-top-bot {
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
$main-color: #fd4c24;
|
||||
$text-light-black: #242424;
|
||||
$text-black: #000;
|
||||
$text-color-white: #ffffff;
|
||||
$text-color-grey: #a2a2a2;
|
||||
$color-grey: #b4b4b4;
|
||||
$p-size: 16px;
|
||||
$p-height: 26px;
|
||||
$h2-size: 22px;
|
||||
$h2-height: 28px;
|
||||
$h3-size: 20px;
|
||||
$h3-height: 24px;
|
||||
$h4-size: 16px;
|
||||
$h4-height: 20px;
|
||||
$h5-size: 14px;
|
||||
$h5-height: 20px;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
.footer {
|
||||
background: $text-light-black;
|
||||
padding: 30px 0;
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&__copyright {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-white;
|
||||
a {
|
||||
color: $text-color-white;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&__social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-link {
|
||||
fill: $text-color-white;
|
||||
margin: 0 10px;
|
||||
@include transition;
|
||||
&:hover {
|
||||
fill: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
.header {
|
||||
position: relative;
|
||||
.mobileSearch {
|
||||
display: none;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #00822c;
|
||||
}
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
}
|
||||
&__logo {
|
||||
width: 120px;
|
||||
}
|
||||
&__search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-input {
|
||||
width: 350px;
|
||||
position: relative;
|
||||
input {
|
||||
width: calc(100% - 60px);
|
||||
font-family: "roboto";
|
||||
padding: 14px 40px 14px 20px;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-size;
|
||||
color: rgba($color: $text-light-black, $alpha: 0.3);
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c9c9c9;
|
||||
&::placeholder {
|
||||
font-family: "roboto";
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-size;
|
||||
color: rgba($color: $text-light-black, $alpha: 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
@include transformY;
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: $text-light-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__slogan {
|
||||
font-family: "Oswald", sans-serif;
|
||||
color: $main-color;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
margin-right: 20px;
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
.hamBtn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.searchModal {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,433 @@
|
|||
// Helper Functions
|
||||
|
||||
/// Replace `$search` with `$replace` in `$string`
|
||||
/// @author Hugo Giraudel
|
||||
/// @param {String} $string - Initial string
|
||||
/// @param {String} $search - Substring to replace
|
||||
/// @param {String} $replace ('') - New value
|
||||
/// @return {String} - Updated string
|
||||
@function lightpick-str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace +
|
||||
lightpick-str-replace(
|
||||
str-slice($string, $index + str-length($search)),
|
||||
$search,
|
||||
$replace
|
||||
);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
/// Split `$string` between the `$separator` characters
|
||||
/// @author https://stackoverflow.com/a/42295154/108816
|
||||
/// @param {String} $string - Initial string
|
||||
/// @param {String} $separator - Substring to split on
|
||||
/// @return {List} - Split string
|
||||
@function lightpick-str-split($string, $separator) {
|
||||
$split-arr: ();
|
||||
$index: str-index($string, $separator);
|
||||
|
||||
@while $index != null {
|
||||
$item: str-slice($string, 1, $index - 1);
|
||||
|
||||
$split-arr: append($split-arr, $item);
|
||||
|
||||
$string: str-slice($string, $index + 1);
|
||||
|
||||
$index: str-index($string, $separator);
|
||||
}
|
||||
|
||||
$split-arr: append($split-arr, $string);
|
||||
|
||||
@return $split-arr;
|
||||
}
|
||||
|
||||
// SCSS Variables
|
||||
|
||||
$lightpick-font: system-ui, Roboto, Helvetica, Arial, sans-serif !default;
|
||||
$lightpick-line-height: 1.125em !default;
|
||||
$lightpick-border-radius: 4px !default;
|
||||
$lightpick-padding: 4px !default;
|
||||
$lightpick-color: #000 !default;
|
||||
$lightpick-background-color: #fff !default;
|
||||
$lightpick-months-background-color: #eee !default;
|
||||
$lightpick-title-font-size: 16px !default;
|
||||
$lightpick-title-font-weight: normal !default;
|
||||
$lightpick-day-of-week-font-size: 11px !default;
|
||||
$lightpick-day-of-week-font-weight: bold !default;
|
||||
$lightpick-day-hover-color: #e0e0e0 !default;
|
||||
$lightpick-day-hover-background-image-color: lightpick-str-replace(
|
||||
quote(#{$lightpick-day-hover-color}),
|
||||
"#",
|
||||
"%23"
|
||||
);
|
||||
$lightpick-day-hover-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{$lightpick-day-hover-background-image-color}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
|
||||
$lightpick-day-disabled-opacity: 0.38 !default;
|
||||
$lightpick-day-previous-next-opacity: $lightpick-day-disabled-opacity !default;
|
||||
$lightpick-day-size: 40px !default;
|
||||
$lightpick-day-font-size: 13px !default;
|
||||
$lightpick-selected-date-color: #fff !default;
|
||||
$main-color: #268bd2 !default;
|
||||
$lightpick-selected-date-background-image-color: lightpick-str-replace(
|
||||
quote(#{$main-color}),
|
||||
"#",
|
||||
"%23"
|
||||
);
|
||||
$lightpick-selected-date-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{$lightpick-selected-date-background-image-color}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
|
||||
$lightpick-selected-date-font-weight: bold !default;
|
||||
$lightpick-selected-range-background-color: rgba($main-color, 0.1) !default;
|
||||
$lightpick-selected-range-hover-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{rgba($main-color, 0.5)}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
|
||||
$lightpick-today-color: #dc322f !default;
|
||||
$lightpick-today-background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='#{rgba($lightpick-today-color, .5)}' cx='16' cy='16' r='16'/%3E%3C/svg%3E") !default;
|
||||
$lightpick-tooltip-background-color: #fff !default;
|
||||
$lightpick-tooltip-padding: 4px 8px !default;
|
||||
$lightpick-tooltip-margin: -(unquote(nth(lightpick-str-split(quote(#{$lightpick-tooltip-padding}), " "), 1))) !default;
|
||||
$lightpick-tooltip-triangle-size: 4px !default;
|
||||
$lightpick-tooltip-border-color: rgba(0, 0, 0, 0.12) !default;
|
||||
$lightpick-tooltip-font-size: 11px !default;
|
||||
$lightpick-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !default;
|
||||
$lightpick-dropdown-font-size: 1em !default;
|
||||
$lightpick-dropdown-font-weight: bold !default;
|
||||
$lightpick-dropdown-disabled-color: #333 !default;
|
||||
$lightpick-action-width: 32px !default;
|
||||
$lightpick-action-height: $lightpick-action-width !default;
|
||||
$lightpick-action-background-color: #ddd !default;
|
||||
$lightpick-action-reset-background-color: #aeacad !default;
|
||||
$lightpick-action-reset-color: #fff !default;
|
||||
$lightpick-action-apply-background-color: #2495f3 !default;
|
||||
$lightpick-action-apply-color: #fff !default;
|
||||
$lightpick-action-border-radius: 5px !default;
|
||||
$lightpick-action-font-size: 12px !default;
|
||||
$lightpick-action-close-font-size: 18px !default;
|
||||
|
||||
// Styles
|
||||
.calendar__outer {
|
||||
width: 100%;
|
||||
input {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.lightpick {
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
border-radius: $lightpick-border-radius;
|
||||
// background-color: $lightpick-background-color;
|
||||
// box-shadow: $lightpick-box-shadow;
|
||||
color: $lightpick-color;
|
||||
font-family: $lightpick-font;
|
||||
line-height: $lightpick-line-height;
|
||||
width: 100%;
|
||||
margin-bottom: 80px;
|
||||
&--inlined {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&,
|
||||
& *,
|
||||
&::after,
|
||||
&::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__months {
|
||||
display: grid;
|
||||
background-color: $lightpick-months-background-color;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 1px;
|
||||
|
||||
@at-root .lightpick--2-columns #{&} {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
@at-root .lightpick--3-columns #{&} {
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
|
||||
@at-root .lightpick--4-columns #{&} {
|
||||
grid-template-columns: auto auto auto auto;
|
||||
}
|
||||
|
||||
@at-root .lightpick--5-columns #{&} {
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__month {
|
||||
width: 100%;
|
||||
background-color: $lightpick-background-color;
|
||||
|
||||
&-title-bar {
|
||||
display: flex;
|
||||
margin-bottom: $lightpick-padding;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #242424;
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: $lightpick-padding;
|
||||
margin-bottom: $lightpick-padding;
|
||||
margin-left: $lightpick-padding;
|
||||
font-size: $lightpick-title-font-size;
|
||||
font-weight: 700;
|
||||
line-height: $lightpick-title-font-size * 1.5;
|
||||
cursor: default;
|
||||
padding: 0 $lightpick-padding;
|
||||
border-radius: $lightpick-border-radius;
|
||||
|
||||
& > .lightpick__select {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:disabled {
|
||||
color: $lightpick-dropdown-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
& > .lightpick__select-months {
|
||||
font-weight: $lightpick-dropdown-font-weight;
|
||||
font-size: $lightpick-dropdown-font-size;
|
||||
margin-right: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
display: flex;
|
||||
// text-align: right;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__previous-action,
|
||||
&__next-action,
|
||||
&__close-action {
|
||||
display: flex;
|
||||
width: $lightpick-action-width;
|
||||
height: $lightpick-action-height;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: none;
|
||||
// border-radius: 50%;
|
||||
// background-color: $lightpick-action-background-color;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:active {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__previous-action,
|
||||
&__next-action {
|
||||
font-size: 20px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
&__close-action {
|
||||
font-size: $lightpick-action-close-font-size;
|
||||
}
|
||||
|
||||
&__days-of-the-week {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
&__day-of-the-week {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&__days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
&__day {
|
||||
display: flex;
|
||||
height: $lightpick-day-size;
|
||||
padding: 10px 0;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
font-size: $h3-size - 3px;
|
||||
line-height: $h3-height - 3px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
|
||||
&.is-today {
|
||||
background-image: $lightpick-today-background-image;
|
||||
background-size: 18.8% auto;
|
||||
background-position: center bottom;
|
||||
color: $lightpick-today-color;
|
||||
}
|
||||
|
||||
&:not(.is-disabled):hover {
|
||||
background-size: contain;
|
||||
background-image: $lightpick-day-hover-background-image;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
opacity: $lightpick-day-disabled-opacity;
|
||||
pointer-events: none;
|
||||
|
||||
&.is-forward-selected {
|
||||
opacity: 1;
|
||||
|
||||
&:not(.is-start-date) {
|
||||
background-color: $lightpick-selected-range-background-color;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled-tooltip {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&.is-previous-month,
|
||||
&.is-next-month {
|
||||
opacity: $lightpick-day-previous-next-opacity;
|
||||
}
|
||||
|
||||
&#{&}.is-in-range:not(.is-disabled) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-in-range {
|
||||
border-radius: 0;
|
||||
background-color: $lightpick-selected-range-background-color;
|
||||
background-image: none;
|
||||
|
||||
&:hover {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle fill='rgba(38, 139, 210, 0.5)' cx='16' cy='16' r='16'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
&.is-start-date.is-in-range,
|
||||
&.is-end-date.is-in-range.is-flipped {
|
||||
border-top-left-radius: 50%;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 50%;
|
||||
background-color: $main-color;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.is-end-date.is-in-range,
|
||||
&.is-start-date.is-in-range.is-flipped {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 0;
|
||||
background-color: $main-color;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.is-start-date.is-end-date {
|
||||
background-color: transparent;
|
||||
background-image: $lightpick-selected-date-background-image;
|
||||
}
|
||||
|
||||
&.is-start-date,
|
||||
&.is-end-date,
|
||||
&.is-start-date:hover,
|
||||
&.is-end-date:hover {
|
||||
background-image: $lightpick-selected-date-background-image;
|
||||
background-size: auto;
|
||||
background-position: center;
|
||||
color: $lightpick-selected-date-color;
|
||||
font-weight: $lightpick-selected-date-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
&__tooltip {
|
||||
position: absolute;
|
||||
margin-top: $lightpick-tooltip-margin;
|
||||
padding: $lightpick-tooltip-padding;
|
||||
border-radius: $lightpick-border-radius;
|
||||
background-color: $lightpick-tooltip-background-color;
|
||||
box-shadow: $lightpick-box-shadow;
|
||||
white-space: nowrap;
|
||||
font-size: $lightpick-tooltip-font-size;
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: -($lightpick-tooltip-triangle-size + 1);
|
||||
left: calc(50% - #{$lightpick-tooltip-triangle-size + 1});
|
||||
border-top: ($lightpick-tooltip-triangle-size + 1) solid
|
||||
$lightpick-tooltip-border-color;
|
||||
border-right: ($lightpick-tooltip-triangle-size + 1) solid transparent;
|
||||
border-left: ($lightpick-tooltip-triangle-size + 1) solid transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: -$lightpick-tooltip-triangle-size;
|
||||
left: calc(50% - #{$lightpick-tooltip-triangle-size});
|
||||
border-top: $lightpick-tooltip-triangle-size solid
|
||||
$lightpick-tooltip-background-color;
|
||||
border-right: $lightpick-tooltip-triangle-size solid transparent;
|
||||
border-left: $lightpick-tooltip-triangle-size solid transparent;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__reset-action,
|
||||
&__apply-action {
|
||||
border-radius: $lightpick-action-border-radius;
|
||||
font-size: $lightpick-action-font-size;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&__reset-action {
|
||||
color: $lightpick-action-reset-color;
|
||||
background-color: $lightpick-action-reset-background-color;
|
||||
}
|
||||
|
||||
&__apply-action {
|
||||
color: $lightpick-action-apply-color;
|
||||
background-color: $lightpick-action-apply-background-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
.card {
|
||||
position: relative;
|
||||
padding: 25px;
|
||||
background: $text-color-white;
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
&-category {
|
||||
padding: 5px 10px;
|
||||
background: $main-color;
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
color: $text-color-white;
|
||||
font-weight: 700;
|
||||
max-width: 115px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
&-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $text-color-grey;
|
||||
font-weight: 400;
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height - 5px;
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
stroke: $text-color-grey;
|
||||
width: 21px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
&-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
line-height: $h5-height;
|
||||
color: $text-color-grey;
|
||||
font-weight: 400;
|
||||
svg {
|
||||
margin: 0 5px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__link {
|
||||
color: $text-black;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
margin: 10px 0 0 0;
|
||||
display: block;
|
||||
height: 60px;
|
||||
//overflow: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&__box {
|
||||
padding: 30px 0;
|
||||
|
||||
&:last-child {
|
||||
border-top: 1px solid $text-color-grey;
|
||||
padding: 30px 0 0 0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding: 0 0 30px 0;
|
||||
}
|
||||
}
|
||||
&.other {
|
||||
padding: 30px;
|
||||
.card__header {
|
||||
&-category {
|
||||
background: $text-light-black;
|
||||
color: $text-color-white;
|
||||
}
|
||||
}
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
.newsSlider {
|
||||
&__outer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.p2 {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@include transformY;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: rgba($color: #000000, $alpha: 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
.n2 {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
@include transformY;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: rgba($color: #000000, $alpha: 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.newsSlider__item {
|
||||
position: relative;
|
||||
height: 320px;
|
||||
img {
|
||||
@include fullImage;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
background: rgb(0, 0, 0);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
&-content {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 30px;
|
||||
width: calc(100% - 60px);
|
||||
z-index: 2;
|
||||
height: calc(100% - 60px);
|
||||
display: flex;
|
||||
&-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 12px;
|
||||
background: $main-color;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
max-width: 145px;
|
||||
color: $text-color-white;
|
||||
margin-bottom: 10px;
|
||||
svg {
|
||||
margin: 0 4px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
fill: $text-color-white;
|
||||
}
|
||||
}
|
||||
&-link {
|
||||
color: $text-color-white;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-slider {
|
||||
margin: 0 -10px;
|
||||
}
|
||||
.slick-slide {
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
.partnerSlider {
|
||||
position: relative;
|
||||
|
||||
&__inner {
|
||||
}
|
||||
&__item {
|
||||
margin-right: 5px;
|
||||
padding: 30px;
|
||||
border-right: 5px;
|
||||
border: 1px solid #e6e6e6;
|
||||
position: relative;
|
||||
img {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.p1 {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@include transformY;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: rgba($color: #000000, $alpha: 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
.n1 {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
right: 5px;
|
||||
@include transformY;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: rgba($color: #000000, $alpha: 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,830 @@
|
|||
@include xxlg-xxxlg {
|
||||
.auto__container {
|
||||
max-width: 1240px;
|
||||
}
|
||||
.swiper {
|
||||
&-slide {
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include xlg-xxlg {
|
||||
.swiper-slide-content-link {
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
height: 50px;
|
||||
}
|
||||
.newsSlider {
|
||||
&__item {
|
||||
height: 280px;
|
||||
}
|
||||
}
|
||||
.main__banner {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.swiper {
|
||||
&-slide {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
.newsSlider .newsSlider__item {
|
||||
height: 180px;
|
||||
&-content {
|
||||
&-date {
|
||||
max-width: 120px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__slogan {
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
}
|
||||
.auto__container {
|
||||
max-width: 1040px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
.banner {
|
||||
margin: 40px 0;
|
||||
}
|
||||
.slider {
|
||||
height: 450px;
|
||||
&__item {
|
||||
height: 450px;
|
||||
}
|
||||
&__nav {
|
||||
a {
|
||||
height: 33.3%;
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.event {
|
||||
margin: 40px 0 70px;
|
||||
&__header {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&__body {
|
||||
&-row {
|
||||
margin: 0 -10px;
|
||||
}
|
||||
&-image {
|
||||
margin: 0 10px;
|
||||
width: calc(50% - 20px);
|
||||
a.progressive {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
&-card {
|
||||
top: 150px;
|
||||
left: 10px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
&-column {
|
||||
margin: 0 10px;
|
||||
width: calc(50% - 30px);
|
||||
padding: 0 15px;
|
||||
.card {
|
||||
padding: 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
&__body {
|
||||
&-header {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&-column {
|
||||
a.progressive {
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
&-card {
|
||||
margin: -50px 15px 0 15px;
|
||||
}
|
||||
}
|
||||
&__sidebar {
|
||||
&-title {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
a.progressive {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&-tag {
|
||||
margin-bottom: 40px;
|
||||
&-link {
|
||||
padding: 4px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card {
|
||||
padding: 15px;
|
||||
}
|
||||
.partner {
|
||||
&__title {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
&__row {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&__title {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&__content {
|
||||
padding: 15px 0 15px 15px;
|
||||
width: calc(60% - 15px);
|
||||
&-header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
&-body {
|
||||
&-para {
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
a.progressive {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
.form {
|
||||
&__title {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&__input {
|
||||
label {
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.news {
|
||||
&__inner {
|
||||
padding: 40px 0;
|
||||
}
|
||||
&__image {
|
||||
margin: 20px 0;
|
||||
}
|
||||
&__body {
|
||||
&-row {
|
||||
&-image {
|
||||
margin: 0 10px;
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include lg-xlg {
|
||||
.newsSlider {
|
||||
&__item {
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
.swiper-container {
|
||||
.slick-list {
|
||||
padding: 0 20% 0 0;
|
||||
}
|
||||
}
|
||||
.partner__title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.swiper-slide {
|
||||
&-content {
|
||||
padding: 15px;
|
||||
width: calc(100% - 30px);
|
||||
&-category {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
&-link {
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
height: 52px;
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slider {
|
||||
&__nav {
|
||||
display: none;
|
||||
}
|
||||
&__inner {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
&Modal {
|
||||
display: block;
|
||||
@include transition;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateY(-100%);
|
||||
-webkit-transform: translateY(-100%);
|
||||
-moz-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
-o-transform: translateY(-100%);
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&__inner {
|
||||
padding: 25px;
|
||||
}
|
||||
&.active {
|
||||
transform: translateY(0);
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
&Input {
|
||||
position: relative;
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
input {
|
||||
width: calc(100% - 60px);
|
||||
height: 50px;
|
||||
padding: 0 40px 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
color: $text-black;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #242424;
|
||||
}
|
||||
&__btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
background: none;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: #242424;
|
||||
}
|
||||
}
|
||||
}
|
||||
&Logo {
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
margin: 30px auto;
|
||||
}
|
||||
&Close {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: #b4b4b4;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
border-bottom: 4px solid #242424;
|
||||
&__slogan {
|
||||
display: none;
|
||||
}
|
||||
.mobileSearch {
|
||||
display: block;
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: #b4b4b4;
|
||||
}
|
||||
}
|
||||
&__search {
|
||||
display: none;
|
||||
}
|
||||
.hamBtn {
|
||||
display: block;
|
||||
width: 35px;
|
||||
background: none;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
border-radius: 10px;
|
||||
background: $text-light-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
.subheader__inner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
background: rgba($color: #000000, $alpha: 0.5);
|
||||
z-index: 1000;
|
||||
@include transition;
|
||||
.close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 30px;
|
||||
display: block;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: calc(100% - 50px);
|
||||
overflow-y: scroll;
|
||||
background: $text-light-black;
|
||||
&__inner {
|
||||
flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
&-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
padding: 20px;
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
width: calc(100% - 40px);
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
.dropDown {
|
||||
margin-top: 20px;
|
||||
position: unset;
|
||||
width: unset;
|
||||
background: unset;
|
||||
background: #b4b4b4;
|
||||
&__link {
|
||||
color: $text-color-white;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
&:hover {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.language {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
padding: 15px 0;
|
||||
justify-content: center;
|
||||
background: $color-grey;
|
||||
}
|
||||
&.showMenu {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.event {
|
||||
&__body {
|
||||
&-image {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
&-column {
|
||||
width: calc(50% - 30px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
margin-top: 40px;
|
||||
&__sidebar {
|
||||
display: none;
|
||||
}
|
||||
&__content {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
&__body {
|
||||
&-card {
|
||||
margin: -50px 0 0 0;
|
||||
}
|
||||
&-column {
|
||||
a.progressive {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
&__inner {
|
||||
flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
&__social {
|
||||
margin-top: 20px;
|
||||
}
|
||||
&__copyright {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.card.other {
|
||||
padding: 15px;
|
||||
}
|
||||
.mr-top-bot {
|
||||
margin: 40px 0;
|
||||
}
|
||||
.about {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.news {
|
||||
&__sidebar {
|
||||
display: none;
|
||||
}
|
||||
&__content {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.terms {
|
||||
padding: 40px 0;
|
||||
&__title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&__para {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include sm-md {
|
||||
.newsSlider__outer {
|
||||
display: none;
|
||||
}
|
||||
.swiper-container {
|
||||
.slick-list {
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
.header__logo {
|
||||
width: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.marquee {
|
||||
display: none;
|
||||
}
|
||||
.slider {
|
||||
height: 350px;
|
||||
&__item {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
.event {
|
||||
&__body {
|
||||
&-row {
|
||||
margin: 0;
|
||||
flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
border: 1px solid #dcdcdc;
|
||||
}
|
||||
&-image {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
a.progressive {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
&-column {
|
||||
width: calc(100% - 30px);
|
||||
margin: 0;
|
||||
padding: 0 15px;
|
||||
border: none;
|
||||
.card {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-card {
|
||||
position: unset;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
&__body {
|
||||
&-row {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
.banner__mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&-column {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
a.progressive {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__banner {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
.heading {
|
||||
&__row {
|
||||
margin-bottom: 20px;
|
||||
flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
}
|
||||
&__image {
|
||||
width: 100%;
|
||||
}
|
||||
&__content {
|
||||
padding: 20px 0;
|
||||
width: 100%;
|
||||
&-body {
|
||||
&-para {
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
a.progressive {
|
||||
height: auto;
|
||||
img {
|
||||
height: unset;
|
||||
width: 100%;
|
||||
object-fit: unset;
|
||||
-o-object-fit: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form {
|
||||
&__row {
|
||||
flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
}
|
||||
&__input {
|
||||
margin-bottom: 20px;
|
||||
&:first-child {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
&:last-child {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
label {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
&__btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
&__inner.contact {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.news {
|
||||
&__body {
|
||||
&-row {
|
||||
margin: 0;
|
||||
flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
&-image {
|
||||
margin: 15px 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.newsSlider {
|
||||
.newsSlider__item {
|
||||
img {
|
||||
height: 250px;
|
||||
}
|
||||
&-content {
|
||||
position: unset;
|
||||
padding: 10px;
|
||||
border: 1px solid #dfdfdf;
|
||||
width: calc(100% - 20px);
|
||||
&-link {
|
||||
color: $text-light-black;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
height: 48px;
|
||||
}
|
||||
&-date {
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include xsm-sm {
|
||||
.swiper-slide-content-category {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 15px;
|
||||
}
|
||||
.auto__container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.slider {
|
||||
height: 300px;
|
||||
&__item {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
.partnerSlider {
|
||||
overflow: hidden;
|
||||
&__item {
|
||||
margin-right: 0;
|
||||
padding: 5px;
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
&__social {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
&-link {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.subheader {
|
||||
z-index: 12;
|
||||
&__inner {
|
||||
.close {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
.language {
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
.swiper-slide {
|
||||
height: 300px;
|
||||
}
|
||||
.newsSlider__outer {
|
||||
display: none;
|
||||
}
|
||||
.main {
|
||||
&__body {
|
||||
&-card {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popUp {
|
||||
display: flex;
|
||||
transform: translateY(100%);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #f7f7f7;
|
||||
z-index: 11;
|
||||
animation: popUp 0.2s linear;
|
||||
border-radius: 20px 20px 0 0;
|
||||
padding: 40px 20px;
|
||||
width: calc(100% - 40px);
|
||||
@include transition;
|
||||
&__inner {
|
||||
width: 100%;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&-logo {
|
||||
width: 75px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&-close {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-body {
|
||||
margin: 15px 0;
|
||||
&-subtitle {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
&-footer {
|
||||
&-btn {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
border-radius: 15px;
|
||||
background: $main-color;
|
||||
display: flex;
|
||||
}
|
||||
&-close {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
color: $main-color;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
@keyframes popUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
.animaSlider {
|
||||
height: 560px;
|
||||
&__outer {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
&__item {
|
||||
height: 560px;
|
||||
padding: 5px;
|
||||
&-image {
|
||||
height: 100%;
|
||||
width: 66.6%;
|
||||
-moz-transition: 0.4s linear;
|
||||
transition: 0.4s linear;
|
||||
img {
|
||||
@include fullImage;
|
||||
}
|
||||
}
|
||||
&.slick-slide {
|
||||
width: 66.6%;
|
||||
}
|
||||
|
||||
&-category {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
bottom: 30px;
|
||||
background: $main-color;
|
||||
color: $text-color-white;
|
||||
font-weight: 400;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
&.slick-active {
|
||||
.animaSlider__item-image {
|
||||
width: 100%;
|
||||
img {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-list {
|
||||
padding: 0 33.3% 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
.subheader {
|
||||
background: $text-light-black;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav {
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-link {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-white;
|
||||
margin-right: 40px;
|
||||
padding: 15px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background: $main-color;
|
||||
content: "";
|
||||
@include transition;
|
||||
}
|
||||
&:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
&.active::before {
|
||||
width: 100%;
|
||||
}
|
||||
.dropDown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
max-height: 0;
|
||||
overflow: auto;
|
||||
z-index: 2;
|
||||
background: $text-color-white;
|
||||
&__link {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-light-black;
|
||||
@include transition;
|
||||
&:hover {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .dropDown {
|
||||
max-height: 2000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.language {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&__link {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.p3 {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@include transformY;
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
background: rgba($color: #000000, $alpha: 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
.n3 {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
@include transformY;
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
background: rgba($color: #000000, $alpha: 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.slick-list {
|
||||
padding: 0 33.3% 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
height: 520px;
|
||||
/* Center slide t ext vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
@include transition;
|
||||
&-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: 0% 50%;
|
||||
position: relative;
|
||||
picture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
@include fullImage;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
background: rgb(0, 0, 0);
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 0.022846638655462215) 100%
|
||||
);
|
||||
padding: 50px 40px;
|
||||
|
||||
&-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
color: $text-color-white;
|
||||
margin-bottom: 10px;
|
||||
svg {
|
||||
margin: 0 4px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
fill: $text-color-white;
|
||||
}
|
||||
}
|
||||
&-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-link {
|
||||
color: $text-color-white;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 75%;
|
||||
}
|
||||
&-category {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 700;
|
||||
color: $text-color-white;
|
||||
padding: 8px 16px;
|
||||
background: $main-color;
|
||||
}
|
||||
}
|
||||
&.slick-active .swiper-slide-content {
|
||||
display: block;
|
||||
animation: myAnim 1s ease 0s 1 normal forwards;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
.copy {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.swiper-slide img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
@keyframes myAnim {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(250px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
.about {
|
||||
padding: 80px 0;
|
||||
&__title {
|
||||
font-size: $h2-size;
|
||||
line-height: $h2-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
}
|
||||
&__para {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height + 14px;
|
||||
font-weight: 400;
|
||||
color: $text-light-black;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
.form {
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
&__input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
label {
|
||||
display: block;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
input {
|
||||
width: calc(100% - 40px);
|
||||
padding: 0 20px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c9c9c9;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-size;
|
||||
color: $text-light-black;
|
||||
}
|
||||
&:last-child {
|
||||
width: calc(50% - 20px);
|
||||
margin-left: 20px;
|
||||
}
|
||||
&:first-child {
|
||||
width: calc(50% - 20px);
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
&__input-bg {
|
||||
width: 100%;
|
||||
label {
|
||||
display: block;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
input {
|
||||
width: calc(100% - 40px);
|
||||
padding: 0 20px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c9c9c9;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-size;
|
||||
color: $text-light-black;
|
||||
}
|
||||
}
|
||||
&__textarea {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
label {
|
||||
display: block;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
textarea {
|
||||
width: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #c9c9c9;
|
||||
}
|
||||
}
|
||||
&__btn {
|
||||
width: 250px;
|
||||
background: $main-color;
|
||||
text-align: center;
|
||||
color: $text-color-white;
|
||||
font-weight: 700;
|
||||
padding: 14px;
|
||||
border-radius: 5px;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
&__inner.contact {
|
||||
padding: 80px 0 160px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
.heading {
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&__image {
|
||||
width: 40%;
|
||||
}
|
||||
a.progressive {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
height: 320px;
|
||||
&:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
& img {
|
||||
@include fullImage;
|
||||
}
|
||||
& img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
& img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
width: calc(60% - 30px);
|
||||
height: calc(100% - 60px);
|
||||
padding: 30px 0 30px 30px;
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
&-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $text-color-grey;
|
||||
font-weight: 400;
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height - 5px;
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
stroke: $text-color-grey;
|
||||
width: 21px;
|
||||
}
|
||||
}
|
||||
&-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
color: $text-color-white;
|
||||
background: $text-light-black;
|
||||
font-weight: 400;
|
||||
padding: 5px 15px;
|
||||
svg {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-body {
|
||||
&-link {
|
||||
color: $text-black;
|
||||
font-weight: 700;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
margin: 10px 0 0 0;
|
||||
display: block;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
&-para {
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
font-weight: 400;
|
||||
color: $text-light-black;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-page {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $text-light-black;
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: $text-color-white;
|
||||
}
|
||||
}
|
||||
&-input {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
margin: 0 10px;
|
||||
|
||||
input {
|
||||
text-align: center;
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
background: #e6e6e6;
|
||||
font-weight: 400;
|
||||
color: $text-light-black;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
color: $text-light-black;
|
||||
font-weight: 400;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.address {
|
||||
&__inner {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
color: $text-light-black;
|
||||
font-weight: 400;
|
||||
margin-bottom: 25px;
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,394 @@
|
|||
.marquee {
|
||||
&__outer {
|
||||
position: relative;
|
||||
}
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 50px;
|
||||
background: #00822c;
|
||||
&__item {
|
||||
&.slick-slide {
|
||||
padding: 0;
|
||||
}
|
||||
margin: 0 50px;
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
&__link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
background: #ee4037;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
font-size: 14px;
|
||||
color: $text-color-white;
|
||||
line-height: 16px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
&::before {
|
||||
clip-path: polygon(100% 46%, 0 0, 0 100%);
|
||||
background: #ee4037;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
width: 25px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
.hero {
|
||||
&__inner {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make it move */
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
}
|
||||
// banner start
|
||||
.banner {
|
||||
margin: 80px 0;
|
||||
&__inner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// banner end
|
||||
.rek__item {
|
||||
display: block;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// main start
|
||||
.main {
|
||||
margin-top: 30px;
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
&__content {
|
||||
width: calc(70% - 25px);
|
||||
margin-right: 25px;
|
||||
}
|
||||
&__body {
|
||||
&-row {
|
||||
margin: 0 -20px 50px -20px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&-column {
|
||||
width: calc(50% - 42px);
|
||||
margin: 0 20px;
|
||||
a.progressive {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
height: 300px;
|
||||
}
|
||||
a.progressive:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
a.progressive img {
|
||||
@include fullImage;
|
||||
}
|
||||
a.progressive img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
a.progressive img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
&.border {
|
||||
border: 1px solid #dcdcdc;
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
background: #e6e6e6;
|
||||
@include transform;
|
||||
z-index: -1;
|
||||
}
|
||||
&-title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
background: $text-color-white;
|
||||
}
|
||||
&-link {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-grey;
|
||||
background: $text-color-white;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-card {
|
||||
margin: -100px 30px 0 30px;
|
||||
border: 1px solid #dcdcdc;
|
||||
.card {
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
&__banner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 40px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&__sidebar {
|
||||
margin-left: 25px;
|
||||
width: calc(30% - 25px);
|
||||
&-adv {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&-title {
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 80px;
|
||||
color: $text-light-black;
|
||||
}
|
||||
.card {
|
||||
&.other {
|
||||
padding: 0 0 30px 0;
|
||||
}
|
||||
&__link {
|
||||
height: unset;
|
||||
text-overflow: unset;
|
||||
}
|
||||
}
|
||||
a.progressive {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
margin-bottom: 80px;
|
||||
&:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
& img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
& img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
}
|
||||
&-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: -30px -5px 80px -5px;
|
||||
&-link {
|
||||
padding: 8px 9px;
|
||||
border-right: 5px;
|
||||
background: #f7f7f6;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: $text-light-black;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// main end
|
||||
.banner__mobile {
|
||||
display: none;
|
||||
}
|
||||
// event start
|
||||
.event {
|
||||
margin: 50px 0 80px;
|
||||
&__header {
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
&-title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
background: $text-color-white;
|
||||
}
|
||||
&-link {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-grey;
|
||||
background: $text-color-white;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
background: #e6e6e6;
|
||||
@include transform;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
&__body {
|
||||
&-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
&-image {
|
||||
width: calc(50% - 40px);
|
||||
margin: 0 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
a.progressive {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
height: 330px;
|
||||
}
|
||||
a.progressive:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
a.progressive img {
|
||||
@include fullImage;
|
||||
}
|
||||
a.progressive img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
a.progressive img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
}
|
||||
&-card {
|
||||
position: absolute;
|
||||
top: 210px;
|
||||
left: 30px;
|
||||
width: calc(100% - 60px);
|
||||
border: 1px solid #dcdcdc;
|
||||
}
|
||||
&-column {
|
||||
width: calc(50% - 100px);
|
||||
margin: 0 20px;
|
||||
padding: 15px 30px;
|
||||
border: 1px solid #dcdcdc;
|
||||
.card {
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
&:nth-last-child(1) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// event end
|
||||
// partner start
|
||||
.partner {
|
||||
margin-bottom: 80px;
|
||||
&__title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
// partner end
|
||||
.popUp {
|
||||
display: none;
|
||||
}
|
||||
/* progressive image CSS */
|
||||
|
||||
@keyframes reveal {
|
||||
0% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
.news {
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 80px 0;
|
||||
}
|
||||
&__sidebar {
|
||||
margin-left: 25px;
|
||||
width: calc(30% - 25px);
|
||||
&-title {
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
color: $text-light-black;
|
||||
}
|
||||
.card {
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
&__link {
|
||||
height: unset;
|
||||
text-overflow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
width: calc(70% - 25px);
|
||||
margin-right: 25px;
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
color: $text-black;
|
||||
font-weight: 700;
|
||||
font-size: $h2-size;
|
||||
line-height: $h2-height;
|
||||
}
|
||||
&__date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
color: $text-color-grey;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
svg {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
&__image {
|
||||
width: 100%;
|
||||
margin: 25px 0;
|
||||
display: block;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
&__body {
|
||||
p {
|
||||
font-size: $p-size;
|
||||
line-height: $p-height;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
strong {
|
||||
a {
|
||||
color: #4285f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&-social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-link {
|
||||
margin-right: 20px;
|
||||
fill: $main-color;
|
||||
svg {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
.footer__social-link {
|
||||
fill: $main-color;
|
||||
}
|
||||
}
|
||||
&-name {
|
||||
font-size: $h2-size;
|
||||
line-height: $h2-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.terms {
|
||||
padding: 80px 0;
|
||||
&__title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-black;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&__para {
|
||||
font-size: $p-size;
|
||||
line-height: $p-height;
|
||||
font-weight: 400;
|
||||
color: $text-black;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,34 @@
|
|||
// 1-main components
|
||||
@import "components/1-main/mixin";
|
||||
@import "components/1-main/nulifier";
|
||||
@import "components/1-main/variables";
|
||||
// 2-layout components
|
||||
|
||||
@import "components/2-layout/header";
|
||||
@import "components/2-layout/footer";
|
||||
|
||||
@import "components/2-layout/subheader";
|
||||
@import "../slick/slick";
|
||||
@import "../slick/slick-theme";
|
||||
@import "components/2-layout/partnerSlider";
|
||||
@import "components/2-layout/newsCard";
|
||||
@import "components/2-layout/lightpick";
|
||||
@import "components/2-layout/newsSlider";
|
||||
@import "components/2-layout/swiper";
|
||||
|
||||
|
||||
|
||||
|
||||
// 3-page components
|
||||
@import "components/3-page/home";
|
||||
@import "components/3-page/heading";
|
||||
@import "components/3-page/about";
|
||||
@import "components/3-page/contact";
|
||||
@import "components/3-page/news";
|
||||
@import "components/3-page/terms";
|
||||
|
||||
|
||||
@import "components/2-layout/slider";
|
||||
|
||||
// responsive
|
||||
@import "components/2-layout/responsive";
|
||||
|
|
@ -0,0 +1,921 @@
|
|||
{
|
||||
"version": "7",
|
||||
"about": "This is a Prepros (https://prepros.io) configuration file. You can commit this file to a git repo to backup and sync project configurations.",
|
||||
"config": {
|
||||
"proxy": {
|
||||
"enable": false,
|
||||
"target": "",
|
||||
"useLocalAssets": false
|
||||
},
|
||||
"reload": {
|
||||
"enable": true,
|
||||
"delay": 0,
|
||||
"animate": true,
|
||||
"afterUpload": false
|
||||
},
|
||||
"sync": {
|
||||
"enable": false,
|
||||
"mouse": true,
|
||||
"keyboard": true,
|
||||
"form": true,
|
||||
"scroll": true
|
||||
},
|
||||
"watcher": {
|
||||
"enable": true,
|
||||
"maxFiles": 2000,
|
||||
"usePolling": false,
|
||||
"pollingInterval": 500,
|
||||
"extensions": [
|
||||
".html",
|
||||
".htm",
|
||||
".php"
|
||||
],
|
||||
"ignore": {
|
||||
"patterns": [
|
||||
".*",
|
||||
"wp-admin",
|
||||
"wp-includes",
|
||||
"node_modules",
|
||||
"Prepros Export",
|
||||
"bower_components"
|
||||
],
|
||||
"exceptions": []
|
||||
}
|
||||
},
|
||||
"exporter": {
|
||||
"ignore": {
|
||||
"patterns": [
|
||||
".*",
|
||||
"desktop.ini",
|
||||
"prepros.cfg",
|
||||
"node_modules",
|
||||
"Prepros Export",
|
||||
"prepros.config",
|
||||
"prepros-6.config",
|
||||
"*-original.jpg",
|
||||
"*-original.jpeg",
|
||||
"*-original.png",
|
||||
"*-original.svg",
|
||||
"*.scss",
|
||||
"*.sass",
|
||||
"*.less",
|
||||
"*.pug",
|
||||
"*.jade",
|
||||
"*.styl",
|
||||
"*.haml",
|
||||
"*.slim",
|
||||
"*.coffee",
|
||||
"*.kit",
|
||||
"*.turf",
|
||||
"*.ts"
|
||||
],
|
||||
"exceptions": []
|
||||
}
|
||||
},
|
||||
"uploader": {
|
||||
"remotePath": "",
|
||||
"timeout": 20000,
|
||||
"autoUpload": false,
|
||||
"reuseConnection": true,
|
||||
"connectionType": "ftp",
|
||||
"history": []
|
||||
},
|
||||
"packages": {
|
||||
"createPackageLock": true
|
||||
},
|
||||
"images": {
|
||||
"preserveOriginal": true
|
||||
},
|
||||
"tasks": {
|
||||
"autoprefixer": {
|
||||
"cascade": true,
|
||||
"add": true,
|
||||
"remove": true,
|
||||
"supports": true,
|
||||
"flexbox": true,
|
||||
"grid": "autoplace",
|
||||
"browsers": [
|
||||
"> 2%",
|
||||
"not dead"
|
||||
],
|
||||
"sourceMap": false
|
||||
},
|
||||
"babel": {
|
||||
"sourceMap": false,
|
||||
"presets": {
|
||||
"@babel/preset-env": {
|
||||
"enable": true,
|
||||
"options": {
|
||||
"targets": [
|
||||
"> 2%",
|
||||
"not dead"
|
||||
],
|
||||
"preserveImports": false,
|
||||
"polyfills": false
|
||||
}
|
||||
},
|
||||
"@babel/preset-react": true,
|
||||
"@babel/preset-flow": false
|
||||
},
|
||||
"plugins": {
|
||||
"@babel/plugin-proposal-class-static-block": false,
|
||||
"@babel/plugin-proposal-class-properties": false,
|
||||
"@babel/plugin-proposal-decorators": {
|
||||
"enable": false,
|
||||
"options": {
|
||||
"decoratorsBeforeExport": true
|
||||
}
|
||||
},
|
||||
"@babel/plugin-proposal-export-namespace-from": false,
|
||||
"@babel/plugin-proposal-function-sent": false,
|
||||
"@babel/plugin-proposal-logical-assignment-operators": false,
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": false,
|
||||
"@babel/plugin-proposal-numeric-separator": false,
|
||||
"@babel/plugin-proposal-optional-chaining": false,
|
||||
"@babel/plugin-proposal-private-methods": false,
|
||||
"@babel/plugin-proposal-throw-expressions": false
|
||||
},
|
||||
"customPresets": [],
|
||||
"customPlugins": []
|
||||
},
|
||||
"bundle-js": {
|
||||
"sourceMap": false,
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"bower_components"
|
||||
],
|
||||
"devMode": true,
|
||||
"globals": [],
|
||||
"externals": [],
|
||||
"babel": {
|
||||
"enable": true,
|
||||
"options": {
|
||||
"sourceMap": false,
|
||||
"presets": {
|
||||
"@babel/preset-env": {
|
||||
"enable": true,
|
||||
"options": {
|
||||
"targets": [
|
||||
"> 2%",
|
||||
"not dead"
|
||||
],
|
||||
"preserveImports": false,
|
||||
"polyfills": false
|
||||
}
|
||||
},
|
||||
"@babel/preset-react": true,
|
||||
"@babel/preset-flow": false
|
||||
},
|
||||
"plugins": {
|
||||
"@babel/plugin-proposal-class-static-block": false,
|
||||
"@babel/plugin-proposal-class-properties": false,
|
||||
"@babel/plugin-proposal-decorators": {
|
||||
"enable": false,
|
||||
"options": {
|
||||
"decoratorsBeforeExport": true
|
||||
}
|
||||
},
|
||||
"@babel/plugin-proposal-export-namespace-from": false,
|
||||
"@babel/plugin-proposal-function-sent": false,
|
||||
"@babel/plugin-proposal-logical-assignment-operators": false,
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": false,
|
||||
"@babel/plugin-proposal-numeric-separator": false,
|
||||
"@babel/plugin-proposal-optional-chaining": false,
|
||||
"@babel/plugin-proposal-private-methods": false,
|
||||
"@babel/plugin-proposal-throw-expressions": false
|
||||
},
|
||||
"customPresets": [],
|
||||
"customPlugins": []
|
||||
}
|
||||
},
|
||||
"css": {
|
||||
"enable": true
|
||||
},
|
||||
"fonts": {
|
||||
"enable": true
|
||||
}
|
||||
},
|
||||
"coffeescript": {
|
||||
"header": false,
|
||||
"bare": false,
|
||||
"sourceMap": false
|
||||
},
|
||||
"command": {
|
||||
"command": "",
|
||||
"rootDir": ""
|
||||
},
|
||||
"concat-js": {
|
||||
"sourceMap": false,
|
||||
"rootDir": ""
|
||||
},
|
||||
"copy": {
|
||||
"sourceMap": false
|
||||
},
|
||||
"dart-sass": {
|
||||
"indentType": "space",
|
||||
"indentWidth": 2,
|
||||
"linefeed": "lf",
|
||||
"sourceMap": false,
|
||||
"allowWildcardImports": false
|
||||
},
|
||||
"haml": {
|
||||
"doubleQuoteAttributes": true
|
||||
},
|
||||
"jpg": {
|
||||
"quality": 90
|
||||
},
|
||||
"less": {
|
||||
"javascriptEnabled": false,
|
||||
"strictImports": false,
|
||||
"insecure": false,
|
||||
"math": "always",
|
||||
"strictUnits": false,
|
||||
"dumpLineNumbers": false,
|
||||
"sourceMap": false
|
||||
},
|
||||
"markdown": {
|
||||
"githubFlavored": true,
|
||||
"wrapWithHtml": false
|
||||
},
|
||||
"minify-css": {
|
||||
"sourceMap": false
|
||||
},
|
||||
"minify-html": {
|
||||
"caseSensitive": false,
|
||||
"collapseBooleanAttributes": true,
|
||||
"collapseInlineTagWhitespace": false,
|
||||
"collapseWhitespace": true,
|
||||
"conservativeCollapse": false,
|
||||
"decodeEntities": false,
|
||||
"html5": true,
|
||||
"includeAutoGeneratedTags": true,
|
||||
"keepClosingSlash": false,
|
||||
"minifyCSS": true,
|
||||
"minifyJS": true,
|
||||
"preserveLineBreaks": false,
|
||||
"preventAttributesEscaping": false,
|
||||
"processConditionalComments": false,
|
||||
"removeAttributeQuotes": false,
|
||||
"removeComments": true,
|
||||
"removeEmptyAttributes": false,
|
||||
"removeEmptyElement": false,
|
||||
"removeOptionalTags": false,
|
||||
"removeRedundantAttributes": false,
|
||||
"removeScriptTypeAttributes": false,
|
||||
"removeStyleLinkTypeAttributes": false,
|
||||
"removeTagWhitespace": false,
|
||||
"sortAttributes": false,
|
||||
"sortClassName": false,
|
||||
"useShortDoctype": true
|
||||
},
|
||||
"minify-js": {
|
||||
"parse": {
|
||||
"bare_returns": false
|
||||
},
|
||||
"compress": {
|
||||
"arrows": true,
|
||||
"arguments": false,
|
||||
"booleans": true,
|
||||
"booleans_as_integers": false,
|
||||
"collapse_vars": true,
|
||||
"comparisons": true,
|
||||
"computed_props": true,
|
||||
"conditionals": true,
|
||||
"dead_code": true,
|
||||
"directives": true,
|
||||
"drop_console": false,
|
||||
"drop_debugger": true,
|
||||
"evaluate": true,
|
||||
"expression": false,
|
||||
"global_defs": [],
|
||||
"hoist_funs": false,
|
||||
"hoist_props": true,
|
||||
"hoist_vars": false,
|
||||
"if_return": true,
|
||||
"inline": 3,
|
||||
"join_vars": true,
|
||||
"keep_fargs": true,
|
||||
"keep_infinity": false,
|
||||
"loops": true,
|
||||
"negate_iife": true,
|
||||
"properties": true,
|
||||
"pure_funcs": [],
|
||||
"pure_getters": false,
|
||||
"reduce_vars": true,
|
||||
"sequences": true,
|
||||
"side_effects": true,
|
||||
"switches": true,
|
||||
"top_retain": [],
|
||||
"typeofs": true,
|
||||
"unsafe": false,
|
||||
"unsafe_arrows": false,
|
||||
"unsafe_comps": false,
|
||||
"unsafe_Function": false,
|
||||
"unsafe_math": false,
|
||||
"unsafe_proto": false,
|
||||
"unsafe_regexp": false,
|
||||
"unsafe_undefined": false,
|
||||
"unused": true,
|
||||
"reduce_funcs": true
|
||||
},
|
||||
"mangle": {
|
||||
"eval": false,
|
||||
"reserved": []
|
||||
},
|
||||
"output": {
|
||||
"ascii_only": false,
|
||||
"braces": false,
|
||||
"comments": "none",
|
||||
"inline_script": true,
|
||||
"keep_numbers": false,
|
||||
"keep_quoted_props": false,
|
||||
"preamble": null,
|
||||
"quote_keys": false,
|
||||
"quote_style": 0,
|
||||
"semicolons": true,
|
||||
"shebang": true,
|
||||
"webkit": false,
|
||||
"wrap_iife": false,
|
||||
"wrap_func_args": true
|
||||
},
|
||||
"sourceMap": false,
|
||||
"toplevel": false,
|
||||
"ie8": false,
|
||||
"keep_classnames": false,
|
||||
"keep_fnames": false,
|
||||
"safari10": false
|
||||
},
|
||||
"node-sass": {
|
||||
"indentType": "space",
|
||||
"indentWidth": 2,
|
||||
"linefeed": "lf",
|
||||
"outputStyle": "expanded",
|
||||
"precision": 10,
|
||||
"sourceMap": false,
|
||||
"sourceComments": false,
|
||||
"allowWildcardImports": false
|
||||
},
|
||||
"png": {
|
||||
"quality": 90
|
||||
},
|
||||
"postcss-import": {
|
||||
"ignoreKeywords": [],
|
||||
"sourceMap": false
|
||||
},
|
||||
"postcss-preset-env": {
|
||||
"stage": 2,
|
||||
"browsers": [
|
||||
"> 2%",
|
||||
"not dead"
|
||||
],
|
||||
"sourceMap": false
|
||||
},
|
||||
"pug": {
|
||||
"pretty": true
|
||||
},
|
||||
"slim": {
|
||||
"indent": "space",
|
||||
"indentSize": 2,
|
||||
"pretty": true
|
||||
},
|
||||
"stylus": {
|
||||
"useNib": true,
|
||||
"sourceMap": false,
|
||||
"linenos": false
|
||||
},
|
||||
"svg": {
|
||||
"cleanupAttrs": true,
|
||||
"removeDoctype": true,
|
||||
"removeXMLProcInst": true,
|
||||
"removeComments": true,
|
||||
"removeMetadata": true,
|
||||
"removeTitle": true,
|
||||
"removeDesc": true,
|
||||
"removeUselessDefs": true,
|
||||
"removeEditorsNSData": true,
|
||||
"removeEmptyAttrs": true,
|
||||
"removeHiddenElems": true,
|
||||
"removeEmptyText": true,
|
||||
"removeEmptyContainers": true,
|
||||
"removeViewBox": false,
|
||||
"cleanupEnableBackground": true,
|
||||
"convertStyleToAttrs": true,
|
||||
"convertColors": true,
|
||||
"convertPathData": true,
|
||||
"convertTransform": true,
|
||||
"removeUnknownsAndDefaults": true,
|
||||
"removeNonInheritableGroupAttrs": true,
|
||||
"removeUselessStrokeAndFill": true,
|
||||
"removeUnusedNS": true,
|
||||
"cleanupIDs": true,
|
||||
"cleanupNumericValues": true,
|
||||
"moveElemsAttrsToGroup": true,
|
||||
"moveGroupAttrsToElems": true,
|
||||
"collapseGroups": true,
|
||||
"removeRasterImages": false,
|
||||
"mergePaths": true,
|
||||
"convertShapeToPath": true,
|
||||
"sortAttrs": true,
|
||||
"removeDimensions": true
|
||||
},
|
||||
"turf": {
|
||||
"rootDir": ""
|
||||
},
|
||||
"typescript": {
|
||||
"allowJs": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"allowUmdGlobalAccess": false,
|
||||
"allowUnreachableCode": false,
|
||||
"allowUnusedLabels": false,
|
||||
"alwaysStrict": false,
|
||||
"charset": "utf8",
|
||||
"checkJs": false,
|
||||
"declaration": false,
|
||||
"disableSizeLimit": false,
|
||||
"downlevelIteration": false,
|
||||
"emitBOM": false,
|
||||
"emitDecoratorMetadata": false,
|
||||
"experimentalDecorators": false,
|
||||
"forceConsistentCasingInFileNames": false,
|
||||
"importHelpers": false,
|
||||
"jsx": "React",
|
||||
"keyofStringsOnly": false,
|
||||
"lib": [],
|
||||
"maxNodeModuleJsDepth": 0,
|
||||
"module": "ES2015",
|
||||
"moduleResolution": "NodeJs",
|
||||
"newLine": "LineFeed",
|
||||
"noFallthroughCasesInSwitch": false,
|
||||
"noImplicitAny": false,
|
||||
"noImplicitReturns": false,
|
||||
"noImplicitThis": false,
|
||||
"noStrictGenericChecks": false,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"noImplicitUseStrict": false,
|
||||
"noLib": false,
|
||||
"noResolve": false,
|
||||
"preserveConstEnums": false,
|
||||
"jsxFactory": "React.createElement",
|
||||
"removeComments": false,
|
||||
"skipLibCheck": false,
|
||||
"sourceMap": false,
|
||||
"strict": false,
|
||||
"strictFunctionTypes": false,
|
||||
"strictBindCallApply": false,
|
||||
"strictNullChecks": false,
|
||||
"strictPropertyInitialization": false,
|
||||
"suppressExcessPropertyErrors": false,
|
||||
"suppressImplicitAnyIndexErrors": false,
|
||||
"target": "ES3",
|
||||
"resolveJsonModule": false,
|
||||
"esModuleInterop": false,
|
||||
"useDefineForClassFields": false
|
||||
}
|
||||
},
|
||||
"fileTypes": {
|
||||
"sass": {
|
||||
"extensions": [
|
||||
".scss",
|
||||
".sass"
|
||||
],
|
||||
"autoCompile": true,
|
||||
"sourceMap": false,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "dart-sass",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "autoprefixer",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "minify-css",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".css",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "scss",
|
||||
"replaceWith": "css"
|
||||
},
|
||||
{
|
||||
"segment": "sass",
|
||||
"replaceWith": "css"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"less": {
|
||||
"extensions": [
|
||||
".less"
|
||||
],
|
||||
"autoCompile": true,
|
||||
"sourceMap": false,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "less",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "autoprefixer",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "minify-css",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".css",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "less",
|
||||
"replaceWith": "css"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"pug": {
|
||||
"extensions": [
|
||||
".pug",
|
||||
".jade"
|
||||
],
|
||||
"autoCompile": true,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "pug",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "minify-html",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".html",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "pug",
|
||||
"replaceWith": "html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"css": {
|
||||
"extensions": [
|
||||
".css"
|
||||
],
|
||||
"autoCompile": false,
|
||||
"sourceMap": false,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "copy",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "postcss-import",
|
||||
"enable": false
|
||||
},
|
||||
{
|
||||
"task": "postcss-preset-env",
|
||||
"enable": false
|
||||
},
|
||||
{
|
||||
"task": "autoprefixer",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "minify-css",
|
||||
"enable": true
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".css",
|
||||
"type": "SOURCE_RELATIVE",
|
||||
"relativePath": "",
|
||||
"suffix": "-dist",
|
||||
"alwaysSuffix": false
|
||||
}
|
||||
},
|
||||
"javascript": {
|
||||
"extensions": [
|
||||
".js",
|
||||
".jsx"
|
||||
],
|
||||
"autoCompile": false,
|
||||
"sourceMap": false,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "copy",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "concat-js",
|
||||
"enable": false
|
||||
},
|
||||
{
|
||||
"task": "babel",
|
||||
"enable": false
|
||||
},
|
||||
{
|
||||
"task": "bundle-js",
|
||||
"enable": false
|
||||
},
|
||||
{
|
||||
"task": "minify-js",
|
||||
"enable": true
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".js",
|
||||
"type": "SOURCE_RELATIVE",
|
||||
"relativePath": "",
|
||||
"suffix": "-dist",
|
||||
"alwaysSuffix": false
|
||||
}
|
||||
},
|
||||
"stylus": {
|
||||
"extensions": [
|
||||
".styl"
|
||||
],
|
||||
"autoCompile": true,
|
||||
"sourceMap": false,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "stylus",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "autoprefixer",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "minify-css",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".css",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "stylus",
|
||||
"replaceWith": "css"
|
||||
},
|
||||
{
|
||||
"segment": "styl",
|
||||
"replaceWith": "css"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"markdown": {
|
||||
"extensions": [
|
||||
".md",
|
||||
".markdown",
|
||||
".mkd"
|
||||
],
|
||||
"autoCompile": false,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "markdown",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "minify-html",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".html",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "markdown",
|
||||
"replaceWith": "html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"haml": {
|
||||
"extensions": [
|
||||
".haml"
|
||||
],
|
||||
"autoCompile": true,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "haml",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "minify-html",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".html",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "haml",
|
||||
"replaceWith": "html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"slim": {
|
||||
"extensions": [
|
||||
".slim"
|
||||
],
|
||||
"autoCompile": true,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "slim",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "minify-html",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".html",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "slim",
|
||||
"replaceWith": "html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"coffeescript": {
|
||||
"extensions": [
|
||||
".coffee"
|
||||
],
|
||||
"autoCompile": true,
|
||||
"sourceMap": false,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "coffeescript",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "babel",
|
||||
"enable": false
|
||||
},
|
||||
{
|
||||
"task": "bundle-js",
|
||||
"enable": false
|
||||
},
|
||||
{
|
||||
"task": "minify-js",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".js",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "coffee-script",
|
||||
"replaceWith": "js"
|
||||
},
|
||||
{
|
||||
"segment": "coffeescript",
|
||||
"replaceWith": "js"
|
||||
},
|
||||
{
|
||||
"segment": "coffee",
|
||||
"replaceWith": "js"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"turf": {
|
||||
"extensions": [
|
||||
".turf",
|
||||
".kit"
|
||||
],
|
||||
"autoCompile": true,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "turf",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "minify-html",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".html",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "turf",
|
||||
"replaceWith": "html"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"typescript": {
|
||||
"extensions": [
|
||||
".ts",
|
||||
".tsx"
|
||||
],
|
||||
"autoCompile": true,
|
||||
"sourceMap": false,
|
||||
"tasks": [
|
||||
{
|
||||
"task": "typescript",
|
||||
"enable": true
|
||||
},
|
||||
{
|
||||
"task": "babel",
|
||||
"enable": false
|
||||
},
|
||||
{
|
||||
"task": "bundle-js",
|
||||
"enable": false
|
||||
},
|
||||
{
|
||||
"task": "minify-js",
|
||||
"enable": false
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".js",
|
||||
"type": "REPLACE_SEGMENTS",
|
||||
"segments": [
|
||||
{
|
||||
"segment": "typescript",
|
||||
"replaceWith": "js"
|
||||
},
|
||||
{
|
||||
"segment": "ts",
|
||||
"replaceWith": "js"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"jpg": {
|
||||
"extensions": [
|
||||
".jpg",
|
||||
".jpeg"
|
||||
],
|
||||
"tasks": [
|
||||
{
|
||||
"task": "jpg",
|
||||
"enable": true
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".jpg",
|
||||
"type": "SOURCE_RELATIVE",
|
||||
"relativePath": ""
|
||||
}
|
||||
},
|
||||
"png": {
|
||||
"extensions": [
|
||||
".png"
|
||||
],
|
||||
"tasks": [
|
||||
{
|
||||
"task": "png",
|
||||
"enable": true
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".png",
|
||||
"type": "SOURCE_RELATIVE",
|
||||
"relativePath": ""
|
||||
}
|
||||
},
|
||||
"svg": {
|
||||
"extensions": [
|
||||
".svg"
|
||||
],
|
||||
"tasks": [
|
||||
{
|
||||
"task": "svg",
|
||||
"enable": true
|
||||
}
|
||||
],
|
||||
"output": {
|
||||
"extension": ".svg",
|
||||
"type": "SOURCE_RELATIVE",
|
||||
"relativePath": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": []
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.right_top-up {
|
||||
max-width: 42.3rem;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.right_top-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right_top-title-text {
|
||||
width: 17rem;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.right_top-line {
|
||||
border: 0.01rem solid rgba(0, 0, 0, 15%);
|
||||
max-width: 33%;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.right_top-content-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.right_top-content-sphere {
|
||||
text-align: center;
|
||||
padding: 0.6rem 0;
|
||||
color: #fff;
|
||||
background: #FD4C24;
|
||||
max-width: 11.7rem;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.right-top-content-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.date,
|
||||
.time {
|
||||
color: #a2a2a2;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.date {
|
||||
margin-right: 2.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.date::after {
|
||||
display: inline-block;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
content: "";
|
||||
border: none;
|
||||
background: #a2a2a2;
|
||||
transform: rotate(45deg) translateY(-50%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -23%;
|
||||
}
|
||||
|
||||
.right_top-content-bottom {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.right_top-content:last-child{
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.right_top-content-bottom-text {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.hr-line {
|
||||
width: 100%;
|
||||
border: 0.01rem solid rgba(0, 0, 0, 15%);
|
||||
}
|
||||
/* .hr-line:last-child{
|
||||
display: none; */
|
||||
}
|
||||
@media screen and (min-width: 1400px){
|
||||
.right_top-line{
|
||||
max-width: 47%;
|
||||
}
|
||||
}
|
||||
/* ========================================== */
|
||||
|
||||
|
||||
|
||||
|
||||
.right_top-title-text-2 {
|
||||
width: 9.4rem;
|
||||
}
|
||||
|
||||
.right_top-line-2 {
|
||||
max-width: 40%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.additional {
|
||||
text-decoration: none;
|
||||
color: rgba(0, 0, 0, 30%);
|
||||
font-size: 1.4rem;
|
||||
margin-left: 2.1rem;
|
||||
}
|
||||
|
||||
.right-top-content-date-2 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
|
@ -2,20 +2,31 @@
|
|||
transition: all 0.2s ease-in-out 0s;
|
||||
-moz-transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
|
||||
@mixin transition-bg {
|
||||
transition: background 0.2s ease-in-out 0s;
|
||||
-moz-transition: background 0.2s ease-in-out 0s;
|
||||
}
|
||||
|
||||
@mixin transition-border {
|
||||
transition: border 0.2s ease-in-out 0s;
|
||||
-moz-transition: border 0.2s ease-in-out 0s;
|
||||
}
|
||||
|
||||
@mixin fullImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
-o-object-fit: cover;
|
||||
}
|
||||
|
||||
@mixin ImgCon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
-o-object-fit: contain;
|
||||
}
|
||||
|
||||
@mixin transformY {
|
||||
transform: translateY(-50%);
|
||||
-moz-ransform: translateY(-50%);
|
||||
|
|
@ -23,6 +34,7 @@
|
|||
-ms-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@mixin transformX {
|
||||
transform: translateX(-50%);
|
||||
-moz-ransform: translateX(-50%);
|
||||
|
|
@ -30,6 +42,7 @@
|
|||
-ms-transform: translateX(-50%);
|
||||
-webkit-transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@mixin transform {
|
||||
transform: translate(-50%, -50%);
|
||||
-moz-ransform: translate(-50%, -50%);
|
||||
|
|
@ -37,6 +50,7 @@
|
|||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@mixin transformReset {
|
||||
transform: translate(0, 0);
|
||||
-moz-ransform: translate(0, 0);
|
||||
|
|
@ -44,6 +58,7 @@
|
|||
-ms-transform: translate(0, 0);
|
||||
-webkit-transform: translate(0, 0);
|
||||
}
|
||||
|
||||
@mixin rotate {
|
||||
transform: rotate(90deg);
|
||||
-webkit-transform: rotate(90deg);
|
||||
|
|
@ -51,6 +66,7 @@
|
|||
-ms-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
}
|
||||
|
||||
@mixin rotate180deg {
|
||||
transform: rotate(180deg);
|
||||
-webkit-transform: rotate(180deg);
|
||||
|
|
@ -58,6 +74,7 @@
|
|||
-ms-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@mixin rotate270deg {
|
||||
transform: rotate(270deg);
|
||||
-webkit-transform: rotate(270deg);
|
||||
|
|
@ -67,24 +84,43 @@
|
|||
}
|
||||
|
||||
@mixin xxsm-xsm {
|
||||
@media (max-width: 374px) { @content; }
|
||||
@media (max-width: 374px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xsm-sm {
|
||||
@media (max-width: 540px) { @content; }
|
||||
@media (max-width: 540px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sm-md {
|
||||
@media (max-width: 700px) { @content; }
|
||||
@media (max-width: 700px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin md-lg {
|
||||
@media (max-width: 768px) { @content; }
|
||||
@media (max-width: 768px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin lg-xlg {
|
||||
@media (max-width: 1024px) { @content; }
|
||||
@media (max-width: 1024px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xlg-xxlg {
|
||||
@media (max-width: 1400px) { @content; }
|
||||
@media (max-width: 1400px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin xxlg-xxxlg {
|
||||
@media (max-width: 1640px) { @content; }
|
||||
@media (max-width: 1640px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,20 +14,25 @@
|
|||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/***
|
||||
====================================================================
|
||||
Global Settings
|
||||
|
|
@ -44,11 +49,13 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
@ -61,42 +68,51 @@ h6 {
|
|||
background: none;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
.auto__container {
|
||||
position: relative;
|
||||
max-width: 1440px;
|
||||
padding: 0px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.mr-top-bot {
|
||||
margin: 80px 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,9 +4,11 @@
|
|||
align-items: stretch;
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
margin-left: 25px;
|
||||
width: calc(30% - 25px);
|
||||
|
||||
&-title {
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
|
|
@ -15,30 +17,36 @@
|
|||
margin-bottom: 20px;
|
||||
color: $text-light-black;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 30px 0;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
|
||||
&__link {
|
||||
height: unset;
|
||||
text-overflow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: calc(70% - 25px);
|
||||
margin-right: 25px;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $text-black;
|
||||
font-weight: 700;
|
||||
font-size: $h2-size;
|
||||
line-height: $h2-height;
|
||||
}
|
||||
|
||||
&__date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -47,36 +55,43 @@
|
|||
color: $text-color-grey;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
|
||||
svg {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
margin: 25px 0;
|
||||
display: block;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
p {
|
||||
font-size: $p-size;
|
||||
line-height: $p-height;
|
||||
margin-bottom: 20px;
|
||||
|
||||
img {
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
strong {
|
||||
a {
|
||||
color: #4285f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
|
|
@ -84,24 +99,30 @@
|
|||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&-social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-link {
|
||||
margin-right: 20px;
|
||||
fill: $main-color;
|
||||
|
||||
svg {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__social-link {
|
||||
fill: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: $h2-size;
|
||||
line-height: $h2-height;
|
||||
|
|
@ -110,3 +131,472 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 30px 0;
|
||||
|
||||
&_header {
|
||||
background: #242424;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px 25px;
|
||||
|
||||
&-title {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-add {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
border: 1px solid #fff;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&_group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&_client {
|
||||
margin-right: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
|
||||
img {
|
||||
@include ImgCon;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.signOut {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #FFFFFF;
|
||||
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
padding: 7px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&_item {
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-time {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #A2A2A2;
|
||||
}
|
||||
|
||||
.inner-comment {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&_user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: -15px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #DCDCDC;
|
||||
}
|
||||
|
||||
&-img {
|
||||
background: #F3F5F7;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
&_txt {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #A2A2A2;
|
||||
|
||||
margin: 15px 0 30px;
|
||||
}
|
||||
|
||||
&_reply {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: #A2A2A2;
|
||||
|
||||
border: 1px solid #A2A2A2;
|
||||
display: inline-block;
|
||||
padding: 7px 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
background: #242424;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.reply_form {
|
||||
margin-top: 25px;
|
||||
// display: none;
|
||||
position: relative;
|
||||
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
@include transition;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
textarea {
|
||||
width: calc(100% - 35px);
|
||||
padding: 15px;
|
||||
border: 1px solid #DCDCDC;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
resize: vertical;
|
||||
min-height: 110px;
|
||||
max-height: 200px;
|
||||
|
||||
&::placeholder {
|
||||
color: #A2A2A2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 -7px;
|
||||
|
||||
button[type=submit] {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #FFFFFF;
|
||||
background: #242424;
|
||||
width: calc(50% - 14px);
|
||||
margin: 0 7px;
|
||||
|
||||
text-align: center;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
padding: 12px 0;
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
background: #302c2c;
|
||||
}
|
||||
}
|
||||
|
||||
button[type=reset] {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #242424;
|
||||
background: #F3F5F7;
|
||||
width: calc(50% - 14px);
|
||||
margin: 0 7px;
|
||||
|
||||
text-align: center;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
padding: 12px 0;
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
background: #c8cbce;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.reg_modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
z-index: 50;
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@include transform;
|
||||
z-index: 60;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
max-width: 760px;
|
||||
width: calc(100% - 50px);
|
||||
padding: 50px 0;
|
||||
|
||||
.inner {
|
||||
max-width: 430px;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
&-txt {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #A2A2A2;
|
||||
margin: 12px 0 30px;
|
||||
}
|
||||
|
||||
&-input {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #242424;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #DCDCDC;
|
||||
padding: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
width: calc(100% - 32px);
|
||||
|
||||
&::placeholder {
|
||||
color: #A2A2A2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&-check {
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked~.check_label {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #242424;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@include transformY;
|
||||
left: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid #DCDCDC;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@include transformY;
|
||||
left: 1px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #242424;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.sign {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background: #242424;
|
||||
padding: 15px 0;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.google_sign {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #DCDCDC;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #242424;
|
||||
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
|
||||
span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
@include ImgCon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-signIn {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #A2A2A2;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
|
||||
|
||||
a {
|
||||
color: #242424;
|
||||
font-weight: 500;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1979,6 +1979,422 @@ li {
|
|||
color: #242424;
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 30px 0;
|
||||
}
|
||||
.comment_header {
|
||||
background: #242424;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 15px 25px;
|
||||
}
|
||||
.comment_header-title {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.comment_header-title span {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.comment_header-add {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
border: 1px solid #fff;
|
||||
padding: 8px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.comment_group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.comment_client {
|
||||
margin-right: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.comment_client span {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.comment_client span img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
-o-object-fit: contain;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.comment .signOut {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
padding: 7px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.comment_item {
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 1px solid #DCDCDC;
|
||||
}
|
||||
.comment_item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.comment_item-time {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #A2A2A2;
|
||||
}
|
||||
.comment_item .inner-comment {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.comment_user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.comment_user::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
right: -15px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #DCDCDC;
|
||||
}
|
||||
.comment_user-img {
|
||||
background: #F3F5F7;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
color: #242424;
|
||||
}
|
||||
.comment_user-name {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #000000;
|
||||
}
|
||||
.comment_txt {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #A2A2A2;
|
||||
margin: 15px 0 30px;
|
||||
}
|
||||
.comment_reply {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: #A2A2A2;
|
||||
border: 1px solid #A2A2A2;
|
||||
display: inline-block;
|
||||
padding: 7px 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
-moz-transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
.comment_reply:hover {
|
||||
background: #242424;
|
||||
color: #fff;
|
||||
}
|
||||
.comment .reply_form {
|
||||
margin-top: 25px;
|
||||
position: relative;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
-moz-transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
.comment .reply_form.active {
|
||||
display: block;
|
||||
}
|
||||
.comment .reply_form-input {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.comment .reply_form-input textarea {
|
||||
width: calc(100% - 35px);
|
||||
padding: 15px;
|
||||
border: 1px solid #DCDCDC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
resize: vertical;
|
||||
min-height: 110px;
|
||||
max-height: 200px;
|
||||
}
|
||||
.comment .reply_form-input textarea::placeholder {
|
||||
color: #A2A2A2;
|
||||
}
|
||||
.comment .reply_form-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 -7px;
|
||||
}
|
||||
.comment .reply_form-buttons button[type=submit] {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #FFFFFF;
|
||||
background: #242424;
|
||||
width: calc(50% - 14px);
|
||||
margin: 0 7px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
padding: 12px 0;
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
-moz-transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
.comment .reply_form-buttons button[type=submit]:hover {
|
||||
background: #302c2c;
|
||||
}
|
||||
.comment .reply_form-buttons button[type=reset] {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #242424;
|
||||
background: #F3F5F7;
|
||||
width: calc(50% - 14px);
|
||||
margin: 0 7px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
padding: 12px 0;
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
-moz-transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
.comment .reply_form-buttons button[type=reset]:hover {
|
||||
background: #c8cbce;
|
||||
}
|
||||
|
||||
.reg_modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 50;
|
||||
display: none;
|
||||
}
|
||||
.reg_modal.active {
|
||||
display: block;
|
||||
}
|
||||
.reg_modal-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
-moz-ransform: translate(-50%, -50%);
|
||||
-o-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
z-index: 60;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
max-width: 760px;
|
||||
width: calc(100% - 50px);
|
||||
padding: 50px 0;
|
||||
}
|
||||
.reg_modal-form .inner {
|
||||
max-width: 430px;
|
||||
width: calc(100% - 40px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.reg_modal-title {
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
color: #242424;
|
||||
}
|
||||
.reg_modal-txt {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #A2A2A2;
|
||||
margin: 12px 0 30px;
|
||||
}
|
||||
.reg_modal-input {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.reg_modal-input:nth-child(2) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.reg_modal-input label {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #242424;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.reg_modal-input input {
|
||||
border: 1px solid #DCDCDC;
|
||||
padding: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
.reg_modal-input input::placeholder {
|
||||
color: #A2A2A2;
|
||||
}
|
||||
.reg_modal-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.reg_modal-check input {
|
||||
display: none;
|
||||
}
|
||||
.reg_modal-check input:checked ~ .check_label::after {
|
||||
display: block;
|
||||
}
|
||||
.reg_modal-check label {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #242424;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
}
|
||||
.reg_modal-check label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
-moz-ransform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid #DCDCDC;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.reg_modal-check label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
-moz-ransform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
left: 1px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #242424;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
}
|
||||
.reg_modal .forgot {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #000000;
|
||||
}
|
||||
.reg_modal .sign {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background: #242424;
|
||||
padding: 15px 0;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.reg_modal .google_sign {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #DCDCDC;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #242424;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
background: transparent;
|
||||
}
|
||||
.reg_modal .google_sign span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.reg_modal .google_sign span img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
-o-object-fit: contain;
|
||||
}
|
||||
.reg_modal-signIn {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #A2A2A2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.reg_modal-signIn a {
|
||||
color: #242424;
|
||||
font-weight: 500;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.terms {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
|
@ -2817,4 +3233,86 @@ li {
|
|||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
.comment_header-title span {
|
||||
font-size: 18px;
|
||||
}
|
||||
.comment_group {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: unset;
|
||||
}
|
||||
.comment .signOut {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.comment_user::after {
|
||||
top: 14px;
|
||||
}
|
||||
.comment_user-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.comment_user-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
.comment_item-time {
|
||||
font-size: 12px;
|
||||
}
|
||||
.comment_txt {
|
||||
font-size: 14px;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
.reg_modal-form {
|
||||
padding: 30px 0;
|
||||
}
|
||||
.reg_modal-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.reg_modal-txt {
|
||||
font-size: 14px;
|
||||
margin: 5px 0 15px;
|
||||
}
|
||||
.reg_modal-input {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.reg_modal-input label {
|
||||
font-size: 14px;
|
||||
}
|
||||
.reg_modal-input input {
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.reg_modal-check label {
|
||||
padding-left: 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.reg_modal-check label::after, .reg_modal-check label::before {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.reg_modal .forgot {
|
||||
font-size: 12px;
|
||||
}
|
||||
.reg_modal .sign {
|
||||
font-size: 15px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.reg_modal .google_sign {
|
||||
font-size: 15px;
|
||||
}
|
||||
.reg_modal .google_sign span {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.reg_modal-signIn {
|
||||
font-size: 14px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.reg_modal-signIn a {
|
||||
margin-left: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -213,10 +213,10 @@
|
|||
},
|
||||
"dart-sass": {
|
||||
"indentType": "space",
|
||||
"allowWildcardImports": false,
|
||||
"indentWidth": 2,
|
||||
"linefeed": "lf",
|
||||
"sourceMap": false,
|
||||
"allowWildcardImports": false
|
||||
"sourceMap": false
|
||||
},
|
||||
"haml": {
|
||||
"doubleQuoteAttributes": true
|
||||
|
|
@ -301,6 +301,7 @@
|
|||
"properties": true,
|
||||
"pure_funcs": [],
|
||||
"pure_getters": false,
|
||||
"reduce_funcs": true,
|
||||
"reduce_vars": true,
|
||||
"sequences": true,
|
||||
"side_effects": true,
|
||||
|
|
@ -315,8 +316,7 @@
|
|||
"unsafe_proto": false,
|
||||
"unsafe_regexp": false,
|
||||
"unsafe_undefined": false,
|
||||
"unused": true,
|
||||
"reduce_funcs": true
|
||||
"unused": true
|
||||
},
|
||||
"mangle": {
|
||||
"eval": false,
|
||||
|
|
@ -347,13 +347,13 @@
|
|||
},
|
||||
"node-sass": {
|
||||
"indentType": "space",
|
||||
"allowWildcardImports": false,
|
||||
"indentWidth": 2,
|
||||
"linefeed": "lf",
|
||||
"outputStyle": "expanded",
|
||||
"precision": 10,
|
||||
"sourceMap": false,
|
||||
"sourceComments": false,
|
||||
"allowWildcardImports": false
|
||||
"sourceComments": false
|
||||
},
|
||||
"png": {
|
||||
"quality": 90
|
||||
|
|
|
|||
|
|
@ -17,13 +17,11 @@ body {
|
|||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.right_top-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right_top-title-text {
|
||||
width: 17rem;
|
||||
font-size: 2rem;
|
||||
|
|
@ -106,8 +104,8 @@ body {
|
|||
border: 0.01rem solid rgba(0, 0, 0, 15%);
|
||||
}
|
||||
/* .hr-line:last-child{
|
||||
display: none; */
|
||||
}
|
||||
display: none; } */
|
||||
|
||||
@media screen and (min-width: 1400px){
|
||||
.right_top-line{
|
||||
max-width: 47%;
|
||||
|
|
@ -137,3 +135,66 @@ body {
|
|||
.right-top-content-date-2 {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
.event__body-column .card {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
.card__link {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
margin: 5px 0 0 0;
|
||||
display: block;
|
||||
height: 49px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
padding: 21px 30px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.event__header {
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
.main {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.event {
|
||||
margin: 30px 0;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
.main__banner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.main__body-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 35px;
|
||||
position: relative;
|
||||
}
|
||||
.partner__title {
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
font-weight: 700;
|
||||
color: #242424;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.main__body-row {
|
||||
margin: 0px -20px 50px -20px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11 1C5.477 1 1 5.477 1 11C1 16.523 5.477 21 11 21C16.523 21 21 16.523 21 11C21 5.477 16.523 1 11 1Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.271 17.346C3.271 17.346 5.5 14.5 11 14.5C16.5 14.5 18.73 17.346 18.73 17.346M11 11C11.7956 11 12.5587 10.6839 13.1213 10.1213C13.6839 9.55871 14 8.79565 14 8C14 7.20435 13.6839 6.44129 13.1213 5.87868C12.5587 5.31607 11.7956 5 11 5C10.2043 5 9.44128 5.31607 8.87868 5.87868C8.31607 6.44129 8 7.20435 8 8C8 8.79565 8.31607 9.55871 8.87868 10.1213C9.44128 10.6839 10.2043 11 11 11Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 773 B |
|
|
@ -149,3 +149,4 @@ if (
|
|||
);
|
||||
// lazyload end
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,8 +16,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<!-- header start
|
||||
================================================-->
|
||||
<!-- header start ===============================-->
|
||||
<header class="header">
|
||||
<div class="auto__container">
|
||||
<div class="header__inner">
|
||||
|
|
@ -98,10 +97,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- header end
|
||||
================================================-->
|
||||
<!-- main start
|
||||
================================================ -->
|
||||
<!-- header end =================================-->
|
||||
|
||||
<!-- main start ================================= -->
|
||||
<section class="news">
|
||||
<div class="auto__container">
|
||||
<div class="news__inner">
|
||||
|
|
@ -262,6 +260,174 @@
|
|||
Нуры АМАНОВ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment">
|
||||
<div class="comment_header">
|
||||
<h2 class="comment_header-title">
|
||||
<span>
|
||||
22
|
||||
</span>
|
||||
Comments
|
||||
</h2>
|
||||
|
||||
<h4 class="comment_header-add">
|
||||
Add a comment
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="comment_header">
|
||||
<h2 class="comment_header-title">
|
||||
<span>
|
||||
22
|
||||
</span>
|
||||
Comments
|
||||
</h2>
|
||||
|
||||
<div class="comment_group">
|
||||
<div class="comment_client">
|
||||
<span>
|
||||
<img src="images/svg/user.svg" alt="user-icon">
|
||||
</span>
|
||||
Kakabay Ahyrberdyew
|
||||
</div>
|
||||
|
||||
<a href="#" class="signOut">
|
||||
Sign out
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment_item">
|
||||
<div class="comment_item-header">
|
||||
<div class="comment_user">
|
||||
<div class="comment_user-img">
|
||||
A
|
||||
</div>
|
||||
<h4 class="comment_user-name">
|
||||
Aman Amanow
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="comment_item-time">
|
||||
1h ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment_txt">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
|
||||
luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim
|
||||
praesent elementum facilisis leo, vel
|
||||
</div>
|
||||
|
||||
<div class="comment_reply">
|
||||
Reply
|
||||
</div>
|
||||
|
||||
<form action="#" class="reply_form">
|
||||
<div class="reply_form-input">
|
||||
<textarea placeholder="Add a comment ..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="reply_form-buttons">
|
||||
<button class="send" type="submit">
|
||||
Post
|
||||
</button>
|
||||
|
||||
<button class="cancel" type="reset">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="comment_item">
|
||||
<div class="comment_item-header">
|
||||
<div class="comment_user">
|
||||
<div class="comment_user-img">
|
||||
A
|
||||
</div>
|
||||
<h4 class="comment_user-name">
|
||||
Aman Amanow
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="comment_item-time">
|
||||
1h ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment_txt">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
|
||||
luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim
|
||||
praesent elementum facilisis leo, vel
|
||||
</div>
|
||||
|
||||
<div class="comment_reply">
|
||||
Reply
|
||||
</div>
|
||||
|
||||
<form action="#" class="reply_form">
|
||||
<div class="reply_form-input">
|
||||
<textarea placeholder="Add a comment ..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="reply_form-buttons">
|
||||
<button class="send" type="submit">
|
||||
Post
|
||||
</button>
|
||||
|
||||
<button class="cancel" type="reset">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="inner-comment">
|
||||
<div class="comment_item-header">
|
||||
<div class="comment_user">
|
||||
<div class="comment_user-img">
|
||||
A
|
||||
</div>
|
||||
<h4 class="comment_user-name">
|
||||
Aman Amanow
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div class="comment_item-time">
|
||||
1h ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comment_txt">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet
|
||||
luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non
|
||||
enim
|
||||
praesent elementum facilisis leo, vel
|
||||
</div>
|
||||
|
||||
<div class="comment_reply">
|
||||
Reply
|
||||
</div>
|
||||
|
||||
<form action="#" class="reply_form">
|
||||
<div class="reply_form-input">
|
||||
<textarea placeholder="Add a comment ..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="reply_form-buttons">
|
||||
<button class="send" type="submit">
|
||||
Post
|
||||
</button>
|
||||
|
||||
<button class="cancel" type="reset">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="news__sidebar">
|
||||
<div class="news__sidebar-title">
|
||||
|
|
@ -475,10 +641,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- main end
|
||||
================================================ -->
|
||||
<!-- footer start
|
||||
================================================ -->
|
||||
<!-- main end =================================== -->
|
||||
|
||||
<!-- footer start =============================== -->
|
||||
<footer class="footer">
|
||||
<div class="auto__container">
|
||||
<div class="footer__inner">
|
||||
|
|
@ -574,13 +739,118 @@
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- footer end
|
||||
================================================ -->
|
||||
<!-- footer end ================================= -->
|
||||
|
||||
<!-- Register modal ===================================== -->
|
||||
<div class="reg_modal">
|
||||
<form class="reg_modal-form">
|
||||
<div class="inner">
|
||||
<h1 class="reg_modal-title">
|
||||
Sign up to leave a comment
|
||||
</h1>
|
||||
|
||||
<p class="reg_modal-txt">
|
||||
Pelease enter your details
|
||||
</p>
|
||||
|
||||
<div class="reg_modal-input">
|
||||
<label for="mail">Email</label>
|
||||
<input type="text" id="mail" placeholder="Enter your email">
|
||||
</div>
|
||||
|
||||
<div class="reg_modal-input">
|
||||
<label for="pass">Password</label>
|
||||
<input type="password" id="pass" placeholder="••••••">
|
||||
</div>
|
||||
|
||||
<div class="reg_modal-row">
|
||||
<div class="reg_modal-check">
|
||||
<input type="checkbox" id="remember">
|
||||
<label for="remember" class="check_label">Remember me</label>
|
||||
</div>
|
||||
|
||||
<a href="#" class="forgot">
|
||||
Forgot password
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="sign">
|
||||
Sign up
|
||||
</button>
|
||||
|
||||
<button class="google_sign">
|
||||
<span>
|
||||
<img src="images/google.png" alt="google-icon">
|
||||
</span>
|
||||
|
||||
Sign up with google
|
||||
</button>
|
||||
|
||||
<p class="reg_modal-signIn">
|
||||
Already have an account? <a href="#">Sign in for free</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Register modal end ================================= -->
|
||||
|
||||
|
||||
<!-- javascript start
|
||||
============================================= -->
|
||||
<script src="js/menu.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<!-- javascript end
|
||||
============================================= -->
|
||||
|
||||
<script>
|
||||
// Accord ==============
|
||||
|
||||
let accordion = document.getElementsByClassName("comment_reply");
|
||||
|
||||
for (i = 0; i < accordion.length; i++) {
|
||||
accordion[i].addEventListener("click", function () {
|
||||
this.classList.toggle("active");
|
||||
let panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
panel.classList.remove("active")
|
||||
} else {
|
||||
panel.style.maxHeight = "1000px";
|
||||
panel.classList.add("active")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Accord end ==========
|
||||
|
||||
function sleep(time) {
|
||||
return new Promise((resolve) => setTimeout(resolve, time));
|
||||
}
|
||||
|
||||
|
||||
let add = document.querySelector(".comment_header-add")
|
||||
let reg_modal = document.querySelector(".reg_modal")
|
||||
|
||||
window.onclick = function (e) {
|
||||
|
||||
if (reg_modal != undefined) {
|
||||
if (reg_modal.classList.contains('active') && !e.target.closest('.reg_modal-form')) {
|
||||
reg_modal.classList.remove('active')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (add != undefined) {
|
||||
add.addEventListener('click', function () {
|
||||
sleep(2).then(() => {
|
||||
reg_modal.classList.add('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue