API tools faq
paste
Advertisement
rajuahammad73

BrookPreviewPage

rajuahammad73
Nov 2nd, 2020
166
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 75.97 KB | None | 0 0
raw download clone embed print report
  1. import React from 'react';
  2.  
  3. const PreviewPage = () => {
  4.     return (
  5.         <div className="template-color-1 template-font-1 preview-html">
  6.             <div id="page-preloader" className="page-loading clearfix">
  7.                 <div className="page-load-inner">
  8.                     <div className="preloader-wrap">
  9.                         <div className="wrap-2">
  10.                             <div><img src={require("../assets/img/icons/brook-preloader.gif")} alt="Brook Preloader"/></div>
  11.                         </div>
  12.                     </div>
  13.                 </div>
  14.             </div>
  15.             {/* Wrapper */}
  16.             <div id="wrapper" className="wrapper">
  17.                 {/* Header */}
  18.                 <header
  19.                     className="br_header header-default header-transparent black-logo--version haeder-fixed-width headroom--sticky header-mega-menu clearfix">
  20.                     <div className="container-fluid">
  21.                         <div className="row">
  22.                             <div className="col-12">
  23.                                 <div className="header__wrapper mr--0">
  24.                                     {/* Header Left */}
  25.                                     <div className="header-left">
  26.                                         <div className="logo">
  27.                                             <a href="index.html">
  28.                                                 <img src={require("../assets/img/logo/brook-black.png")} alt="Brook Images"/>
  29.                                             </a>
  30.                                         </div>
  31.                                     </div>
  32.                                     {/* Header Right */}
  33.                                     <div className="header-right">
  34.                                         <div className="preview-button d-none d-sm-block">
  35.                                             <a className="brook-btn bk-btn-white btn-sd-size btn-rounded space-between"
  36.                                                href="https://1.envato.market/c/417168/275988/4415?subId1=hastheme&subId2=demo&subId3=https%3A%2F%2Fthemeforest.net%2Fuser%2Fbootxperts%2Fportfolio&u=https%3A%2F%2Fthemeforest.net%2Fuser%2Fbootxperts%2Fportfolio"
  37.                                                target="_blank">Purchase</a>
  38.                                         </div>
  39.                                         {/* Start Hamburger */}
  40.                                         <div
  41.                                             className="manu-hamber popup-mobile-click d-block d-lg-none black-version d-block d-xl-none">
  42.                                             <div>
  43.                                                 <i/>
  44.                                             </div>
  45.                                         </div>
  46.                                     </div>
  47.                                     {/* End Hamburger */}
  48.                                 </div>
  49.                             </div>
  50.                         </div>
  51.                     </div>
  52.                 </header>
  53.                 {/*// Header */}
  54.                 {/* Start Slider Area */}
  55.                 <div className="slider-revolution">
  56.                     <div id="rev_slider_20_1_wrapper" className="rev_slider_wrapper fullwidthbanner-container"
  57.                          data-alias="landing-page" data-source="gallery" style={{
  58.                         margin: '0px auto',
  59.                         background: 'transparent',
  60.                         padding: 0,
  61.                         marginTop: 0,
  62.                         marginBottom: 0
  63.                     }}>
  64.                         {/* START REVOLUTION SLIDER 5.4.7 fullwidth mode */}
  65.                         <div id="rev_slider_20_1" className="rev_slider fullwidthabanner" style={{display: 'none'}}
  66.                              data-version="5.4.7">
  67.                             <ul>
  68.                                 {/* SLIDE  */}
  69.                                 <li data-index="rs-33" data-transition="fade" data-slotamount="default"
  70.                                     data-hideafterloop={0} data-hideslideonmobile="off" data-easein="default"
  71.                                     data-easeout="default" data-masterspeed={300} data-rotate={0}
  72.                                     data-saveperformance="off" data-title="Slide" data-param1 data-param2 data-param3
  73.                                     data-param4 data-param5 data-param6 data-param7 data-param8 data-param9 data-param10
  74.                                     data-description>
  75.                                     {/* MAIN IMAGE */}
  76.                                     <img src={require("../assets/img/revolution/brook-landing-new-slider-slide-bg.jpg")} alt
  77.                                          data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"
  78.                                          data-bgparallax="off" className="rev-slidebg" data-no-retina/>
  79.                                     {/* LAYERS */}
  80.                                     {/* LAYER NR. 1 */}
  81.                                     <div className="tp-caption tp-resizeme rs-parallaxlevel-3" id="slide-33-layer-13"
  82.                                          data-x="['right','right','right','right']"
  83.                                          data-hoffset="['820','263','263','238']"
  84.                                          data-y="['bottom','bottom','bottom','bottom']"
  85.                                          data-voffset="['202','146','146','109']" data-width="none" data-height="none"
  86.                                          data-whitespace="nowrap" data-type="image" data-basealign="slide"
  87.                                          data-responsive_offset="on"
  88.                                          data-frames="[{&quot;delay&quot;:300,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  89.                                          data-textalign="['inherit','inherit','inherit','inherit']"
  90.                                          data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  91.                                          data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
  92.                                          style={{zIndex: 5}}><img
  93.                                         src={require("../assets/img/revolution/brook-landing-new-slider-slide-image-01.png")} alt
  94.                                         data-ww="['237px','160px','160px','120px']"
  95.                                         data-hh="['280px','189px','189px','142px']" data-no-retina/>
  96.                                     </div>
  97.                                     {/* LAYER NR. 2 */}
  98.                                     <div className="tp-caption   tp-resizeme rs-parallaxlevel-2" id="slide-33-layer-14"
  99.                                          data-x="['right','right','right','right']"
  100.                                          data-hoffset="['71','1051','1051','1051']"
  101.                                          data-y="['bottom','bottom','bottom','bottom']"
  102.                                          data-voffset="['110','342','342','342']" data-width="none" data-height="none"
  103.                                          data-whitespace="nowrap" data-visibility="['on','off','off','off']"
  104.                                          data-type="image" data-basealign="slide" data-responsive_offset="on"
  105.                                          data-frames="[{&quot;delay&quot;:400,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  106.                                          data-textalign="['inherit','inherit','inherit','inherit']"
  107.                                          data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  108.                                          data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
  109.                                          style={{zIndex: 6}}><img
  110.                                         src={require("../assets/img/revolution/brook-landing-new-slider-slide-image-02.png")} alt
  111.                                         data-ww="['797px','610px','610px','610px']"
  112.                                         data-hh="['639px','489px','489px','489px']" data-no-retina/>
  113.                                     </div>
  114.                                     {/* LAYER NR. 3 */}
  115.                                     <div className="tp-caption   tp-resizeme rs-parallaxlevel-3" id="slide-33-layer-15"
  116.                                          data-x="['right','right','right','right']"
  117.                                          data-hoffset="['-138','-35','-35','24']"
  118.                                          data-y="['bottom','bottom','bottom','bottom']"
  119.                                          data-voffset="['484','161','161','131']" data-width="none" data-height="none"
  120.                                          data-whitespace="nowrap" data-type="image" data-basealign="slide"
  121.                                          data-responsive_offset="on"
  122.                                          data-frames="[{&quot;delay&quot;:500,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  123.                                          data-textalign="['inherit','inherit','inherit','inherit']"
  124.                                          data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  125.                                          data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
  126.                                          style={{zIndex: 7}}><img
  127.                                         src={require("../assets/img/revolution/brook-landing-new-slider-slide-image-03.png")} alt
  128.                                         data-ww="['493px','321px','321px','234px']"
  129.                                         data-hh="['443px','288px','288px','210px']" data-no-retina/>
  130.                                     </div>
  131.                                     {/* LAYER NR. 4 */}
  132.                                     <div className="tp-caption   tp-resizeme rs-parallaxlevel-2" id="slide-33-layer-16"
  133.                                          data-x="['right','right','right','right']"
  134.                                          data-hoffset="['664','1190','1190','1190']"
  135.                                          data-y="['bottom','bottom','bottom','bottom']"
  136.                                          data-voffset="['-212','230','230','230']" data-width="none" data-height="none"
  137.                                          data-whitespace="nowrap" data-visibility="['on','off','off','off']"
  138.                                          data-type="image" data-basealign="slide" data-responsive_offset="on"
  139.                                          data-frames="[{&quot;delay&quot;:600,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  140.                                          data-textalign="['inherit','inherit','inherit','inherit']"
  141.                                          data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  142.                                          data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
  143.                                          style={{zIndex: 8}}><img
  144.                                         src={require("../assets/img/revolution/brook-landing-new-slider-slide-image-04.png")} alt=""
  145.                                         data-ww="['493px','401px','401px','401px']"
  146.                                         data-hh="['443px','360px','360px','360px']" data-no-retina/>
  147.                                     </div>
  148.                                     {/* LAYER NR. 5 */}
  149.                                     <div className="tp-caption   tp-resizeme rs-parallaxlevel-3" id="slide-33-layer-17"
  150.                                          data-x="['right','right','right','right']"
  151.                                          data-hoffset="['189','143','143','141']"
  152.                                          data-y="['bottom','bottom','bottom','bottom']"
  153.                                          data-voffset="['-94','-165','-165','-223']" data-width="none"
  154.                                          data-height="none" data-whitespace="nowrap" data-type="image"
  155.                                          data-basealign="slide" data-responsive_offset="on"
  156.                                          data-frames="[{&quot;delay&quot;:700,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  157.                                          data-textalign="['inherit','inherit','inherit','inherit']"
  158.                                          data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  159.                                          data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
  160.                                          style={{zIndex: 9}}><img
  161.                                         src={require("../assets/img/revolution/brook-landing-new-slider-slide-image-05.png")} alt
  162.                                         data-ww="['511px','374px','374px','374px']"
  163.                                         data-hh="['460px','337px','337px','337px']" data-no-retina/>
  164.                                     </div>
  165.                                     {/* LAYER NR. 6 */}
  166.                                     <div className="tp-caption   tp-resizeme rs-parallaxlevel-2" id="slide-33-layer-18"
  167.                                          data-x="['right','right','right','right']"
  168.                                          data-hoffset="['-208','-122','-122','-121']"
  169.                                          data-y="['bottom','bottom','bottom','bottom']"
  170.                                          data-voffset="['145','-32','-32','-58']" data-width="none" data-height="none"
  171.                                          data-whitespace="nowrap" data-type="image" data-basealign="slide"
  172.                                          data-responsive_offset="on"
  173.                                          data-frames="[{&quot;delay&quot;:800,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  174.                                          data-textalign="['inherit','inherit','inherit','inherit']"
  175.                                          data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  176.                                          data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
  177.                                          style={{zIndex: 10}}><img
  178.                                         src={require("../assets/img/revolution/brook-landing-new-slider-slide-image-06.png")} alt
  179.                                         data-ww="['493px','313px','313px','313px']"
  180.                                         data-hh="['444px','282px','282px','282px']" data-no-retina/>
  181.                                     </div>
  182.                                     {/* LAYER NR. 8 */}
  183.                                     <div className="tp-caption  " id="slide-33-layer-20"
  184.                                          data-x="['left','left','left','left']" data-hoffset="['250','250','250','29']"
  185.                                          data-y="['bottom','bottom','bottom','bottom']"
  186.                                          data-voffset="['60','60','60','145']" data-width="none" data-height="none"
  187.                                          data-whitespace="nowrap" data-type="image" data-basealign="slide"
  188.                                          data-responsive_offset="off" data-responsive="off"
  189.                                          data-frames="[{&quot;delay&quot;:1000,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  190.                                          data-textalign="['inherit','inherit','inherit','inherit']"
  191.                                          data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  192.                                          data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
  193.                                          style={{zIndex: 12}}><img
  194.                                         src={require("../assets/img/revolution/brook-landing-new-slider-slide-logo-02.png")} alt
  195.                                         data-ww="['48px','48px','48px','48px']" data-hh="['55px','55px','55px','55px']"
  196.                                         data-no-retina/></div>
  197.                                     {/* LAYER NR. 9 */}
  198.                                     <div className="tp-caption  " id="slide-33-layer-1"
  199.                                          data-x="['left','left','center','center']" data-hoffset="['135','134','0','0']"
  200.                                          data-y="['middle','middle','top','top']"
  201.                                          data-voffset="['-135','-120','120','110']"
  202.                                          data-fontsize="['70','60','44','32']" data-lineheight="['88','77','58','40']"
  203.                                          data-width="['770','770','470','360']"
  204.                                          data-height="['177','177','none','none']" data-whitespace="normal"
  205.                                          data-type="text" data-basealign="slide" data-responsive_offset="off"
  206.                                          data-responsive="off"
  207.                                          data-frames="[{&quot;delay&quot;:400,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  208.                                          data-textalign="['left','left','center','center']" data-paddingtop="[0,0,0,0]"
  209.                                          data-paddingright="[0,0,0,0]" data-paddingbottom="[0,0,0,0]"
  210.                                          data-paddingleft="[0,0,0,0]" style={{
  211.                                         zIndex: 13,
  212.                                         minWidth: 770,
  213.                                         maxWidth: 177,
  214.                                         whiteSpace: 'normal',
  215.                                         fontSize: 70,
  216.                                         lineHeight: 88,
  217.                                         fontWeight: 700,
  218.                                         color: '#111111',
  219.                                         letterSpacing: 0
  220.                                     }}><b style={{color: '#0038E3'}}>React</b><span className="long-minus-2"> </span>Creative
  221.                                         Multipurpose
  222.                                     </div>
  223.                                     {/* LAYER NR. 10 */}
  224.                                     <div className="tp-caption  " id="slide-33-layer-11"
  225.                                          data-x="['left','left','center','center']" data-hoffset="['140','140','0','0']"
  226.                                          data-y="['middle','middle','top','top']" data-voffset="['23','23','260','220']"
  227.                                          data-width="['540','540','470','360']" data-height="none"
  228.                                          data-whitespace="normal" data-type="text" data-basealign="slide"
  229.                                          data-responsive_offset="off" data-responsive="off"
  230.                                          data-frames="[{&quot;delay&quot;:800,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  231.                                          data-textalign="['inherit','inherit','center','center']"
  232.                                          data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  233.                                          data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style={{
  234.                                         zIndex: 14,
  235.                                         minWidth: 540,
  236.                                         maxWidth: 540,
  237.                                         whiteSpace: 'normal',
  238.                                         fontSize: 16,
  239.                                         lineHeight: 30,
  240.                                         fontWeight: 500,
  241.                                         color: '#888888',
  242.                                         letterSpacing: 0
  243.                                     }}>A
  244.                                         versatile <strong>React</strong> Template for different purposes that emphasizes
  245.                                         creativity,
  246.                                         efficiency, and diversity.
  247.                                     </div>
  248.                                     {/* LAYER NR. 11 */}
  249.                                     <div className="tp-caption rev-btn " id="slide-33-layer-12"
  250.                                          data-x="['left','left','center','center']" data-hoffset="['140','140','0','0']"
  251.                                          data-y="['middle','middle','top','top']"
  252.                                          data-voffset="['135','135','355','340']" data-width={165} data-height={55}
  253.                                          data-whitespace="normal" data-type="button" data-basealign="slide"
  254.                                          data-responsive_offset="off" data-responsive="off"
  255.                                          data-frames="[{&quot;delay&quot;:1000,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;frame&quot;:&quot;hover&quot;,&quot;speed&quot;:&quot;0&quot;,&quot;ease&quot;:&quot;Linear.easeNone&quot;,&quot;to&quot;:&quot;o:1;rX:0;rY:0;rZ:0;z:0;&quot;,&quot;style&quot;:&quot;c:rgba(255,255,255,1);bs:solid;bw:0 0 0 0;&quot;}]"
  256.                                          data-textalign="['center','center','center','center']"
  257.                                          data-paddingtop="[0,0,0,0]" data-paddingright="[30,30,30,30]"
  258.                                          data-paddingbottom="[0,0,0,0]" data-paddingleft="[30,30,30,30]" style={{
  259.                                         zIndex: 15,
  260.                                         minWidth: 165,
  261.                                         maxWidth: 55,
  262.                                         whiteSpace: 'normal',
  263.                                         fontSize: 14,
  264.                                         lineHeight: 55,
  265.                                         fontWeight: 600,
  266.                                         color: 'rgba(255,255,255,1)',
  267.                                         letterSpacing: 'px',
  268.                                         backgroundColor: 'rgb(7,77,248)',
  269.                                         borderColor: 'rgb(7,77,248)',
  270.                                         borderRadius: '6px 6px 6px 6px',
  271.                                         outline: 'none',
  272.                                         boxShadow: 'none',
  273.                                         boxSizing: 'border-box',
  274.                                         MozBoxSizing: 'border-box',
  275.                                         WebkitBoxSizing: 'border-box',
  276.                                         cursor: 'pointer'
  277.                                     }}>Discover
  278.                                         now
  279.                                     </div>
  280.                                 </li>
  281.                             </ul>
  282.                             <div className="tp-bannertimer tp-bottom" style={{visibility: 'hidden !important'}}/>
  283.                         </div>
  284.                     </div>
  285.                     {/* END REVOLUTION SLIDER */}
  286.                 </div>
  287.                 {/* End Slider Area */}
  288.                 {/* Page Content */}
  289.                 <main className="page-content">
  290.                     {/* Start Service Area */}
  291.                     <div id="section3" className="pv-service-wrapper pt--95 pb--60">
  292.                         <div className="single-grid">
  293.                             <div className="inner">
  294.                                 <div className="title mb--20">
  295.                                     <h4>React Component Ready</h4>
  296.                                 </div>
  297.                                 <p className="bk_pra">We analyze &amp; anticipate your needs. Brook is the readymade
  298.                                     template with every aspects that you may need.</p>
  299.                             </div>
  300.                         </div>
  301.                         <div className="single-grid">
  302.                             <div className="inner">
  303.                                 <div className="title mb--20">
  304.                                     <h4>Mega Menu</h4>
  305.                                 </div>
  306.                                 <p className="bk_pra">Mega Menu is the door that has the entrance to every pages of your
  307.                                     site. It navigates things for bringing ease.</p>
  308.                             </div>
  309.                         </div>
  310.                         <div className="single-grid">
  311.                             <div className="inner">
  312.                                 <div className="title mb--20">
  313.                                     <h4>Parallax Rows &amp; Footers</h4>
  314.                                 </div>
  315.                                 <p className="bk_pra">Super sleek 3D parallax effects are built for Brook’s rows and
  316.                                     footers.</p>
  317.                             </div>
  318.                         </div>
  319.                         <div className="single-grid">
  320.                             <div className="inner">
  321.                                 <div className="title mb--20">
  322.                                     <h4>Infinite Loading</h4>
  323.                                 </div>
  324.                                 <p className="bk_pra">A scrolling style that makes content continuously loaded as users
  325.                                     scroll
  326.                                     down.</p>
  327.                             </div>
  328.                         </div>
  329.                     </div>
  330.                     {/* End Service Area */}
  331.                     {/* Start Main Demo Area  */}
  332.                     <div id="section1" className="pv-main-demo-pages background-marque2 pb--100">
  333.                         <div className="section-bg-text">
  334.                             <div className="container">
  335.                                 <div className="row">
  336.                                     <div className="col-lg-12">
  337.                                         <div className="demo-section-title text-center">
  338.                                             <h1>12 <sup>+</sup></h1>
  339.                                             <h2 className="mt--25 mb--15">Stunning Homepages</h2>
  340.                                             <p>Choose a homepage to start navigating Brook. Build
  341.                                                 strong &amp; impressive websites
  342.                                                 using Brook’s pre-made templates.</p>
  343.                                         </div>
  344.                                     </div>
  345.                                 </div>
  346.                             </div>
  347.                         </div>
  348.                         <div className="pv-masonry-wrapper bk-masonry-wrapper">
  349.                             <div className="masonry-button text-center mb--70">
  350.                                 <button data-filter="*" className="is-checked"><span className="filter-text">All</span>
  351.                                 </button>
  352.                                 <button data-filter=".cat--1"><span className="filter-text">Corporate</span></button>
  353.                                 <button data-filter=".cat--2"><span className="filter-text">Creative</span></button>
  354.                                 <button data-filter=".cat--3"><span className="filter-text">Portfolio</span></button>
  355.                             </div>
  356.                             <div className="preview-grid-metro masonry-list">
  357.                                 <div className="resizer"/>
  358.                                 {/* Start Single Portfolio */}
  359.                                 <div className="portfolio portfolio-33-33 cat--1">
  360.                                     <div className="poss_relative">
  361.                                         <div className="thumb">
  362.                                             <a target="_blank" href="/demo/home-business">
  363.                                                 <img src={require("../assets/img/preview-image/landing-page-home-business-preview.jpg")}
  364.                                                      alt="Portfolio Images"/>
  365.                                             </a>
  366.                                         </div>
  367.                                         <div className="pv-port-info">
  368.                                             <div className="info">
  369.                                                 <h5><a target="_blank" href="/demo/home-business">Business</a></h5>
  370.                                             </div>
  371.                                         </div>
  372.                                     </div>
  373.                                 </div>
  374.                                 {/* End Single Portfolio */}
  375.                                 {/* Start Single Portfolio */}
  376.                                 <div className="portfolio portfolio-33-33 cat--1">
  377.                                     <div className="poss_relative">
  378.                                         <div className="thumb">
  379.                                             <a target="_blank" href="index-creative-agency.html">
  380.                                                 <img
  381.                                                     src={require("../assets/img/preview-image/landing-page-home-creative-studio-preview.jpg")}
  382.                                                     alt="Portfolio Images"/>
  383.                                             </a>
  384.                                         </div>
  385.                                         <div className="pv-port-info">
  386.                                             <div className="info">
  387.                                                 <h5><a target="_blank" href="index-creative-agency.html">Creative
  388.                                                     Agency</a></h5>
  389.                                             </div>
  390.                                         </div>
  391.                                     </div>
  392.                                 </div>
  393.                                 {/* End Single Portfolio */}
  394.                                 {/* Start Single Portfolio */}
  395.                                 <div className="portfolio portfolio-33-33 cat--1">
  396.                                     <div className="poss_relative">
  397.                                         <div className="thumb">
  398.                                             <a target="_blank" href="index-digital-agency.html">
  399.                                                 <img
  400.                                                     src={require("../assets/img/preview-image/landing-page-home-digital-agency-preview.jpg")}
  401.                                                     alt="Portfolio Images"/>
  402.                                             </a>
  403.                                         </div>
  404.                                         <div className="pv-port-info">
  405.                                             <div className="info">
  406.                                                 <h5><a target="_blank" href="index-digital-agency.html">Digital
  407.                                                     Agency</a></h5>
  408.                                             </div>
  409.                                         </div>
  410.                                     </div>
  411.                                 </div>
  412.                                 {/* End Single Portfolio */}
  413.                                 {/* Start Single Portfolio */}
  414.                                 <div className="portfolio portfolio-33-33 cat--1">
  415.                                     <div className="poss_relative">
  416.                                         <div className="thumb">
  417.                                             <a target="_blank" href="index-authentic-studio.html">
  418.                                                 <img src={require("../assets/img/preview-image/landing-page-home-architecture-preview.jpg")}
  419.                                                      alt="Portfolio Images"/>
  420.                                             </a>
  421.                                         </div>
  422.                                         <div className="pv-port-info">
  423.                                             <div className="info">
  424.                                                 <h5><a target="_blank"
  425.                                                        href="index-authentic-studio.html">Architecture</a></h5>
  426.                                             </div>
  427.                                         </div>
  428.                                     </div>
  429.                                 </div>
  430.                                 {/* End Single Portfolio */}
  431.                                 {/* Start Single Portfolio */}
  432.                                 <div className="portfolio portfolio-33-33 cat--2">
  433.                                     <div className="poss_relative">
  434.                                         <div className="thumb">
  435.                                             <a target="_blank" href="index-authentic-studio.html"><img
  436.                                                 src={require("../assets/img/preview-image/landing-page-home-authentic-studio-preview.jpg")}
  437.                                                 alt="Portfolio Images"/></a>
  438.                                         </div>
  439.                                         <div className="pv-port-info">
  440.                                             <div className="info">
  441.                                                 <h5><a target="_blank" href="index-authentic-studio.html">Authentic
  442.                                                     Studio</a></h5>
  443.                                             </div>
  444.                                         </div>
  445.                                     </div>
  446.                                 </div>
  447.                                 {/* End Single Portfolio */}
  448.                                 {/* Start Single Portfolio */}
  449.                                 <div className="portfolio portfolio-33-33 cat--2">
  450.                                     <div className="poss_relative">
  451.                                         <div className="thumb">
  452.                                             <a target="_blank" href="index-design-studio.html">
  453.                                                 <img src={require("../assets/img/preview-image/landing-page-home-design-studio-preview.jpg")}
  454.                                                      alt="Portfolio Images"/>
  455.                                             </a>
  456.                                         </div>
  457.                                         <div className="pv-port-info">
  458.                                             <div className="info">
  459.                                                 <h5><a target="_blank" href="index-design-studio.html">Design Studio</a>
  460.                                                 </h5>
  461.                                             </div>
  462.                                         </div>
  463.                                     </div>
  464.                                 </div>
  465.                                 {/* End Single Portfolio */}
  466.                                 {/* Start Single Portfolio */}
  467.                                 <div className="portfolio portfolio-33-33 cat--1 cat--3">
  468.                                     <div className="poss_relative">
  469.                                         <div className="thumb">
  470.                                             <a target="_blank" href="index-creative-portfolio.html">
  471.                                                 <img
  472.                                                     src={require("../assets/img/preview-image/landing-page-home-creative-portfolio-preview.png")}
  473.                                                     alt="Portfolio Images"/>
  474.                                             </a>
  475.                                         </div>
  476.                                         <div className="pv-port-info">
  477.                                             <div className="info">
  478.                                                 <h5><a target="_blank" href="index-creative-portfolio.html">Creative
  479.                                                     Portfolio</a></h5>
  480.                                             </div>
  481.                                         </div>
  482.                                     </div>
  483.                                 </div>
  484.                                 {/* End Single Portfolio */}
  485.                                 {/* Start Single Portfolio */}
  486.                                 <div className="portfolio portfolio-33-33 cat--2">
  487.                                     <div className="poss_relative">
  488.                                         <div className="thumb">
  489.                                             <a target="_blank" href="index-revolutionary.html">
  490.                                                 <img src={require("../assets/img/preview-image/landing-page-home-revolutionary-preview.jpg")}
  491.                                                      alt="Portfolio Images"/>
  492.                                             </a>
  493.                                         </div>
  494.                                         <div className="pv-port-info">
  495.                                             <div className="info">
  496.                                                 <h5><a target="_blank" href="index-revolutionary.html">Revolutionary</a>
  497.                                                 </h5>
  498.                                             </div>
  499.                                         </div>
  500.                                     </div>
  501.                                 </div>
  502.                                 {/* End Single Portfolio */}
  503.                                 {/* Start Single Portfolio */}
  504.                                 <div className="portfolio portfolio-33-33 cat--3">
  505.                                     <div className="poss_relative">
  506.                                         <div className="thumb">
  507.                                             <a target="_blank" href="index-freelancer.html">
  508.                                                 <img src={require("../assets/img/preview-image/landing-page-home-freelancer-preview.jpg")}
  509.                                                      alt="Portfolio Images"/>
  510.                                             </a>
  511.                                         </div>
  512.                                         <div className="pv-port-info">
  513.                                             <div className="info">
  514.                                                 <h5><a target="_blank" href="index-freelancer.html">Freelancer</a></h5>
  515.                                             </div>
  516.                                         </div>
  517.                                     </div>
  518.                                 </div>
  519.                                 {/* End Single Portfolio */}
  520.                                 {/* Start Single Portfolio */}
  521.                                 <div className="portfolio portfolio-33-33 cat--3">
  522.                                     <div className="poss_relative">
  523.                                         <div className="thumb">
  524.                                             <a target="_blank" href="index-minimal-portfolio.html">
  525.                                                 <img
  526.                                                     src={require("../assets/img/preview-image/landing-page-home-minimal-portfolio-preview.jpg")}
  527.                                                     alt="Portfolio Images"/>
  528.                                             </a>
  529.                                         </div>
  530.                                         <div className="pv-port-info">
  531.                                             <div className="info">
  532.                                                 <h5><a target="_blank" href="index-minimal-portfolio.html">Minimal
  533.                                                     Portfolio</a></h5>
  534.                                             </div>
  535.                                         </div>
  536.                                     </div>
  537.                                 </div>
  538.                                 {/* End Single Portfolio */}
  539.                                 {/* Start Single Portfolio */}
  540.                                 <div className="portfolio portfolio-33-33 cat--1">
  541.                                     <div className="poss_relative">
  542.                                         <div className="thumb">
  543.                                             <a target="_blank" href="index-minimal-agency.html">
  544.                                                 <img
  545.                                                     src={require("../assets/img/preview-image/landing-page-home-minimal-agency-preview.jpg")}
  546.                                                     alt="Portfolio Images"/>
  547.                                             </a>
  548.                                         </div>
  549.                                         <div className="pv-port-info">
  550.                                             <div className="info">
  551.                                                 <h5><a target="_blank" href="index-minimal-agency.html">Minimal
  552.                                                     Agency</a></h5>
  553.                                             </div>
  554.                                         </div>
  555.                                     </div>
  556.                                 </div>
  557.                                 {/* End Single Portfolio */}
  558.                                 {/* Start Single Portfolio */}
  559.                                 <div className="portfolio portfolio-33-33 cat--3">
  560.                                     <div className="poss_relative">
  561.                                         <div className="thumb">
  562.                                             <a target="_blank" href="index-vertical-slider-portfolio.html">
  563.                                                 <img
  564.                                                     src={require("../assets/img/preview-image/landing-page-home-vertical-slide-portfolio-preview.jpg")}
  565.                                                     alt="Portfolio Images"/>
  566.                                             </a>
  567.                                         </div>
  568.                                         <div className="pv-port-info">
  569.                                             <div className="info">
  570.                                                 <h5><a target="_blank" href="index-vertical-slider-portfolio.html">Vertical
  571.                                                     Slide Portfolio</a></h5>
  572.                                             </div>
  573.                                         </div>
  574.                                     </div>
  575.                                 </div>
  576.                                 {/* End Single Portfolio */}
  577.                             </div>
  578.                         </div>
  579.                     </div>
  580.                     {/* End Main Demo Area */}
  581.                     {/* Start Portfolio Area */}
  582.                     <div id="section2" className="pv-portfolio-area">
  583.                         <div id="rev_slider_22_1_wrapper" className="rev_slider_wrapper fullwidthbanner-container"
  584.                              data-alias="landing-page-03" data-source="gallery" style={{
  585.                             margin: '0px auto',
  586.                             background: 'transparent',
  587.                             padding: 0,
  588.                             marginTop: 0,
  589.                             marginBottom: 0
  590.                         }}>
  591.                             {/* START REVOLUTION SLIDER 5.4.7 fullwidth mode */}
  592.                             <div id="rev_slider_22_1" className="rev_slider fullwidthabanner" style={{display: 'none'}}
  593.                                  data-version="5.4.7">
  594.                                 <ul>
  595.                                     {/* SLIDE  */}
  596.                                     <li data-index="rs-35" data-transition="parallaxtoleft,parallaxtoright"
  597.                                         data-slotamount="default,default" data-hideafterloop={0}
  598.                                         data-hideslideonmobile="off" data-easein="default,default"
  599.                                         data-easeout="default,default" data-masterspeed="default,default" data-thumb
  600.                                         data-rotate="0,0" data-saveperformance="off" data-title="Slide" data-param1
  601.                                         data-param2 data-param3 data-param4 data-param5 data-param6 data-param7
  602.                                         data-param8 data-param9 data-param10 data-description>
  603.                                         {/* MAIN IMAGE */}
  604.                                         <img src={require("../assets/img/revolution/transparent.png")} data-bgcolor="#f7f7f7"
  605.                                              style={{background: '#f7f7f7'}} alt data-bgposition="center center"
  606.                                              data-bgfit="cover" data-bgrepeat="no-repeat" className="rev-slidebg"
  607.                                              data-no-retina/>
  608.                                         {/* LAYERS */}
  609.                                         {/* LAYER NR. 1 */}
  610.                                         <div className="tp-caption   tp-resizeme" id="slide-35-layer-4"
  611.                                              data-x="['right','center','center','center']"
  612.                                              data-hoffset="['100','0','0','0']"
  613.                                              data-y="['bottom','bottom','bottom','bottom']"
  614.                                              data-voffset="['0','0','0','0']" data-width="none" data-height="none"
  615.                                              data-whitespace="nowrap" data-type="image" data-basealign="slide"
  616.                                              data-responsive_offset="on"
  617.                                              data-frames="[{&quot;delay&quot;:300,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  618.                                              data-textalign="['inherit','inherit','inherit','inherit']"
  619.                                              data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  620.                                              data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
  621.                                              style={{zIndex: 5}}><img
  622.                                             src={require("../assets/img/revolution/brook-landing-slider-03-slide-01-image-01.png")} alt
  623.                                             data-ww="['948px','500px','500px','365px']"
  624.                                             data-hh="['753px','397px','397px','290px']" data-no-retina/>
  625.                                         </div>
  626.                                         {/* LAYER NR. 2 */}
  627.                                         <div className="tp-caption  " id="slide-35-layer-1"
  628.                                              data-x="['left','center','center','center']"
  629.                                              data-hoffset="['170','0','0','0']" data-y="['middle','top','top','top']"
  630.                                              data-voffset="['-233','110','100','100']" data-width="none"
  631.                                              data-height="none" data-whitespace="nowrap" data-type="text"
  632.                                              data-basealign="slide" data-responsive_offset="off" data-responsive="off"
  633.                                              data-frames="[{&quot;delay&quot;:300,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  634.                                              data-textalign="['inherit','center','center','center']"
  635.                                              data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  636.                                              data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style={{
  637.                                             zIndex: 6,
  638.                                             whiteSpace: 'nowrap',
  639.                                             fontSize: 14,
  640.                                             lineHeight: 20,
  641.                                             fontWeight: 700,
  642.                                             color: '#a6a6a6',
  643.                                             letterSpacing: '3.5px',
  644.                                             textTransform: 'uppercase'
  645.                                         }}>Trying
  646.                                             brook’s blog
  647.                                         </div>
  648.                                         {/* LAYER NR. 3 */}
  649.                                         <div className="tp-caption display-your" id="slide-35-layer-2"
  650.                                              data-x="['left','center','center','center']"
  651.                                              data-hoffset="['170','0','0','0']" data-y="['middle','top','top','top']"
  652.                                              data-voffset="['-76','150','150','150']"
  653.                                              data-fontsize="['36','30','26','26']"
  654.                                              data-lineheight="['60','50','46','46']"
  655.                                              data-width="['500','500','400','360']" data-height="none"
  656.                                              data-whitespace="normal" data-type="text" data-basealign="slide"
  657.                                              data-responsive_offset="off" data-responsive="off"
  658.                                              data-frames="[{&quot;delay&quot;:600,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  659.                                              data-textalign="['inherit','center','center','center']"
  660.                                              data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  661.                                              data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style={{
  662.                                             zIndex: 7,
  663.                                             minWidth: 500,
  664.                                             maxWidth: 500,
  665.                                             whiteSpace: 'normal',
  666.                                             fontSize: 36,
  667.                                             lineHeight: 60,
  668.                                             fontWeight: 600,
  669.                                             color: '#111111',
  670.                                             letterSpacing: 0
  671.                                         }}>Display
  672.                                             your best articles in
  673.                                             a grid, masonry style, or an
  674.                                             unique minimal layout.
  675.                                         </div>
  676.                                         {/* LAYER NR. 4 */}
  677.                                         <div className="tp-caption display-range" id="slide-35-layer-3"
  678.                                              data-x="['left','center','center','center']"
  679.                                              data-hoffset="['170','0','0','0']" data-y="['middle','top','top','top']"
  680.                                              data-voffset="['85','330','320','320']"
  681.                                              data-width="['500','500','420','360']" data-height="none"
  682.                                              data-whitespace="normal" data-type="text" data-basealign="slide"
  683.                                              data-responsive_offset="off" data-responsive="off"
  684.                                              data-frames="[{&quot;delay&quot;:900,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  685.                                              data-textalign="['inherit','center','center','center']"
  686.                                              data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  687.                                              data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style={{
  688.                                             zIndex: 8,
  689.                                             minWidth: 500,
  690.                                             maxWidth: 500,
  691.                                             whiteSpace: 'normal',
  692.                                             fontSize: 16,
  693.                                             lineHeight: 30,
  694.                                             fontWeight: 500,
  695.                                             color: '#888888',
  696.                                             letterSpacing: 0
  697.                                         }}>A wide range of layouts for displaying your blogs and capture audiences’ attention
  698.                                         </div>
  699.                                     </li>
  700.                                     {/* SLIDE  */}
  701.                                     <li data-index="rs-36" data-transition="parallaxtotop,parallaxtobottom"
  702.                                         data-slotamount="default,default" data-hideafterloop={0}
  703.                                         data-hideslideonmobile="off" data-easein="default,default"
  704.                                         data-easeout="default,default" data-masterspeed="default,default" data-thumb
  705.                                         data-rotate="0,0" data-saveperformance="off" data-title="Slide" data-param1
  706.                                         data-param2 data-param3 data-param4 data-param5 data-param6 data-param7
  707.                                         data-param8 data-param9 data-param10 data-description>
  708.                                         {/* MAIN IMAGE */}
  709.                                         <img src={require("../assets/img/revolution/transparent.png")} data-bgcolor="#f7f7f7"
  710.                                              style={{background: '#f7f7f7'}} alt data-bgposition="center center"
  711.                                              data-bgfit="cover" data-bgrepeat="no-repeat" className="rev-slidebg"
  712.                                              data-no-retina/>
  713.                                         {/* LAYERS */}
  714.                                         {/* LAYER NR. 5 */}
  715.                                         <div className="tp-caption   tp-resizeme" id="slide-36-layer-4"
  716.                                              data-x="['right','center','center','center']"
  717.                                              data-hoffset="['100','0','0','0']"
  718.                                              data-y="['bottom','bottom','bottom','bottom']"
  719.                                              data-voffset="['0','0','0','0']" data-width="none" data-height="none"
  720.                                              data-whitespace="nowrap" data-type="image" data-basealign="slide"
  721.                                              data-responsive_offset="on"
  722.                                              data-frames="[{&quot;delay&quot;:300,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  723.                                              data-textalign="['inherit','inherit','inherit','inherit']"
  724.                                              data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  725.                                              data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]"
  726.                                              style={{zIndex: 5}}><img
  727.                                             src={require("../assets/img/revolution/brook-landing-slider-03-slide-02-image-01.png")} alt
  728.                                             data-ww="['913','500px','500px','350px']"
  729.                                             data-hh="['715','392px','392px','274px']" data-no-retina/></div>
  730.                                         {/* LAYER NR. 6 */}
  731.                                         <div className="tp-caption  " id="slide-36-layer-1"
  732.                                              data-x="['left','center','center','center']"
  733.                                              data-hoffset="['170','0','0','0']" data-y="['middle','top','top','top']"
  734.                                              data-voffset="['-233','110','100','100']" data-width="none"
  735.                                              data-height="none" data-whitespace="nowrap" data-type="text"
  736.                                              data-basealign="slide" data-responsive_offset="off" data-responsive="off"
  737.                                              data-frames="[{&quot;delay&quot;:300,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  738.                                              data-textalign="['inherit','center','center','center']"
  739.                                              data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  740.                                              data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style={{
  741.                                             zIndex: 6,
  742.                                             whiteSpace: 'nowrap',
  743.                                             fontSize: 14,
  744.                                             lineHeight: 20,
  745.                                             fontWeight: 700,
  746.                                             color: '#a6a6a6',
  747.                                             letterSpacing: '3.5px',
  748.                                             textTransform: 'uppercase'
  749.                                         }}>Brook’s
  750.                                             portfolio
  751.                                         </div>
  752.                                         {/* LAYER NR. 7 */}
  753.                                         <div className="tp-caption  " id="slide-36-layer-2"
  754.                                              data-x="['left','center','center','center']"
  755.                                              data-hoffset="['170','0','0','0']" data-y="['middle','top','top','top']"
  756.                                              data-voffset="['-76','150','150','150']"
  757.                                              data-fontsize="['36','30','26','26']"
  758.                                              data-lineheight="['60','50','46','46']"
  759.                                              data-width="['570','500','440','380']" data-height="none"
  760.                                              data-whitespace="normal" data-type="text" data-basealign="slide"
  761.                                              data-responsive_offset="off" data-responsive="off"
  762.                                              data-frames="[{&quot;delay&quot;:600,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  763.                                              data-textalign="['inherit','center','center','center']"
  764.                                              data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  765.                                              data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style={{
  766.                                             zIndex: 7,
  767.                                             minWidth: 570,
  768.                                             maxWidth: 570,
  769.                                             whiteSpace: 'normal',
  770.                                             fontSize: 36,
  771.                                             lineHeight: 60,
  772.                                             fontWeight: 600,
  773.                                             color: '#111111',
  774.                                             letterSpacing: 0
  775.                                         }}>Fully
  776.                                             optimized &amp; customizable portfolio samples, visually bold
  777.                                             design &amp; scrolling
  778.                                             effects
  779.                                         </div>
  780.                                         {/* LAYER NR. 8 */}
  781.                                         <div className="tp-caption  " id="slide-36-layer-3"
  782.                                              data-x="['left','center','center','center']"
  783.                                              data-hoffset="['170','0','0','0']" data-y="['middle','top','top','top']"
  784.                                              data-voffset="['85','330','320','360']"
  785.                                              data-width="['500','500','420','360']" data-height="none"
  786.                                              data-whitespace="normal" data-type="text" data-basealign="slide"
  787.                                              data-responsive_offset="off" data-responsive="off"
  788.                                              data-frames="[{&quot;delay&quot;:900,&quot;speed&quot;:1500,&quot;frame&quot;:&quot;0&quot;,&quot;from&quot;:&quot;y:50px;opacity:0;&quot;,&quot;to&quot;:&quot;o:1;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;},{&quot;delay&quot;:&quot;wait&quot;,&quot;speed&quot;:300,&quot;frame&quot;:&quot;999&quot;,&quot;to&quot;:&quot;opacity:0;&quot;,&quot;ease&quot;:&quot;Power3.easeInOut&quot;}]"
  789.                                              data-textalign="['inherit','center','center','center']"
  790.                                              data-paddingtop="[0,0,0,0]" data-paddingright="[0,0,0,0]"
  791.                                              data-paddingbottom="[0,0,0,0]" data-paddingleft="[0,0,0,0]" style={{
  792.                                             zIndex: 8,
  793.                                             minWidth: 500,
  794.                                             maxWidth: 500,
  795.                                             whiteSpace: 'normal',
  796.                                             fontSize: 16,
  797.                                             lineHeight: 30,
  798.                                             fontWeight: 500,
  799.                                             color: '#888888',
  800.                                             letterSpacing: 0
  801.                                         }}>Get
  802.                                             your readers familiar with your business’ featured projects and
  803.                                             achievements.
  804.                                         </div>
  805.                                     </li>
  806.                                 </ul>
  807.                                 <div className="tp-bannertimer tp-bottom" style={{visibility: 'hidden !important'}}/>
  808.                             </div>
  809.                         </div>
  810.                         {/* END REVOLUTION SLIDER */}
  811.                     </div>
  812.                     {/* End Portfolio Area */}
  813.                     {/* Start Template Layout */}
  814.                     <div className="pv-template-layout layout-bg pb--160">
  815.                         <div className="container">
  816.                             <div className="row">
  817.                                 <div className="col-lg-12">
  818.                                     <div
  819.                                         className="brook-section-title pt--170 pb--130 text-center pt_lg--120 pb_lg--50 pt_md--120 pb_md--50 pt_sm--120 pb_sm--50">
  820.                                         <img src={require("../assets/img/preview-image/brook-landing-immensity-of-template.png")}
  821.                                              alt="Multipurpose"/>
  822.                                     </div>
  823.                                 </div>
  824.                             </div>
  825.                         </div>
  826.                         <div className="pv-feature-area">
  827.                             {/* Start Flexible Slide */}
  828.                             <div
  829.                                 className="flexale-image slick-arrow-hover mt--100 preview-flexable plr_sm--30 plr_md--30 mt_sm--50">
  830.                                 <div className="row">
  831.                                     <div className="col-lg-12">
  832.                                         <div
  833.                                             className="brook-element-carousel slick-arrow-center slick-dots-bottom slick-gutter-40"
  834.                                             data-slick-options="{
  835.                                    &quot;spaceBetween&quot;: 40,
  836.                                    &quot;slidesToShow&quot;: 3,
  837.                                    &quot;slidesToScroll&quot;: 1,
  838.                                    &quot;arrows&quot;: false,
  839.                                    &quot;infinite&quot;: true,
  840.                                    &quot;dots&quot;: true
  841.                                }" data-slick-responsive="[
  842.                                {&quot;breakpoint&quot;:768, &quot;settings&quot;: {&quot;slidesToShow&quot;: 3}},
  843.                                {&quot;breakpoint&quot;:861, &quot;settings&quot;: {&quot;slidesToShow&quot;: 2}},
  844.                                {&quot;breakpoint&quot;:577, &quot;settings&quot;: {&quot;slidesToShow&quot;: 1}}
  845.                                ]">
  846.                                             {/* Start Single Image */}
  847.                                             <div className="flexale-image">
  848.                                                 <div className="thumb">
  849.                                                     <img
  850.                                                         src={require("../assets/img/preview-image/carousel/brook-landing-gallery-new-image-02.jpg")}
  851.                                                         alt="image"/>
  852.                                                 </div>
  853.                                             </div>
  854.                                             {/* End Single Image */}
  855.                                             {/* Start Single Image */}
  856.                                             <div className="flexale-image">
  857.                                                 <div className="thumb">
  858.                                                     <img
  859.                                                         src={require("../assets/img/preview-image/carousel/brook-landing-gallery-new-image-03.jpg")}
  860.                                                         alt="image"/>
  861.                                                 </div>
  862.                                             </div>
  863.                                             {/* End Single Image */}
  864.                                             {/* Start Single Image */}
  865.                                             <div className="flexale-image">
  866.                                                 <div className="thumb">
  867.                                                     <img
  868.                                                         src={require("../assets/img/preview-image/carousel/brook-landing-gallery-new-image-04.jpg")}
  869.                                                         alt="image"/>
  870.                                                 </div>
  871.                                             </div>
  872.                                             {/* End Single Image */}
  873.                                             {/* Start Single Image */}
  874.                                             <div className="flexale-image">
  875.                                                 <div className="thumb">
  876.                                                     <img
  877.                                                         src={require("../assets/img/preview-image/carousel/brook-landing-gallery-new-image-05.jpg")}
  878.                                                         alt="image"/>
  879.                                                 </div>
  880.                                             </div>
  881.                                             {/* End Single Image */}
  882.                                             {/* Start Single Image */}
  883.                                             <div className="flexale-image">
  884.                                                 <div className="thumb">
  885.                                                     <img
  886.                                                         src={require("../assets/img/preview-image/carousel/brook-landing-gallery-new-image-06.jpg")}
  887.                                                         alt="image"/>
  888.                                                 </div>
  889.                                             </div>
  890.                                             {/* End Single Image */}
  891.                                             {/* Start Single Image */}
  892.                                             <div className="flexale-image">
  893.                                                 <div className="thumb">
  894.                                                     <img
  895.                                                         src={require("../assets/img/preview-image/carousel/brook-landing-gallery-new-image-07.jpg")}
  896.                                                         alt="image"/>
  897.                                                 </div>
  898.                                             </div>
  899.                                             {/* End Single Image */}
  900.                                             {/* Start Single Image */}
  901.                                             <div className="flexale-image">
  902.                                                 <div className="thumb">
  903.                                                     <img
  904.                                                         src={require("../assets/img/preview-image/carousel/brook-landing-gallery-new-image-08.jpg")}
  905.                                                         alt="image"/>
  906.                                                 </div>
  907.                                             </div>
  908.                                             {/* End Single Image */}
  909.                                         </div>
  910.                                     </div>
  911.                                 </div>
  912.                             </div>
  913.                             {/* End Flexable Slide */}
  914.                         </div>
  915.                     </div>
  916.                     {/* End Template Layout */}
  917.                     {/* Start Call To Action */}
  918.                     <div className="brook-call-to-action pv-footer-area">
  919.                         <div className="footer-bg-2 pb--100 pt--140">
  920.                             <div className="container">
  921.                                 <div className="row align-items-center">
  922.                                     <div className="col-lg-12 col-12">
  923.                                         <div className="call-content vertical-call-toaction text-center">
  924.                                             <h2 className="heading heading-h2 font-50 text-white">Feeling in love? <span
  925.                                                 className="playfair-font text-italic">Purchase Brook !</span></h2>
  926.                                             <div className="desk mt--30 mb--55">
  927.                                                 <p className="bk_pra text-white font-20">Impressive design, powerful
  928.                                                     features, and easy customization</p>
  929.                                             </div>
  930.                                             <div className="call-btn text-center">
  931.                                                 <a className="brook-btn bk-btn-white btn-sd-size btn-rounded space-between"
  932.                                                    href="https://1.envato.market/c/417168/275988/4415?subId1=hastheme&subId2=demo&subId3=https%3A%2F%2Fthemeforest.net%2Fuser%2Fbootxperts%2Fportfolio&u=https%3A%2F%2Fthemeforest.net%2Fuser%2Fbootxperts%2Fportfolio"
  933.                                                    target="_blank">Purchase Now</a>
  934.                                             </div>
  935.                                         </div>
  936.                                     </div>
  937.                                 </div>
  938.                             </div>
  939.                         </div>
  940.                     </div>
  941.                     {/* End Call To Action */}
  942.                 </main>
  943.                 {/*// Page Content */}
  944.             </div>
  945.         </div>
  946.     );
  947. };
  948.  
  949. export default PreviewPage;
  950.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!