Custom Pages : DocketManager

Use the attached files to copy the examples shown in our 'Custom Pages' Blog Post.

About Us 1:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>\
.bkg-img \{\
background-color:#000;\
background-image:url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');\
width:100%;\
background-position:center center;\
background-size:cover;\
\
\}\
.bkg-img h1 \{\
color:#fff;\
font-size:60px;\
text-align:center;\
text-shadow: 1px 1px 3px #000;\
padding: 80px 0px;\
background-color: rgba(0,0,0,0.5);\
margin:0px;\
\}\
</style><div class="bkg-img"><h1>ABOUT US</h1></div><div class="container2">\
  <h2><br>We are Pixel Print<br><br></h2>\
\
\
  <ul class="nav nav-tabs">\
    <li class="active"><a data-toggle="tab" href="#home">Our Story</a></li>\
    <li><a data-toggle="tab" href="#menu1">What we can do for you</a></li>\
    <li><a data-toggle="tab" href="#menu2">FAQ</a></li>\
    <li><a data-toggle="tab" href="#menu3">Careers</a></li>\
  </ul>\
\
  <div class="tab-content">\
    <div id="home" class="tab-pane fade in active">\
      <h3>Our Story</h3>\
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\
<br><br>\
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>\
    </div>\
    <div id="menu1" class="tab-pane fade">\
      <h3>What we can do for you</h3>\
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\
    </div>\
    <div id="menu2" class="tab-pane fade">\
      <h3>FAQ</h3>\
      <p>\
<strong>Question 1</strong><br>\
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>\
<p>\
<strong>Question 2</strong><br>\
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>\
<p>\
<strong>Question 3</strong><br>\
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>\
    </div>\
    <div id="menu3" class="tab-pane fade">\
      <h3>Careers</h3>\
       <p>\
<strong>Job Position</strong><br>\
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\
<ul>\
<li>Lorem ipsum</li>\
<li>dolor sit amet</li>\
<li>consectetur adipiscing</li>\
<li>sed do eiusmod</li>\
</ul> </p>\
<a href="mailto:support@docketmanager.ca"><h4 style="color:#000;border:1px solid #000;width:200px;padding:8px 0px;text-align:center;margin:20px auto 20px auto;"> Apply Now </h4></a>\
    </div>\
  </div>\
</div>}

About Us 2:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww13540\viewh9440\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>\
.page-portalpage-d0eb25cc-7463-4b45-a48a-9bdcde37e62e  h1 \{\
font-weight:600;\
font-size:44px;\
color:#fff;\
margin-top:10px;\
\}\
.page-portalpage-d0eb25cc-7463-4b45-a48a-9bdcde37e62e  h3 \{\
margin-top:0px;\
\}\
.page-portalpage-d0eb25cc-7463-4b45-a48a-9bdcde37e62e.inside-page-content \{\
margin:0px ;\
padding:0px;\
background:#261E34;\
color:#fff;\
\
\}\
.page-portalpage-d0eb25cc-7463-4b45-a48a-9bdcde37e62e  .logodisplay-container \{\
max-width:100%;\
text-align:center;\
\}\
.page-portalpage-d0eb25cc-7463-4b45-a48a-9bdcde37e62e  .logodisplay-container img \{\
max-width:200px;\
\}\
.page-portalpage-d0eb25cc-7463-4b45-a48a-9bdcde37e62e  .inside-page-content a  \{\
color:#fff;\
\}\
.page-portalpage-d0eb25cc-7463-4b45-a48a-9bdcde37e62e  .fab \{\
padding:10px;\
\}\
.page-portalpage-d0eb25cc-7463-4b45-a48a-9bdcde37e62e .container.page-content \{\
width:100%;\
padding:0px;\
margin:0px;\
\}\
\
.page-portalpage-d0eb25cc-7463-4b45-a48a-9bdcde37e62e .geometricbar \{\
    max-width: 100%;\
    margin-top: -200px;\
    margin-bottom: -50px;\
    z-index: 2;\
    position: relative;\
\}\
.pic \{\
background-image:url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');\
background-size:cover;\
background-position:center center;\
height:600px;\
\}\
.text\{\
color:#fff;\
\}\
</style>\
<div class="row no-padding">\
<div class="col-md-6 no-padding pic">\
</div>\
\
\
\
\
\
\
\
<div class="col-md-6 no-padding text">\
\
\
\
\
<div style="padding:0px 120px 0px 90px;">\
<h1>About Us</h1>\
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  </p>\
\
<br>\
<i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i><i class="fab fa-google fa-lg"></i></div></div>\
<div class="row" style="text-align:center;padding-top:50px;">\{\{LogoDisplay\}\}</div>}

About Us 3:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>\
.inside-page-content \{\
background-color:#fff;\
\}\
\
.bkg-img \{\
background-image:url('https://images.unsplash.com/photo-1528698827591-e19ccd7bc23d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80');\
background-size:cover;\
  position: relative;\
height:auto;\
background-position:center center;\
width:100%;\
\}\
.page-portalpage-4af24f16-62a1-4cc3-baa3-e33e65355f3b .container.page-content \{\
width:100%;\
padding:0px;\
margin:0px;\
\}\
.page-portalpage-4af24f16-62a1-4cc3-baa3-e33e65355f3b \{font-family: Arial, Helvetica, sans-serif;\}\
\
.text \{\
  background-color: white;\
  color: black;\
  font-size: 6em; \
  font-weight: 900;\
  margin: 0px auto;\
  padding:120px 0px;\
  width: 40%;\
  text-align: center;\
  mix-blend-mode: screen;\
\}\
</style><div class="bkg-img"><div class="text">ABOUT US</div></div>\
\
<div class="row no-padding">\
\
\
\
\
\
\
\
\
\
\
\
\
\
<div style="padding:40px 15%;">\
<h1>About Us</h1><br>\
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>\
\
<br>\
</div></div>}

Contact Us 1:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>\
h1 \{\
font-weight:500;\
font-size:48px;\
margin-bottom:0px;\
\}\
h3 \{\
margin-top:0px;\
\}\
p\{\
color:#000;\
\}</style><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2918.613936340601!2d-81.25186508452376!3d42.986405479149774!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882ef202e68c8633%3A0xbac820ea4df03074!2s195 Dufferin Ave%2C London%2C ON N6A 3E6!5e0!3m2!1sen!2sca!4v1562683438815!5m2!1sen!2sca"  height="250" frameborder="0" style="border:0;width:100%;" allowfullscreen></iframe>\
\
\
\
\
\
\
\
\
\
<div class="container2">\
<div class="row" style="text-align:center;"><h1>Contact Us</h1></div>\
<hr style="width:320px;text-align:center;" />\
<div class="row" style="padding:30px 0px;">\
<div class="col-md-2 col-sm-0"></div>\
<div class="col-md-1"><i class="fas fa-map-marker-alt fa-2x"></i></div>\
<div class="col-md-4"><h3>Address</h3>\
<p>195 Dufferin Ave<br> London, ON &nbsp; N6A 3E6</p></div><div class="col-md-1"><i class="fas fa-phone fa-2x"></i></div><div class="col-md-4"><h3>Phone</h3>\
<p><a href="tel:5196401115">519-640-1115</a><br>\
<a href="tel:18774478519">1-877-447-8519</a></p></div>\
</div>\
<div class="row">\
<div class="col-md-2 col-sm-0"></div>\
<div class="col-md-1"><i class="fas fa-envelope fa-2x"></i></div>\
<div class="col-md-4"><h3>Email</h3>\
<p><a href="mailto:support@docketmanager.ca">support@docketmanager.ca</a></p></div><div class="col-md-1"><i class="fas fa-clock fa-2x"></i></div><div class="col-md-4"><h3>Hours</h3>\
<p>Monday - Friday: 9am - 5pm EST</p></div>\
</div></div>}

Contact Us 2:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>\
h1 \{\
font-weight:500;\
font-size:40px;\
margin-bottom:0px;\
\}\
h3 \{\
margin-top:0px;\
\}\
p\{\
color:#000;\
\}\
.overlay \{\
position:absolute;\
left:0;\
top:30%;\
background-color:#fff;\
  box-shadow:         2px 2px 13px 5px #2b2b2b;\
min-width: 40%;\
\}\
.inside-page-content \{\
margin:0px ;\
padding:0px;\
\}\
</style><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2918.613936340601!2d-81.25186508452376!3d42.986405479149774!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882ef202e68c8633%3A0xbac820ea4df03074!2s195 Dufferin Ave%2C London%2C ON N6A 3E6!5e0!3m2!1sen!2sca!4v1562683438815!5m2!1sen!2sca" frameborder="0" style="border:0;width:100%;    height: calc(100vh - 109px);" allowfullscreen></iframe>\
\
\
\
\
\
\
\
\
<div class="overlay">\
\
<div class="row" style="text-align:center;"><h1>Contact Us</h1></div>\
<hr style="width:320px;text-align:center;" />\
<div class="row" style="padding:15px 0px 20px;">\
<div class="col-md-1 col-sm-0"></div>\
<div class="col-md-1"><i class="fas fa-map-marker-alt fa-lg"></i></div>\
<div class="col-md-4"><h3>Address</h3>\
<p>195 Dufferin Ave<br> London, ON &nbsp; N6A 3E6</p></div><div class="col-md-1"><i class="fas fa-phone fa-lg"></i></div><div class="col-md-4"><h3>Phone</h3>\
<p><a href="tel:5196401115">519-640-1115</a><br>\
<a href="tel:18774478519">1-877-447-8519</a></p></div>\
<div class="col-md-1 col-sm-0"></div>\
</div>\
\
<div class="row" style="padding-bottom:15px;">\
<div class="col-md-1 col-sm-0"></div>\
<div class="col-md-1"><i class="fas fa-envelope fa-lg"></i></div>\
<div class="col-md-4"><h3>Email</h3>\
<p><a href="mailto:support@docketmanager.ca">support@docketmanager.ca</a></p></div><div class="col-md-1"><i class="fas fa-clock fa-lg"></i></div><div class="col-md-4"><h3>Hours</h3>\
<p>Monday - Friday:<br>9am - 5pm EST</p></div>\
<div class="col-md-1 col-sm-0"></div>\
</div></div>}

Contact Us 3:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>\
h1 \{\
font-weight:500;\
font-size:40px;\
margin-bottom:0px;\
\}\
h3 \{\
margin-top:0px;\
\}\
.inside-page-content \{\
margin:0px ;\
padding:0px;\
background:#000;\
color:#fff;\
text-align:center;\
\}\
.logodisplay-container \{\
max-width:100%;\
text-align:center;\
\}\
.logodisplay-container img \{\
max-width:300px;\
\}\
.inside-page-content a  \{\
color:#fff;\
\}\
.fab \{\
padding:10px;\
\}\
</style>\
<div class="row no-padding">\
<div class="col-md-6 no-padding"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2918.613936340601!2d-81.25186508452376!3d42.986405479149774!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882ef202e68c8633%3A0xbac820ea4df03074!2s195 Dufferin Ave%2C London%2C ON N6A 3E6!5e0!3m2!1sen!2sca!4v1562683438815!5m2!1sen!2sca" frameborder="0" style="border:0;width:100%;    height: calc(100vh - 109px);" allowfullscreen></iframe>\
</div>\
\
\
\
\
\
\
\
<div class="col-md-6">\
\
<div class="row" style="text-align:center;padding-top:20%;">\{\{LogoDisplay\}\}</div>\
<hr style="width:320px;text-align:center;" />\
<p>195 Dufferin Ave / London, ON &nbsp; N6A 3E6<br>\
<a href="#">519-640-1115</a> / <a href="#">support@docketmanager.ca</a></p>\
<a href="https://www.google.com/maps?ll=42.986406,-81.249676&z=17&t=m&hl=en&gl=CA&mapclient=embed&daddr=195 Dufferin Ave London, ON N6A 3E6@42.9864055,-81.2496764" target="_blank"><h4 style="color:#fff;border:1px solid #fff;width:200px;padding:8px 0px;text-align:center;margin:20px auto 20px auto;"> Get Directions </h4></a>\
\
<i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i><i class="fab fa-google fa-lg"></i>}

Staff Page 1:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>\
\
.column \{\
  float: left;\
  width: 25%;\
  margin-bottom: 16px;\
  padding: 0 8px;\
\}\
\
@media screen and (max-width: 650px) \{\
  .column \{\
    width: 100%;\
    display: block;\
  \}\
\}\
\
.card \{\
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\
\}\
\
\
.container::after, .row::after \{\
  content: "";\
  clear: both;\
  display: table;\
\}\
\
.title \{\
  color: #2b2b2b;\
\}\
\
.button \{\
  border: none;\
  outline: 0;\
  display: inline-block;\
  padding: 8px;\
  color: white;\
  background-color: #2b2b2b;\
  text-align: center;\
  cursor: pointer;\
  width: 100%;\
\}\
\
.button:hover \{\
  background-color: #000;\
\}\
</style>\
\
\
<h2>Meet The Team</h2>\
<p>We are so thankful for our team, their talents, and our work atmosphere. <br>\
These are the people that make us great.</p>\
<br>\
\
<div class="row">\
  <div class="column">\
    <div class="card">\
      <div style="width:100%; height:200px; background-image: url('https://images.unsplash.com/photo-1559548331-f9cb98001426?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');background-size:cover;"></div>\
      <div class="container">\
        <h2>John Sample</h2>\
        <p class="title">CEO & Founder</p>\
        \
        <p>example@example.com</p>\
        <p><button class="button">Contact</button></p>\
      </div>\
    </div>\
  </div>\
\
  <div class="column">\
    <div class="card">\
      <div style="width:100%; height:200px; background-image: url('https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');background-size:cover;"></div>\
      <div class="container">\
        <h2>Mike Ross</h2>\
        <p class="title">Art Director</p>\
      \
        <p>example@example.com</p>\
        <p><button class="button">Contact</button></p>\
      </div>\
    </div>\
  </div>\
  <div class="column">\
    <div class="card">\
<div style="width:100%; height:200px; background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80');background-size:cover;background-position:0px 20%;"></div>\
    \
      <div class="container">\
        <h2>Jane Smith</h2>\
        <p class="title"> Graphic Designer</p>\
     \
        <p>example@example.com</p>\
        <p><button class="button">Contact</button></p>\
      </div>\
    </div>\
  </div>\
<div class="column">\
    <div class="card">\
     <div style="width:100%; height:200px; background-image: url('https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');background-size:cover;"></div>\
      <div class="container">\
        <h2>Chris Mann</h2>\
        <p class="title">Press Operator</p>\
       \
        <p>example@example.com</p>\
        <p><button class="button">Contact</button></p>\
      </div>\
    </div>\
  </div>\
</div>\
<div class="row">\
  <div class="column">\
    <div class="card">\
      <div style="width:100%; height:200px; background-image: url('https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');background-size:cover;"></div>\
      <div class="container">\
        <h2>Sarah Winter</h2>\
        <p class="title">Press Operator</p>\
       \
        <p>example@example.com</p>\
        <p><button class="button">Contact</button></p>\
      </div>\
    </div>\
  </div>\
\
  <div class="column">\
    <div class="card">\
      <div style="width:100%; height:200px; background-image: url('https://images.unsplash.com/photo-1506919258185-6078bba55d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=815&q=80');background-size:cover;"></div>\
      <div class="container">\
        <h2>Curtis Forman</h2>\
        <p class="title">Customer Service</p>\
        \
        <p>example@example.com</p>\
        <p><button class="button">Contact</button></p>\
      </div>\
    </div>\
  </div>\
  <div class="column">\
    <div class="card">\
     <div style="width:100%; height:200px; background-image: url('https://images.unsplash.com/photo-1541943181603-d8fe267a5dcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=612&q=80');background-size:cover;background-position:0px 50%"></div>\
      <div class="container">\
        <h2>Yolanda Manning</h2>\
        <p class="title">Designer</p>\
        \
        <p>example@example.com</p>\
        <p><button class="button">Contact</button></p>\
      </div>\
    </div>\
  </div>\
<div class="column">\
    <div class="card">\
      <div style="width:100%; height:200px; background-image: url('https://images.unsplash.com/photo-1509112552557-8eb3dab85cfc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80');background-size:cover;"></div>\
      <div class="container">\
        <h2>Morgan Rogers</h2>\
        <p class="title">Web Designer</p>\
       \
        <p>example@example.com</p>\
        <p><button class="button">Contact</button></p>\
      </div>\
    </div>\
  </div>\
</div>}

Staff Page 2:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>.flip-card \{\
  background-color: transparent;\
  width: 300px;\
  height: 300px;\
  perspective: 1000px;\
\}\
\
.flip-card-inner \{\
  position: relative;\
  width: 100%;\
  height: 100%;\
  text-align: center;\
  transition: transform 0.6s;\
  transform-style: preserve-3d;\
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\
\}\
\
.flip-card:hover .flip-card-inner \{\
  transform: rotateY(180deg);\
\}\
\
.flip-card-front, .flip-card-back \{\
  position: absolute;\
  width: 100%;\
  height: 100%;\
  backface-visibility: hidden;\
\}\
\
.flip-card-front \{\
  background-color: #bbb;\
  color: black;\
\}\
\
.flip-card-back \{\
  background-color: #2b2b2b;\
  color: white;\
  transform: rotateY(180deg);\
  padding-top:60px;\
\}\
  .flip-card-back h1 \{\
    color:#fff;\
  \
  \}\
  .button \{\
  border: none;\
  outline: 0;\
  display: inline-block;\
  padding: 8px;\
  color: #2b2b2b;\
  background-color: #fff;\
  text-align: center;\
  cursor: pointer;\
  width: 80%;\
\}\
\
.button:hover \{\
  background-color: #f2f2f2;\
\}\
  \
  a.icons \{\
    color:#fff;\
  \}\
  a.icons i \{\
    padding:20px 10px;\
  \}\
</style>\
\
\
<h2>Meet The Team</h2>\
<p>We are so thankful for our team, their talents, and our work atmosphere. <br>\
These are the people that make us great.</p><br>\
<div class="row">\
  <div class="col-md-3">\
<div class="flip-card">\
  <div class="flip-card-inner">\
    <div class="flip-card-front">\
      <div style="width:100%; height:300px; background-image: url('https://images.unsplash.com/photo-1559548331-f9cb98001426?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');background-size:cover;background-position:center center;"></div>\
    </div>\
    <div class="flip-card-back">\
      <h1>John Doe</h1> \
      <p>CEO & Founder</p> \
      <a href="#" class="icons"><i class="fas fa-paper-plane fa-lg"></i><i class="fas fa-phone fa-lg"></i><i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i></a>\
    </div>\
  </div>\
</div>\
    </div>\
  <div class="col-md-3">\
<div class="flip-card">\
  <div class="flip-card-inner">\
    <div class="flip-card-front">\
       <div style="width:100%; height:300px; background-image: url('https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');background-size:cover;background-position:center center;"></div>\
    </div>\
    <div class="flip-card-back">\
      <h1>Mike Ross</h1> \
      <p>Art Director</p>\
      <a href="#" class="icons"><i class="fas fa-paper-plane fa-lg"></i><i class="fas fa-phone fa-lg"></i><i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i></a>\
    </div>\
  </div>\
</div>\
    </div>\
  <div class="col-md-3">\
<div class="flip-card">\
  <div class="flip-card-inner">\
    <div class="flip-card-front">\
       <div style="width:100%; height:300px; background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80');background-size:cover;background-position:0px -42px;"></div>\
    </div>\
    <div class="flip-card-back">\
      <h1>Jane Smith</h1>\
        <p> Graphic Designer</p>\
     <a href="#" class="icons"><i class="fas fa-paper-plane fa-lg"></i><i class="fas fa-phone fa-lg"></i><i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i></a>\
    </div>\
  </div>\
</div>\
    </div>\
  <div class="col-md-3">\
<div class="flip-card">\
  <div class="flip-card-inner">\
    <div class="flip-card-front">\
       <div style="width:100%; height:300px; background-image: url('https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');background-size:cover;background-position:center center;"></div>\
    </div>\
    <div class="flip-card-back">\
      <h1>Chris Mann</h1>\
        <p>Press Operator</p>\
       <a href="#" class="icons"><i class="fas fa-paper-plane fa-lg"></i><i class="fas fa-phone fa-lg"></i><i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i></a>\
    </div>\
  </div>\
</div>\
    </div>\
  </div>\
\
\
\
\
\
\
\
\
\
\
<div class="row" style="padding-top:40px;">\
  <div class="col-md-3">\
<div class="flip-card">\
  <div class="flip-card-inner">\
    <div class="flip-card-front">\
      <div style="width:100%; height:300px; background-image: url('https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');background-size:cover;background-position:center center;"></div>\
    </div>\
    <div class="flip-card-back">\
      <h1>Sarah Winter</h1>\
        <p>Press Operator</p>\
      <a href="#" class="icons"><i class="fas fa-paper-plane fa-lg"></i><i class="fas fa-phone fa-lg"></i><i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i></a>\
    </div>\
  </div>\
</div>\
    </div>\
  <div class="col-md-3">\
<div class="flip-card">\
  <div class="flip-card-inner">\
    <div class="flip-card-front">\
       <div style="width:100%; height:300px; background-image: url('https://images.unsplash.com/photo-1506919258185-6078bba55d2a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=815&q=80');background-size:cover;background-position:center center;"></div>\
    </div>\
    <div class="flip-card-back">\
      <h1>Curtis Forman</h1>\
        <p>Customer Service</p>\
      <a href="#" class="icons"><i class="fas fa-paper-plane fa-lg"></i><i class="fas fa-phone fa-lg"></i><i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i></a>\
    </div>\
  </div>\
</div>\
    </div>\
  <div class="col-md-3">\
<div class="flip-card">\
  <div class="flip-card-inner">\
    <div class="flip-card-front">\
       <div style="width:100%; height:300px; background-image: url('https://images.unsplash.com/photo-1541943181603-d8fe267a5dcf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=612&q=80');background-size:cover;background-position:0px -150px"></div>\
    </div>\
    <div class="flip-card-back">\
      <h1>Yolanda Firth</h1>\
        <p>Designer</p>\
     <a href="#" class="icons"><i class="fas fa-paper-plane fa-lg"></i><i class="fas fa-phone fa-lg"></i><i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i></a>\
    </div>\
  </div>\
</div>\
    </div>\
  <div class="col-md-3">\
<div class="flip-card">\
  <div class="flip-card-inner">\
    <div class="flip-card-front">\
       <div style="width:100%; height:300px; background-image: url('https://images.unsplash.com/photo-1509112552557-8eb3dab85cfc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80');background-size:cover;background-position:center center;"></div>\
    </div>\
    <div class="flip-card-back">\
      <h1>Morgan Rogers</h1>\
        <p>Web Designer</p>\
       <a href="#" class="icons"><i class="fas fa-paper-plane fa-lg"></i><i class="fas fa-phone fa-lg"></i><i class="fab fa-facebook-f fa-lg"></i><i class="fab fa-twitter fa-lg"></i></a>\
    </div>\
  </div>\
</div>\
    </div>\
  </div>}

FAQ Page:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>\
\
.faq-wrapper \{\
    max-width: 600px;\
    width: 100%;\
    margin: 80px auto;\
font-family: 'Space Mono', monospace;\
    color: #3E474F;\
  min-height:55vh;\
\}\
\
.faq-wrapper h1 \{\
    font-size: 2em;\
    margin-bottom: 40px;\
    text-align:center;\
font-family: 'Space Mono', monospace;\
    color: #3E474F;\
font-weight:bold;\
\}\
\
.faq-wrapper input \{\
    display: none;\
\}\
\
.faq-wrapper label \{\
    display: flex;\
    width: 100%;\
    height: 50px;\
    cursor: pointer;\
    border: 3px solid #3E474F;\
    user-select: none;\
\}\
\
.faq-wrapper label div:first-child \{\
    width: 100%;\
    line-height: 45px;\
    margin-left: 10px;\
    font-size: 1.2em;\
\}\
\
.cross\{\
    margin-right:15px;\
    margin-top:3px;\
\}\
\
.cross:before,.cross:after \{\
    content: '';\
    border-top: 2px solid #3E474F;\
    width: 15px;\
    display: block;\
    margin-top: 18px;\
    transition: 0.3s;\
\}\
\
.cross:after \{\
    transform: rotate(90deg);\
    margin-top: -2px;\
\}\
\
.content \{\
    box-sizing: border-box;\
    font-size: 0.9em;\
    margin: 10px 10px;\
    max-height: 0;\
    overflow: hidden;\
    transition: max-height, .5s;\
\}\
\
.faq-wrapper input:checked ~ .content \{\
    max-height: 400px;\
    transition: max-height, 1s;\
\}\
\
.faq-wrapper input:checked ~ label .cross:before \{\
    transform: rotate(180deg);\
\}\
\
.faq-wrapper input:checked ~ label .cross:after \{\
    transform: rotate(0deg);\
\}\
\
.questions\{\
    margin-top:20px;\
    max-height: 0;\
    overflow: hidden;\
    transition: max-height, .5s;\
\}\
\
.questions label\{\
    border:none;\
    box-shadow: none;\
    margin:0;\
\}\
\
.faq-wrapper input:checked ~ .questions \{\
    max-height: 400px;\
    border-bottom:2px solid #3E474F;\
    transition: 1s;\
\}\
\
/*----------tool-tip------------*/\
\
.tip \{\
    color: #f03768;\
    cursor: help;\
    position: relative;\
    overflow: visible;\
    font-family: monospace;\
    font-size: 1.3em;\
\}\
\
.tip:before,\
.tip:after \{\
    position: absolute;\
    opacity: 0;\
    z-index: -100;    \
    transform: translateY(-30%);\
    transition: .4s;\
\}\
\
.tip:before \{\
    content: '';\
    border-style: solid;\
    border-width: 0.8em 0.5em 0 0.5em;\
    border-color: #3E474F transparent transparent transparent;\
    transform: translateY(-200%);\
    bottom:90%;\
    left:50%;\
\}\
\
.tip:after \{\
    content: attr(data-tip);\
    background: #3E474F;\
    color: white;\
    width: 150px;\
    padding: 10px;\
    font-size: 0.8em;\
    bottom: 150%;\
    left: -50%;\
\}\
\
.tip:hover:before,\
.tip:hover:after \{\
    opacity: 1;\
    z-index: 100;\
    transform: scaleY(1);\
\}\
\
</style>\
\
<div class="faq-wrapper">\
\
  <h1>Frequently Asked Questions</h1>\
\
  <div class="wrap-1">\
    <input type="radio" id="tab-1" name="tabs">\
    <label for="tab-1"><div>tab one</div><div class="cross"></div></label>\
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium minima, excepturi quis maiores. Eaque quae, nam delectus explicabo, deserunt ipsum!</div>\
  </div>\
\
  <div class="wrap-2">\
    <input type="radio" id="tab-2" name="tabs">\
    <label for="tab-2"><div>tab two</div><div class="cross"></div></label>\
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium minima, excepturi quis maiores. Eaque quae, nam delectus <span class="tip" data-tip="Eaque quae, nam delectus explicabo, deserunt ipsum!">explicabo</span>,\
      deserunt ipsum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="tip" data-tip="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">Mollitia</span> autem quasi inventore unde nobis voluptatibus illum quae rerum laudantium\
      minima, excepturi quis maiores. Eaque quae, nam delectus explicabo, <span class="tip" data-tip="Lorem ipsum dolor sit amet.">deserunt</span> ipsum!</div>\
  </div>\
\
  <div class="wrap-3">\
    <input type="radio" id="tab-3" name="tabs">\
    <label for="tab-3"><div>tab three</div><div class="cross"></div></label>\
    <div class="questions">\
      <div class="question-wrap">\
        <input type="radio" id="question-1" name="question">\
        <label for="question-1"><div>question one</div> <div class="cross"></div></label>\
        <div class="content">\
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam atque, soluta doloribus distinctio saepe labore voluptates facere illum alias perferendis praesentium quia vel accusamus incidunt corporis veniam sapiente. Voluptate, quasi.\
        </div>\
      </div>\
      <div class="question-wrap">\
        <input type="radio" id="question-2" name="question">\
        <label for="question-2"><div>question two</div> <div class="cross"></div></label>\
        <div class="content">\
          Ipsam atque, soluta doloribus distinctio saepe labore voluptates facere illum alias perferendis praesentium quia vel accusamus incidunt corporis veniam sapiente. Voluptate, quasi.\
        </div>\
      </div>\
    </div>\
  </div>\
</div>}

Testimonials:

Copy and paste the following code into a new Custom Page HTML box:

{\rtf1\ansi\ansicpg1252\cocoartf2511
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww10800\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <style>\
  .mySlides \{\
    width:600px;\
    margin:auto;\
  \}\
  \
/* Slides */\
.mySlides \{\
  display: none;\
  padding: 40px 80px;\
  text-align: center;\
\}\
\
/* Next & previous buttons */\
.prev, .next \{\
  cursor: pointer;\
  position: absolute;\
  top: 50%;\
  width: auto;\
  margin-top: -30px;\
  padding: 16px;\
  color: #2b2b2b;\
  font-weight: bold;\
  font-size: 20px;\
  border-radius: 0 3px 3px 0;\
  user-select: none;\
\}\
\
/* Position the "next button" to the right */\
.next \{\
  position: absolute;\
  right: 0;\
  border-radius: 3px 0 0 3px;\
\}\
\
/* On hover, add a black background color with a little bit see-through */\
.prev:hover, .next:hover \{\
  background-color: #2b2b2b;\
  color: white;\
\}\
\
/* The dot/bullet/indicator container */\
.dot-container \{\
  text-align: center;\
  padding: 20px;\
  background: #ffffff;\
\}\
\
/* The dots/bullets/indicators */\
.dot \{\
  cursor: pointer;\
  height: 15px;\
  width: 15px;\
  margin: 0 2px;\
  background-color: #2b2b2b;\
  border-radius: 50%;\
  display: inline-block;\
  transition: background-color 0.6s ease;\
\}\
\
/* Add a background color to the active dot/circle */\
.active2, .dot:hover \{\
  background-color: #DFB059;\
border: 2px solid #2b2b2b;\
\}\
\
\
\
\
\
\
\
</style>\
\
\
<h2>Testimonials</h2>\
<p>What our customers are saying about us</p><br>\
\
<div class="slideshow-container">\
  <div class="mySlides">\
    <div class="row">\
      \
        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. "<br>\
          <br>\
          <span style="font-weight:bold;font-style:italic;">Johnny Smith</span><br>\
          <span style="font-style:italic;">Company Name 2</span> </p>\
     \
        \
     \
    </div>\
  </div>\
 <div class="mySlides">\
    <div class="row">\
      \
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id."<br>\
          <br>\
          <span style="font-weight:bold;font-style:italic;">Jane Smith</span><br>\
          <span style="font-style:italic;">Company Name 3</span> </p>\
     \
        \
     \
    </div>\
  </div>\
   <div class="mySlides">\
    <div class="row">\
      \
        <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia."<br>\
          <br>\
          <span style="font-weight:bold;font-style:italic;">John Smith</span><br>\
          <span style="font-style:italic;">Company Name 1</span> </p>\
     \
        \
     \
    </div>\
  </div>\
 \
<div class="dot-container"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div></div>\
\
<div style="height:180px;"></div>}

Custom Pages Print

About Us 1:

About Us 2:

About Us 3:

Contact Us 1:

Contact Us 2:

Contact Us 3:

Staff Page 1:

Staff Page 2:

FAQ Page:

Testimonials:

Related Articles