<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div class="one">
<div class="one-main">
<div class="one-title">Become Our Brand Amabassador</div>
<div class="one-sec">Welcome to join us and become one of the members of our Brand Ambassador Program. You'll have the opportunity to review Hey Abby and our upcoming products.</div>
<div class="one-items">
<div class="one-item">
<img src="./img/Campaign-Sponsorships.png">
<div class="one-item-desc">
Campaign Sponsorships
</div>
</div>
<div class="one-item one-item-margin-left one-item-margin-left-mobile">
<img src="./img/Content-Contributions.png">
<div class="one-item-desc">
Content Contributions
</div>
</div>
<div class="one-item one-item-margin-left one-item-margin-top-mobile">
<img src="./img/We-Are-Open.png">
<div class="one-item-desc one-item-extra-width">
We Are Open To Any Collaboration Ideas
</div>
</div>
<div class="one-item one-item-margin-top one-item-margin-top-mobile one-item-margin-left-mobile">
<img src="./img/Product-Reviews.png">
<div class="one-item-desc">
Product Reviews
</div>
</div>
<div class="one-item one-item-margin-left one-item-margin-top one-item-margin-top-mobile">
<img src="./img/Cross-Brand-Collaboration.png">
<div class="one-item-desc">
Cross-Brand Collaboration
</div>
</div>
<div class="one-item one-item-margin-left one-item-margin-top one-item-margin-top-mobile one-item-margin-left-mobile">
<img src="./img/GiveAway-Contests.png">
<div class="one-item-desc one-item-extra-width">
GiveAway Contests
</div>
</div>
</div>
<button class="join-now-btn">Join Now</button>
</div>
</div>
<div class="two-pic base-center">
<div class="two">
<div class="two-title">Join Our Affiliate Program</div>
<div class="two-sec">If you love sharing the value of indoor growing, you are who we are looking for! Time to join and earn!</div>
<button class="two-btn">Join Now</button>
</div>
</div>
<div class="three">
<div class="three-main">
<div class="one-title three-title">Why Join?</div>
<div class="one-sec">Our Affiliate Program enables every possible partner to join and promote Hey Abby,
gain commissions from every sale through your affiliate link. Share your affiliate link and win a reward.
Everyone could be a marketer on here. Apply today to join the program.</div>
<div class="three-items">
<div class="three-item">
<img src="./img/Campaign-Sponsorships-2.png">
<div class="three-item-desc">
Campaign Sponsorships
</div>
<div class="three-item-content">
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">Good quality products</div>
</div>
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">Professional customer service</div>
</div>
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">Sufficient inventory and worldwide shipping service</div>
</div>
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">Dedicated affiliate manager by OPM</div>
</div>
</div>
</div>
<div class="three-item three-item-margin-left">
<img src="./img/Content-Contributions-2.png">
<div class="three-item-desc">
Content Contributions
</div>
<div class="three-item-content">
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">Timely Rich coupons, deals, text links, banners, etc</div>
</div>
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">New profitable activities, updating banners and coupons</div>
</div>
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">Periodically newsletter</div>
</div>
</div>
</div>
<div class="three-item three-item-margin-left">
<img src="./img/We-Are-Open-2.png">
<div class="three-item-desc">
We Are Open To Any Collaboration Ideas
</div>
<div class="three-item-content">
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">Earn at least 5% Commission on each referred sale</div>
</div>
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">Exclusive coupon codes/banners</div>
</div>
<div class="three-item-content-item">
<div class="three-doc"></div>
<div class="three-content-color">Commission incentive plans with bonuses</div>
</div>
</div>
</div>
</div>
<button class="join-now-btn">Join Now</button>
</div>
</div>
<div class="four">
<div class="four-title">How it works</div>
<div class="four-items">
<div class="four-item">
<img src="./img/Sign-up.png">
<div class="four-item-font">Sign up and get your unique URL</div>
</div>
<div class="four-item four-margin-left">
<img src="./img/Share-the-link-and-love.png">
<div class="four-item-font">Share the link and love</div>
</div>
<div class="four-item four-margin-left">
<img src="./img/Earn-for-each-referral.png">
<div class="four-item-font">Earn 5% for each referral</div>
</div>
</div>
</div>
<style>
@media screen and (max-width: 900px) {
.one {
height: 4.98rem;
display: flex;
align-items: center;
justify-content: center;
width: 3.75rem;
}
.one-main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.one-title {
margin: 0 auto;
width: 3.05rem;
height: 0.58rem;
opacity: 1;
font-family: Roboto-Medium;
font-size: 0.24rem;
font-weight: 500;
line-height: 0.29rem;
text-align: center;
letter-spacing: 0rem;
color: #00643E;
}
.one-sec {
margin: 0 auto;
width: 3.05rem;
opacity: 0.8;
font-family: Roboto-Medium;
font-size: 0.13rem;
font-weight: 500;
line-height: 0.155rem;
text-align: center;
letter-spacing: 0rem;
color: #000000;
margin-top: 0.14rem;
}
.one-items {
display: flex;
margin-top: 0.2rem;
flex-wrap: wrap;
justify-content: center;
}
.one-item {
width: 1.65rem;
height: 0.65rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0rem 0.02rem 0.21rem 0rem rgba(0, 0, 0, 0.08);
}
.one-item-desc {
width: 0.835rem;
opacity: 0.8;
font-family: Roboto-Medium;
font-size: 0.13rem;
font-weight: 500;
line-height: 0.155rem;
letter-spacing: 0rem;
color: #000000;
margin-left: 0.11rem;
}
.one-item-extra-width {
width: 0.835rem;
}
.one-item img {
width: 0.35rem;
height: 0.35rem;
}
.join-now-btn {
width: 2rem;
height: 0.4rem;
border-radius: 0.05rem;
opacity: 1;
background: linear-gradient(101deg, #54DA8B -5%, #056140 106%);
margin-top: 0.2rem;
font-family: Roboto-Medium;
font-size:16;
font-weight: 500;
line-height: 0.19rem;
text-align: center;
letter-spacing: 0rem;
color: #FFFFFF;
border: none;
}
.one-item-margin-left-mobile {
margin-left: 0.09rem;
}
.three-item-margin-left {
/* margin-left: 24px; */
}
.one-item-margin-top-mobile {
margin-top: 0.09rem;
}
.three {
display: flex;
justify-content: center;
height: 9.6rem;
}
.three-title {
height: 0.29rem;
}
.three-main, .one-main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.three-items {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.three-item {
height: 2.03rem;
width: 3.39rem;
display: flex;
box-shadow: 0rem 0.02rem 0.21rem 0rem rgba(0, 0, 0, 0.08);
flex-direction: column;
padding-left: 0.18rem;
padding-top: 0.25rem;
margin-top: 0.09rem;
}
.three-item-desc {
font-family: Roboto-Medium;
font-size: 0.16rem;
font-weight: 500;
line-height: 0.19rem;
letter-spacing: 0rem;
color: #00643E;
margin-top: 0.21rem;
}
.three-item-content {
margin-top: 0.12rem;
}
.three-content-color {
opacity: 0.8;
font-family: Roboto-Medium;
font-size: 0.13rem;
font-weight: 500;
line-height: 0.155rem;
letter-spacing: 0rem;
color: #000000;
display: inline-block;
margin-left: 0.06rem;
}
.three-doc {
width: 0.03rem;
height: 0.03rem;
border-radius: 0.015rem;
opacity: 1;
background: linear-gradient(142deg, #54DA8B -17%, #056140 111%);
margin-top: 0.03rem;
}
.three-item-content-item {
display: flex;
margin-top: 0.075rem;
}
.three-item img {
width: 0.25rem;
height: 0.25rem;
}
.four {
height: 217px;
background-color: #056140;
display: flex;
align-items: center;
flex-direction: column;
}
.four-title {
font-family: Roboto-Medium;
font-size: 24px;
font-weight: 500;
line-height: 29px;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
margin-top: 40px;
}
.four-items {
display: flex;
justify-content: center;
margin-top: 19px;
}
.four-item {
text-align: center;
font-size: 13px;
}
.four-item-font {
font-family: Roboto-Medium;
font-size: 13px;
font-weight: 500;
line-height: 15px;
letter-spacing: 0px;
color: #FFFFFF;
margin-top: 13px;
}
.four-item img {
width: 0.465rem;
height: 0.465rem;
}
.base-center {
display: flex;
align-items: center;
}
.two-pic {
background-image: url(./img/lm-banner-m-01.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-repeat: no-repeat;
height: 2.24rem;
background-position: center;
}
.two {
width: 3.05rem;
margin: 0 auto;
text-align: center;
font-size: 0.24rem;
}
.two-title {
font-family: Roboto-Medium;
font-size: 0.24rem;
font-weight: 500;
line-height: 0.29rem;
text-align: center;
letter-spacing: 0rem;
color: #FFFFFF;
}
.two-sec {
font-family: Roboto-Medium;
font-size: 0.13rem;
font-weight: 500;
line-height: 0.155rem;
letter-spacing: 0rem;
color: #FFFFFF;
margin-top: 0.145rem;
}
.two-btn {
width: 1.3rem;
height: 0.4rem;
border-radius: 0.05rem;
opacity: 1;
background: linear-gradient(101deg, #54DA8B -5%, #056140 106%);
margin-top: 0.25rem;
font-family: Roboto-Medium;
font-size: 0.16rem;
font-weight: 500;
line-height: 0.19rem;
text-align: center;
letter-spacing: 0rem;
color: #FFFFFF;
border: none;
}
* {
font-size: 0.16rem;
}
}
@media screen and (min-width: 901px) {
.base-center {
display: flex;
align-items: center;
}
.two-pic {
background-image: url(./img/lm-banner-pc-01.jpg);
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-repeat: no-repeat;
height: 448px;
background-position: center;
min-width: 1260px;
}
.one {
height: 746px;
display: flex;
align-items: center;
justify-content: center;
min-width: 1260px;
}
.one-title {
margin: 0 auto;
width: 650px;
height: 48px;
opacity: 1;
font-family: Roboto-Medium;
font-size: 40px;
font-weight: 500;
line-height: 48px;
text-align: center;
letter-spacing: 0px;
color: #00643E;
}
.one-sec {
margin: 0 auto;
width: 768px;
height: 40px;
opacity: 0.8;
font-family: Roboto-Medium;
font-size: 16px;
font-weight: 500;
line-height: 19px;
text-align: center;
letter-spacing: 0px;
color: #000000;
margin-top: 25px;
}
.one-items {
display: flex;
margin-top: 77px;
max-width: 1260px;
flex-wrap: wrap;
justify-content: center;
}
.one-item {
width: 380px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.08);
}
.one-item-desc {
/* width: 167px; */
width: 216px;
opacity: 0.8;
font-family: Roboto-Medium;
font-size: 20px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0px;
color: #000000;
margin-left: 30px;
}
.one-item-extra-width {
width: 216px;
}
.one-item-margin-left {
margin-left: 37px;
}
.three-item-margin-left {
margin-left: 24px;
}
.one-item-margin-top {
margin-top: 34px;
}
.two {
width: 800px;
margin: 0 auto;
text-align: center;
font-size: 16px;
}
.two-title {
font-family: Roboto-Medium;
font-size: 40px;
font-weight: 500;
line-height: 48px;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
}
.two-sec {
font-family: Roboto-Medium;
font-size: 16px;
font-weight: 500;
line-height: 19px;
letter-spacing: 0px;
color: #FFFFFF;
margin-top: 23px;
}
.two-btn {
width: 300px;
height: 46px;
border-radius: 10px;
opacity: 1;
background: linear-gradient(101deg, #54DA8B -5%, #056140 106%);
margin-top: 55px;
font-family: Roboto-Medium;
font-size: 16px;
font-weight: 500;
line-height: 19px;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
border: none;
}
.three {
height: 823px;
display: flex;
justify-content: center;
}
.three-item img {
width: 50px;
height: 50px;
}
.one-item img {
width: 70px;
height: 70px;
}
.three-main, .one-main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.three-items {
display: flex;
margin-top: 66px;
max-width: 1260px;
justify-content: center;
}
.three-item {
height: 373px;
width: 384px;
display: flex;
box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.08);
flex-direction: column;
padding-left: 36px;
padding-top: 49px;
}
.three-item-desc {
font-family: Roboto-Medium;
font-size: 20px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0px;
color: #00643E;
margin-top: 21px;
}
.three-item-content {
margin-top: 50px;
}
.three-content-color {
opacity: 0.8;
font-family: Roboto-Medium;
font-size: 14px;
font-weight: 500;
line-height: 17px;
letter-spacing: 0px;
color: #000000;
width: 320px;
display: inline-block;
margin-left: 6px;
}
.three-doc {
width: 6px;
height: 6px;
border-radius: 3px;
opacity: 1;
background: linear-gradient(142deg, #54DA8B -17%, #056140 111%);
margin-top: 6px;
}
.three-item-content-item {
display: flex;
margin-top: 11px;
}
.four {
height: 413px;
background-color: #056140;
display: flex;
align-items: center;
flex-direction: column;
min-width: 1260px;
}
.four-title {
font-family: Roboto-Medium;
font-size: 40px;
font-weight: 500;
line-height: 48px;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
margin-top: 80px;
}
.four-items {
display: flex;
justify-content: center;
margin-top: 49px;
}
.four-item {
text-align: center;
font-size: 16px;
}
.four-item-font {
font-family: Roboto-Medium;
font-size: 16px;
font-weight: 500;
line-height: 19px;
letter-spacing: 0px;
color: #FFFFFF;
margin-top: 31px;
}
.four-margin-left {
margin-left: 168px;
}
.four-item img {
width: 97px;
height: 97px;
}
.join-now-btn {
width: 300px;
height: 46px;
border-radius: 10px;
opacity: 1;
background: linear-gradient(101deg, #54DA8B -5%, #056140 106%);
margin-top: 40px;
font-family: Roboto-Medium;
font-size: 20px;
font-weight: 500;
line-height: 24px;
text-align: center;
letter-spacing: 0px;
color: #FFFFFF;
border: none;
}
}
body {
margin: 0;
}
</style>
<script>
const getRem = (pwidth = 750, prem = 100) => {
let html = document.getElementsByTagName("html")[0];
let oWidth = document.body.clientWidth || document.documentElement.clientWidth;
// if (oWidth > 600) oWidth = 600
html.style.fontSize = oWidth / pwidth * prem + "px";
window.onresize = function () {
getRem(pwidth, prem)
};
}
console.log("Hello World");
getRem(375,100);
</script>
</body>
</html>
2022-10-29
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
