responsive layout with popup slider
This commit is contained in:
Oleksa
parent
9762b3ec59
commit
5251705af9
79 changed files with 3095 additions and 998 deletions
349
_scss/helpers/normalize.scss
vendored
Normal file
349
_scss/helpers/normalize.scss
vendored
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
// normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
67
_scss/helpers/typography.scss
Normal file
67
_scss/helpers/typography.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
//font-display: swap;
|
||||
|
||||
/* poppins-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local(''),
|
||||
url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
/* poppins-600 - latin */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url('../fonts/poppins-v15-latin-600.eot'); /* IE9 Compat Modes */
|
||||
src: local(''),
|
||||
url('../fonts/poppins-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/poppins-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/poppins-v15-latin-600.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/poppins-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/poppins-v15-latin-600.svg#Poppins') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
/* poppins-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/poppins-v15-latin-700.eot'); /* IE9 Compat Modes */
|
||||
src: local(''),
|
||||
url('../fonts/poppins-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/poppins-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/poppins-v15-latin-700.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/poppins-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/poppins-v15-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
/* prata-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Prata';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/prata-v13-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local(''),
|
||||
url('../fonts/prata-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/prata-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/prata-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/prata-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/prata-v13-latin-regular.svg#Prata') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
/* inter-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/inter-v3-latin-regular.eot'); /* IE9 Compat Modes */
|
||||
src: local(''),
|
||||
url('../fonts/inter-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/inter-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
||||
url('../fonts/inter-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
|
||||
url('../fonts/inter-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/inter-v3-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
133
_scss/helpers/utilities.scss
Normal file
133
_scss/helpers/utilities.scss
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
// General box-sizing
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
// Margin reset for texts
|
||||
h1, h2, p, ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// General Typography
|
||||
body {
|
||||
color: $dark-gray;
|
||||
font-family: $base-font-family;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
// General container
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 750px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 980px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// General button
|
||||
.btn-main {
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-color: $royal-blue;
|
||||
border: 1px solid $royal-blue;
|
||||
padding: 1.8em 3.4em;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.5;
|
||||
border-radius: 50rem;
|
||||
transition: all .3s ease;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
background-color: lighten($royal-blue, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Text utility classes
|
||||
.content-text {
|
||||
font-family: $text-font-family;
|
||||
font-size: 22px;
|
||||
line-height: 1.5;
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-black {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ls-40 {
|
||||
letter-spacing: .4px;
|
||||
}
|
||||
|
||||
|
||||
// Spacing utility classes
|
||||
.mb-2 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
|
||||
// Arrows classes
|
||||
[class*="icono"] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $white;
|
||||
box-sizing: border-box;
|
||||
&:after, &:before {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
[class*="icono-arrow"]{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-width: 4px 4px 0 0;
|
||||
border-style: solid;
|
||||
margin: 10px;
|
||||
&:before{
|
||||
right: 0;
|
||||
top: -3px;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
box-shadow: inset 0 0 0 32px;
|
||||
transform: rotate(-45deg);
|
||||
width: 23px;
|
||||
transform-origin: right top;
|
||||
}
|
||||
&[class*="-left"]{
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&[class*="-right"]{
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
14
_scss/helpers/variables.scss
Normal file
14
_scss/helpers/variables.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Base colors
|
||||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
$dark-gray: #242424;
|
||||
|
||||
// Brand colors
|
||||
$gold: #FFDF3F;
|
||||
$shade-gold: #EECF06;
|
||||
$royal-blue: #6166E9;
|
||||
|
||||
// Typography
|
||||
$base-font-family: 'Poppins', sans-serif !default;
|
||||
$text-font-family: 'Prata', serif;
|
||||
$footer-font-family: 'Inter', sans-serif;
|
||||
110
_scss/libs/micromodal.scss
Normal file
110
_scss/libs/micromodal.scss
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
// -------------------------
|
||||
// Modal Styles
|
||||
// -------------------------
|
||||
.modal__overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal__container {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
max-width: 1070px;
|
||||
max-height: 100vh;
|
||||
border-radius: 4px;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal__header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal__title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.25;
|
||||
color: $dark-gray;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal__close {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.modal__header .modal__close:before { content: "\2715"; font-size: 24px; }
|
||||
|
||||
.modal__content {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.5;
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**************************\
|
||||
Demo Animation Style
|
||||
\**************************/
|
||||
@keyframes mmfadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes mmfadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes mmslideIn {
|
||||
from { transform: translateY(15%); }
|
||||
to { transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes mmslideOut {
|
||||
from { transform: translateY(0); }
|
||||
to { transform: translateY(-10%); }
|
||||
}
|
||||
|
||||
.micromodal-slide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.micromodal-slide.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.micromodal-slide[aria-hidden="false"] .modal__overlay {
|
||||
animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.micromodal-slide[aria-hidden="false"] .modal__container {
|
||||
animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
|
||||
}
|
||||
|
||||
.micromodal-slide[aria-hidden="true"] .modal__overlay {
|
||||
animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
.micromodal-slide[aria-hidden="true"] .modal__container {
|
||||
animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
|
||||
}
|
||||
|
||||
.micromodal-slide .modal__container,
|
||||
.micromodal-slide .modal__overlay {
|
||||
will-change: transform;
|
||||
}
|
||||
211
_scss/pages/home.scss
Normal file
211
_scss/pages/home.scss
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
// -------------------------
|
||||
// Body Styles
|
||||
// -------------------------
|
||||
.main-area {
|
||||
background-color: $gold;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Header Styles
|
||||
// -------------------------
|
||||
.header-area {
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 40px;
|
||||
@media (max-width: 576px) {
|
||||
flex-direction: column;
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
.header-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-text {
|
||||
margin-left: 15px;
|
||||
p {
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-menu {
|
||||
@media (max-width: 576px) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
&-list {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
li {
|
||||
display: inline-block;
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: 45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Content Styles
|
||||
// -------------------------
|
||||
.content-area {
|
||||
&-wrapper {
|
||||
margin-top: 30px;
|
||||
.content-title {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
@media (max-width: 768px) {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
.content-text {
|
||||
br {
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-img {
|
||||
margin: 55px 0 45px;
|
||||
@media (max-width: 768px) {
|
||||
margin: 40px 0;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Footer Styles
|
||||
// -------------------------
|
||||
.footer-area {
|
||||
font-family: $footer-font-family;
|
||||
background-color: $shade-gold;
|
||||
padding: 35px 0;
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Modal Styles
|
||||
// -------------------------
|
||||
.modal__content {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
.header__logo {
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
@media (max-width: 768px) {
|
||||
max-width: 120px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header__text {
|
||||
margin: 0 30px;
|
||||
max-width: 430px;
|
||||
width: 100%;
|
||||
@media (max-width: 768px) {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.info__list {
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.header__btn {
|
||||
@media (min-width: 769px) {
|
||||
margin-left: auto;
|
||||
}
|
||||
.btn-main {
|
||||
@media (max-width: 992px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
&__slider {
|
||||
//to prevent slider jump
|
||||
@media (min-width: 1200px) {
|
||||
min-height: 586px;
|
||||
height: 100%;
|
||||
}
|
||||
.slider-item {
|
||||
margin: 0 10px;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
@media (max-width: 768px) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal__footer {
|
||||
p {
|
||||
font-size: 14px;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -------------------------
|
||||
// Slider Styles
|
||||
// -------------------------
|
||||
.slick-arrow {
|
||||
background: $royal-blue;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 34px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -35px;
|
||||
transition: all .3s ease;
|
||||
z-index: 1;
|
||||
&:hover {
|
||||
background-color: lighten($royal-blue, 5%);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: -25px;
|
||||
}
|
||||
}
|
||||
.slick-prev {
|
||||
left: 0;
|
||||
}
|
||||
.slick-next {
|
||||
right: 0;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue