Commit f106ce12 authored by Emiliano Balbuena's avatar Emiliano Balbuena
Browse files

(feat): Style 3; style 4; style tail

parent 95918ed3
Pipeline #90408377 passed with stages
in 67 minutes and 54 seconds
@import '../../../../foundation/grid-values';
.m-marketing__main,
.m-marketing__section {
// Common
overflow-x: hidden;
// overflow-x: hidden; // Add back???
&.m-marketing__section {
margin-top: 110px;
@media screen and (max-width: $m-grid-min-vp) {
margin-top: 80px;
&:first-child {
margin-top: 60px;
}
}
}
.m-marketing--hideMobile {
@media screen and (max-width: $m-grid-min-vp) {
......@@ -98,7 +112,11 @@
.m-marketing__actionButtons {
> * {
margin-right: 25px;
margin: 0 25px 0 0;
@media screen and (max-width: $m-grid-min-vp) {
margin: 0 0 20px;
}
&:last-child {
margin-right: initial;
......
@import '../../../../foundation/grid-values';
.m-marketing__main,
.m-marketing__section {
&.m-marketing__section--style-1 {
......
@import '../../../../foundation/grid-values';
.m-marketing__main,
.m-marketing__section {
&.m-marketing__section--style-2 {
......
@import '../../../../foundation/grid-values';
.m-marketing__main,
.m-marketing__section {
&.m-marketing__section--style-3 {
.m-marketing__wrapper {
position: relative;
z-index: 0;
padding: 72px 0 32px;
padding: 80px 0 80px;
@media screen and (max-width: $m-grid-min-vp) {
padding: 0;
......@@ -13,20 +15,22 @@
.m-marketing__body {
position: relative;
padding: 95px 0 0;
@media screen and (max-width: $m-grid-min-vp) {
padding: 0 30px 30px;
padding: 0 30px 0;
}
&::before {
content: '';
position: absolute;
top: 0;
right: -290px;
bottom: -56px;
right: -360px;
left: 0;
transform: translate(-86px, -56px);
clip-path: polygon(0% 0%, 0% 100%, 100% 92%, 100% 0%);
bottom: auto;
height: calc(100% + 160px);
transform: translate(-230px, -80px);
clip-path: polygon(0% 6%, 0% 95%, 100% 100%, 100% 0%);
z-index: -1;
@include m-theme() {
......@@ -38,21 +42,8 @@
}
@media screen and (max-width: $m-grid-min-vp) {
right: 0;
bottom: -3vw;
transform: none;
clip-path: none;
}
}
h1 {
@include m-on-theme(dark) {
color: #ffffff;
}
@media screen and (max-width: $m-grid-min-vp) {
margin: 15px 0 15px;
text-align: center;
content: initial;
display: none;
}
}
......@@ -64,7 +55,7 @@
@media screen and (max-width: $m-grid-min-vp) {
font-size: 28px;
line-height: 32px;
margin: 0 0 17px;
margin: 20px 0 17px;
text-align: center;
}
}
......@@ -94,53 +85,57 @@
.m-marketing__image {
position: relative;
z-index: 0;
grid-column-start: 1;
grid-row: 1;
img {
img.m-marketing__image--1 {
object-fit: contain;
clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
clip-path: polygon(0% 1%, 0% 100%, 100% 96%, 100% 0%);
@media screen and (max-width: $m-grid-min-vp) {
width: 100vw;
height: 100vw;
object-fit: cover;
clip-path: polygon(0% 2%, 0% 97%, 100% 100%, 100% 0%);
clip-path: polygon(0% 1%, 0% 100%, 100% 97%, 100% 0%);
}
}
img.m-marketing__image--2 {
position: absolute;
right: 0;
bottom: 35px;
@media screen and (max-width: $m-grid-min-vp) {
right: auto;
left: 50%;
bottom: 0;
transform: translate(-50%, 40px);
max-width: 75vw;
max-height: 50vw;
object-fit: contain;
}
}
span {
display: inline-block;
position: relative;
width: 100%;
// Deco
&::before {
content: '';
display: block;
position: absolute;
width: 393px;
height: 193px;
bottom: 0;
right: 0;
transform: translate(45px, 32px);
background: url('<%= APP_CDN %>/assets/marketing/deco_1.svg')
no-repeat;
z-index: -1;
@media screen and (max-width: $m-grid-min-vp) {
content: initial;
display: none;
}
@media screen and (max-width: $m-grid-min-vp) {
margin-bottom: 40px;
}
// Deco
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
width: 284px;
height: 262px;
transform: translate(35px, -35px);
transform: translate(-60px, -50px);
background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
no-repeat;
z-index: -1;
......
@import '../../../../foundation/grid-values';
.m-marketing__main,
.m-marketing__section {
&.m-marketing__section--style-4 {
.m-marketing__wrapper {
position: relative;
z-index: 0;
padding: 80px 0 80px;
@media screen and (max-width: $m-grid-min-vp) {
padding: 0;
}
}
.m-marketing__body {
position: relative;
padding: 95px 0 0;
@media screen and (max-width: $m-grid-min-vp) {
padding: 0 30px 0;
}
h2 {
@include m-on-theme(dark) {
color: #ffffff;
}
@media screen and (max-width: $m-grid-min-vp) {
font-size: 28px;
line-height: 32px;
margin: 20px 0 17px;
text-align: center;
}
}
}
p.m-marketing__description {
margin-bottom: 42px;
padding-right: 200px;
@include m-theme() {
color: themed($m-grey-300);
}
@include m-on-theme(dark) {
color: #ffffff;
}
@media screen and (max-width: $m-grid-min-vp) {
padding-right: 0;
margin-bottom: 30px;
font-size: 16px;
line-height: 23px;
text-align: center;
}
}
.m-marketing__image {
position: relative;
z-index: 0;
@media screen and (max-width: $m-grid-min-vp) {
grid-row: 1;
}
img.m-marketing__image--1 {
object-fit: contain;
clip-path: polygon(0% 1%, 0% 96%, 100% 100%, 100% 0%);
@media screen and (max-width: $m-grid-min-vp) {
width: 100vw;
height: 100vw;
object-fit: cover;
clip-path: polygon(0% 1%, 0% 97%, 100% 100%, 100% 0%);
}
}
img.m-marketing__image--2 {
position: absolute;
left: 0;
bottom: 35px;
@media screen and (max-width: $m-grid-min-vp) {
right: auto;
left: 50%;
bottom: 0;
transform: translate(-50%, 40px);
max-width: 75vw;
max-height: 50vw;
object-fit: contain;
}
}
span {
display: inline-block;
position: relative;
width: 100%;
text-align: right;
@media screen and (max-width: $m-grid-min-vp) {
margin-bottom: 40px;
}
// Deco
&::after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
width: 284px;
height: 262px;
transform: translate(50px, 50px);
background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
no-repeat;
z-index: -1;
@media screen and (max-width: $m-grid-min-vp) {
content: initial;
display: none;
}
}
}
}
}
}
@import '../../../../foundation/grid-values';
.m-marketing__main,
.m-marketing__section {
&.m-marketing__section--tail {
h2 {
font-size: 24px;
line-height: 32px;
font-weight: 700;
margin: 0 0 70px;
@include m-theme() {
color: themed($m-grey-300);
}
@media screen and (max-width: $m-grid-min-vp) {
margin: 0 0 35px;
}
}
.m-marketing__body {
text-align: center;
padding: 0 36px;
@media screen and (max-width: $m-grid-min-vp) {
margin-bottom: 45px;
}
h3 {
margin: 0 0 24px;
font-size: 24px;
line-height: 32px;
font-weight: 900;
@media screen and (max-width: $m-grid-min-vp) {
margin: 0 0 12px;
}
}
p.m-marketing__description {
font-size: 16px;
line-height: 21px;
@include m-theme() {
color: themed($m-grey-300);
}
}
&.m-marketing__body--extra {
margin-top: 135px;
@media screen and (max-width: $m-grid-min-vp) {
margin-top: 0;
}
}
}
}
}
......@@ -226,7 +226,7 @@
</div>
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
>
<button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
Join Rewards
......
......@@ -196,7 +196,7 @@
</div>
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
>
<button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
Buy Tokens
......
......@@ -194,7 +194,7 @@
</div>
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
>
<button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
Contact us for details
......
......@@ -204,7 +204,7 @@
</div>
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
>
<button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
Upgrade to Plus
......
......@@ -23,9 +23,18 @@ import { OverlayModalService } from '../../../services/ux/overlay-modal';
import { OverlayModalComponent } from '../../../common/components/overlay-modal/overlay-modal.component';
import { SessionsStorageService } from '../../../services/session-storage.service';
import { SiteService } from '../../../common/services/site.service';
import { ScrollService } from '../../../services/ux/scroll';
@Component({
providers: [ProChannelService, OverlayModalService, SignupModalService],
providers: [
ProChannelService,
OverlayModalService,
{
provide: SignupModalService,
useFactory: SignupModalService._,
deps: [Router, ScrollService],
},
],
selector: 'm-pro--channel',
templateUrl: 'channel.component.html',
changeDetection: ChangeDetectionStrategy.Default,
......
......@@ -260,7 +260,7 @@
</div>
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
>
<button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
Upgrade to Pro
......
......@@ -171,7 +171,7 @@
<div class="m-marketing__section m-marketing__section--tail">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body m-marketing__body--extra"
>
<button class="mf-button mf-button--alt" (click)="scrollToTop()" i18n>
Monetize your channel
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment