Ain - Portfolio HTML5 Template

documentation

Ain is a modern and elegant Portfolio HTML5 Template. Every single detail is carefully designed in order to create a wonderful user experience.

Ain 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.

Template Files

template-files

dist file content

dist-file-content

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. <div class="preloader">
  3.      <div class="spinner">
  4.           <div class="double-bounce1"><⁄div>
  5.           <div class="double-bounce2"><⁄div>
  6.      <⁄div>
  7. <⁄div>
  8. <!-- End Preloader -->

Save the file and refresh your browser.

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 images in About Section put your new images in 'images/features' folder then replace blue highlighted text with your new images's path, name and extension (like this "images/features/ideas.svg").

  1. <!-- Start About -->
  2. <div class="about section" id="about">
  3.      <div class="container">
  4.           <!-- Features in About Section -->
  5.           <div class="features">
  6.                <ul class="features-items">
  7.                     <li class="item">
  8.                          <div class="item-img"><img src="images/features/ideas.svg" alt=""><⁄div>
  9.                          <h3 class="item-title">Creative Ideas<⁄h3>
  10.                          <p class="item-description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words<⁄p>
  11.                     <⁄li>
  12.                     <li class="item">
  13.                          <div class="item-img"><img src="images/features/design.svg" alt=""><⁄div>
  14.                          <h3 class="item-title">Interaction Design<⁄h3>
  15.                          <p class="item-description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words<⁄p>
  16.                     <⁄li>
  17.                     <li class="item">
  18.                          <div class="item-img"><img src="images/features/timely-delivery.svg" alt=""><⁄div>
  19.                          <h3 class="item-title">Timely Delivery<⁄h3>
  20.                          <p class="item-description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words<⁄p>
  21.                     <⁄li>
  22.                <⁄ul>
  23.           <⁄div>
  24.           <!-- About Content -->
  25.           <div class="who-are-we">
  26.                <div class="who-are-we-img"><img src="images/about.svg" alt=""><⁄div>
  27.                <div class="who-are-we-text">
  28.                     <h2>Leading Design Agency Based in Egypt<⁄h2>
  29.                     <p>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.<⁄p>
  30.                     <div class="buttons-container"><a class="rounded-btn color-one shadow" href="about.html">Explore More<⁄a><⁄div>
  31.                <⁄div>
  32.           <⁄div>
  33.      <⁄div>
  34. <⁄div>
  35. <!-- 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 path, name and extension (like this "images/services/web-design.svg").
To change links of services items replace red highlighted text with your own links.

  1. <!-- Start Services -->
  2. <div class="services section" id="services">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="What We Do">Provide Awesome Customer Service With Our Tools<⁄h2>
  6.           <⁄div>
  7.           <div class="services-content">
  8.                <div class="text-with-icon-items center"><a class="item" href="#">
  9.                     <div class="item-img"><img src="images/services/web-design.svg" alt=""><⁄div>
  10.                     <div class="item-text">
  11.                          <h3 class="item-title">Web Design<⁄h3>
  12.                          <p class="item-description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form<⁄p>
  13.                     <⁄div><⁄a><a class="item" href="#">
  14.                     <div class="item-img"><img src="images/services/brand.svg" alt=""><⁄div>
  15.                     <div class="item-text">
  16.                          <h3 class="item-title">Branding<⁄h3>
  17.                          <p class="item-description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form<⁄p>
  18.                     <⁄div><⁄a><a class="item" href="#">
  19.                     <div class="item-img"><img src="images/services/photography.svg" alt=""><⁄div>
  20.                     <div class="item-text">
  21.                          <h3 class="item-title">Photography<⁄h3>
  22.                          <p class="item-description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form<⁄p>
  23.                     <⁄div><⁄a><a class="item" href="#">
  24.                     <div class="item-img"><img src="images/services/motion-graphics.svg" alt=""><⁄div>
  25.                     <div class="item-text">
  26.                          <h3 class="item-title">Motion Graphics<⁄h3>
  27.                          <p class="item-description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form<⁄p>
  28.                     <⁄div><⁄a><a class="item" href="#">
  29.                     <div class="item-img"><img src="images/services/animation.svg" alt=""><⁄div>
  30.                     <div class="item-text">
  31.                          <h3 class="item-title">Animation<⁄h3>
  32.                          <p class="item-description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form<⁄p>
  33.                     <⁄div><⁄a><a class="item" href="#">
  34.                     <div class="item-img"><img src="images/services/marketing.svg" alt=""><⁄div>
  35.                     <div class="item-text">
  36.                          <h3 class="item-title">Marketing<⁄h3>
  37.                          <p class="item-description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form<⁄p>
  38.                     <⁄div><⁄a><⁄div>
  39.           <⁄div>
  40.      <⁄div>
  41. <⁄div>
  42. <!-- End Services -->

Save the file and refresh your browser.

Team Section

Members Details

To edit the text in 'Team Section' Open the index.html file using any text editor then look for the following code and replace yellow 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 class="team section" id="team">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="Our Team">Meet Our Creative Team<⁄h2>
  6.           <⁄div>
  7.           <div class="team-content">
  8.                <ul class="team-members">
  9.                     <li class="member pan-effect">
  10.                          <div class="member-img"><img src="images/team/member-1.jpg" alt=""><⁄div>
  11.                          <div class="overlay">
  12.                               <h3 class="member-name">Brandon Beatty<⁄h3>
  13.                               <h4 class="job-title">VP of Product Design<⁄h4>
  14.                               <ul class="social">
  15.                                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"><⁄i><⁄a><⁄li>
  16.                                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"><⁄i><⁄a><⁄li>
  17.                                    <li><a href="#"><i class="fa fa-behance" aria-hidden="true"><⁄i><⁄a><⁄li>
  18.                                    <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"><⁄i><⁄a><⁄li>
  19.                               <⁄ul>
  20.                          <⁄div>
  21.                     <⁄li>
  22.                     <li class="member pan-effect">
  23.                          <div class="member-img"><img src="images/team/member-2.jpg" alt=""><⁄div>
  24.                          <div class="overlay">
  25.                               <h3 class="member-name">Bryan Carruthers<⁄h3>
  26.                               <h4 class="job-title">Art Director<⁄h4>
  27.                               <ul class="social">
  28.                                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"><⁄i><⁄a><⁄li>
  29.                                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"><⁄i><⁄a><⁄li>
  30.                                    <li><a href="#"><i class="fa fa-behance" aria-hidden="true"><⁄i><⁄a><⁄li>
  31.                                    <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"><⁄i><⁄a><⁄li>
  32.                               <⁄ul>
  33.                          <⁄div>
  34.                     <⁄li>
  35.                     <li class="member pan-effect">
  36.                          <div class="member-img"><img src="images/team/member-3.jpg" alt=""><⁄div>
  37.                          <div class="overlay">
  38.                               <h3 class="member-name">Jack Butland<⁄h3>
  39.                               <h4 class="job-title">UX Designer<⁄h4>
  40.                               <ul class="social">
  41.                                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"><⁄i><⁄a><⁄li>
  42.                                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"><⁄i><⁄a><⁄li>
  43.                                    <li><a href="#"><i class="fa fa-behance" aria-hidden="true"><⁄i><⁄a><⁄li>
  44.                                    <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"><⁄i><⁄a><⁄li>
  45.                               <⁄ul>
  46.                          <⁄div>
  47.                     <⁄li>
  48.                <⁄ul>
  49.           <⁄div>
  50.      <⁄div>
  51. <⁄div>
  52. <!-- End Team -->

Save the file and refresh your browser.

Social Icons

To change icons of social media replace yellow highlighted text with new icons classes.
To choice new icons go to this page and select any icon then copy icon class.
To change links of social icons Open the index.html file using any text editor then look for the following code and replace red highlighted text with your own links.

  1. <!-- Start Team -->
  2. <div class="team section" id="team">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="Our Team">Meet Our Creative Team<⁄h2>
  6.           <⁄div>
  7.           <div class="team-content">
  8.                <ul class="team-members">
  9.                     <li class="member pan-effect">
  10.                          <div class="member-img"><img src="images/team/member-1.jpg" alt=""><⁄div>
  11.                          <div class="overlay">
  12.                               <h3 class="member-name">Brandon Beatty<⁄h3>
  13.                               <h4 class="job-title">VP of Product Design<⁄h4>
  14.                               <ul class="social">
  15.                                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"><⁄i><⁄a><⁄li>
  16.                                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"><⁄i><⁄a><⁄li>
  17.                                    <li><a href="#"><i class="fa fa-behance" aria-hidden="true"><⁄i><⁄a><⁄li>
  18.                                    <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"><⁄i><⁄a><⁄li>
  19.                               <⁄ul>
  20.                          <⁄div>
  21.                     <⁄li>
  22.                     <li class="member pan-effect">
  23.                          <div class="member-img"><img src="images/team/member-2.jpg" alt=""><⁄div>
  24.                          <div class="overlay">
  25.                               <h3 class="member-name">Bryan Carruthers<⁄h3>
  26.                               <h4 class="job-title">Art Director<⁄h4>
  27.                               <ul class="social">
  28.                                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"><⁄i><⁄a><⁄li>
  29.                                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"><⁄i><⁄a><⁄li>
  30.                                    <li><a href="#"><i class="fa fa-behance" aria-hidden="true"><⁄i><⁄a><⁄li>
  31.                                    <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"><⁄i><⁄a><⁄li>
  32.                               <⁄ul>
  33.                          <⁄div>
  34.                     <⁄li>
  35.                     <li class="member pan-effect">
  36.                          <div class="member-img"><img src="images/team/member-3.jpg" alt=""><⁄div>
  37.                          <div class="overlay">
  38.                               <h3 class="member-name">Jack Butland<⁄h3>
  39.                               <h4 class="job-title">UX Designer<⁄h4>
  40.                               <ul class="social">
  41.                                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"><⁄i><⁄a><⁄li>
  42.                                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"><⁄i><⁄a><⁄li>
  43.                                    <li><a href="#"><i class="fa fa-behance" aria-hidden="true"><⁄i><⁄a><⁄li>
  44.                                    <li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"><⁄i><⁄a><⁄li>
  45.                               <⁄ul>
  46.                          <⁄div>
  47.                     <⁄li>
  48.                <⁄ul>
  49.           <⁄div>
  50.      <⁄div>
  51. <⁄div>
  52. <!-- End Team -->

Save the file and refresh your browser.

Testimonials Section

Testimonials

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 images put your new images in 'images/testimonials' folder then replace blue highlighted text with your new images's path, name and extension (like this "images/testimonials/testimonials-1.jpg").

  1. <!-- Start Testimonials -->
  2. <div class="testimonials section" id="testimonials">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="Testimonials">Check What's Our Client Say About Us<⁄h2>
  6.           <⁄div>
  7.           <div class="testimonials-content">
  8.                <div class="client-card">
  9.                     <div class="client-img"><img src="#" alt=""><⁄div>
  10.                     <div class="card-text">
  11.                          <h3 class="card-name"><⁄h3>
  12.                          <h4 class="feedback-date"><⁄h4>
  13.                          <p class="feedback"><⁄p>
  14.                     <⁄div>
  15.                     <div class="arrows">
  16.                          <input class="prev-radio" id="prev" type="radio" name="control" value="prev">
  17.                          <label class="prev" for="prev">
  18.                               <div><⁄div>
  19.                          <⁄label>
  20.                          <input class="next-radio" id="next" type="radio" name="control" value="next" checked>
  21.                          <label class="next" for="next">
  22.                               <div><⁄div>
  23.                          <⁄label>
  24.                     <⁄div>
  25.                <⁄div>
  26.                <div class="all-clients">
  27.                     <div class="client">
  28.                          <div class="client-img"><img src="images/testimonials/testimonials-1.jpg" alt="testimonials-1.jpg"><⁄div>
  29.                          <div class="card-text">
  30.                               <h3 class="card-name">John Doe<⁄h3>
  31.                               <h4 class="feedback-date">Egypt, 6 March 2019<⁄h4>
  32.                               <p class="feedback">This is due to their excellent service, competitive pricing and customer support. It's thoroughly refreshing to get such a personal touch.<⁄p>
  33.                          <⁄div>
  34.                     <⁄div>
  35.                     <div class="client">
  36.                          <div class="client-img"><img src="images/testimonials/testimonials-2.jpg" alt="testimonials-2.jpg"><⁄div>
  37.                          <div class="card-text">
  38.                               <h3 class="card-name">Richard Roe<⁄h3>
  39.                               <h4 class="feedback-date">Egypt, 22 February 2019<⁄h4>
  40.                               <p class="feedback">This is due to their excellent service, competitive pricing and customer support. It's thoroughly refreshing to get such a personal touch.<⁄p>
  41.                          <⁄div>
  42.                     <⁄div>
  43.                     <div class="client">
  44.                          <div class="client-img"><img src="images/testimonials/testimonials-3.jpg" alt="testimonials-3.jpg"><⁄div>
  45.                          <div class="card-text">
  46.                               <h3 class="card-name">John Roe<⁄h3>
  47.                               <h4 class="feedback-date">Egypt, 15 February 2019<⁄h4>
  48.                               <p class="feedback">This is due to their excellent service, competitive pricing and customer support. It's thoroughly refreshing to get such a personal touch.<⁄p>
  49.                          <⁄div>
  50.                     <⁄div>
  51.                     <div class="client">
  52.                          <div class="client-img"><img src="images/testimonials/testimonials-4.jpg" alt="testimonials-4.jpg"><⁄div>
  53.                          <div class="card-text">
  54.                               <h3 class="card-name">Brandon Beatty<⁄h3>
  55.                               <h4 class="feedback-date">Egypt, 9 February 2019<⁄h4>
  56.                               <p class="feedback">This is due to their excellent service, competitive pricing and customer support. It's thoroughly refreshing to get such a personal touch.<⁄p>
  57.                          <⁄div>
  58.                     <⁄div>
  59.                     <div class="client">
  60.                          <div class="client-img"><img src="images/testimonials/testimonials-5.jpg" alt="testimonials-5.jpg"><⁄div>
  61.                          <div class="card-text">
  62.                               <h3 class="card-name">Andrew Thomas<⁄h3>
  63.                               <h4 class="feedback-date">Egypt, 2 February 2019<⁄h4>
  64.                               <p class="feedback">This is due to their excellent service, competitive pricing and customer support. It's thoroughly refreshing to get such a personal touch.<⁄p>
  65.                          <⁄div>
  66.                     <⁄div>
  67.                     <div class="client">
  68.                          <div class="client-img"><img src="images/testimonials/testimonials-6.jpg" alt="testimonials-6.jpg"><⁄div>
  69.                          <div class="card-text">
  70.                               <h3 class="card-name">John Doe<⁄h3>
  71.                               <h4 class="feedback-date">Egypt, 28 January 2019<⁄h4>
  72.                               <p class="feedback">This is due to their excellent service, competitive pricing and customer support. It's thoroughly refreshing to get such a personal touch.<⁄p>
  73.                          <⁄div>
  74.                     <⁄div>
  75.                     <div class="client">
  76.                          <div class="client-img"><img src="images/testimonials/testimonials-7.jpg" alt="testimonials-7.jpg"><⁄div>
  77.                          <div class="card-text">
  78.                               <h3 class="card-name">Jack Butland<⁄h3>
  79.                               <h4 class="feedback-date">Egypt, 23 January 2019<⁄h4>
  80.                               <p class="feedback">This is due to their excellent service, competitive pricing and customer support. It's thoroughly refreshing to get such a personal touch.<⁄p>
  81.                          <⁄div>
  82.                     <⁄div>
  83.                     <div class="client">
  84.                          <div class="client-img"><img src="images/testimonials/testimonials-8.jpg" alt="testimonials-8.jpg"><⁄div>
  85.                          <div class="card-text">
  86.                               <h3 class="card-name">Bryan Carruthers<⁄h3>
  87.                               <h4 class="feedback-date">Egypt, 17 January 2019<⁄h4>
  88.                               <p class="feedback">This is due to their excellent service, competitive pricing and customer support. It's thoroughly refreshing to get such a personal touch.<⁄p>
  89.                          <⁄div>
  90.                     <⁄div>
  91.                <⁄div>
  92.                <div class="clients owl-carousel owl-theme">
  93.                     <div class="client"><a href="#"><img src="images/clients/client-1.png" alt="client-1"><⁄a><⁄div>
  94.                     <div class="client"><a href="#"><img src="images/clients/client-2.png" alt="client-2"><⁄a><⁄div>
  95.                     <div class="client"><a href="#"><img src="images/clients/client-3.png" alt="client-3"><⁄a><⁄div>
  96.                     <div class="client"><a href="#"><img src="images/clients/client-4.png" alt="client-4"><⁄a><⁄div>
  97.                     <div class="client"><a href="#"><img src="images/clients/client-5.png" alt="client-5"><⁄a><⁄div>
  98.                     <div class="client"><a href="#"><img src="images/clients/client-6.png" alt="client-6"><⁄a><⁄div>
  99.                     <div class="client"><a href="#"><img src="images/clients/client-7.png" alt="client-7"><⁄a><⁄div>
  100.                     <div class="client"><a href="#"><img src="images/clients/client-8.png" alt="client-8"><⁄a><⁄div>
  101.                <⁄div>
  102.           <⁄div>
  103.      <⁄div>
  104. <⁄div>
  105. <!-- End Testimonials -->

Save the file and refresh your browser.

Clients

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

  1. <div class="clients owl-carousel owl-theme">
  2.      <div class="client"><a href="#"><img src="images/clients/client-1.png" alt="client-1"><⁄a><⁄div>
  3.      <div class="client"><a href="#"><img src="images/clients/client-2.png" alt="client-2"><⁄a><⁄div>
  4.      <div class="client"><a href="#"><img src="images/clients/client-3.png" alt="client-3"><⁄a><⁄div>
  5.      <div class="client"><a href="#"><img src="images/clients/client-4.png" alt="client-4"><⁄a><⁄div>
  6.      <div class="client"><a href="#"><img src="images/clients/client-5.png" alt="client-5"><⁄a><⁄div>
  7.      <div class="client"><a href="#"><img src="images/clients/client-6.png" alt="client-6"><⁄a><⁄div>
  8.      <div class="client"><a href="#"><img src="images/clients/client-7.png" alt="client-7"><⁄a><⁄div>
  9.      <div class="client"><a href="#"><img src="images/clients/client-8.png" alt="client-8"><⁄a><⁄div>
  10. <⁄div>

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 class="pricing section" id="pricing">
  3.      <div class="container">
  4.           <div class="section-title">
  5.                <h2 data-title="Pricing Plan">Get Your Best Pricing<⁄h2>
  6.           <⁄div>
  7.           <div class="switching">
  8.                <input class="option1-radio" id="option1" type="radio" name="switch" value="option1" checked>
  9.                <label class="option1" for="option1">Monthly<⁄label>
  10.                <input class="option2-radio" id="option2" type="radio" name="switch" value="option2">
  11.                <label class="option2" for="option2">Yearly<⁄label>
  12.           <⁄div>
  13.           <div class="pricing-content">
  14.                <!-- Pricing Option One -->
  15.                <div class="result option1 active">
  16.                     <div class="plan">
  17.                          <div class="plan-icon"><img src="images/pricing-plans/plan-1.svg" alt="plan-1"><⁄div>
  18.                          <h3 class="plan-title">Basic<⁄h3>
  19.                          <h2 class="plan-price">$9.99<⁄h2>
  20.                          <ul>
  21.                               <li>2 Domains<⁄li>
  22.                               <li>100 GB Disk Space<⁄li>
  23.                               <li>50 GB Bandwidth<⁄li>
  24.                               <li>5 Email Accounts<⁄li>
  25.                               <li class="unavailable">Unlinited FTP Accounts<⁄li>
  26.                               <li class="unavailable">Extra Free SSL<⁄li>
  27.                          <⁄ul>
  28.                          <div class="buttons-container"><a class="rounded-btn color-one solid" href="#">Order Now<⁄a><⁄div>
  29.                     <⁄div>
  30.                     <div class="plan active">
  31.                          <div class="plan-icon"><img src="images/pricing-plans/plan-2.svg" alt="plan-2"><⁄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>Unlinited FTP Accounts<⁄li>
  40.                               <li class="unavailable">Extra Free SSL<⁄li>
  41.                          <⁄ul>
  42.                          <div class="buttons-container"><a class="rounded-btn main-color-one fill" href="#">Order Now<⁄a><⁄div>
  43.                     <⁄div>
  44.                     <div class="plan">
  45.                          <div class="plan-icon"><img src="images/pricing-plans/plan-3.svg" alt="plan-3"><⁄div>
  46.                          <h3 class="plan-title">Premium<⁄h3>
  47.                          <h2 class="plan-price">$29.99<⁄h2>
  48.                          <ul>
  49.                               <li>Unlinited Domains<⁄li>
  50.                               <li>Unlinited GB Disk Space<⁄li>
  51.                               <li>Unlinited GB Bandwidth<⁄li>
  52.                               <li>500 Email Accounts<⁄li>
  53.                               <li>unlimited FTP Accounts<⁄li>
  54.                               <li>Extra Free SSL<⁄li>
  55.                          <⁄ul>
  56.                          <div class="buttons-container"><a class="rounded-btn main-color-one fill" href="#">Order Now<⁄a><⁄div>
  57.                     <⁄div>
  58.                <⁄div>
  59.                <!-- Pricing Option Two -->
  60.                <div class="result option2">
  61.                     <div class="plan">
  62.                          <div class="plan-icon"><img src="images/pricing-plans/plan-1.svg" alt="plan-1"><⁄div>
  63.                          <h3 class="plan-title">Basic<⁄h3>
  64.                          <h2 class="plan-price">$99.99<⁄h2>
  65.                          <ul>
  66.                               <li>2 Domains<⁄li>
  67.                               <li>100 GB Disk Space<⁄li>
  68.                               <li>50 GB Bandwidth<⁄li>
  69.                               <li>5 Email Accounts<⁄li>
  70.                               <li class="unavailable">Unlinited FTP Accounts<⁄li>
  71.                               <li class="unavailable">Extra Free SSL<⁄li>
  72.                          <⁄ul>
  73.                          <div class="buttons-container"><a class="rounded-btn color-one solid" href="#">Order Now<⁄a><⁄div>
  74.                     <⁄div>
  75.                     <div class="plan active">
  76.                          <div class="plan-icon"><img src="images/pricing-plans/plan-2.svg" alt="plan-2"><⁄div>
  77.                          <h3 class="plan-title">Standard<⁄h3>
  78.                          <h2 class="plan-price">$119.99<⁄h2>
  79.                          <ul>
  80.                               <li>20 Domains<⁄li>
  81.                               <li>300 GB Disk Space<⁄li>
  82.                               <li>150 GB Bandwidth<⁄li>
  83.                               <li>250 Email Accounts<⁄li>
  84.                               <li>Unlinited FTP Accounts<⁄li>
  85.                               <li class="unavailable">Extra Free SSL<⁄li>
  86.                          <⁄ul>
  87.                          <div class="buttons-container"><a class="rounded-btn main-color-one fill" href="#">Order Now<⁄a><⁄div>
  88.                     <⁄div>
  89.                     <div class="plan">
  90.                          <div class="plan-icon"><img src="images/pricing-plans/plan-3.svg" alt="plan-3"><⁄div>
  91.                          <h3 class="plan-title">Premium<⁄h3>
  92.                          <h2 class="plan-price">$129.99<⁄h2>
  93.                          <ul>
  94.                               <li>Unlinited Domains<⁄li>
  95.                               <li>Unlinited GB Disk Space<⁄li>
  96.                               <li>Unlinited GB Bandwidth<⁄li>
  97.                               <li>500 Email Accounts<⁄li>
  98.                               <li>unlimited FTP Accounts<⁄li>
  99.                               <li>Extra Free SSL<⁄li>
  100.                          <⁄ul>
  101.                          <div class="buttons-container"><a class="rounded-btn main-color-one fill" href="#">Order Now<⁄a><⁄div>
  102.                     <⁄div>
  103.                <⁄div>
  104.           <⁄div>
  105.      <⁄div>
  106. <⁄div>
  107. <!-- 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.