Weddaan - Responsive HTML Portfolio Template

documentation

Weddaan is a modern and elegant Onepage HTML template. Every single detail is carefully designed in order to create a wonderful user experience.

Weddaan 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 loading screen

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

  1. <!-- Start Loading Screen -->
  2. <div class="loading-screen">
  3.      <img src="images⁄weddaan-logo.png" alt="">
  4. <⁄div>
  5. <!-- End Loading Screen -->

Save the file and refresh your browser.

welcome section

To edit the text in 'Welcome Section' Open the script.js file using any text editor then look for the following code and replace highlighted text.

  1. ⁄ ⁄ Fire Typed Plugin in Header
  3. $("header .header-content-text span:first-of-type").typed({
  4.      strings: ["Hi ! I'm <span>Muhammad Mabrouk,<⁄span>"],
  5.      typeSpeed: 24,
  6.      startDelay: 600,
  7.      showCursor: false
  8. });
  10. $("header .header-content-text span:last-of-type").typed({
  11.      strings: ["Creative Web Designer From Egypt."],
  12.      typeSpeed: 20,
  13.      startDelay: 3000,
  14.      showCursor: false
  15. });

Save the file and refresh your browser.

about me section

There are two steps to edit the text in 'About Me Section'.

First Step : Open the index.html file using any text editor then look for the following code and replace highlighted text.

  1. <!-- Start About Me -->
  2. <div id="about" class="about-me">
  3.      <div class="container">
  4.           <div class="heading wow fadeInDown" data-wow-offset="150">
  5.                <div class="line-of-heading"><⁄div>
  6.                <h2>about me<⁄h2>
  7.                <div class="line-of-heading"><⁄div>
  8.           <⁄div>
  9.           <div class="about-content">
  10.                <div class="about-text wow fadeInLeft" data-wow-offset="180">
  11.                     <div>
  12.                          <span>Hi ! I'm Muhammad Mabrouk...<⁄span>
  13.                          <span><⁄span>
  14.                     <⁄div>
  15.                     <p>
  16. I love designing useful websites. I belive in hard work and determination. Determined not to just create a good webpage, but implement all my experience and extensive knowledge of website design practices that turn a good website into a fantastic one!
  17.                          <br><br>
  18. I also considered responsive design thats becomming a very important which makes your web page look good on all devices (desktops, tablets and phones). I am sure you have got something to say.
  19.                     <⁄p>
  20.                     <button class="hvr-bounce-to-right" data-value="contact">read more<⁄button>
  21.                     <button class="hvr-bounce-to-right" data-value="portfolio">view my portfolio<⁄button>
  22.                <⁄div>
  23.                <div class="about-photo wow fadeInRight" data-wow-offset="180">
  24.                     <img src="images⁄BusinessManAbout.png" alt="about-photo">
  25.                <⁄div>
  26.           <⁄div>
  27.      <⁄div>
  28. <⁄div>
  29. <!-- End About Me -->

Second Step : Open the script.js file using any text editor then look for the following code and replace highlighted text.

  1. ⁄ ⁄ Fire Typed Plugin in About Me Section
  3. $(window).on("scroll.aboutMe", function () {
  4.      if ($(window).scrollTop() >= $("div.about-me").offset().top - $(window).height() + 200) {
  6.           $("div.about-me .about-text > div span:last-of-type").typed({
  7.                strings: ["Hi ! I'm Muhammad Mabrouk..."],
  8.                typeSpeed: 40,
  9.                backSpeed: 40,
  10.                startDelay: 500,
  11.                backDelay: 3000,
  12.                loop: true,
  13.                showCursor: false
  14.           });
  16.           $(window).off("scroll.aboutMe");
  17.      }
  18. });

Save the files and refresh your browser.

my skills section

To edit the text in 'My Skills Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.

  1. <!-- Start My Skills -->
  2. <div id="skills" class="my-skills">
  3.      <div class="overlay">
  4.           <div class="container">
  5.                <div class="heading wow fadeInDown" data-wow-offset="150">
  6.                     <div class="line-of-heading"><⁄div>
  7.                     <h2>my amazing skills<⁄h2>
  8.                     <div class="line-of-heading"><⁄div>
  9.                <⁄div>
  10.                <div class="my-skills-content">
  11.                     <div class="webDesign-circle-progress wow fadeInUp" data-wow-delay=".1s" data-wow-offset="200">
  12.                          <h3>
  13.                               <strong><⁄strong>
  14.                          <⁄h3>
  15.                          <h4>web design<⁄h4>
  16.                     <⁄div>
  17.                     <div class="webDesign-circle-progress wow fadeInUp" data-wow-delay=".2s" data-wow-offset="200">
  18.                          <h3>
  19.                               <strong><⁄strong>
  20.                          <⁄h3>
  21.                          <h4>graphics design<⁄h4>
  22.                     <⁄div>
  23.                     <div class="webDesign-circle-progress wow fadeInUp" data-wow-delay=".3s" data-wow-offset="200">
  24.                          <h3>
  25.                               <strong><⁄strong>
  26.                          <⁄h3>
  27.                          <h4>PHP developer<⁄h4>
  28.                     <⁄div>
  29.                     <div class="webDesign-circle-progress wow fadeInUp" data-wow-delay=".4s" data-wow-offset="200">
  30.                          <h3>
  31.                               <strong><⁄strong>
  32.                          <⁄h3>
  33.                          <h4>java script<⁄h4>
  34.                     <⁄div>
  35.                <⁄div>
  36.           <⁄div>
  37.      <⁄div>
  38. <⁄div>
  39. <!-- End My Skills -->

To edit the progress percentage Open the script.js file using any text editor then look for the following code and replace highlighted numbers.

  1. $(window).on("scroll.mySkills-1", function () {
  2.      if ($(this).scrollTop() >= $("div.my-skills-content div:first-of-type").offset().top - $(window).height() + 200) {
  4.           $(".webDesign-circle-progress").circleProgress({
  5.                value: 0.85
  6.           }).on('circle-animation-progress', function (event, progress) {
  7.                $(this).find('strong').html(Math.round(85 * progress) + '<i>%<⁄i>');
  8.           });
  10.           $(window).off("scroll.mySkills-1");
  12.      }
  13. });
  15. $(window).on("scroll.mySkills-2", function () {
  16.      if ($(this).scrollTop() >= $("div.my-skills-content div:nth-of-type(2)").offset().top - $(window).height() + 200) {
  18.           $(".graphicsDesign-circle-progress").circleProgress({
  19.                value: 0.65
  20.           }).on('circle-animation-progress', function (event, progress) {
  21.                $(this).find('strong').html(Math.round(65 * progress) + '<i>%<⁄i>');
  22.           });
  24.           $(window).off("scroll.mySkills-2");
  26.      }
  27. });
  29. $(window).on("scroll.mySkills-3", function () {
  30.      if ($(this).scrollTop() >= $("div.my-skills-content div:nth-of-type(3)").offset().top - $(window).height() + 200) {
  32.           $(".phpDeveloper-circle-progress").circleProgress({
  33.                value: 0.8
  34.           }).on('circle-animation-progress', function (event, progress) {
  35.                $(this).find('strong').html(Math.round(80 * progress) + '<i>%<⁄i>');
  36.           });
  38.           $(window).off("scroll.mySkills-3");
  40.      }
  41. });
  43. $(window).on("scroll.mySkills-4", function () {
  44.      if ($(this).scrollTop() >= $("div.my-skills-content div:last-of-type").offset().top - $(window).height() + 200) {
  46.           $(".javaScript-circle-progress").circleProgress({
  47.                value: 0.75
  48.           }).on('circle-animation-progress', function (event, progress) {
  49.                $(this).find('strong').html(Math.round(75 * progress) + '<i>%<⁄i>');
  50.           });
  52.           $(window).off("scroll.mySkills-4");
  54.      }
  55. });

Save the files and refresh your browser.

my statistics section

To edit the text in 'My Statistics Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.

  1. <!-- Start My Statistics -->
  2. <div id="statistics" class="my-statistics">
  3.      <div class="overlay">
  4.           <div class="container">
  5.                <div class="heading wow fadeInDown" data-wow-offset="150">
  6.                     <div class="line-of-heading"><⁄div>
  7.                     <h2>my statistics<⁄h2>
  8.                     <div class="line-of-heading"><⁄div>
  9.                <⁄div>
  10.                <div class="my-statistics-content">
  11.                     <div class="my-statistics-boxes wow fadeInUp" data-wow-delay=".1s" data-wow-offset="200">
  12.                          <i class="fa fa-thumbs-up" aria-hidden="true"><⁄i>
  13.                          <span><⁄span>
  14.                          <h4>projects completed<⁄h4>
  15.                     <⁄div>
  16.                     <div class="my-statistics-boxes wow fadeInUp" data-wow-delay=".2s" data-wow-offset="200">
  17.                          <i class="fa fa-thumbs-up" aria-hidden="true"><⁄i>
  18.                          <span><⁄span>
  19.                          <h4>happy clients<⁄h4>
  20.                     <⁄div>
  21.                     <div class="my-statistics-boxes wow fadeInUp" data-wow-delay=".3s" data-wow-offset="200">
  22.                          <i class="fa fa-thumbs-up" aria-hidden="true"><⁄i>
  23.                          <span><⁄span>
  24.                          <h4>cups of coffee<⁄h4>
  25.                     <⁄div>
  26.                     <div class="my-statistics-boxes wow fadeInUp" data-wow-delay=".4s" data-wow-offset="200">
  27.                          <i class="fa fa-thumbs-up" aria-hidden="true"><⁄i>
  28.                          <span><⁄span>
  29.                          <h4>hours of work<⁄h4>
  30.                     <⁄div>
  31.                <⁄div>
  32.           <⁄div>
  33.      <⁄div>
  34. <⁄div>
  35. <!-- End My Statistics -->

To edit the numbers Open the script.js file using any text editor then look for the following code and replace highlighted numbers.

  1. $(window).on("scroll.myStatistics-1", function () {
  2.      if ($(this).scrollTop() >= $("div.my-statistics-content div:first-of-type").offset().top - $(window).height() + 200) {
  3.           $(".my-statistics-boxes:first-of-type span").countTo({
  4.                from: 0,
  5.                to: 52,
  6.                speed: 1800
  7.           });
  9.           $(window).off("scroll.myStatistics-1");
  10.      }
  11. });
  13. $(window).on("scroll.myStatistics-2", function () {
  14.      if ($(this).scrollTop() >= $("div.my-statistics-content div:nth-of-type(2)").offset().top - $(window).height() + 200) {
  15.           $(".my-statistics-boxes:nth-of-type(2) span").countTo({
  16.                from: 0,
  17.                to: 37,
  18.                speed: 1800
  19.           });
  21.           $(window).off("scroll.myStatistics-2");
  22.      }
  23. });
  25. $(window).on("scroll.myStatistics-3", function () {
  26.      if ($(this).scrollTop() >= $("div.my-statistics-content div:nth-of-type(3)").offset().top - $(window).height() + 200) {
  27.           $(".my-statistics-boxes:nth-of-type(3) span").countTo({
  28.                from: 0,
  29.                ;to: 324,
  30.                speed: 1800
  31.           });
  33.           $(window).off("scroll.myStatistics-3");
  34.      }
  35. });
  37. $(window).on("scroll.myStatistics-4", function () {
  38.      if ($(this).scrollTop() >= $("div.my-statistics-content div:last-of-type").offset().top - $(window).height() + 200) {
  39.           $(".my-statistics-boxes:last-of-type span").countTo({
  40.                from: 0,
  41.                to: 468,
  42.                speed: 1800
  43.           });
  45.           $(window).off("scroll.myStatistics-4");
  46.      }
  47. });

Save the files and refresh your browser.

using contact form

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.

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.