Sewak - Multipurpose HTML5 Template

documentation

Sewak is a modern and elegant Multipurpose HTML5 template. Every single detail is carefully designed in order to create a wonderful user experience.

Sewak is very easy to set up and customize and comes with a well documented help file, which will assist you configure the template in minutes.

turn off Preloader

Open the index.html file using any text editor. We recommend Sublime Text. Now look for the following code and remove them.

  1. <!-- Start Preloader -->
  2. <svg style="display: none;">
  3.      <defs>
  4.           <filter id="gooey">
  5.                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"⁄>
  6.                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="filter"⁄>
  7.                <feComposite in="SourceGraphic" in2="filter" operator="atop"⁄>
  8.           <⁄filter>
  9.      <⁄defs>
  10. <⁄svg>
  11. <div class="preloader">
  12.      <div class="content">
  13.           <div class="item"><⁄div>
  14.           <div class="item"><⁄div>
  15.           <div class="item"><⁄div>
  16.           <div class="item"><⁄div>
  17.           <div class="item"><⁄div>
  18.      <⁄div>
  19. <⁄div>
  20. <!-- End Preloader -->

Save the file and refresh your browser.

Background Image

To change the background image put your new image in 'images' folder (recommended size 1920px * 1200px).
The name of image should be 'header-background' and image extension should be 'jpg'.

About Section

To edit the text in 'About Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.
To change links of about video replace red highlighted text with your own links.

  1. <!-- Start About -->
  2. <div id="about" class="about section">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="who we are">About us<⁄h2>
  6.           <⁄div>
  7.           <div class="about-content section-content">
  8.                <div class="about-video">
  9.                     <a href="https://www.youtube.com/watch?v=khCP-tP_zZY" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
  10.                          <img src="https://via.placeholder.com/700x500" alt="about-video">
  11.                          <span class="video-icon">
  12.                               <img src="images/play-button2.svg" alt="about-video">
  13.                          <⁄span>
  14.                     <⁄a>
  15.                <⁄div>
  16.                <div class="about-text section-text">
  17.                     <h3 class="section-sub-heading">Our Mission<⁄h3>
  18.                     <p>
  19.                          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  20.                     <⁄p>
  21.                     <div class="video-play-button">
  22.                          <a href="#">
  23.                               <img src="images/play-button.svg" alt="video-button">
  24.                               Watch Our Story
  25.                          <⁄a>
  26.                     <⁄div>
  27.                <⁄div>
  28.           <⁄div>
  29.      <⁄div>
  30. <⁄div>
  31. <!-- End About -->

Save the file and refresh your browser.

Services Section

To edit the text in 'Services Section' Open the index.html file using any text editor then look for the following code and replace yellow highlighted text.
To change icons of services put your new images in 'images/services' folder (recommended size 64px * 64px) then replace blue highlighted text with your new images's name and extension.
To change links of buttons replace red highlighted text with your own links and replace yellow highlighted text with your buttons name.

  1. <!-- Start Services -->
  2. <div id="services" class="services section">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="What we do">Services<⁄h2>
  6.           <⁄div>
  7.           <div class="services-content section-content">
  8.                <div class="services-item">
  9.                     <div class="services-item-icon">
  10.                          <img src="images/services/services-1.svg" alt="services-1">
  11.                     <⁄div>
  12.                     <h3 class="services-title">Graphic Design<⁄h3>
  13.                     <p>
  14.                          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  15.                     <⁄p>
  16.                     <div class="buttons-container">
  17.                          <a class="rounded-btn main-color-one fill" href="#">Read More<⁄a>
  18.                     <⁄div>
  19.                <⁄div>
  20.                <div class="services-item">
  21.                     <div class="services-item-icon">
  22.                          <img src="images/services/services-2.svg" alt="services-2">
  23.                     <⁄div>
  24.                     <h3 class="services-title">Photography<⁄h3>
  25.                     <p>
  26.                          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  27.                     <⁄p>
  28.                     <div class="buttons-container">
  29.                          <a class="rounded-btn main-color-one fill" href="#">Read More<⁄a>
  30.                     <⁄div>
  31.                <⁄div>
  32.                <div class="services-item">
  33.                     <div class="services-item-icon">
  34.                          <img src="images/services/services-3.svg" alt="services-3">
  35.                     <⁄div>
  36.                     <h3 class="services-title">Marketing<⁄h3>
  37.                     <p>
  38.                          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  39.                     <⁄p>
  40.                     <div class="buttons-container">
  41.                          <a class="rounded-btn main-color-one fill" href="#">Read More<⁄a>
  42.                     <⁄div>
  43.                <⁄div>
  44.           <⁄div>
  45.      <⁄div>
  46. <⁄div>
  47. <!-- End Services -->

Save the file and refresh your browser.

Team Section

To edit the text in 'Team Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.
To change team members images put your new images in 'images/team' folder (recommended size 574px * 704px) then replace blue highlighted text with your new images's path, name and extension (like this "images/team/member-1.jpg").

  1. <!-- Start Team -->
  2. <div id="team" class="team section">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="Our great team">Our Team<⁄h2>
  6.           <⁄div>
  7.           <div class="team-content section-content">
  8.                <div class="team-member">
  9.                     <img src="https://via.placeholder.com/574x704" alt="team-member-1">
  10.                     <div class="overlay">
  11.                          <h4 class="name">Jack Butland<⁄h4>
  12.                          <h5 class="job-title">CEO & Founder<⁄h5>
  13.                     <⁄div>
  14.                <⁄div>
  15.                <div class="team-member">
  16.                     <img src="https://via.placeholder.com/574x704" alt="team-member-2">
  17.                     <div class="overlay">
  18.                          <h4 class="name">Bryan Carruthers<⁄h4>
  19.                          <h5 class="job-title">VP of Product Design<⁄h5>
  20.                     <⁄div>
  21.                <⁄div>
  22.                <div class="team-member">
  23.                     <img src="https://via.placeholder.com/574x704" alt="team-member-3">
  24.                     <div class="overlay">
  25.                          <h4 class="name">Brandon Beatty<⁄h4>
  26.                          <h5 class="job-title">Front End-developer<⁄h5>
  27.                     <⁄div>
  28.                <⁄div>
  29.                <div class="team-member">
  30.                     <img src="https://via.placeholder.com/574x704" alt="team-member-4">
  31.                     <div class="overlay">
  32.                          <h4 class="name">Andrew Thomas<⁄h4>
  33.                          <h5 class="job-title">Art Director<⁄h5>
  34.                     <⁄div>
  35.                <⁄div>
  36.           <⁄div>
  37.      <⁄div>
  38. <⁄div>
  39. <!-- End Team -->

Save the file and refresh your browser.

Testimonials Section

To edit the text in 'Testimonials Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.
To change testimonials clients images put your new images in 'images/testimonials' folder (recommended size 140px * 140px) then replace blue highlighted text with your new images's path, name and extension (like this "images/testimonials/client-1.png").

  1. <!-- Start Testimonials -->
  2. <div id="testimonials" class="testimonials section">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="What people say">Testimonials<⁄h2>
  6.           <⁄div>
  7.           <div class="testimonials-content section-content">
  8.                <ul class="slider">
  9.                     <li class="item">
  10.                          <div class="client-details">
  11.                               <img src="https://via.placeholder.com/140x140" alt="testimonials-1">
  12.                               <div class="name">
  13.                                    <h3>John Doe<⁄h3>
  14.                                    <h5>Graphic Designer<⁄h5>
  15.                               <⁄div>
  16.                          <⁄div>
  17.                          <p>
  18.                               One duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
  19.                          <⁄p>
  20.                          <div class="quotes">
  21.                               <i class="fa fa-quote-left" aria-hidden="true"<⁄i>
  22.                          <⁄div>
  23.                     <⁄li>
  24.                     <li class="item">
  25.                          <div class="client-details">
  26.                               <img src="https://via.placeholder.com/140x140" alt="testimonials-1">
  27.                               <div class="name">
  28.                                    <h3>John Doe<⁄h3>
  29.                                    <h5>Graphic Designer<⁄h5>
  30.                               <⁄div>
  31.                          <⁄div>
  32.                          <p>
  33.                               Two duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
  34.                          <⁄p>
  35.                          <div class="quotes">
  36.                               <i class="fa fa-quote-left" aria-hidden="true"<⁄i>
  37.                          <⁄div>
  38.                     <⁄li>
  39.                     <li class="item">
  40.                          <div class="client-details">
  41.                               <img src="https://via.placeholder.com/140x140" alt="testimonials-1">
  42.                               <div class="name">
  43.                                    <h3>John Doe<⁄h3>
  44.                                    <h5>Graphic Designer<⁄h5>
  45.                               <⁄div>
  46.                          <⁄div>
  47.                          <p>
  48.                               Three duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
  49.                          <⁄p>
  50.                          <div class="quotes">
  51.                               <i class="fa fa-quote-left" aria-hidden="true"<⁄i>
  52.                          <⁄div>
  53.                     <⁄li>
  54.                     <li class="item">
  55.                          <div class="client-details">
  56.                               <img src="https://via.placeholder.com/140x140" alt="testimonials-1">
  57.                               <div class="name">
  58.                                    <h3>John Doe<⁄h3>
  59.                                    <h5>Graphic Designer<⁄h5>
  60.                               <⁄div>
  61.                          <⁄div>
  62.                          <p>
  63.                               Four duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
  64.                          <⁄p>
  65.                          <div class="quotes">
  66.                               <i class="fa fa-quote-left" aria-hidden="true"<⁄i>
  67.                          <⁄div>
  68.                     <⁄li>
  69.                <⁄ul>
  70.           <⁄div>
  71.      <⁄div>
  72. <⁄div>
  73. <!-- End Testimonials -->

Save the file and refresh your browser.

Clients Section

To change clients images put your new images in 'images/clients' folder (recommended size 225px * 110px) then replace blue highlighted text with your new images's path, name and extension (like this "images/clients/client-1.png").

  1. <!-- Start Clients -->
  2. <div id="clients" class="clients section">
  3.      <div class="container">
  4.           <div class="clients-content section-content">
  5.                <div class="client">
  6.                     <a href="#">
  7.                          <img src="https://via.placeholder.com/225x110" alt="client-1">
  8.                     <⁄a>
  9.                <⁄div>
  10.                <div class="client">
  11.                     <a href="#">
  12.                          <img src="https://via.placeholder.com/225x110" alt="client-2">
  13.                     <⁄a>
  14.                <⁄div>
  15.                <div class="client">
  16.                     <a href="#">
  17.                          <img src="https://via.placeholder.com/225x110" alt="client-3">
  18.                     <⁄a>
  19.                <⁄div>
  20.                <div class="client">
  21.                     <a href="#">
  22.                          <img src="https://via.placeholder.com/225x110" alt="client-4">
  23.                     <⁄a>
  24.                <⁄div>
  25.                <div class="client">
  26.                     <a href="#">
  27.                          <img src="https://via.placeholder.com/225x110" alt="client-5">
  28.                     <⁄a>
  29.                <⁄div>
  30.                <div class="client">
  31.                     <a href="#">
  32.                          <img src="https://via.placeholder.com/225x110" alt="client-6">
  33.                     <⁄a>
  34.                <⁄div>
  35.                <div class="client">
  36.                     <a href="#">
  37.                          <img src="https://via.placeholder.com/225x110" alt="client-7">
  38.                     <⁄a>
  39.                <⁄div>
  40.                <div class="client">
  41.                     <a href="#">
  42.                          <img src="https://via.placeholder.com/225x110" alt="client-8">
  43.                     <⁄a>
  44.                <⁄div>
  45.           <⁄div>
  46.      <⁄div>
  47. <⁄div>
  48. <!-- End Clients -->

Save the file and refresh your browser.

Pricing Section

To edit the text in 'Pricing Section' Open the index.html file using any text editor then look for the following code and replace yellow highlighted text.
To change icons of pricing plans put your new images in 'images/pricing-plans' folder (recommended size 64px * 64px) then replace blue highlighted text with your new images's name and extension.
To change links of buttons replace red highlighted text with your own links and replace yellow highlighted text with your buttons name.

  1. <!-- Start Pricing -->
  2. <div id="pricing" class="pricing section">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="Our pricing plans">Pricing<⁄h2>
  6.           <⁄div>
  7.           <div class="pricing-content section-content">
  8.                <div class="plan">
  9.                     <div class="plan-icon">
  10.                          <img src="images/pricing-plans/plan-1.svg" alt="plan-1">
  11.                     <⁄div>
  12.                     <h3 class="plan-title">Basic<⁄h3>
  13.                     <h2 class="plan-price">$9.99<⁄h2>
  14.                     <ul>
  15.                          <li>2 Domains<⁄li>
  16.                          <li>100 GB Disk Space<⁄li>
  17.                          <li>50 GB Bandwidth<⁄li>
  18.                          <li>5 Email Accounts<⁄li>
  19.                          <li>25 MySQL Databases<⁄li>
  20.                          <li class="unavailable">Unlinited FTP Accounts<⁄li>
  21.                          <li class="unavailable">Extra Free SSL<⁄li>
  22.                          <li class="unavailable">Extra Free Shopping Cart<⁄li>
  23.                     <⁄ul>
  24.                     <div class="buttons-container">
  25.                          <a class="rounded-btn main-color-one fill" href="#">Order Now<⁄a>
  26.                     <⁄div>
  27.                <⁄div>
  28.                <div class="plan">
  29.                     <div class="plan-icon">
  30.                          <img src="images/pricing-plans/plan-2.svg" alt="plan-2">
  31.                     <⁄div>
  32.                     <h3 class="plan-title">Standard<⁄h3>
  33.                     <h2 class="plan-price">$19.99<⁄h2>
  34.                     <ul>
  35.                          <li>20 Domains<⁄li>
  36.                          <li>300 GB Disk Space<⁄li>
  37.                          <li>150 GB Bandwidth<⁄li>
  38.                          <li>250 Email Accounts<⁄li>
  39.                          <li>50 MySQL Databases<⁄li>
  40.                          <li>Unlinited FTP Accounts<⁄li>
  41.                          <li>Extra Free SSL<⁄li>
  42.                          <li class="unavailable">Extra Free Shopping Cart<⁄li>
  43.                     <⁄ul>
  44.                     <div class="buttons-container">
  45.                          <a class="rounded-btn main-color-one fill" href="#">Order Now<⁄a>
  46.                     <⁄div>
  47.                <⁄div>
  48.                <div class="plan">
  49.                     <div class="plan-icon">
  50.                          <img src="images/pricing-plans/plan-3.svg" alt="plan-3">
  51.                     <⁄div>
  52.                     <h3 class="plan-title">Premium<⁄h3>
  53.                     <h2 class="plan-price">$29.99<⁄h2>
  54.                     <ul>
  55.                          <li>Unlinited Domains<⁄li>
  56.                          <li>Unlinited GB Disk Space<⁄li>
  57.                          <li>Unlinited GB Bandwidth<⁄li>
  58.                          <li>500 Email Accounts<⁄li>
  59.                          <li>100 MySQL Databases<⁄li>
  60.                          <li>unlimited FTP Accounts<⁄li>
  61.                          <li>Extra Free SSL<⁄li>
  62.                          <li>Extra Free Shopping Cart<⁄li>
  63.                     <⁄ul>
  64.                     <div class="buttons-container">
  65.                          <a class="rounded-btn main-color-one fill" href="#">Order Now<⁄a>
  66.                     <⁄div>
  67.                <⁄div>
  68.           <⁄div>
  69.      <⁄div>
  70. <⁄div>
  71. <!-- End Pricing -->

Save the file and refresh your browser.

Contact Section

To turn on contact form Open the contact_form.php file using any text editor then look for the following code and replace highlighted text and save the file.

  1. $mail_to = "youremail@email.com";  ⁄⁄ replace it with your email
  1. date_default_timezone_set("Africa⁄Cairo");  ⁄⁄ replace it with your timezone

You can find your timezone in This Page.

Save the file and refresh your browser.

Thank You

Finally thank you very much for choosing this template. Please keep in mind that we are working very hard to providing better quality in coming days.

If you have any questions that are beyond the scope of this help file, please contact me via my profile.