index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Waheed Arshad - Personal Portfolio</title>
    <meta name="description" content="Waheed Arshad - Personal Portfolio " />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="shortcut icon" type="image/x-icon" href="./images/favi.png" />

    <!-- STYLESHEETS -->

    <link
      rel="stylesheet"
      href="./css/bootstrap.min.css"
      type="text/css"
      media="all"
    />
    <link
      rel="stylesheet"
      href="./css/all.min.css"
      type="text/css"
      media="all"
    />
    <link
      rel="stylesheet"
      href="./css/simple-line-icons.css"
      type="text/css"
      media="all"
    />
    <link rel="stylesheet" href="./css/slick.css" type="text/css" media="all" />
    <link
      rel="stylesheet"
      href="./css/simplebar.css"
      type="text/css"
      media="all"
    />
    <link
      rel="stylesheet"
      href="./css/jquery.mCustomScrollbar.min.css"
      type="text/css"
      media="all"
    />
    <link rel="stylesheet" href="./css/style.css" type="text/css" media="all" />

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- preloader -->
    <div id="preloader">
      <div class="outer">
        <div class="spinner">
          <div class="dot1"></div>
          <div class="dot2"></div>
        </div>
      </div>
    </div>

    <!-- site wrapper -->
    <div class="site-wrapper">
      <!-- mobile header -->
      <div class="mobile-header py-2 px-3 mt-4">
        <button class="menu-icon mr-2">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <a href="index.html" class="logo"
          ><img src="./images/circle-cropped.png" alt="Waheed Arshad"
        /></a>
        <a href="index.html" class="site-title dot ml-2">Waheed Arshad</a>
      </div>

      <!-- header -->
      <header class="left float-left shadow-dark" id="header">
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <div class="header-inner d-flex align-items-start flex-column">
          <a href="index.html"
            ><img
              src="./images/circle-cropped.png"
              width="70"
              height="70"
              alt="Waheed Arshad"
          /></a>
          <a href="index.html" class="site-title dot mt-3">Waheed</a>
          <span class="site-slogan">.Net Developer</span>

          <!-- navigation menu -->
          <nav>
            <ul class="vertical-menu scrollspy">
              <li>
                <a href="#home" class="active"><i class="icon-home"></i>Home</a>
              </li>
              <li>
                <a href="#about"><i class="icon-user"></i>About</a>
              </li>
              <li>
                <a href="#services"><i class="icon-bulb"></i>Services</a>
              </li>
              <li>
                <a href="#resume"><i class="icon-graduation"></i>Education</a>
              </li>
              <li>
                <a href="#works"><i class="icon-grid"></i>Works</a>
              </li>
              <li>
                <a href="#contact"><i class="icon-phone"></i>Contact</a>
              </li>
            </ul>
          </nav>

          <!-- footer -->
          <div class="footer mt-auto">
            <!-- social icons -->
            <ul class="social-icons list-inline">
              <li class="list-inline-item"><a href="https://medium.com/@waheedarshad239"><i class="fab fa-medium"></i></a></li>
              <li class="list-inline-item">
                <a href="https://stackoverflow.com/users/16193249/waheed-arshad?tab=profile" target="_blank"
                  ><i class="fab fa-stack-overflow"></i
                ></a>
              </li>
              <li class="list-inline-item">
                <a
                  href="https://www.linkedin.com/in/waheed-developer/"
                  target="_blank"
                  ><i class="fab fa-linkedin"></i
                ></a>
              </li>
              <li class="list-inline-item">
                <a href="https://github.com/Waheed-Programmer" target="_blank"
                  ><i class="fab fa-github"></i
                ></a>
              </li>
              <li class="list-inline-item"><a href="https://leetcode.com/waheedarshad239/" target="_blank"><i class="fab fa-dribbble"></i></a></li>
            </ul>

            <!-- copyright -->
            <span class="copyright" id="currentYear"></span>

          </div>
        </div>
      </header>

      <!-- main content area -->
      <main class="content float-right">
        <!-- section hero -->
        <section
          class="hero background parallax shadow-dark d-flex align-items-center"
          id="home"
          data-image-src=""
        >
          <div class="cta mx-auto mt-2">
            <h1 class="mt-0 mb-4">I’m Waheed<span class="dot"></span></h1>
            <p class="mb-4">
              1+ year of experience in .Net, C#, ASP.Net MVC,IIS, ADO.NET, .NET Core, EF, Web development, MSSQL Server, Web API, Relational Databases, Analysis, Designing, Optimization, Debugging, Maintenance and Building enterprise level projects.
            </p>
            <a href="#works" class="btn btn-default btn-lg mr-3"
              ><i class="icon-grid"></i>View Portfolio</a
            >
            <div
              class="spacer d-md-none d-lg-none d-sm-none"
              data-height="10"
            ></div>
            <a href="#contact" class="btn btn-border-light btn-lg"
              ><i class="icon-envelope"></i>Hire me</a
            >
          </div>
          <div class="overlay"></div>
        </section>

        <!-- section about -->
        <section id="about" class="shadow-blue white-bg padding">
          <h3 class="section-title">About Me</h3>
          <div class="spacer" data-height="80"></div>

          <div class="row">
            <div class="col-md-3">
              <img
                src="./images/circle-cropped.png"
                width="150"
                height="150"
                alt="about"
              />
            </div>
            <div class="col-md-9">
              <h2 class="mt-4 mt-md-0 mb-4">Hello,</h2>
              <p class="mb-0">
                I am Waheed Arshad, .Net Developer from Pakistan. I have rich
                experience in web site design and building and customization. We have been helping small
                businesses to grow their business by developing websites.Thank
                you.
              </p>
              <div class="row my-4">
                <div class="col-md-6">
                  <p class="mb-2">
                    Name: <span class="text-dark">Waheed Arshad</span>
                  </p>
                  <!-- <p class="mb-0">
                    Status: <span class="text-dark">Single</span>
                  </p> -->
                </div>
                <div class="col-md-6 mt-2 mt-md-0 mt-sm-2">
                  <p class="mb-2">
                    Email:
                    <span class="text-dark">waheedarshad239@gmail.com</span>
                  </p>
                  <!-- <p class="mb-0">
                    Location: <span class="text-dark">Lahore, Pakistan</span>
                  </p> -->
                </div>
              </div>
              <a href="./images//Waheed Arshad Dot Net Developer Resume.pdf" class="btn btn-default mr-3" target="_blank"
                ><i class="icon-cloud-download"></i>Download CV</a
              >
              <a href="#contact" class="btn btn-alt mt-2 mt-md-0 mt-xs-2"
                ><i class="icon-envelope"></i>Hire me</a
              >
            </div>
          </div>
        </section>

        <!-- section skills -->
        <section id="skills" class="shadow-blue white-bg padding">
          <h3 class="section-title">My skills</h3>
          <div class="spacer" data-height="80"></div>

          <p class="mb-0">
            I’m a person who has the passion to learn new technology that the
            market demands and needs of the future.Impossible aims can achieve
            with Teamwork and hard work.
          </p>

          <div class="row mt-5">
            <div class="col-md-6">
              <!-- skill item -->
              <div class="skill-item">
                <div class="skill-info clearfix">
                  <h4 class="float-left mb-3 mt-0">Desktop Application</h4>
                  <span class="float-right">85%</span>
                </div>
                <div class="progress">
                  <div
                    class="progress-bar"
                    role="progressbar"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    aria-valuenow="85"
                  ></div>
                </div>
                <div class="spacer" data-height="50"></div>
              </div>
            </div>

            <div class="col-md-6">
              <!-- skill item -->
              <div class="skill-item">
                <div class="skill-info clearfix">
                  <h4 class="float-left mb-3 mt-0">HTML,CSS,Bootstrap,JS, jQuery, Angular </h4>
                  <span class="float-right">90%</span>
                </div>
                <div class="progress">
                  <div
                    class="progress-bar"
                    role="progressbar"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    aria-valuenow="90"
                  ></div>
                </div>
                <div class="spacer" data-height="50"></div>
              </div>
            </div>

            <div class="col-md-6">
              <!-- skill item -->
              <div class="skill-item">
                <div class="skill-info clearfix">
                  <h4 class="float-left mb-3 mt-0">C#, SQL Server</h4>
                  <span class="float-right">80%</span>
                </div>
                <div class="progress">
                  <div
                    class="progress-bar"
                    role="progressbar"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    aria-valuenow="60"
                  ></div>
                </div>
                <div class="spacer d-md-none d-lg-none" data-height="50"></div>
              </div>
            </div>

            <div class="col-md-6">
              <!-- skill item -->
              <div class="skill-item">
                <div class="skill-info clearfix">
                  <h4 class="float-left mb-3 mt-0">
                    .Net MVC, .Net Core MVC , RestFul
                  </h4>
                  <span class="float-right">85%</span>
                </div>
                <div class="progress">
                  <div
                    class="progress-bar"
                    role="progressbar"
                    aria-valuemin="0"
                    aria-valuemax="100"
                    aria-valuenow="70"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- section facts -->
        <section
          id="facts"
          class="shadow-dark color-white background parallax padding-50"
          data-image-src="images/background-1.jpg"
        >
          <div class="row relative z-1">
            <div class="col-md-3 col-sm-6">
              <!-- fact item -->
              <div class="fact-item text-center">
                <i class="icon-like icon-circle"></i>
                <h2 class="count">15</h2>
                <span>Projects completed</span>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <!-- fact item -->
              <div class="fact-item text-center">
                <i class="icon-cup icon-circle"></i>
                <h2 class="count">27</h2>
                <span>Cup of coffee</span>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <!-- fact item -->
              <div class="fact-item text-center">
                <i class="icon-emotsmile icon-circle"></i>
                <h2 class="count">5</h2>
                <span>Happy customers</span>
              </div>
            </div>
            <div class="col-md-3 col-sm-6">
              <!-- fact item -->
              <div class="fact-item text-center">
                <i class="icon-trophy icon-circle"></i>
                <h2 class="count">2</h2>
                <span>Awards won</span>
              </div>
            </div>
          </div>

          <div class="overlay"></div>
        </section>

        <!-- section services -->
        <section id="services" class="shadow-blue white-bg padding">
          <h3 class="section-title">Services</h3>
          <div class="spacer" data-height="80"></div>

          <div class="row">
            <div class="col-md-4 col-sm-6">
              <!-- service item -->
              <div class="service-item text-center">
                <i class="icon-globe icon-simple"></i>
                <h4 class="my-3">Desktop App</h4>
                <p class="mb-0">
                  I will Develop Desktop Application with SQL Server.
                </p>
              </div>
              <div class="spacer" data-height="20"></div>
            </div>

            <div class="col-md-4 col-sm-6">
              <!-- service item -->
              <div class="service-item text-center">
                <i class="icon-chemistry icon-simple"></i>
                <h4 class="my-3">Web Development</h4>
                <p class="mb-0">I will Design and Develop responsive Website</p>
              </div>
              <div class="spacer" data-height="20"></div>
            </div>

            <div class="col-md-4 col-sm-6">
              <!-- service item -->
              <div class="service-item text-center">
                <i class="icon-bubbles icon-simple"></i>
                <h4 class="my-3">.Net Development</h4>
                <p class="mb-0">I will do develop websites in .Net MVC, .Net Core </p>
              </div>
            </div>
            <div class="col-md-4 col-sm-6">
              <!-- service item -->
              <div class="service-item text-center">
                <i class="icon-rocket icon-simple"></i>
                <h4 class="my-3">SEO</h4>
                <p class="mb-0">I will do wordpress SEO optimization.</p>
              </div>
              <div class="spacer d-md-none d-lg-none" data-height="20"></div>
            </div>

            <div class="col-md-4 col-sm-6">
              <!-- service item -->
              <div class="service-item text-center">
                <i class="icon-note icon-simple"></i>
                <h4 class="my-3">Python Development</h4>
                <p class="mb-0">
                  I will do python programming task on bigner level
                </p>
              </div>
              <div class="spacer d-md-none d-lg-none" data-height="20"></div>
            </div>

            <div class="col-md-4 col-sm-6">
              <!-- service item -->
              <div class="service-item text-center">
                <i class="icon-directions icon-simple"></i>
                <h4 class="my-3">Wordpress</h4>
                <p class="mb-0">
                  I will design and customization WordPress Website.
                </p>
              </div>
              <div class="spacer" data-height="20"></div>
            </div>
          </div>
        </section>

        <!-- section education -->
        <section id="resume" class="shadow-blue white-bg padding">
          <h3 class="section-title">Education</h3>
          <div class="spacer" data-height="80"></div>

          <!-- timeline -->
          <div class="timeline">
            <div class="entry">
              <div class="title">
                <span>2018 - 2022</span>
              </div>
              <div class="body">
                <h4 class="mt-0">Bachelor’s Degree</h4>
                <p>
                  I did complete my Graduaction in BS Computer Science from COMSATS University
                  Islamabad , Campus Sahiwal.
                </p>
              </div>
            </div>
            <div class="entry">
              <div class="title">
                <span>2014 - 2017</span>
              </div>
              <div class="body">
                <h4 class="mt-0">Intermediate Degree</h4>
                <p>
                  I did complete my Intermediate from GOVT. Postgraduate
                  College, Khanewal.
                </p>
              </div>
            </div>
            <div class="entry">
              <div class="title">
                <span>2012 - 2014</span>
              </div>
              <div class="body">
                <h4 class="mt-0">Matriculation in Science</h4>
                <p>
                  I did complete my Matric from Marriyam School System,
                  Khanewal.
                </p>
              </div>
            </div>
            <span class="timeline-line"></span>
          </div>
        </section>

        <!-- section works -->
        <section id="works" class="shadow-blue white-bg padding">
          <h3 class="section-title">Portfolio</h3>
          <div class="spacer" data-height="80"></div>

          <!-- portfolio filter (desktop) -->
          <ul class="portfolio-filter list-inline">
            <li class="current list-inline-item" data-filter="*">
              All Projects
            </li>
            <!-- <li class="list-inline-item" data-filter=".branding">Branding</li>
				<li class="list-inline-item" data-filter=".creative">Creative</li> -->
          </ul>

          <!-- portfolio filter (mobile) -->
          <div class="pf-filter-wrapper mb-4">
            <!-- <select class="portfolio-filter-mobile">
              <!-- <option value="*">Everything</option> -->
              <!-- <option value=".creative">Creative</option>
					<option value=".video">Video</option>
					<option value=".design">Design</option>
					<option value=".branding">Branding</option> 
            </select> -->
          </div>

          <!-- portolio wrapper -->
          <div class="row portfolio-wrapper">
           
			 <!-- portfolio item -->
       <div class="col-md-4 col-sm-6 grid-item creative">
				<a href="Hrango.html">
				  <div class="portfolio-item">
					<div class="details">
					  <h4 class="title">SAAS-HRM System</h4>
					  <span class="term">Asp.Net Core MVC,WebApI SQL Server </span>
					</div>
					<span class="plus-icon">+</span>
					<div class="thumb">
					  <img src="./Hrango-Images/Candidate-Engagement.png" alt="Portfolio-title" />
					  <div class="mask"></div>
					</div>
				  </div>
				</a>
			  </div>
  
		
       
       
       
       
       <div class="col-md-4 col-sm-6 grid-item creative">
				<a href="FYP.html">
				  <div class="portfolio-item">
					<div class="details">
					  <h4 class="title">Final Year Project</h4>
					  <span class="term">Asp.Net MVC, SQL Server </span>
					</div>
					<span class="plus-icon">+</span>
					<div class="thumb">
					  <img src="./images/service.jpg" alt="Portfolio-title" />
					  <div class="mask"></div>
					</div>
				  </div>
				</a>
			  </div>
            <!-- portfolio item -->
            <div class="col-md-4 col-sm-6 grid-item creative design">
              <a href="Clothzilla.html">
                <div class="portfolio-item">
                  <div class="details">
                    <h4 class="title">Ecommerce Store</h4>
                    <span class="term">Asp.Net MVC, SQL Server</span>
                  </div>
                  <span class="plus-icon">+</span>
                  <div class="thumb">
                    <img src="./images/Ecomer.png" alt="Portfolio-title" />
                    <div class="mask"></div>
                  </div>
                </div>
              </a>
            </div>

           	<!-- portfolio item -->
			   <div class="col-md-4 col-sm-6 grid-item video">
				<a href="DesktopApplication.html">
				  <div class="portfolio-item">
					<div class="details">
					  <h4 class="title">Desktop Application</h4>
					  <span class="term">C#, SQL Server</span>
					</div>
					<span class="plus-icon">+</span>
					<div class="thumb">
					  <img src="./images/dashboard.PNG" alt="Portfolio-title" />
					  <div class="mask"></div>
					</div>
				  </div>
				</a>
			  </div>
            <!-- portfolio item -->
            <div class="col-md-4 col-sm-6 grid-item video branding">
              <a href="Accounting.html">
                <div class="portfolio-item">
                  <div class="details">
                    <h4 class="title">Wordpress</h4>
                    <span class="term">Project, Accounting & Bookkeeping</span>
                  </div>
                  <span class="plus-icon">+</span>
                  <div class="thumb">
                    <img
                      src="./images/Screenshot (214).png"
                      alt="Portfolio-title"
                    />
                    <div class="mask"></div>
                  </div>
                </div>
              </a>
            </div>
            <!-- portfolio item -->
            <div class="col-md-4 col-sm-6 grid-item branding d-none">
              <a href="GYM.html">
                <div class="portfolio-item">
                  <div class="details">
                    <h4 class="title">GYM Fitness</h4>
                    <span class="term">HTML,CSS</span>
                  </div>
                  <span class="plus-icon">+</span>
                  <div class="thumb">
                    <img
                      src="./images/Screenshot (9).png"
                      alt="Portfolio-title"
                    />
                    <div class="mask"></div>
                  </div>
                </div>
              </a>
            </div>
            <!-- portfolio item -->
            <div class="col-md-4 col-sm-6 grid-item creative design d-none">
              <a href="Portfolio.html">
                <div class="portfolio-item">
                  <div class="details">
                    <h4 class="title">Portfolio</h4>
                    <span class="term">Design, WordPress</span>
                  </div>
                  <span class="plus-icon">+</span>
                  <div class="thumb">
                    <img src="./images/port.PNG" alt="Portfolio-title" />
                    <div class="mask"></div>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <!-- more button -->
          <div class="load-more text-center mt-4">
            <!-- <a href="javascript:" class="btn btn-default"><i class="fas fa-circle-notch"></i> Load more</a> -->
            <!-- numbered pagination (hidden for infinite scroll) -->
            <ul class="portfolio-pagination list-inline d-none">
              <li class="list-inline-item">1</li>
              <!-- <li class="list-inline-item"><a href="works-2.html">2</a></li> -->
            </ul>
          </div>
        </section>

        <!-- section testimonials -->
        <!-- section testimonials -->
        <section id="testimonials" class="shadow-blue white-bg padding">
          <h3 class="section-title">Certificates</h3>
          <div class="spacer" data-height="97"></div>

          <div class="row testimonials-wrapper">
            <div class="col-md-6">
              <!-- testimonial item -->
              <div class="testimonial-item">
                <!--<span class="symbol"><i class="fas fa-quote-left"></i></span>-->
                <!--<p>I enjoy working with Waheed and learn so much. You guy make the process fun and interesting. Good luck!</p>-->
                <div class="testimonial-details">
                  <div class="">
                    <img src="./images/ASP-MVC.jpg" alt="customer-name" />
                  </div>
                  <!---	<div class="info">
						<h4>Helen </h4>
						<span>WebDesign customer</span>
					</div>-->
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <!-- testimonial item -->
              <div class="testimonial-item">
                <!--<span class="symbol"><i class="fas fa-quote-left"></i></span>-->
                <!--<p>I enjoy working with Waheed and learn so much. You guy make the process fun and interesting. Good luck!</p>-->
                <div class="testimonial-details">
                  <div class="">
                    <img src="./images/LearnJquery.jpg" alt="customer-name" />
                  </div>
                  <!---	<div class="info">
						<h4>Helen </h4>
						<span>WebDesign customer</span>
					</div>-->
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <!-- testimonial item -->
              <div class="testimonial-item">
                <!--<span class="symbol"><i class="fas fa-quote-left"></i></span>-->
                <!--<p>I enjoy working with Waheed and learn so much. You guy make the process fun and interesting. Good luck!</p>-->
                <div class="testimonial-details">
                  <div class="">
                    <img src="./images/Learn JS.jpg" alt="customer-name" />
                  </div>
                  <!---	<div class="info">
						<h4>Helen </h4>
						<span>WebDesign customer</span>
					</div>-->
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <!-- testimonial item -->
              <div class="testimonial-item">
                <!--<span class="symbol"><i class="fas fa-quote-left"></i></span>-->
                <!--<p>I enjoy working with Waheed and learn so much. You guy make the process fun and interesting. Good luck!</p>-->
                <div class="testimonial-details">
                  <div class="">
                    <img src="./images/html and CSS.jpg" alt="customer-name" />
                  </div>
                  <!---	<div class="info">
						<h4>Helen </h4>
						<span>WebDesign customer</span>
					</div>-->
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <!-- testimonial item -->
              <div class="testimonial-item">
                <!--<span class="symbol"><i class="fas fa-quote-left"></i></span>-->
                <!--<p>I enjoy working with Waheed and learn so much. You guy make the process fun and interesting. Good luck!</p>-->
                <div class="testimonial-details">
                  <div class="">
                    <img src="./images/Bootstrap.jpg" alt="customer-name" />
                  </div>
                  <!---	<div class="info">
						<h4>Helen </h4>
						<span>WebDesign customer</span>
					</div>-->
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <!-- testimonial item -->
              <div class="testimonial-item">
                <!--<span class="symbol"><i class="fas fa-quote-left"></i></span>-->
                <!--<p>I enjoy working with Waheed and learn so much. You guy make the process fun and interesting. Good luck!</p>-->
                <div class="testimonial-details">
                  <div class="">
                    <img src="./images/Mysql.jpg" alt="customer-name" />
                  </div>
                  <!---	<div class="info">
						<h4>Helen </h4>
						<span>WebDesign customer</span>
					</div>-->
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <!-- testimonial item -->
              <div class="testimonial-item">
                <!--<span class="symbol"><i class="fas fa-quote-left"></i></span>-->
                <!--<p>I enjoy working with Waheed and learn so much. You guy make the process fun and interesting. Good luck!</p>-->
                <div class="testimonial-details">
                  <div class="">
                    <img
                      src="./images/Web Responsive.png"
                      alt="customer-name"
                      class="p-5"
                    />
                  </div>
                  <!---	<div class="info">
								<h4>Helen </h4>
								<span>WebDesign customer</span>
							</div>-->
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <!-- testimonial item -->
              <div class="testimonial-item">
                <!--<span class="symbol"><i class="fas fa-quote-left"></i></span>-->
                <!--<p>I enjoy working with Waheed and learn so much. You guy make the process fun and interesting. Good luck!</p>-->
                <div class="testimonial-details">
                  <div class="">
                    <img
                      src="./images/Wordpress.png"
                      alt="customer-name"
                      class="p-5"
                    />
                  </div>
                  <!---	<div class="info">
								<h4>Helen </h4>
								<span>WebDesign customer</span>
							</div>-->
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- section clients -->

        <!-- section contact -->
        <section id="contact" class="shadow-blue white-bg padding">
          <h3 class="section-title">Get in touch</h3>
          <div class="spacer" data-height="80"></div>

          <div class="row">
            <div class="col-md-4 mb-4 mb-md-0">
              <!-- contact info -->
              <div class="contact-info mb-5">
                <i class="icon-phone"></i>
                <div class="details">
                  <h5>Phone</h5>
                  <span>+328 491 8622</span>
                </div>
              </div>
              <div class="contact-info mb-5">
                <i class="icon-envelope"></i>
                <div class="details">
                  <h5>Email Address</h5>
                  <span>waheedarshad239@gmail.com</span>
                </div>
              </div>
              <div class="contact-info">
                <i class="icon-location-pin"></i>
                <div class="details">
                  <h5>Location</h5>
                  <span>Lahore, Pakistan</span>
                </div>
              </div>
            </div>

            <div class="col-md-8">
              <!-- Contact Form -->
              <form
                id="contact-form"
                class="contact-form"
                method="post"
                action="form/contact.php"
              >
                <div class="messages"></div>

                <div class="row">
                  <div class="column col-md-6">
                    <!-- Name input -->
                    <div class="form-group">
                      <input
                        type="text"
                        class="form-control"
                        name="InputName"
                        id="InputName"
                        placeholder="Your name"
                        required="required"
                        data-error="Name is required."
                      />
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>

                  <div class="column col-md-6">
                    <!-- Email input -->
                    <div class="form-group">
                      <input
                        type="email"
                        class="form-control"
                        id="InputEmail"
                        name="InputEmail"
                        placeholder="Email address"
                        required="required"
                        data-error="Email is required."
                      />
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>

                  <div class="column col-md-12">
                    <!-- Email input -->
                    <div class="form-group">
                      <input
                        type="text"
                        class="form-control"
                        id="InputSubject"
                        name="InputSubject"
                        placeholder="Subject"
                        required="required"
                        data-error="Subject is required."
                      />
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>

                  <div class="column col-md-12">
                    <!-- Message textarea -->
                    <div class="form-group">
                      <textarea
                        name="InputMessage"
                        id="InputMessage"
                        class="form-control"
                        rows="5"
                        placeholder="Message"
                        required="required"
                        data-error="Message is required."
                      ></textarea>
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>
                </div>

                <button
                  type="submit"
                  name="submit"
                  id="submit"
                  value="Submit"
                  class="btn btn-default"
                >
                  <i class="icon-paper-plane"></i>Send Message</button
                ><!-- Send Button -->
              </form>
              <!-- Contact Form end -->
            </div>
          </div>
        </section>
      </main>
    </div>

    <!-- Go to top button -->
    <a href="javascript:" id="return-to-top"
      ><i class="fa fa-chevron-up"></i
    ></a>

    <!-- SCRIPTS -->

    <script src="./js/jquery-1.12.3.min.js"></script>
    <script src="./js/jquery.easing.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/jquery.waypoints.min.js"></script>
    <script src="./js/jquery.counterup.min.js"></script>
    <script src="./js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="./js/isotope.pkgd.min.js"></script>
    <script src="./js/infinite-scroll.min.js"></script>
    <script src="./js/imagesloaded.pkgd.min.js"></script>
    <script src="./js/slick.min.js"></script>
    <script src="./js/contact.js"></script>
    <script src="./js/validator.js"></script>
    <script src="./js/custom.js"></script>
  </body>
</html>