Skip to content

Commit

Permalink
Merge pull request #171 from bitdefender/creators-block
Browse files Browse the repository at this point in the history 
update creator-components
  • Loading branch information
@imantescu
imantescu authored Aug 28, 2024
2 parents 208ae74 + dfbfd06 commit b05e59a
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 144 deletions.
13 changes: 7 additions & 6 deletions _src/blocks/creators-block/creators-block.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,15 @@
}

.creators-block.block>div:nth-child(3) a.button:any-link {
min-width: 230px;
height: 48px;
padding: 10px 10px 10px 25px;
background: #E72325 0% 0% no-repeat padding-box;
border-radius: 40px;
padding: 18px 25px;
font-size: 18px;
line-height: 24px;
font-family: Roboto, sans-serif;
font-weight: bold;
color: #fff;
justify-content: center;
font: normal normal 500 18px / 24px Roboto, sans-serif;
margin-bottom: 35px;
color: white;
}

.creators-block.block>div:nth-child(2)>div {
Expand Down
49 changes: 49 additions & 0 deletions _src/blocks/four-cards/four-cards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,30 @@
}
}


.creator-cards .four-cards.block {
display: flex;
justify-content: center;
}

.four-cards-container h3 {
font: normal normal bold 32px/37px var(--body-font-family);
text-align: center;
margin-bottom: 56px;
}

.creator-cards.four-cards-container h3 {
font: normal normal bold 60px/69px Arial, sans-serif;
text-align: center;
margin-bottom: 28px;
}

.creator-cards.four-cards-container h4 {
font: normal normal normal 24px/26px Arial, sans-serif;
text-align: center;
margin-bottom: 72px;
}

.four-cards-container.we-container {
max-width: 100%;
padding-left: 20px;
Expand Down Expand Up @@ -128,6 +146,10 @@
text-align: center;
}

.creator-cards .default-content-wrapper {
text-align: center;
}

/* a/b test styles, should be deleted after */
.four-cards-container.we-container .default-content-wrapper {
text-align: center;
Expand Down Expand Up @@ -179,6 +201,28 @@
background-color: #0D499B;
}

.creator-cards .default-content-wrapper a.button:any-link {
min-width: 230px;
height: 48px;
padding: 10px 10px 10px 25px;
background: #E72325 0% 0% no-repeat padding-box;
border-radius: 40px;
justify-content: center;
font: normal normal 500 18px / 24px Roboto, sans-serif;
color: white;
}

.creator-cards .default-content-wrapper a.button:hover {
color: white;
background-color: var(--button-background-color);
}

.creator-cards .default-content-wrapper a.button:active {
color: white;
background-color: var(--button-background-color);
border: 0;
}

.four-cards .icon {
width: 48px;
height: 48px;
Expand Down Expand Up @@ -213,6 +257,11 @@
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 14px;
}

.creator-cards .four-cards > ul {
grid-template-columns: 300px 300px 300px;
grid-gap: 14px;
}
}

@media (min-width: 1200px) {
Expand Down
144 changes: 74 additions & 70 deletions _src/blocks/money-back/money-back.css
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,3 @@
.money-back-container {
--dark-background-color: #000;
--black-color: #000;
--white-color: #fff;
--background-color: #fff;
--link-color: #005ed9;
--link-hover-color: #00439c;
--button-link-color: #fff;
--button-background-color: #eb0000;
--button-hover-background-color: #d80000;
--button-primary-background-color: #000;
--button-primary-hover-background-color: #000;
--button-secondary-color: #000;
--button-secondary-hover-background-color: #000;
--overlay-background-color: #eee;
--highlight-background-color: #ccc;
--text-color: #000;
--text-error-color: #f00;
--color-highlight-blue: #006dff;
--color-dark-gray: #616161;
--checkbox-label: #3c3c3c;
--highlight-light-blue: #f3f7fe;
--text-dark-color: #fff;
--horizontal-separator-color: #dedede;
--modal-background-color: rgb(0 0 0 / 50%);
--background-color-light-sky-blue: #e4f2ff;
--icon-color: #205fff;
--background-light-blue: #d9eeff;
--background-blue: #005ed9;
--dark-blue-tag: #005eff;
--light-blue-tag: #13b0a7;
--green-tag: #218728;
--dark-shadow: #0000001a;
--background-checkmark: #61AF53;
--body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif;
--heading-font-family: var(--body-font-family);
--fixed-font-family: var(--body-font-family);
--font-weight-thin: 300;
--font-weight-regular: 400;
--font-weight-bold: 500;
--font-weight-bolder: 600;
--font-weight-boldest: 700;
--font-weight-heavy: 900;
--body-font-size-l: 22px;
--body-font-size-m: 18px;
--body-font-size-s: 16px;
--body-font-size-xs: 14px;
--body-font-size-xxs: 12px;
--body-font-size-xxxs: 10px;
--heading-font-size-xxxl: 60px;
--heading-font-size-xxl: 48px;
--heading-font-size-xl: 40px;
--heading-font-size-l: 32px;
--heading-font-size-m: 24px;
--heading-font-size-s: 20px;
--heading-font-size-xs: 18px;
--heading-font-size-xxs: 16px;
--nav-height: 63px;
--nav-height-desktop: 40px;
--body-max-width: 1920px;
--body-padding: 20px;
--section-desktop-max-width: 1300px;
--section-desktop-padding: 20px;
--section-large-desktop-max-width: 1332px;
--section-large-desktop-padding: 50px;
--section-desktop-padding-vertical: 48px;
--section-mobile-padding-vertical: 32px;
--cta-background-light-blue: var(--background-light-blue);
}

.money-back-wrapper {
text-align: center;
}
Expand All @@ -92,6 +22,10 @@
border-radius: 20px;
}

.creator-money-back .money-back.block {
background-color: transparent;
}

.money-back.block.background-white {
background-color: white;
}
Expand All @@ -117,6 +51,12 @@
padding-right: 2px;
}

.creator-money-back.money-back-container .icon svg {
width: auto;
height: 60px;
padding-right: 2px;
}

.money-back > ul {
list-style: none;
margin: 0;
Expand All @@ -134,6 +74,18 @@
font: normal normal normal 14px/16px var(--body-font-family);
}

.creator-money-back .money-back > ul > li {
display: inline-block;
background: #F5F5F7;
border-radius: 20px;
padding: 60px 68px;
width: 550px;
text-align: left;
margin: 0 30px;
vertical-align: top;
font: normal normal normal 20px/23px Arial, sans-serif;
}

.money-back > ul > li h6 {
font: normal normal bold 18px/16px var(--body-font-family);
}
Expand All @@ -142,10 +94,22 @@
font: normal normal normal 14px/16px var(--body-font-family);
}

.creator-money-back .money-back > ul > li h6 {
font: normal normal bold 32px/38px Arial, sans-serif;
}

.creator-money-back .money-back > ul > li p {
font: normal normal normal 20px/23px Arial, sans-serif;
}

.money-back > ul > li p:first-of-type {
margin-bottom: 0;
}

.creator-money-back .money-back > ul > li p:first-of-type {
margin: 0;
}

.money-back > ul > li a {
font: normal normal normal 14px/16px var(--body-font-family);
margin-bottom: 0;
Expand All @@ -155,6 +119,25 @@
display: block;
}

.creator-money-back .money-back > ul > li a {
display: inline-flex;
justify-content: center;
min-width: 170px;
text-align: center;
padding: 10px 13px;
height: 44px;
background: #E72325 0% 0% no-repeat padding-box;
border-radius: 5px;
font: normal normal bold 16px/18px Arial, sans-serif;
color: white;
}

.creator-money-back .money-back > ul > li a:hover {
text-decoration: none;
color: white;
background: #D70000;
}

.money-back > ul > li strong {
display: inline-block;
font: normal normal bold 18px/16px var(--body-font-family);
Expand Down Expand Up @@ -200,13 +183,28 @@
transition: none;
}

.creator-money-back .money-back a.button::after {
content: '';
width: 0;
height: 0;
margin: 0;
transition: none;
}

.money-back .icon {
height: 32px;
margin-bottom: 9px;
fill: #006EFF;
display: flex;
}

.creator-money-back .money-back .icon {
height: 60px;
margin-bottom: 23px;
fill: #006EFF;
display: flex;
}

.money-back img {
height: 55px;
margin-bottom: 9px;
Expand Down Expand Up @@ -235,6 +233,12 @@
}
}

@media (max-width: 1259px) {
.creator-money-back .money-back > ul > li {
margin-bottom: 40px;
}
}

@media (min-width: 1200px) {
.money-back-container.we-container {
max-width: 1332px;
Expand Down
Loading

0 comments on commit b05e59a

Please sign in to comment.