document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html lang="en-gb" class="no-js">
  3. <!--<![endif]-->
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7.    
  8.     <title>My Profile</title>
  9.     <meta name="description" content="">
  10.     <meta name="author" content="WebThemez">
  11.    
  12.     <link rel="stylesheet" href="css/bootstrap.min.css" />
  13.     <link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
  14.     <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
  15.     <link rel="stylesheet" type="text/css" href="css/da-slider.css" />
  16.     <!-- Owl Carousel Assets -->
  17.     <link href="js/owl-carousel/owl.carousel.css" rel="stylesheet">
  18.     <link rel="stylesheet" href="css/styles.css" />
  19.     <!-- Font Awesome -->
  20.     <link href="font/css/font-awesome.min.css" rel="stylesheet">
  21. </head>
  22.  
  23. <body>
  24.     <header class="header">
  25.         <div class="container">
  26.             <nav class="navbar navbar-inverse" role="navigation">
  27.                 <div class="navbar-header">
  28.                     <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
  29.                         <span class="sr-only">Toggle navigation</span>
  30.                         <span class="icon-bar"></span>
  31.                         <span class="icon-bar"></span>
  32.                         <span class="icon-bar"></span>
  33.                     </button>
  34.                     <a href="#" class="navbar-brand scroll-top logo"><b>Neu Profile</b></a>
  35.                 </div>
  36.                 <!--/.navbar-header-->
  37.                 <div id="main-nav" class="collapse navbar-collapse">
  38.                     <ul class="nav navbar-nav" id="mainNav">
  39.                         <li class="active"><a href="#home" class="scroll-link">Home</a></li>
  40.                         <li><a href="#aboutUs" class="scroll-link">About Us</a></li>
  41.                         <li><a href="#skills" class="scroll-link">Skills</a></li>
  42.                         <li><a href="#experience" class="scroll-link">Experience</a></li>
  43.                         <li><a href="#portfolio" class="scroll-link">Portfolio</a></li>
  44.                         <li><a href="#contactUs" class="scroll-link">Contact Us</a></li>
  45.                     </ul>
  46.                 </div>
  47.                 <!--/.navbar-collapse-->
  48.             </nav>
  49.             <!--/.navbar-->
  50.         </div>
  51.         <!--/.container-->
  52.     </header>
  53.     <!--/.header-->
  54.     <div id="#top"></div>
  55.     <section id="home">
  56.         <div class="banner-container">
  57.             <img src="images/bg3.jpg" alt="banner" />
  58.             <div class="container banner-content">
  59.                 <div id="da-slider" class="da-slider">
  60.                     <div class="da-slide">
  61.                         <h2>Hello World</h2>
  62.                         <p>I\'m Naufal, Nice to meet you!!!</p>
  63.                        <div class="da-img"></div>
  64.                    </div>
  65.                    <div class="da-slide">
  66.                        <h2>PBKK</h2>
  67.                        <p>I develop website using Bootstrap front-end framework..</p>
  68.                        <div class="da-img"></div>
  69.                    </div>
  70.                    <div class="da-slide">
  71.                        <h2>HTML5/CSS3</h2>
  72.                        <p>HTML5 is a markup language used for structuring and presenting Web.</p>
  73.                        <div class="da-img"></div>
  74.                    </div>
  75.                    <div class="da-slide">
  76.                        <h2>JavaScript/jQuery</h2>
  77.                        <p>jQuery: Write Less, Do More...</p>
  78.                        <div class="da-img"></div>
  79.                    </div>
  80.                 <!--  <nav class="da-arrows">
  81.                        <span class="da-arrows-prev"></span>
  82.                        <span class="da-arrows-next"></span>
  83.                    </nav> -->
  84.                </div>
  85.            </div>
  86.        </div>
  87.    </section>
  88.    <section id="introText">
  89.        <div class="container">
  90.            <div class="text-center">
  91.            <h1>I create beautiful responsive websites, Yes I am a UX geek</h1>
  92.              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium. Cras posuere dolor risus. Pellentesque elementum ultricies quam, sit amet rhoncus nisl viverra in. Cras imperdiet nisi a euismod molestie. Ut a metus arcu. Pellentesque feugiat dictum erat. Nulla vehicula condimentum purus, quis imperdiet nisl ultricies eleifend. Nulla quis rhoncus risus. Ut vel vehicula urna.</p>
  93.            </div>
  94.        </div>
  95.  
  96.    </section>
  97.    <!--About-->
  98.    <section id="aboutUs" class="secPad">
  99.        <div class="container">
  100.            <div class="heading text-center">
  101.                <!-- Heading -->
  102.                <h2>I am Sam, a UI Designer & developer</h2>
  103.                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
  104.            </div>
  105.            <div class="row">
  106.                <!-- item -->
  107.                <div class="col-md-4 text-center tileBox">
  108.                   <div class="txtHead"> <i class="fa fa-desktop"></i>
  109.                    <h3>Responsive <span class="id-color">Design</span></h3></div>
  110.                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium.</p>
  111.                </div>
  112.                <!-- end: -->
  113.  
  114.                <!-- item -->
  115.                <div class="col-md-4 text-center tileBox">
  116.                    <div class="txtHead"><i class="fa fa-css3"></i>
  117.                    <h3>HTML5/CSS3 <span class="id-color">Dev</span></h3></div>
  118.                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium.</p>
  119.                </div>
  120.                <!-- end: -->
  121.  
  122.                <!-- item -->
  123.                <div class="col-md-4 text-center tileBox">
  124.                    <div class="txtHead"><i class="fa fa-lightbulb-o"></i>
  125.                    <h3>JavaScript <span class="id-color">jQuery</span></h3></div>
  126.                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum erat et neque tincidunt volutpat. Cras eget augue id dui varius pretium.</p>
  127.                </div>
  128.                <!-- end: -->
  129.            </div>
  130.        </div>
  131.    </section>
  132.    <!--Quote-->
  133.    <section id="quote" class="bg-parlex">
  134.        <div class="parlex-back">
  135.            <div class="container secPad text-center">
  136.                 <h2>If I asked people what they wanted, they would have said ‘Faster Horses’.</h2><h3>-Henry Ford</h3>
  137.            </div>
  138.            <!--/.container-->
  139.        </div>
  140.    </section>
  141.    
  142.    <!--Skills-->
  143.    <section id="skills" class="secPad white">
  144.         <div class="container">
  145.        <div class="heading text-center">
  146.                <!-- Heading -->
  147.                <h2>My Skills</h2>
  148.                <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
  149.            </div>
  150.             <div class="row">
  151.                <div class="col-sm-6">
  152.                    <h2>Programming <strong>Skills</strong></h2>
  153.                    <p class="mrgBtm20">
  154.                        It takes knowledge, smart work, and dedication to make great ideas come to life. I have been helping make great ideas happen for the past 7 years and am always ready for new challenges.
  155.                
  156.                    </p>
  157.                    <div class="row">
  158.                        <div class="col-md-2 skilltitle">HTML5</div>
  159.                        <div class="col-md-8">
  160.                            <div class="progress">
  161.                                <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
  162.                                    <span class="sr-only">90% Complete</span>
  163.                                </div>
  164.                            </div>
  165.                        </div>
  166.                    </div>
  167.                    <div class="row">
  168.                        <div class="col-md-2 skilltitle">CSS/CC3</div>
  169.                        <div class="col-md-8">
  170.                            <div class="progress">
  171.                                <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
  172.                                    <span class="sr-only">90% Complete</span>
  173.                                </div>
  174.                            </div>
  175.                        </div>
  176.                    </div>
  177.                    <div class="row">
  178.                        <div class="col-md-2 skilltitle">JavaScript</div>
  179.                        <div class="col-md-8">
  180.                            <div class="progress">
  181.                                <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
  182.                                    <span class="sr-only">80% Complete</span>
  183.                                </div>
  184.                            </div>
  185.                        </div>
  186.                    </div>
  187.                    <div class="row">
  188.                        <div class="col-md-2 skilltitle">jQuery/Ajax</div>
  189.                        <div class="col-md-8">
  190.                            <div class="progress">
  191.                                <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
  192.                                    <span class="sr-only">90% Complete</span>
  193.                                </div>
  194.                            </div>
  195.                        </div>
  196.                    </div>      
  197.                </div>
  198.                <div class="col-sm-6">
  199.                    <h2>Designing <strong>Skills</strong></h2>
  200.                    <p class="mrgBtm20">
  201.                        Problem solving is not always about sitting in a board room talking about the way things should be done. I have a strong background in UI design which allows me to think on my feet and act upon it.
  202.                
  203.                    </p>
  204.                    <div class="row">
  205.                        <div class="col-md-2 skilltitle">Photoshop</div>
  206.                        <div class="col-md-8">
  207.                            <div class="progress">
  208.                                <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
  209.                                    <span class="sr-only">90% Complete</span>
  210.                                </div>
  211.                            </div>
  212.                        </div>
  213.                    </div>
  214.                    <div class="row">
  215.                        <div class="col-md-2 skilltitle">Illustrator</div>
  216.                        <div class="col-md-8">
  217.                            <div class="progress">
  218.                                <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
  219.                                    <span class="sr-only">80% Complete</span>
  220.                                </div>
  221.                            </div>
  222.                        </div>
  223.                    </div>
  224.                    <div class="row">
  225.                        <div class="col-md-2 skilltitle">Indesign</div>
  226.                        <div class="col-md-8">
  227.                            <div class="progress">
  228.                                <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">
  229.                                    <span class="sr-only">75% Complete</span>
  230.                                </div>
  231.                            </div>
  232.                        </div>
  233.                    </div>
  234.                </div>
  235.            </div>
  236.        </div>        
  237.    </section>
  238.    
  239.    <!--Experience-->
  240.    <section id="experience" class="secPad">
  241.         <div class="container">    
  242.           <div class="heading text-center">
  243.                <!-- Heading -->
  244.                <h2>Professional Experience</h2>
  245.                <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
  246.            </div>
  247.        <div id="timeline"><div class="row timeline-movement timeline-movement-top">
  248.        <div class="timeline-badge timeline-future-movement">
  249.            <a href="#">
  250.                <span class="glyphicon glyphicon-plus"></span>
  251.            </a>
  252.        </div>
  253.        <div class="timeline-badge timeline-filter-movement">
  254.            <a href="#">
  255.                <span class="glyphicon glyphicon-time"></span>
  256.            </a>
  257.        </div>
  258.    
  259.    </div>
  260.    <div class="row timeline-movement">
  261.    
  262.        <div class="timeline-badge">
  263.            <span class="timeline-balloon-date-day">Feb</span>
  264.            <span class="timeline-balloon-date-month">2014</span>
  265.        </div>
  266.    
  267.    
  268.        <div class="col-sm-6  timeline-item">
  269.            <div class="row">
  270.                <div class="col-sm-11">
  271.                    <div class="timeline-panel credits">
  272.                        <ul class="timeline-panel-ul">
  273.                            <li><span class="importo">Mussum ipsum cacilds</span></li>
  274.                            <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li>
  275.                            <li><p><small class="text-muted"> 18/02/2014 - Present</small></p> </li>
  276.                        </ul>
  277.                    </div>
  278.    
  279.                </div>
  280.            </div>
  281.        </div>
  282.    
  283.        <div class="col-sm-6  timeline-item">
  284.            <div class="row">
  285.                <div class="col-sm-offset-1 col-sm-11">
  286.                    <div class="timeline-panel debits">
  287.                        <ul class="timeline-panel-ul">
  288.                            <li><span class="importo">Mussum ipsum cacilds</span></li>
  289.                            <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li>
  290.                            <li><p><small class="text-muted"> 18/02/2014 - Present</small></p> </li>
  291.                        </ul>
  292.                    </div>
  293.    
  294.                </div>
  295.            </div>
  296.        </div>
  297.    </div>
  298.    
  299.    <!--due -->
  300.    
  301.    <div class="row timeline-movement">
  302.    
  303.    
  304.        <div class="timeline-badge">
  305.            <span class="timeline-balloon-date-day">Mar</span>
  306.            <span class="timeline-balloon-date-month">2013</span>
  307.        </div>
  308.    
  309.        <div class="col-sm-offset-6 col-sm-6  timeline-item">
  310.            <div class="row">
  311.                <div class="col-sm-offset-1 col-sm-11">
  312.                    <div class="timeline-panel debits">
  313.                        <ul class="timeline-panel-ul">
  314.                            <li><span class="importo">Mussum ipsum cacilds</span></li>
  315.                            <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li>
  316.                            <li><p><small class="text-muted"> 10/03/2013 - 18/02/2014</small></p> </li>
  317.                        </ul>
  318.                    </div>
  319.    
  320.                </div>
  321.            </div>
  322.        </div>
  323.    
  324.        <div class="col-sm-6  timeline-item">
  325.            <div class="row">
  326.                <div class="col-sm-11">
  327.                    <div class="timeline-panel credits">
  328.                        <ul class="timeline-panel-ul">
  329.                            <li><span class="importo">Mussum ipsum cacilds</span></li>
  330.                            <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li>
  331.                            <li><p><small class="text-muted"> 10/03/2013 - 18/02/2014</small></p> </li>
  332.                        </ul>
  333.                    </div>
  334.    
  335.                </div>
  336.            </div>
  337.        </div>
  338.    
  339.    
  340.    </div>
  341.    <div class="row timeline-movement">
  342.    
  343.    
  344.        <div class="timeline-badge">
  345.            <span class="timeline-balloon-date-day">Jan</span>
  346.            <span class="timeline-balloon-date-month">2010</span>
  347.        </div>
  348.    
  349.        <div class="col-sm-offset-6 col-sm-6  timeline-item">
  350.            <div class="row">
  351.                <div class="col-sm-offset-1 col-sm-11">
  352.                    <div class="timeline-panel debits">
  353.                        <ul class="timeline-panel-ul">
  354.                            <li><span class="importo">Mussum ipsum cacilds</span></li>
  355.                            <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li>
  356.                            <li><p><small class="text-muted"> 11/01/2010 - 10/03/2013</small></p> </li>
  357.                        </ul>
  358.                    </div>
  359.    
  360.                </div>
  361.            </div>
  362.        </div>
  363.    
  364.        <div class="col-sm-6  timeline-item">
  365.            <div class="row">
  366.                <div class="col-sm-11">
  367.                    <div class="timeline-panel credits">
  368.                        <ul class="timeline-panel-ul">
  369.                            <li><span class="importo">Mussum ipsum cacilds</span></li>
  370.                            <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li>
  371.                            <li><p><small class="text-muted"> 11/01/2010 - 10/03/2013</small></p> </li>
  372.                        </ul>
  373.                    </div>
  374.    
  375.                </div>
  376.            </div>
  377.        </div>
  378.    
  379.    
  380.    </div>
  381.    </div>
  382.    </div>
  383.    
  384.    </section>
  385.    
  386.  
  387.   <!--Portfolio-->
  388.    <section id="portfolio" class="page-section section appear clearfix secPad">
  389.        <div class="container">
  390.  
  391.            <div class="heading text-center">
  392.                <!-- Heading -->
  393.                <h2>Portfolio</h2>
  394.                <p>At lorem Ipsum available, but the majority have suffered alteration in some form by injected humour.</p>
  395.            </div>
  396.  
  397.            <div class="row">
  398.                <nav id="filter" class="col-md-12 text-center">
  399.                    <ul>
  400.                        <li><a href="#" class="current btn-theme btn-small" data-filter="*">All</a></li>
  401.                        <li><a href="#" class="btn-theme btn-small" data-filter=".webdesign">Web Design</a></li>
  402.                        <li><a href="#" class="btn-theme btn-small" data-filter=".photography">Photography</a></li>
  403.                        <li><a href="#" class="btn-theme btn-small" data-filter=".print">Print</a></li>
  404.                    </ul>
  405.                </nav>
  406.                <div class="col-md-12">
  407.                    <div class="row">
  408.                        <div class="portfolio-items isotopeWrapper clearfix" id="3">
  409.  
  410.                            <article class="col-sm-4 isotopeItem webdesign">
  411.                                <div class="portfolio-item">
  412.                                    <img src="images/portfolio/img1.jpg" alt="" />
  413.                                    <div class="portfolio-desc align-center">
  414.                                        <div class="folio-info">
  415.                                            <a href="images/portfolio/img1.jpg" class="fancybox">
  416.                                                <h5>Project Name</h5>
  417.                                                <i class="fa fa-arrows-alt fa-2x"></i></a>
  418.                                        </div>
  419.                                    </div>
  420.                                </div>
  421.                            </article>
  422.  
  423.                            <article class="col-sm-4 isotopeItem photography">
  424.                                <div class="portfolio-item">
  425.                                    <img src="images/portfolio/img2.jpg" alt="" />
  426.                                    <div class="portfolio-desc align-center">
  427.                                        <div class="folio-info">
  428.                                            <a href="images/portfolio/img2.jpg" class="fancybox">
  429.                                                <h5>Project Name</h5>
  430.                                                <i class="fa fa-arrows-alt fa-2x"></i></a>
  431.                                        </div>
  432.                                    </div>
  433.                                </div>
  434.                            </article>
  435.  
  436.  
  437.                            <article class="col-sm-4 isotopeItem photography">
  438.                                <div class="portfolio-item">
  439.                                    <img src="images/portfolio/img3.jpg" alt="" />
  440.                                    <div class="portfolio-desc align-center">
  441.                                        <div class="folio-info">
  442.                                            <a href="images/portfolio/img3.jpg" class="fancybox">
  443.                                                <h5>Project Name</h5>
  444.                                                <i class="fa fa-arrows-alt fa-2x"></i></a>
  445.                                        </div>
  446.                                    </div>
  447.                                </div>
  448.                            </article>
  449.  
  450.                            <article class="col-sm-4 isotopeItem print">
  451.                                <div class="portfolio-item">
  452.                                    <img src="images/portfolio/img4.jpg" alt="" />
  453.                                    <div class="portfolio-desc align-center">
  454.                                        <div class="folio-info">
  455.                                            <a href="images/portfolio/img4.jpg" class="fancybox">
  456.                                                <h5>Project Name</h5>
  457.                                                <i class="fa fa-arrows-alt fa-2x"></i></a>
  458.                                        </div>
  459.                                    </div>
  460.                                </div>
  461.                            </article>
  462.  
  463.                            <article class="col-sm-4 isotopeItem photography">
  464.                                <div class="portfolio-item">
  465.                                    <img src="images/portfolio/img5.jpg" alt="" />
  466.                                    <div class="portfolio-desc align-center">
  467.                                        <div class="folio-info">
  468.                                            <a href="images/portfolio/img5.jpg" class="fancybox">
  469.                                                <h5>Project Name</h5>
  470.                                                <i class="fa fa-arrows-alt fa-2x"></i></a>
  471.                                        </div>
  472.                                    </div>
  473.                                </div>
  474.                            </article>
  475.  
  476.                            <article class="col-sm-4 isotopeItem webdesign">
  477.                                <div class="portfolio-item">
  478.                                    <img src="images/portfolio/img6.jpg" alt="" />
  479.                                    <div class="portfolio-desc align-center">
  480.                                        <div class="folio-info">
  481.                                            <a href="images/portfolio/img6.jpg" class="fancybox">
  482.                                                <h5>Project Name</h5>
  483.                                                <i class="fa fa-arrows-alt fa-2x"></i></a>
  484.                                        </div>
  485.                                    </div>
  486.                                </div>
  487.                            </article>
  488.  
  489.                            <article class="col-sm-4 isotopeItem print">
  490.                                <div class="portfolio-item">
  491.                                    <img src="images/portfolio/img7.jpg" alt="" />
  492.                                    <div class="portfolio-desc align-center">
  493.                                        <div class="folio-info">
  494.                                            <a href="images/portfolio/img7.jpg" class="fancybox">
  495.                                                <h5>Project Name</h5>
  496.                                                <i class="fa fa-arrows-alt fa-2x"></i></a>
  497.                                        </div>
  498.                                    </div>
  499.                                </div>
  500.                            </article>
  501.  
  502.                            <article class="col-sm-4 isotopeItem photography">
  503.                                <div class="portfolio-item">
  504.                                    <img src="images/portfolio/img8.jpg" alt="" />
  505.                                    <div class="portfolio-desc align-center">
  506.                                        <div class="folio-info">
  507.                                            <a href="images/portfolio/img8.jpg" class="fancybox">
  508.                                                <h5>Project Name</h5>
  509.                                                <i class="fa fa-arrows-alt fa-2x"></i></a>
  510.                                        </div>
  511.                                    </div>
  512.                                </div>
  513.                            </article>
  514.  
  515.                            <article class="col-sm-4 isotopeItem print">
  516.                                <div class="portfolio-item">
  517.                                    <img src="images/portfolio/img9.jpg" alt="" />
  518.                                    <div class="portfolio-desc align-center">
  519.                                        <div class="folio-info">
  520.                                            <a href="images/portfolio/img9.jpg" class="fancybox">
  521.                                                <h5>Project Name</h5>
  522.                                                <i class="fa fa-arrows-alt fa-2x"></i></a>
  523.                                        </div>
  524.                                    </div>
  525.                                </div>
  526.                            </article>
  527.                        </div>
  528.  
  529.                    </div>
  530.  
  531.  
  532.                </div>
  533.            </div>
  534.  
  535.        </div>
  536.    </section>
  537.  
  538.     <!--Contact -->
  539.    <section id="contactUs" class="page-section secPad">
  540.        <div class="container">
  541.  
  542.            <div class="row">
  543.                <div class="heading text-center">
  544.                    <!-- Heading -->
  545.                    <h2>Let\'s Keep In Touch!</h2>
  546.                     <p>Thank you for visiting out my profile. If you would like to get into contact with me, please fill out the form below.</p>
  547.                 </div>
  548.             </div>
  549.  
  550.             <div class="row mrgn30">
  551.  
  552.                 <form method="post" action="" id="contactfrm" role="form">
  553.  
  554.                     <div class="col-sm-4">
  555.                         <div class="form-group">
  556.                             <label for="name">Name</label>
  557.                             <input type="text" class="form-control" name="name" id="name" placeholder="Enter name" title="Please enter your name (at least 2 characters)">
  558.                         </div>
  559.                         <div class="form-group">
  560.                             <label for="email">Email</label>
  561.                             <input type="email" class="form-control" name="email" id="email" placeholder="Enter email" title="Please enter a valid email address">
  562.                         </div>
  563.                     </div>
  564.                     <div class="col-sm-4">
  565.                         <div class="form-group">
  566.                             <label for="comments">Comments</label>
  567.                             <textarea name="comment" class="form-control" id="comments" cols="3" rows="5" placeholder="Enter your message…" title="Please enter your message (at least 10 characters)"></textarea>
  568.                         </div>
  569.                         <button name="submit" type="submit" class="btn btn-lg btn-primary" id="submit">Submit</button>
  570.                         <div class="result"></div>
  571.                     </div>
  572.                 </form>
  573.                 <div class="col-sm-4">
  574.                     <h4>Address:</h4>
  575.                     <address>
  576.                         WebThemez Company<br>
  577.                         134 Stilla. Tae., 414515<br>
  578.                         Leorislon, SA 02434-34534 USA
  579.                         <br>
  580.                     </address>
  581.                     <h4>Phone:</h4>
  582.                     <address>
  583.                         12345-49589-2<br>
  584.                     </address>
  585.                 </div>
  586.             </div>
  587.         </div>
  588.         <!--/.container-->
  589.     </section>
  590.     <footer>
  591.         <div class="container">
  592.             <div class="social text-center">
  593.                 <a href="#"><i class="fa fa-twitter"></i></a>
  594.                 <a href="#"><i class="fa fa-facebook"></i></a>
  595.                 <a href="#"><i class="fa fa-dribbble"></i></a>
  596.                 <a href="#"><i class="fa fa-flickr"></i></a>
  597.                 <a href="#"><i class="fa fa-github"></i></a>
  598.             </div>
  599.  
  600.             <div class="clear"></div>
  601.             <!--CLEAR FLOATS-->
  602.         </div>
  603.     </footer>
  604.     <!--/.page-section-->
  605.     <section class="copyright">
  606.         <div class="container">
  607.             <div class="row">
  608.                 <div class="col-sm-12 text-center">
  609.                     Copyright 2014 | All Rights Reserved  -- Template by <a href="http://webThemez.com">WebThemez.com</a>
  610.                 </div>
  611.             </div>
  612.             <!-- / .row -->
  613.         </div>
  614.     </section>
  615.     <a href="#top" class="topHome"><i class="fa fa-chevron-up fa-2x"></i></a>
  616.  
  617.     <!--[if lte IE 8]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><![endif]-->
  618.     <script src="js/modernizr-latest.js"></script>
  619.     <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
  620.     <script src="js/bootstrap.min.js" type="text/javascript"></script>
  621.     <script src="js/jquery.isotope.min.js" type="text/javascript"></script>
  622.     <script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
  623.     <script src="js/jquery.nav.js" type="text/javascript"></script>
  624.     <script src="js/jquery.cslider.js" type="text/javascript"></script>
  625.     <script src="js/custom.js" type="text/javascript"></script>
  626.     <script src="js/owl-carousel/owl.carousel.js"></script>
  627. </body>
  628. </html>
  629.  
');