<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 border-1px-green">
                <div class="phone-internet-bundles lilitaone-normal-green-28px">Hello &amp; 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 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 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">&nbsp;</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>
/* screen -  main-design*/

.main-design {
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  width: 80%;
  max-width: 1024px;
  min-height: 100vh;
  margin: 0 auto;
}

.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 .get-started {
  align-items: center;
  background-color: var(--white);
  padding: 36px 0;
}

.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-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: 20px auto 0 auto;
  text-align: center;
}

.main-design .plans {
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  height: 647px;
}

.main-design .plans-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 90%; 
  margin: 0 auto;
}

.main-design .frame {
  background-color: var(--white);
  border-radius: 10px;
  box-shadow: 0px 4px 4px #00000040;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 216px;
  min-width: 280px;
  padding: 39px 9px;
}

.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 .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 .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;
}

.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;
  text-align: center;
  width: 90%;
  margin: 1rem auto;
}

.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);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.