New page
This commit is contained in:
Roman Pyrih
1
layout/style-css/ebook-8-rzeczy.css
Normal file
1
layout/style-css/ebook-8-rzeczy.css
Normal file
File diff suppressed because one or more lines are too long
1
layout/style-css/ebook-8-rzeczy.css.map
Normal file
1
layout/style-css/ebook-8-rzeczy.css.map
Normal file
File diff suppressed because one or more lines are too long
755
layout/style-scss/ebook-8-rzeczy.scss
Normal file
755
layout/style-scss/ebook-8-rzeczy.scss
Normal file
@@ -0,0 +1,755 @@
|
||||
@import '_variables';
|
||||
@import '_mixins';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova Bl';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-Black.eot');
|
||||
src: local('Proxima Nova Black'), local('ProximaNova-Black'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Black.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Black.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Black.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Black.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot');
|
||||
src: local('Proxima Nova Extrabold'), local('ProximaNova-Extrabld'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.ttf') format('truetype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot');
|
||||
src: local('Proxima Nova Semibold Italic'), local('ProximaNova-SemiboldIt'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff2')
|
||||
format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.ttf')
|
||||
format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot');
|
||||
src: local('Proxima Nova Thin'), local('ProximaNovaT-Thin'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.ttf') format('truetype');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-Light.eot');
|
||||
src: local('Proxima Nova Light'), local('ProximaNova-Light'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Light.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Light.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Light.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot');
|
||||
src: local('Proxima Nova Black Italic'), local('ProximaNova-BlackIt'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot');
|
||||
src: local('Proxima Nova Bold Italic'), local('ProximaNova-BoldIt'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot');
|
||||
src: local('Proxima Nova Thin Italic'), local('ProximaNova-ThinIt'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.ttf') format('truetype');
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot');
|
||||
src: local('Proxima Nova Bold'), local('ProximaNova-Bold'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot');
|
||||
src: local('Proxima Nova Regular Italic'), local('ProximaNova-RegularIt'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.ttf')
|
||||
format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot');
|
||||
src: local('Proxima Nova Extrabold Italic'), local('ProximaNova-ExtrabldIt'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff2')
|
||||
format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.ttf')
|
||||
format('truetype');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot');
|
||||
src: local('Proxima Nova Regular'), local('ProximaNova-Regular'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot');
|
||||
src: local('Proxima Nova Light Italic'), local('ProximaNova-LightIt'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-LightIt.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
src: url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot');
|
||||
src: local('Proxima Nova Semibold'), local('ProximaNova-Semibold'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff2') format('woff2'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff') format('woff'),
|
||||
url('/layout/fonts/ProximaNova/ProximaNova-Semibold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
$cGreen: #2bac25;
|
||||
$cYellow: #ffc400;
|
||||
|
||||
.main_content {
|
||||
// max-width: 1240px;
|
||||
// width: 90%;
|
||||
margin: auto;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
@media screen and (min-width: 1300px) {
|
||||
max-width: 1240px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: url('/layout/ebook/body-bg.jpg') no-repeat top right #fffbee;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
.content {
|
||||
@extend .main_content;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 60px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
|
||||
&:nth-child(2) {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
.btn {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
background: $cGreen;
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-bottom: 60px;
|
||||
|
||||
.content {
|
||||
@extend .main_content;
|
||||
display: grid;
|
||||
grid-template-columns: 7fr 5fr;
|
||||
|
||||
@include respond-below(sm) {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 50px;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
order: 1;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include respond-below(sm) {
|
||||
order: 2;
|
||||
}
|
||||
h2 {
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
background: $cYellow;
|
||||
border-radius: 12px;
|
||||
padding: 0 13px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 33px;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 42px;
|
||||
font-weight: 900;
|
||||
|
||||
@media (max-width: 991px) {
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $cYellow;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 18px;
|
||||
max-width: 620px;
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
background: $cGreen;
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.13);
|
||||
color: #000;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-01 {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px;
|
||||
background: $cBlack;
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
column-gap: 80px;
|
||||
|
||||
@include respond-below(md) {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 50px;
|
||||
}
|
||||
|
||||
.left {
|
||||
h2 {
|
||||
color: $cWhite;
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 40px;
|
||||
|
||||
span {
|
||||
color: $cYellow;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $cWhite;
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 18px;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
.right-data {
|
||||
position: relative;
|
||||
padding: 50px 40px 40px 40px;
|
||||
background: #fffbee;
|
||||
border-radius: 33px;
|
||||
|
||||
h2 {
|
||||
color: $cBlack;
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 33px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 30px;
|
||||
|
||||
span {
|
||||
color: $cYellow;
|
||||
}
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: -60px;
|
||||
}
|
||||
.star-2 {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-02 {
|
||||
padding-top: 140px;
|
||||
padding-bottom: 160px;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 50%;
|
||||
|
||||
@include respond-below(md) {
|
||||
width: 100%;
|
||||
}
|
||||
h2 {
|
||||
color: $cBlack;
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 50px;
|
||||
|
||||
span {
|
||||
color: $cYellow;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
|
||||
@include respond-below(sm) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tile {
|
||||
position: relative;
|
||||
padding: 30px 30px 30px 70px;
|
||||
background: $cWhite;
|
||||
border-radius: 12px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
&-1 {
|
||||
&::before {
|
||||
content: '💡';
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
&::before {
|
||||
content: '🛒';
|
||||
}
|
||||
}
|
||||
&-3 {
|
||||
&::before {
|
||||
content: '🧠';
|
||||
}
|
||||
}
|
||||
&-4 {
|
||||
&::before {
|
||||
content: '🛍';
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
z-index: -1;
|
||||
max-width: 550px;
|
||||
|
||||
@include respond-below(md) {
|
||||
opacity: 0.5;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-04 {
|
||||
margin-top: 130px;
|
||||
margin-bottom: 130px;
|
||||
padding-top: 40px;
|
||||
|
||||
.content {
|
||||
@extend .main_content;
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: $cBlack;
|
||||
width: fit-content;
|
||||
margin: 0 auto 65px auto;
|
||||
|
||||
@include respond-below(md) {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
u {
|
||||
position: relative;
|
||||
color: $cYellow;
|
||||
text-decoration: none;
|
||||
border-bottom: 5px solid $cBlack;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxes {
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@include respond-below(sm) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.mini-box {
|
||||
box-shadow: 0 24px 64px 0 rgba(204, 177, 41, 0.12);
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
|
||||
img {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
span.icon {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 30px;
|
||||
|
||||
position: relative;
|
||||
width: 74px;
|
||||
height: 74px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffcd2c;
|
||||
line-height: 1;
|
||||
border-radius: 12px;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -5px;
|
||||
background: rgba(#ffcd2c, 0.4);
|
||||
border-radius: 17px;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Proxima Nova';
|
||||
font-size: 18px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: $cVioletDarkBg;
|
||||
background-image: url('/upload/filemanager/images/footer-bg.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: $font-1;
|
||||
font-size: 17px;
|
||||
line-height: 31px;
|
||||
font-weight: 700;
|
||||
color: $cGrayText;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
font-family: $font-1;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 7px;
|
||||
color: #fff;
|
||||
font-family: $font-1;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.social-media {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
&.copyright {
|
||||
div[class^='col-'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
@include respond-below(xs) {
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn5 {
|
||||
margin-bottom: 0;
|
||||
|
||||
@include respond-below(xs) {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
span {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
55
templates_user/ebook-8-rzeczy-thanks.php
Normal file
55
templates_user/ebook-8-rzeczy-thanks.php
Normal file
@@ -0,0 +1,55 @@
|
||||
<header>
|
||||
<div class="content container">
|
||||
<div class="logo">
|
||||
<img src="/layout/ebook/logo.svg">
|
||||
</div>
|
||||
<div class="button">
|
||||
<a href="#formularz" class="btn">
|
||||
<img src="/layout/ebook/icon-download.svg">
|
||||
Pobierz e-booka bezpłatnie
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="box-04" id="formularz">
|
||||
<div class="content container">
|
||||
<div class="left">
|
||||
<h2><span>Dziękujemy za wypełnienie formularza.</span></h2>
|
||||
<p>Raport otrzymasz od nas mailem do 5 minut.</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="/upload/filemanager/Pages/Arvato/arvato-thanks-hero.png" alt="" style="border-radius: 20px; margin-bottom: 0;">
|
||||
</div>
|
||||
</div>
|
||||
<img src="/layout/checklista/star-big.svg" alt="">
|
||||
</div>
|
||||
<footer>
|
||||
<div class="content container">
|
||||
<div class="left">
|
||||
<div class="contact">
|
||||
<p><span>t:</span> <a href="tel://+48500253000">+48 500 253 000</a></p>
|
||||
<p><span>e:</span> <a href="mailto:kontakt@zaufane.pl">kontakt@zaufane.pl</a></p>
|
||||
</div>
|
||||
<div class="links">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Polityka prywatności</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="/layout/ebook/logo.svg">
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="footer-bottom">
|
||||
<div class="content container">
|
||||
<div class="left">
|
||||
Zaufane 2026
|
||||
</div>
|
||||
<div class="right ">
|
||||
Designed by Kreatywny Brand
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
133
templates_user/ebook-8-rzeczy.php
Normal file
133
templates_user/ebook-8-rzeczy.php
Normal file
@@ -0,0 +1,133 @@
|
||||
<header>
|
||||
<div class="content container">
|
||||
<div class="logo">
|
||||
<a href="/"><img src="/layout/ebook/logo.svg"></a>
|
||||
</div>
|
||||
<div class="button">
|
||||
<a href="#formularz" class="btn">
|
||||
<img src="/layout/ebook/icon-download.svg">
|
||||
pobierz ebook
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="hero">
|
||||
<div class="content container">
|
||||
<div class="left">
|
||||
<!-- <h2>DARMOWY E-BOOK</h2> -->
|
||||
<h1>Opinie to nie tylko gwiazdki - to gotówka na Twoim koncie. Dowiedz się, jak <span>zwiększyć sprzedaż</span> w sklepie internetowym <span>nawet o 100%</span> dzięki rekomendacjom.</h1>
|
||||
<p>W 2026 roku aż 97% internautów kupuje online, a opinie są dla nich ważniejsze niż cena czy czas dostawy. Pobierz darmowy ebook i zamień recenzje w zysk.</p>
|
||||
<!-- <div class="buttons">
|
||||
<a href="#formularz" class="btn">
|
||||
<img src="/layout/ebook/icon-download.svg">
|
||||
Pobieram checklistę bezpłatnie
|
||||
</a>
|
||||
<a href="#e-book" class="btn-default">
|
||||
<img src="/layout/ebook/icon-i.svg">
|
||||
Dlaczego warto?
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="/upload/filemanager/Pages/Ebook-8-rzeczy/img-1.png" alt="">
|
||||
<!-- <img src="/layout/checklista/hero-right.png"> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-01" id="formularz">
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<h2><span>Co znajdziesz</span> w środku?</h2>
|
||||
<p>📉 Dlaczego bez opinii przegrasz: Jak brak recenzji niszczy zaufanie i dlaczego 46% badanych uważa je za klucz do wiarygodności</p>
|
||||
<p>💰 Jak obliczyć wartość rekomendacji: Poznasz konkretny wzór matematyczny. Udowodnimy Ci, że 20 opinii na karcie produktu może zwiększyć przychód o 150%,.</p>
|
||||
<p>🚀 Google Product Reviews: Jak wykorzystać integrację z Google, aby zwiększyć sprzedaż o 100% i poprawić widoczność w wynikach wyszukiwania,.</p>
|
||||
<p>🔄 Customer Journey: Dlaczego opinie są potrzebne na każdym etapie ścieżki zakupowej klienta i jak zwiększają CTR reklam o 24%.</p>
|
||||
<p>✍️ User Generated Content (UGC): Jak darmowe treści tworzone przez klientów wpływają na SEO i pozycjonowanie Twojego sklepu (odpowiadają za 11% wpływu na ranking!),.</p>
|
||||
<p>🛠️ Nowe standardy 2026: Czym jest ankieta trójdzielna i jak oceniać osobno produkt, sprzedawcę i dostawę, by uniknąć niesprawiedliwych ocen,.</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
||||
<div class="right-data">
|
||||
<h2>Pobierz raport <span>za darmo!</span></h2>
|
||||
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
|
||||
<script>
|
||||
hbspt.forms.create({
|
||||
portalId: "7094950",
|
||||
formId: "019b55ca-a83e-41e5-9bcb-4d4675f6a434",
|
||||
region: "na1"
|
||||
});
|
||||
</script>
|
||||
<img src="/layout/checklista/star.svg" class="star-1" alt="">
|
||||
<img src="/layout/checklista/d-star.svg" class="star-2" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-02">
|
||||
<div class="container">
|
||||
<div class="content content-1">
|
||||
<h2><span>Dla kogo</span> jest ten ebook ?</h2>
|
||||
</div>
|
||||
<div class="tiles">
|
||||
<div class="tile tile-1">
|
||||
<p><strong>Właścicieli sklepów internetowych (e-commerce).</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="tile tile-2">
|
||||
<p><strong>Marketerów szukających sposobów na tańsze pozyskanie klienta.</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="tile tile-3">
|
||||
<p><strong>Osób odpowiedzialnych za Customer Experience (CX).</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="tile tile-4">
|
||||
<p><strong>Każdego, kto chce zrozumieć, dlaczego opinie transakcyjne są walutą zaufania w 2026 roku.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/layout/checklista/box-2-bg.png" alt="">
|
||||
<!-- <img src="/upload/filemanager/Pages/Arvato/img-1.png" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-04" id="e-book">
|
||||
<div class="content container">
|
||||
<h2>
|
||||
Dodatkowe <u>korzyści <img src="/layout/checklista/icon-7.svg" alt=""></u> z raportu dla Ciebie
|
||||
</h2>
|
||||
<div class="boxes">
|
||||
<div class="mini-box">
|
||||
<span class="icon">📈</span>
|
||||
<h4>+63%</h4>
|
||||
<p>o tyle wzrasta szansa na ponowny zakup dzięki pozytywnym recenzjom.</p>
|
||||
</div>
|
||||
<div class="mini-box">
|
||||
<span class="icon">🤝</span>
|
||||
<h4>+58%</h4>
|
||||
<p>taki wzrost szansy na konwersję daje jedno kliknięcie w recenzję.</p>
|
||||
</div>
|
||||
<div class="mini-box">
|
||||
<span class="icon">🔍</span>
|
||||
<h4>6,4%</h4>
|
||||
<p>o tyle rośnie konwersja przy posiadaniu 50+ opinii o produkcie.</p>
|
||||
</div>
|
||||
|
||||
<div class="mini-box">
|
||||
<span class="icon">🏆</span>
|
||||
<h4>2,4 minuty</h4>
|
||||
<p>tyle średnio zajmuje klientowi reakcja na zautomatyzowaną prośbę o opinię.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<?= \front\view\Scontainers::scontainer( 9 ); ?>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user