<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0; background: #ffffff">
<input type="hidden" id="anPageName" name="page" value="main-design" />
<div class="container-center-horizontal">
<div class="main-design screen">
<div class="overlap-group2">
<div class="get-started">
<div class="how-can-we-help-your-small-business">Lorem ipsum dolor sit amet, consectetur adip</div>
<div class="whether-you-employ-j">
Lorem ipsum dolor sit amet, consectetur adip, lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adip
lorem ipsum dolor sit am.
</div>
</div>
<div class="plans">
<div class="plans-1">
<div class="frame-44 border-1px-green">
<div class="phone-internet-bundles lilitaone-normal-green-28px">Hello & World <br />Lorem ipsum dolor</div>
<div class="see-deals-1 border-1px-green">
<div class="see-deals valign-text-middle montserrat-bold-green-16px">See more</div>
</div>
</div>
<div class="frame-45 border-1px-green">
<div class="congestion-free-business-nbn lilitaone-normal-green-28px">
Lorem ipsum dolor<br />lorem dolor™
</div>
<div class="see-deals-2 border-1px-green">
<div class="see-deals valign-text-middle montserrat-bold-green-16px">See more</div>
</div>
</div>
<div class="frame-46 border-1px-green">
<div class="cloud-based-pbx lilitaone-normal-green-28px">Lorem ipsum dolor</div>
<div class="see-deals-3 border-1px-green">
<div class="see-deals valign-text-middle montserrat-bold-green-16px">See more</div>
</div>
</div>
</div>
<div class="social-proof">
<div class="x5-stars-for-service lilitaone-normal-sonic-silver-25-8px">Lorem</div>
<div class="group-15">
<img class="icon-star-1" src="img/star-1@2x.svg" />
<img class="icon-star" src="img/star-2-1@2x.svg" />
<img class="icon-star" src="img/star-3-1@2x.svg" />
<img class="icon-star" src="img/star-4-1@2x.svg" />
<img class="icon-star" src="img/star-5-1@2x.svg" />
</div>
<div class="exemplary-price-and-service lilitaone-normal-abbey-40px">“Lorem lorem ipsum dolor sit amet”</div>
<div class="sent-02-june-2022 montserrat-normal-sonic-silver-12-1px">Sent, 02 August 2022</div>
<div class="product-review border-0-7px-green">
<img data-src="holder.js/200x200" class="mask-group" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1822064960f%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1822064960f%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
</div>
<p class="spintel-is-rated-41 montserrat-normal-white-12-1px">
<span class="span montserrat-normal-sonic-silver-12-1px">Lorem</span
><span class="span1 montserrat-normal-sonic-silver-12-1px">lorem</span
><span class="span montserrat-normal-sonic-silver-12-1px"> </span
><span class="span montserrat-extra-bold-sonic-silver-12-1px">4.1</span
><span class="span montserrat-bold-sonic-silver-12-1px"> out of 5 </span
><span class="span montserrat-normal-sonic-silver-12-1px">by </span
><span class="span montserrat-bold-abbey-12-1px">4,631</span
><span class="span montserrat-normal-sonic-silver-12-1px"> lorem</span>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
/* screen - main-design*/
.main-design {
align-items: flex-start;
background-color: var(--white);
display: flex;
flex-direction: column;
min-height: 2117px;
width: 1024px;
}
.main-design .overlap-group1 {
height: 499px;
position: relative;
width: 1024px;
}
.main-design .image-15 {
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 1024px;
}
.main-design .header {
align-items: center;
background-color: var(--green);
display: flex;
flex-direction: column;
height: 349px;
left: 0;
padding: 59px 0;
position: absolute;
top: 150px;
width: 1024px;
}
.main-design .the-small-business-telco {
letter-spacing: 0;
line-height: 63.0px;
min-height: 189px;
text-align: center;
width: 670px;
}
.main-design .we-started-small-too {
letter-spacing: 0;
line-height: 30px;
margin-top: 10px;
min-height: 30px;
text-align: center;
white-space: nowrap;
width: 504px;
}
.main-design .overlap-group2 {
height: 835px;
position: relative;
width: 1024px;
}
.main-design .get-started {
align-items: center;
background-color: var(--white);
display: flex;
flex-direction: column;
height: 188px;
left: 0;
padding: 36px 0;
position: absolute;
top: 0;
width: 1024px;
}
.main-design .how-can-we-help-your-small-business {
color: var(--green);
font-family: var(--font-family-lilita_one);
font-size: var(--font-size-xxxxxl);
font-weight: 400;
letter-spacing: -1.20px;
min-height: 46px;
min-width: 606px;
text-align: center;
}
.main-design .whether-you-employ-j {
color: var(--abbey);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-xxxl);
font-weight: 400;
letter-spacing: -0.60px;
margin-top: 20px;
min-height: 48px;
text-align: center;
width: 681px;
}
.main-design .plans {
align-items: center;
background-color: var(--white);
display: flex;
flex-direction: column;
height: 647px;
left: 0;
overflow: hidden;
position: absolute;
top: 188px;
width: 1024px;
}
.main-design .plans-1 {
align-items: flex-start;
display: flex;
height: 216px;
min-width: 900px;
}
.main-design .frame-44 {
align-items: flex-start;
background-color: var(--white);
border-radius: 10px;
box-shadow: 0px 4px 4px #00000040;
display: flex;
flex-direction: column;
min-height: 216px;
padding: 39px 9px;
width: 280px;
}
.main-design .phone-internet-bundles {
align-self: flex-end;
letter-spacing: -0.84px;
line-height: 28px;
min-height: 56px;
width: 231px;
}
.main-design .see-deals-1 {
align-items: flex-start;
border-radius: 10px;
display: flex;
height: 50px;
margin-left: 31px;
margin-top: 31px;
min-width: 138px;
padding: 16px 31px;
}
.main-design .see-deals {
height: 16px;
letter-spacing: -0.48px;
line-height: 16px;
min-width: 76px;
text-align: center;
white-space: nowrap;
}
.main-design .frame-45 {
align-items: flex-start;
background-color: var(--white);
border-radius: 10px;
box-shadow: 0px 4px 4px #00000040;
display: flex;
flex-direction: column;
margin-left: 30px;
min-height: 216px;
padding: 39px 33px;
width: 280px;
}
.main-design .congestion-free-business-nbn {
align-self: flex-end;
letter-spacing: -0.84px;
line-height: 28px;
min-height: 56px;
width: 207px;
}
.main-design .see-deals-2 {
align-items: flex-start;
border-radius: 10px;
display: flex;
height: 50px;
margin-left: 7px;
margin-top: 31px;
min-width: 138px;
padding: 16px 31px;
}
.main-design .frame-46 {
align-items: flex-start;
background-color: var(--white);
border-radius: 10px;
box-shadow: 0px 4px 4px #00000040;
display: flex;
flex-direction: column;
margin-left: 30px;
min-height: 216px;
padding: 39px 40px;
width: 280px;
}
.main-design .cloud-based-pbx {
letter-spacing: -0.84px;
line-height: 28px;
min-height: 56px;
width: 183px;
}
.main-design .see-deals-3 {
align-items: flex-start;
border-radius: 10px;
display: flex;
height: 50px;
margin-top: 31px;
min-width: 138px;
padding: 16px 31px;
}
.main-design .social-proof {
align-items: center;
background-color: var(--desert-storm);
display: flex;
flex-direction: column;
height: 395px;
margin-top: 36px;
padding: 59px 0;
width: 1024px;
}
.main-design .x5-stars-for-service {
letter-spacing: -0.77px;
margin-right: 0;
min-height: 29px;
text-align: center;
width: 190px;
}
.main-design .group-15 {
align-items: center;
display: flex;
height: 60px;
margin-right: 0;
margin-top: 16px;
min-width: 326px;
padding: 0 2.9px;
}
.main-design .icon-star-1 {
height: 51px;
width: 54px;
}
.main-design .icon-star {
height: 51px;
margin-left: 13px;
width: 54px;
}
.main-design .exemplary-price-and-service {
letter-spacing: -1.20px;
margin-top: 14px;
min-height: 46px;
text-align: center;
width: 760px;
}
.main-design .sent-02-june-2022 {
letter-spacing: -0.36px;
margin-top: 15px;
min-height: 15px;
min-width: 107px;
text-align: center;
}
.main-design .product-review {
align-items: flex-start;
border-radius: 21px;
display: flex;
height: 35px;
margin-left: 0;
margin-top: 16px;
min-width: 141px;
padding: 5.6px 13.4px;
}
.main-design .mask-group {
height: 22px;
width: 113px;
}
.main-design .now-is-rated-41 {
letter-spacing: -0.36px;
margin-top: 14px;
min-height: 15px;
min-width: 263px;
text-align: center;
}
.main-design .span {
letter-spacing: -0.04px;
}
.main-design .span1 {
letter-spacing: -0.04px;
text-decoration: underline;
}
.main-design .features {
align-items: center;
background-color: var(--white);
display: flex;
flex-direction: column;
height: 444px;
padding: 59px 0;
width: 1024px;
}
.main-design .why-spin-tel-nbn {
letter-spacing: -0.90px;
min-height: 34px;
min-width: 225px;
}
.main-design .features-icons {
align-items: flex-start;
display: flex;
height: 237px;
margin-top: 54px;
min-width: 750px;
}
.main-design .voice-sent-to-email {
align-items: center;
display: flex;
flex-direction: column;
min-height: 222px;
width: 150px;
}
.main-design .voice-to-email {
align-items: center;
background-color: var(--white);
display: flex;
height: 120px;
padding: 0 15px;
width: 120px;
}
.main-design .overlap-group {
align-items: flex-start;
background-color: var(--desert-storm);
border-radius: 45px;
display: flex;
height: 90px;
min-width: 90px;
padding: 14.8px 15px;
}
.main-design .icon-us-ps-1 {
align-items: flex-start;
display: flex;
height: 60px;
min-width: 60px;
padding: 5.0px 5.0px;
}
.main-design .x001-australia {
height: 49px;
width: 49px;
}
.main-design .no-lock-in-contracts {
letter-spacing: -0.42px;
line-height: 15.4px;
margin-top: 9px;
min-height: 30px;
text-align: center;
width: 120px;
}
.main-design .youre-free-to-join {
letter-spacing: -0.36px;
line-height: 13.2px;
margin-top: 10px;
min-height: 52px;
text-align: center;
width: 150px;
}
.main-design .features-icons-item {
align-items: center;
display: flex;
flex-direction: column;
margin-left: 50px;
min-height: 222px;
width: 150px;
}
.main-design .ivr {
align-items: center;
background-color: var(--white);
display: flex;
height: 120px;
padding: 0 15px;
width: 120px;
}
.main-design .icon-us-ps {
height: 60px;
width: 60px;
}
.main-design .best-rated-value-plans {
letter-spacing: -0.42px;
line-height: 15.4px;
margin-top: 9px;
min-height: 30px;
text-align: center;
width: 120px;
}
.main-design .our-awards-for-austr {
letter-spacing: -0.36px;
line-height: 13.2px;
margin-top: 10px;
min-height: 52px;
text-align: center;
width: 150px;
}
.main-design .multi-person {
align-items: center;
background-color: var(--white);
display: flex;
height: 120px;
padding: 0 15px;
width: 120px;
}
.main-design .congestion-free-nbn {
letter-spacing: -0.42px;
line-height: 15.4px;
margin-top: 9px;
min-height: 30px;
text-align: center;
width: 120px;
}
.main-design .get-nbn-that-works-a {
letter-spacing: -0.36px;
line-height: 13.2px;
margin-top: 10px;
min-height: 52px;
text-align: center;
width: 150px;
}
.main-design .easy-hold-park-and-transfer {
align-items: center;
display: flex;
flex-direction: column;
margin-left: 50px;
min-height: 237px;
width: 150px;
}
.main-design .hold-park-and-transfer {
align-items: center;
background-color: var(--white);
display: flex;
height: 120px;
padding: 0 15px;
width: 120px;
}
.main-design .icon-us-ps-2 {
align-items: center;
display: flex;
height: 60px;
min-width: 60px;
padding: 0 5px;
}
.main-design .technical-support-1 {
height: 50px;
width: 50px;
}
.main-design .exceptional-customer-service {
letter-spacing: -0.42px;
line-height: 15.4px;
margin-top: 9px;
min-height: 45px;
text-align: center;
width: 120px;
}
.main-design .more-than-3900-cust {
letter-spacing: -0.36px;
line-height: 13.2px;
margin-top: 10px;
min-height: 52px;
text-align: center;
width: 150px;
}
.main-design .more-info {
align-items: center;
background-color: var(--sonic-silver);
display: flex;
flex-direction: column;
height: 204px;
padding: 39px 0;
width: 1024px;
}
.main-design .call-us-or-call-back {
letter-spacing: -0.90px;
min-height: 34px;
text-align: center;
width: 696px;
}
.main-design .frame-29 {
align-items: flex-start;
display: flex;
margin-top: 31px;
min-width: 705px;
}
.main-design .call-us {
align-items: flex-start;
background-color: var(--green);
border-radius: 10px;
display: flex;
height: 60px;
min-width: 225px;
padding: 21px 85px;
}
.main-design .call-us-1 {
height: 16px;
letter-spacing: -0.48px;
line-height: 16px;
min-width: 53px;
text-align: center;
white-space: nowrap;
}
.main-design .messenger {
align-items: flex-start;
background-color: var(--green);
border-radius: 10px;
display: flex;
height: 60px;
margin-left: 15px;
min-width: 225px;
padding: 21px 33px;
}
.main-design .chat-on {
height: 16px;
letter-spacing: -0.48px;
line-height: 16px;
white-space: nowrap;
}
.main-design .whatsapp {
align-items: flex-start;
background-color: var(--green);
border-radius: 10px;
display: flex;
height: 60px;
margin-left: 15px;
min-width: 225px;
padding: 21px 36px;
}
.main-design .awards {
align-items: flex-end;
background-color: var(--white);
display: flex;
height: 135px;
padding: 15.0px 244.0px;
width: 1024px;
}
.main-design .image-1 {
height: 90px;
object-fit: cover;
width: 90px;
}
.main-design .image {
height: 90px;
margin-left: 18px;
object-fit: cover;
width: 90px;
}
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Lilita+One:400|Montserrat:400,700,600,800");
/* The following line is used to measure usage of this code in production. For more info see our usage billing page */
@import url("https://px.animaapp.com/623d20ec558488921de7a300.623d20eeecf12f908cda0a1b.cvUCosD.hcp.png");
.screen a {
display: contents;
text-decoration: none;
}
.container-center-horizontal {
display: flex;
flex-direction: row;
justify-content: center;
pointer-events: none;
width: 100%;
}
.container-center-horizontal > * {
flex-shrink: 0;
pointer-events: auto;
}
.valign-text-middle {
display: flex;
flex-direction: column;
justify-content: center;
}
* {
box-sizing: border-box;
}
:root {
--abbey: #4d4d4d;
--black: #000000;
--celeste: #d0d0d0;
--desert-storm: #f8f8f8;
--green: #1dce6c;
--sonic-silver: #757575;
--white: #ffffff;
--font-size-l: 12.1px;
--font-size-m: 12px;
--font-size-xl: 14px;
--font-size-xxl: 16px;
--font-size-xxxl: 20px;
--font-size-xxxxl: 24px;
--font-size-xxxxxl: 40px;
--font-family-lilita_one: "Lilita One", Helvetica;
--font-family-montserrat: "Montserrat", Helvetica;
}
.montserrat-normal-sonic-silver-12-1px {
color: var(--sonic-silver);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-l);
font-style: normal;
font-weight: 400;
}
.montserrat-semi-bold-abbey-14px {
color: var(--abbey);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-xl);
font-style: normal;
font-weight: 600;
}
.montserrat-normal-abbey-12px {
color: var(--abbey);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-m);
font-style: normal;
font-weight: 400;
}
.montserrat-normal-celeste-16px {
color: var(--celeste);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-xxl);
font-style: normal;
font-weight: 400;
}
.lilitaone-normal-white-70px {
color: var(--white);
font-family: var(--font-family-lilita_one);
font-size: 70px;
font-style: normal;
font-weight: 400;
}
.lilitaone-normal-white-40px {
color: var(--white);
font-family: var(--font-family-lilita_one);
font-size: var(--font-size-xxxxxl);
font-style: normal;
font-weight: 400;
}
.lilitaone-normal-green-24px {
color: var(--green);
font-family: var(--font-family-lilita_one);
font-size: var(--font-size-xxxxl);
font-style: normal;
font-weight: 400;
}
.montserrat-bold-green-14px {
color: var(--green);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-xl);
font-style: normal;
font-weight: 700;
}
.lilitaone-normal-sonic-silver-25-8px {
color: var(--sonic-silver);
font-family: var(--font-family-lilita_one);
font-size: 25.8px;
font-style: normal;
font-weight: 400;
}
.lilitaone-normal-abbey-40px {
color: var(--abbey);
font-family: var(--font-family-lilita_one);
font-size: var(--font-size-xxxxxl);
font-style: normal;
font-weight: 400;
}
.montserrat-normal-white-12-1px {
font-family: var(--font-family-montserrat);
font-size: var(--font-size-l);
font-style: normal;
font-weight: 400;
}
.montserrat-extra-bold-sonic-silver-12-1px {
color: var(--sonic-silver);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-l);
font-style: normal;
font-weight: 800;
}
.montserrat-bold-sonic-silver-12-1px {
color: var(--sonic-silver);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-l);
font-style: normal;
font-weight: 700;
}
.montserrat-bold-abbey-12-1px {
color: var(--abbey);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-l);
font-style: normal;
font-weight: 700;
}
.lilitaone-normal-sonic-silver-30px {
color: var(--sonic-silver);
font-family: var(--font-family-lilita_one);
font-size: 30px;
font-style: normal;
font-weight: 400;
}
.lilitaone-normal-white-30px {
color: var(--white);
font-family: var(--font-family-lilita_one);
font-size: 30px;
font-style: normal;
font-weight: 400;
}
.lilitaone-normal-green-28px {
color: var(--green);
font-family: var(--font-family-lilita_one);
font-size: 28px;
font-style: normal;
font-weight: 400;
}
.montserrat-bold-green-16px {
color: var(--green);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-xxl);
font-style: normal;
font-weight: 700;
}
.montserrat-bold-white-16px {
color: var(--white);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-xxl);
font-style: normal;
font-weight: 700;
}
.lilitaone-normal-white-24px {
color: var(--white);
font-family: var(--font-family-lilita_one);
font-size: var(--font-size-xxxxl);
font-style: normal;
font-weight: 400;
}
.montserrat-bold-white-14px {
color: var(--white);
font-family: var(--font-family-montserrat);
font-size: var(--font-size-xl);
font-style: normal;
font-weight: 700;
}
.border-1px-green {
border: 1px solid var(--green);
}
.border-1px-white {
border: 1px solid var(--white);
}
.border-3px-green {
border: 3px solid var(--green);
}
.border-0-7px-green {
border: 0.7px solid var(--green);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.