Replicate a section from another site in Upfront

Can you help me replicate this part - https://monosnap.com/file/OBx2KNXCbSHpuRoXXBRdMF3OvbxMnJ ( https://getriver.com/ ) into an Upfront theme? We tried copying the source code and redesigning it but it did not end well. I'm using the Fixer theme and my login details are available in the chat transcript.

  • Kris Tomczyk

    Hi rc_snowboarder,

    Hope you are doing good today. Your website is online so I'm not sure if I can edit it and leave what I've prepared.

    Here is the solution I have prepared.

    1. Download the attached file (launchkit-fonts.zip), unzip it and upload it to the directory: / wp-content / themes / uf-fixer / icon-fonts / (this are the fonts used for icons above the text in pink boxes)

    2. Go to Apperance -> Themes -> click Customize on Fixer theme

    3. Add new region where you will add thoose boxes. How to add new region: https://premium.wpmudev.org/blog/upfront-regions/

    4. From left sidebar choose CODE icon and drag and drop to your new region. Paste there a code:

    <section class="features features-15">
    <div class="row">
    <div class="col-sm-4 text-center feature">
    <i class="icon-speech-streamline-talk-user"></i>
    <h5 class="text-white">For Instagram Influencers</h5>
    
    <p class="text-white">Social Media Influencers ·
    Fashion Bloggers ·
    Lifestyle Bloggers ·
    Digital Nomads ·
    Celebrities
    </p>
    </div>
    
    <div class="col-sm-4 text-center feature">
    <i class="icon-bag-shopping-streamline"></i>
    <h5 class="text-white">For Businesses on Instagram<br></h5>
    
    <p class="text-white">
    Ecommerce · Restaurants · Cafes · Retailers ·
    Luxury · Jewelry · Fashion · Fitness · Design · Decor
    </p>
    </div>
    
    <div class="col-sm-4 text-center feature">
    <i class="icon-camera"></i>
    <h5 class="text-white">For Professionals on Instagram</h5>
    
    <p class="text-white">
    Photographers ·
    Artists ·
    Fitness Coaches ·
    Designers ·
    Models ·
    Musicians
    </p>
    </div>
    
    </div>
    </section>

    Of course edit text if you want, and save your theme

    5. Go to your dashboard to ADD CUSTOM CSS plugin and add this css code:

    /*Add font*/
    
    @font-face {
      font-family: "launchkit-fonts";
      src:url("https://influenceacademy.ca/wp-content/themes/uf-fixer/icon-fonts/launchkit-fonts.eot");
      src:url("https://influenceacademy.ca/wp-content/themes/uf-fixer/icon-fonts/launchkit-fonts.eot?#iefix") format("embedded-opentype"),
        url("https://influenceacademy.ca/wp-content/themes/uf-fixer/icon-fonts/launchkit-fonts.woff") format("woff"),
        url("https://influenceacademy.ca/wp-content/themes/uf-fixer/icon-fonts/launchkit-fonts.ttf") format("truetype"),
        url("https://influenceacademy.ca/wp-content/themes/uf-fixer/icon-fonts/launchkit-fonts.svg#launchkit-fonts") format("svg");
      font-weight: normal;
      font-style: normal;
    
    }
    
    [data-icon]:before {
      font-family: "launchkit-fonts" !important;
      content: attr(data-icon);
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    [class^="icon-"]:before,
    [class*=" icon-"]:before,
    .twitter-feed .slides li:before {
      font-family: "launchkit-fonts" !important;
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /*region padding 0 full width*/
    #upfront-region-container-3-banners1 .upfront-grid-layout {
      padding:0 !important;
      margin:0 !important;
      width:100%;}
    
    /*css for pink boxes*/
    .features-15 {
      padding: 0;
    }
    
    .features-15 .feature {
      padding: 80px 53.33333333px;
      background: #c956ae;
      transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      border: 1px solid #c956ae;
      height:400px;
    }
    
    .features-15 .feature:hover {
      transform: scale(1.05);
      -webkit-transform: scale(1.05);
      z-index: 20;
      box-shadow: 0 2px 5px 0 rgba(201, 86, 174, 0.26);
    }
    
    .features-15 .feature:nth-of-type(2) {
      background: #cf69b7;
    }
    
    .features-15 .feature:nth-of-type(3) {
      background: #d57dc1;
    }
    
    .features-15 i {
      color: #dc90ca;
      font-size: 80px;
      display: inline-block;
      margin-bottom: 40px;
    }
    
    .features-15 .feature:nth-of-type(2) i {
      color: #e2a3d3;
    }
    
    .features-15 .feature:nth-of-type(3) i {
      color: #e8b7dc;
    }
    
    .features-15 h5 {
      margin-bottom: 26.66666667px;
    }
    
    @media all and (max-width: 1280px) {
      .features-15 .feature {
        padding: 80px 40px;
      }
    }
    
    @media all and (max-width: 767px) {
      .features-15 .feature {
        padding: 40px;
        width:100%;
        clear:both;
        height:auto;
        border-bottom: 1px solid #dc90ca;
      }
      .features-15 .feature:hover {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
      .features-15 h5 {
        margin-bottom: 13.33333333px;
      }
    }
    
    .row{margin-right:-15px;margin-left:-15px}
    .row:after,.row:before{display:table;content:" "}
    .row:after{clear:both}
    
    .col-sm-4 {position:relative;min-height:1px;padding-right:15px;padding-left:15px}
    .col-sm-4 {float:left}
    .col-sm-4 {width:33.33333333%}
    
    .text-center{text-align:center}
    
    .icon-speech-streamline-talk-user:before {
      content: "\e001";
    }
    
    .icon-bag-shopping-streamline:before {
      content: "d";
    }
    
    .icon-camera:before {
      content: "\e036";
    }
    
    .text-white {
      color: #fff !important;
    }
    p.text-white a {
      color: #fff;
    }

    also change this in css
    #upfront-region-container-3-banners1 .upfront-grid-layout {
    upfront-region-container-3-banners1 - is a ID of your new region, you wil see it in your site source.

    After that you can refresh your page and see exacly the same boxes as on this site https://getriver.com.

    If you feel uncomfortable with that I can do it for you. I will need your FTP acceess. Please send it through our secure contact form here https://premium.wpmudev.org/contact/#i-have-a-different-question and make sure that subject is "I have a different question" and:
    - Mark to my attention: ATTN: Krzysztof Tomczyk
    - FTP credentials (host / username / password)
    - Link back to this thread

    Please confirm here in thread that you have sent that message. Also sending FTP acceess do not forget to extend support staff login.

    Kind Regards,
    Kris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.