API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 2nd, 2016
226
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 137.67 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <!-- Mirrored from www.edigitaldreams.com/vcard-jan31-3/site/single-page/home-typewriter.htm by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 02 Feb 2016 12:45:49 GMT -->
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.  
  10. <title>Accura Personal - Resume CV vCard Portfolio HTML 5 Web Template</title>
  11. <meta name="description" content="The Spice Lounge" />
  12. <meta name="keywords" content="The Spice Lounge" />
  13. <meta name="author" content="The Spice Lounge" />
  14.  
  15. <!-- Loading Google Web fonts-->
  16. <link href='http://fonts.googleapis.com/css?family=Aladin' rel='stylesheet' type='text/css'>
  17. <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css' />
  18. <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
  19. <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
  20.  
  21. <!--General CSS-->
  22. <link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css"/>
  23. <link rel="stylesheet" href="assets/css/font-awesome.css" type="text/css" />
  24. <link type="text/css" rel="stylesheet" href="assets/css/simple-line-icons.css"/>
  25. <link rel="stylesheet" href="assets/css/animate.min.css" type="text/css" />
  26.  
  27. <!--Menu-->
  28. <link rel="stylesheet" href="assets/css/menu.css" type="text/css" />
  29. <link rel="stylesheet" href="assets/css/style.css" type="text/css" />
  30. <link rel="stylesheet" href="assets/css/slicknav.css">
  31.  
  32. <!--Optional CSS Starts-->
  33.  
  34. <!--Gallery Cycle Slider-->
  35. <link rel="stylesheet" href="assets/css/cycleslider.css">
  36. <!--Gallery Cycle Slider End-->
  37.  
  38. <!--Gallery SuperSized Slider-->
  39. <link rel="stylesheet" href="assets/css/supersized.css" type="text/css" media="screen" />
  40. <link rel="stylesheet" href="assets/css/supersized.shutter.css" type="text/css" media="screen" />
  41. <!--Gallery SuperSized Slider End-->
  42.  
  43. <!--Gallery Filer-->
  44. <link type="text/css" rel="stylesheet" href="assets/css/portfolio-new.css"/>
  45. <link rel="stylesheet" href="assets/css/prettyPhoto.css" type="text/css" />
  46. <!--Gallery Filer End-->
  47.  
  48. <!--Optional CSS Ends-->
  49.  
  50. <!--Typewriter Style And Color-->
  51. <link rel="stylesheet" href="assets/css/typewriter.css">
  52. <link rel="stylesheet" href="assets/css/colors/typewriter-color.css" id="color" type="text/css" />
  53. <!--Typewriter Style And Color-->
  54.  
  55.  
  56. <link rel="shortcut icon" href="assets/assets/images/favicon.html" />  
  57. <link rel="apple-touch-icon" href="assets/assets/images/apple_touch_icon.html" />
  58. <link rel="apple-touch-icon" sizes="72x72" href="assets/assets/images/apple_touch_icon_72x72.html" />
  59. <link rel="apple-touch-icon" sizes="114x114" href="assets/assets/images/apple_touch_icon_114x114.html" />
  60.  
  61. <script src="assets/js/jquery-1.11.1.min.js"></script>
  62. <script src="../../../../code.jquery.com/jquery-migrate-1.2.1.js"></script>
  63. <script src="assets/js/jquery-ui.min.js"></script>
  64. <script type="text/javascript" src="assets/js/modernizr.custom.js"></script>
  65.  
  66. </head>
  67. <body>
  68.  
  69. <!--PRELOADER STARTS-->
  70. <section id="jSplash">
  71.   <div class="spinner">
  72.       <div class="cube cube0"></div>
  73.       <div class="cube cube1"></div>
  74.       <div class="cube cube2"></div>
  75.       <div class="cube cube3"></div>
  76.       <div class="cube cube4"></div>
  77.       <div class="cube cube5"></div>
  78.       <div class="cube cube6"></div>
  79.       <div class="cube cube7"></div>
  80.       <div class="cube cube8"></div>
  81.       <div class="cube cube9"></div>
  82.       <div class="cube cube10"></div>
  83.       <div class="cube cube11"></div>
  84.       <div class="cube cube12"></div>
  85.       <div class="cube cube13"></div>
  86.       <div class="cube cube14"></div>
  87.       <div class="cube cube15"></div>
  88.   </div>
  89. </section>
  90. <!--PRELOADER ENDS-->
  91.  
  92. <!--Nice Scroll-->           <!--Used For Mobile Resolution-->
  93. <div id="menutop"></div>
  94. <!--Nice Scroll-->
  95.  
  96.  
  97.  
  98. <!--Wrapper
  99. =============================-->
  100. <div id="wrapper">
  101. <div id="mask">
  102.    
  103. <!--Header
  104. =============================-->
  105. <div id="header" class="header">
  106.     <!--  Menu section for sub page and mobile resolution -->
  107.     <div class="menu-inner">
  108.         <div class="container">
  109.             <div class="row">
  110.                 <div class="header-table col-md-12 header-menu">
  111.                     <!--  Logo section -->
  112.                     <div class="logo">
  113.                         <a href="#home"  class="nav-link"><img src="assets/img/typer-logo.png" alt="Logo"></a>
  114.                     </div>
  115.                    <!--  // Logo section -->
  116.                
  117.                 <!--  Menu section -->
  118.                 <nav class="main-nav">
  119.                     <a href="#" class="nav-toggle"></a>
  120.                 <ul id="sub-nav" class="nav">
  121.                     <li><a href="#home" class="nav-link">Home</a></li>
  122.                     <li><a href="#about" class="nav-link">About Me</a></li>
  123.                     <li><a href="#" class="nav-link">Skills<span class="sub-toggle"></span></a>
  124.                   <ul>
  125.                             <li><a href="#skills1" class="nav-link">Skills 1</a></li>
  126.                       <li><a href="#skills2" class="nav-link">Skills 2</a></li>
  127.                       <li><a href="#skills3" class="nav-link">Skills 3</a></li>
  128.                       </ul>
  129.                   </li>
  130.                   <li><a href="#resume" class="nav-link">Resume</a></li>
  131.                     <li><a href="#" class="nav-link">Portfolio<span class="sub-toggle"></span></a>
  132.                   <ul>
  133.                             <li><a href="#" class="panel">Portfolio <i class="pull-right fa fa-angle-right direction"></i> <span class="sub-toggle"></span></a>
  134.                                 <ul>
  135.                                     <li><a href="#portfolio" class="nav-link">Portfolio Filter</a></li>
  136.                                     <li><a href="#portfoliohalfwidth" class="nav-link">Portfolio Half-Width</a></li>                       
  137.                                 </ul>
  138.                             </li>
  139. <li><a href="#" class="panel">Gallery <i class="pull-right fa fa-angle-right direction"></i> <span class="sub-toggle"></span></a>
  140.                                 <ul>
  141.                                     <li><a href="#gallery" class="nav-link">Gallery Cycle Slider</a></li>
  142.                                     <li><a href="#galleryss" class="nav-link">Gallery Super Sized</a></li>
  143.                                 </ul>
  144.                             </li>
  145. <li><a href="#" class="panel">Projects <i class="pull-right fa fa-angle-right direction"></i> <span class="sub-toggle"></span></a>
  146.                                 <ul>
  147.                                     <li><a href="#projectmodal" class="nav-link">Projects Modal</a></li>       
  148.                                 </ul>
  149.                             </li>
  150.                       </ul>
  151.                   </li>
  152.                     <li><a href="#" class="nav-link">Pages<span class="sub-toggle"></span></a>
  153.                         <ul>
  154.                             <li><a href="#" class="panel">Sample Layouts<i class="pull-right fa fa-angle-right direction"></i> <span class="sub-toggle"></span></a>
  155.                             <ul>
  156.                                 <li><a href="#fullwidth" class="nav-link">Full-Width</a></li>
  157.                                 <li><a href="#threefourth" class="nav-link">Three-Fourth</a></li>
  158.                                 <li><a href="#default" class="nav-link">Default (Half-width)</a></li>
  159.                             </ul>
  160.                            
  161.                             <li><a href="#services" class="nav-link">Services</a></li>
  162.                             <li><a href="#testimonials" class="nav-link">Testimonials</a></li>
  163.                             <li><a href="#clients" class="nav-link">Clients</a></li>
  164.                             <li><a href="#team" class="nav-link">Our Team</a></li>
  165.                             <li><a href="#contactform" class="nav-link">Request a Quote</a></li>
  166.                         </ul>            
  167.                     </li>
  168.                   <li><a href="#contact" class="nav-link">Contact</a></li>
  169.                 </ul>
  170.                 </nav>
  171.                 <!--  // Menu section -->
  172.                 </div>
  173.             </div>
  174.         </div>
  175.     </div>
  176.     <!--  Menu section for sub page and mobile resolution -->
  177. </div>
  178. <!-- // Header
  179. =============================-->
  180.  
  181.  
  182.  
  183. <!--Home Page
  184. =============================-->
  185. <div id="home" class="item">
  186.     <div class="bgimg"></div>
  187.     <div class="pattern_bg"></div>
  188. <div class="clearfix">
  189.     <div class="header_details">
  190.         <div class="container">
  191.             <div class="clearfix">
  192.                 <div class="header_icons accura-header-block accura-hidden-2xs">
  193.                     <ul class="accura-social-icons accura-stacked accura-jump accura-full-height accura-bordered accura-small accura-colored-bg clearFix">
  194.                          <!--Social Icon 1-->
  195.                         <li id="1">
  196.                             <a href="http://www.facebook.com/" target="_blank" class="accura-social-icon-facebook circle">
  197.                                 <i class="fa fa-facebook"></i>
  198.                             </a>
  199.                         </li>
  200.                         <!--Social Icon 1-->
  201.                        
  202.                         <!--Social Icon 2-->
  203.                         <li id="2">
  204.                             <a href="http://www.twitter.com/" target="_blank" class="accura-social-icon-twitter circle">
  205.                                 <i class="fa fa-twitter"></i>
  206.                             </a>
  207.                         </li>
  208.                         <!-- // Social Icon 2-->
  209.                        
  210.                         <!--Social Icon 3-->
  211.                         <li id="3">
  212.                             <a href="http://www.googleplus.com/" target="_blank" class="accura-social-icon-gplus circle">
  213.                                 <i class="fa fa-google-plus"></i>
  214.                             </a>
  215.                         </li>
  216.                         <!-- // Social Icon 3-->
  217.                        
  218.                         <!--Social Icon4-->
  219.                         <li id="4">
  220.                             <a href="https://instagram.com/accounts/login/" target="_blank" class="accura-social-icon-instagram circle">
  221.                                 <i class="fa fa-instagram"></i>
  222.                             </a>
  223.                         </li>
  224.                         <!-- // Social Icon 4-->
  225.                        
  226.                         <!--Social Icon 5-->
  227.                         <li id="5">
  228.                             <a href="https://www.linkedin.com/uas/login" target="_blank" class="accura-social-icon-linkedin circle">
  229.                                 <i class="fa fa-linkedin"></i>
  230.                             </a>
  231.                         </li>
  232.                         <!-- // Social Icon 5-->
  233.                        
  234.                     </ul>
  235.                 </div>
  236.                 <div class="call">
  237.                     <div class="home_address">
  238.                         <a href="mailto:info@mathewjoyson.com">
  239.                             <i class="fa fa-envelope"></i>info@mathewjoyson.com
  240.                         </a>
  241.                     </div>
  242.                     <i class="fa fa-phone"></i>&nbsp;&nbsp;+1 123 456 7890
  243.             </div>
  244.             </div>
  245.         </div>
  246.    
  247.     <!-- Mainheader -->
  248.     <div class="mainheaderslide" id="slide">
  249. <!--  Menu section for main page -->
  250.     <div id="mainheader" class="header">
  251.             <div class="menu-inner">
  252.                 <div class="container">
  253.                     <div class="row">
  254.                         <div class="header-table col-md-12 header-menu">
  255.                             <!--  Logo Desktop section -->
  256.                                 <div class="logo">
  257.                                     <a href="#home"  class="nav-link"><img src="assets/img/typer-logo.png" alt="Logo"></a>
  258.                                 </div>
  259.                             <!--  // Logo Desktop section -->
  260.                         <!--  Menu section -->
  261.                         <nav class="main-nav">
  262.                             <a href="#" class="nav-toggle"></a>
  263.                         <ul id="home_scroll" class="nav">
  264.                             <li><span class="nav-link selected1">Home</span></li>
  265.                             <li><a href="#about" class="nav-link">About Me</a></li>
  266.                             <li><a href="#" class="nav-link">Skills<span class="sub-toggle"></span></a>
  267.                           <ul>
  268.                                     <li><a href="#skills3" class="nav-link">Skills 3</a></li>
  269.                               <li><a href="#skills2" class="nav-link">Skills 2</a></li>
  270.                               <li><a href="#skills1" class="nav-link">Skills 1</a></li>
  271.                               </ul>
  272.                           </li>
  273.                           <li><a href="#resume" class="nav-link">Resume</a></li>
  274.                             <li><a href="#" class="nav-link">Portfolio<span class="sub-toggle"></span></a>
  275.                           <ul>
  276.                                     <li><a href="#" class="panel">Projects <i class="pull-right fa fa-angle-right direction"></i> <span class="sub-toggle"></span></a>
  277.                                         <ul>
  278.                                             <li><a href="#projectmodal" class="nav-link">Project Modal</a></li>    
  279.                                         </ul>
  280.                                     </li>
  281.       <li><a href="#" class="panel">Gallery <i class="pull-right fa fa-angle-right direction"></i> <span class="sub-toggle"></span></a>
  282.                                         <ul>
  283.                                             <li><a href="#galleryss" class="nav-link">Gallery Super Sized</a></li>
  284.                                             <li><a href="#gallery" class="nav-link">Gallery Cycle Slider</a></li>                  
  285.                                         </ul>
  286.                                     </li>
  287.       <li><a href="#" class="panel">Portfolio <i class="pull-right fa fa-angle-right direction"></i> <span class="sub-toggle"></span></a>
  288.                                         <ul>
  289.                                             <li><a href="#portfoliohalfwidth" class="nav-link">Portfolio Half-Width</a></li>   
  290.                                             <li><a href="#portfolio" class="nav-link">Portfolio Filter</a></li>
  291.                                         </ul>
  292.                                     </li>
  293.                               </ul>
  294.                           </li>
  295.                       <li><a href="#" class="nav-link">Pages<span class="sub-toggle"></span></a>
  296.                                 <ul>
  297.                                     <li><a href="#contactform" class="nav-link">Request a Quote</a></li>
  298.                                     <li><a href="#team" class="nav-link">Our Team</a></li>
  299.                                     <li><a href="#clients" class="nav-link">Clients</a></li>
  300.                                     <li><a href="#testimonials" class="nav-link">Testimonials</a></li>
  301.                                     <li><a href="#services" class="nav-link">Services</a></li>
  302.                                     <li><a href="#" class="panel">Sample Layouts<i class="pull-right fa fa-angle-right direction"></i> <span class="sub-toggle"></span></a>
  303.                                     <ul>
  304.                                         <li><a href="#default" class="nav-link">Default (Half-width)</a></li>
  305.                                         <li><a href="#threefourth" class="nav-link">Three-Fourth</a></li>
  306.                                         <li><a href="#fullwidth" class="nav-link">Full-Width</a></li>
  307.                                     </ul>
  308.                            
  309.                                 </ul>            
  310.                             </li>
  311.                           <li><a href="#contact" class="nav-link">Contact</a></li>
  312.                         </ul>
  313.                         </nav>
  314.                         <!--  // Menu section -->
  315.                         </div>
  316.                     </div>
  317.                 </div>
  318.             </div>
  319.     </div>
  320. <!--  Menu section for main page -->
  321. </div>
  322. <!-- // Mainheader -->
  323.     </div>
  324.  
  325. <!--Home Content-->
  326. <!-- Typer -->
  327. <div class="clearfix">
  328.     <div class="clearfix container center">
  329.         <div class="home_title" id="home_title">Helo, I'm <span class="bold">MATHEW</span></div>
  330.        <div id="typed" class="home_title_type"></div>
  331.     </div>
  332. </div>
  333. <!-- // Typer -->
  334. <!-- // Home Content-->
  335.  
  336. </div>
  337. </div>
  338. <!-- // Home Page
  339. =============================-->
  340.  
  341.  
  342.  
  343. <!-- About
  344. =============================-->    
  345.  
  346. <div id="about" class="item subpage">
  347.     <div class="content">
  348.         <div class="content_overlay"></div>
  349.     <div class="content_inner">
  350.         <div class="row contentscroll">
  351.             <div class="container">
  352.                 <div class="col-md-6 empty">&nbsp;</div>
  353.             <div class="col-md-6 content_text">
  354.                 <div class="clearfix" >
  355.                     <h1>About Me</h1>
  356.                     <div class="tags">A little about myself, and the UI & UX design services I provide.</div>
  357.                <div class="row clearfix pad_top40">
  358.                    <!--Left Section-->
  359.                    <div class="about col-md-6">
  360.                        <div class="subtitle">multi-disciplinary designer & wp theme developer.</div>
  361.                         <p class="pad_top13">Lorem ipsum dolor shabit. Nulla et facisis interd um elit Suspen disse libero dia aliquam lum arcu pede nam, erat aenean.</p><br/>
  362.                         <p>Suspendisse libero diam, dolorib aliquam con seced tetuer nec.</p>
  363.                    </div>
  364.                    <!--Left Section-->
  365.                    
  366.                    <!--Right Section-->
  367.                    <div class="about col-md-6">
  368.                        <div class="subtitle">Personal Info <i class="fa fa-user sub-shadow"></i></div>
  369.                            <div class="clearfix pad_top13">
  370.                                <!--Info 1-->
  371.                                <div class="pinfo clearfix">
  372.                                    <span class="input-box">Name </span>
  373.                                    <span class="pright">Mathew Joyson</span>
  374.                                </div>
  375.                                <!-- // Info 1-->
  376.                                
  377.                                <!--Info 2-->
  378.                                <div class="pinfo clearfix">
  379.                                    <span class="input-box">DOB </span>
  380.                                    <span class="pright"> 21-Jan-1980</span>
  381.                                </div>
  382.                                <!-- // Info 2-->
  383.                                
  384.                                <!--Info 3-->
  385.                                <div class="pinfo clearfix">
  386.                                    <span class="input-box">Address</span>
  387.                                    <span class="pright"> Street name, habitasse pretium dolor</span>
  388.                                </div>
  389.                                <!-- // Info 3-->
  390.                                
  391.                                <!--Info 4-->
  392.                                <div class="pinfo clearfix">
  393.                                    <span class="input-box">Phone</span>
  394.                                    <span class="pright">+123.456.7890</span>  
  395.                                </div>
  396.                                <!-- // Info 4-->
  397.                                
  398.                                <!--Info 5-->
  399.                                <div class="pinfo clearfix">
  400.                                    <span class="input-box">E-mail</span>
  401.                                    <span class="pright"><a href="#">Email@domainame.com</a></span>
  402.                                </div>
  403.                                <!-- // Info 5-->
  404.                            </div>
  405.                    </div>
  406.                     <!--Right Section-->
  407.                 </div>     
  408.                     <!--Buttons-->                                 
  409.                    <div class="clearfix">
  410.                        <a href="#contact" class="btn btn-3 btn-3e nav-link"><i class="fa fa-user"></i>Hire Me</a>
  411.                         <a href="sample.pdf" class="btn btn-3 btn-3e link"><i class="fa fa-download down_icon"></i>Download Resume</a>                                      </div>
  412.                    <!--Buttons-->
  413.                </div>
  414.            </div>
  415.            </div>
  416.        </div>
  417.    </div>
  418.    </div>
  419. </div>
  420.  
  421. <!-- // About
  422. =============================-->  
  423.  
  424.  
  425. <!-- Skills
  426. =============================-->
  427.  
  428. <div id="skills1" class="item subpage">
  429.    <div class="content">
  430.        <div class="content_overlay"></div>
  431.    <div class="content_inner">
  432.        <div class="row contentscroll">
  433.            <div class="container">
  434.                <div class="col-md-6 empty">&nbsp;</div>
  435.             <div class="col-md-6 content_text">
  436.                 <div class="clearfix" >
  437.                     <h1>My Skills</h1>
  438.                     <div class="tags">In my experience the following are skills key to a good UI/UX Designer. unde omnis iste natus error sits.</div>
  439.                 <div class="pad_top40 clearfix">
  440.                     <h2 class="pad_top13">Programming Skills <i class="fa fa-file-code-o sub-shadow"></i></h2>
  441.                 <div class="clearfix pad_top20">
  442.                     <div class="row">
  443.                         <div class="clearfix">
  444.                             <!--Skills 1-->
  445.                             <div class="skills col-md-4">
  446.                                 <div class="chart" data-percent="90">
  447.                                     <span class="percent">90</span>
  448.                                     <div class="subtitle">HTML5 &amp; CSS3</div>
  449.                                 </div>
  450.                             </div>
  451.                             <!-- // Skills 1-->
  452.                            
  453.                             <!--Skills 2-->
  454.                             <div class="skills col-md-4">
  455.                                 <div class="chart" data-percent="75">
  456.                                     <span class="percent">75</span>
  457.                                     <div class="subtitle">WORDPRESS</div>
  458.                                 </div>
  459.                             </div>
  460.                             <!--Skills 2-->
  461.                            
  462.                             <!--Skills 3-->
  463.                             <div class="skills col-md-4">
  464.                                 <div class="chart" data-percent="60">
  465.                                     <span class="percent">60</span>
  466.                                     <div class="subtitle">JQUERY</div>
  467.                                 </div>
  468.                             </div>
  469.                             <!-- // Skills 3-->
  470.                         </div>
  471.                         <div class="clearfix">
  472.                             <!--Skills 4-->
  473.                             <div class="skills col-md-4">
  474.                                 <div class="chart" data-percent="55">
  475.                                     <span class="percent">55</span>
  476.                                     <div class="subtitle">JOOMLA</div>
  477.                                 </div>
  478.                             </div>
  479.                             <!-- // Skills 4-->
  480.                            
  481.                             <!--Skills 5-->
  482.                             <div class="skills col-md-4">
  483.                                 <div class="chart" data-percent="40">
  484.                                     <span class="percent">40</span>
  485.                                     <div class="subtitle">WEB DEVELPOPMENT</div>
  486.                                 </div>
  487.                             </div>
  488.                             <!-- // Skills 5-->
  489.                            
  490.                             <!--Skills 6-->
  491.                             <div class="skills col-md-4 empty">
  492.                                 &nbsp;
  493.                             </div>
  494.                             <!-- // Skills 6-->
  495.                         </div>
  496.                     </div>
  497.                 </div>
  498.                
  499.                 <div class="pad_top30">
  500.                     <h2 class="pad_top13">Graphic Skills <i class="fa fa-paint-brush sub-shadow"></i></h2>
  501.                 <div class="clearfix pad_top20">
  502.                     <div class="row">
  503.                         <div class="clearfix">
  504.                             <!--Skills 7-->
  505.                             <div class="skills col-md-4">
  506.                                 <div class="chart" data-percent="80">
  507.                                     <span class="percent">80</span>
  508.                                     <div class="subtitle">PHOTOSHOP</div>
  509.                                 </div>
  510.                             </div>
  511.                             <!-- // Skills 7-->
  512.                            
  513.                             <!--Skills 8-->
  514.                             <div class="skills col-md-4">
  515.                                 <div class="chart" data-percent="60">
  516.                                     <span class="percent">60</span>
  517.                                     <div class="subtitle">ILLUSTRATE</div>
  518.                                 </div>
  519.                             </div>
  520.                             <!-- // Skills 8-->
  521.                            
  522.                             <!--Skills 9-->
  523.                             <div class="skills col-md-4">
  524.                                 <div class="chart" data-percent="90">
  525.                                     <span class="percent">90</span>
  526.                                     <div class="subtitle">FIREWORK</div>
  527.                                 </div>
  528.                             </div>
  529.                             <!-- // Skills 9-->
  530.                         </div>
  531.                     </div>
  532.                 </div>
  533.                 </div>
  534.                 </div>
  535.                 </div>
  536.             </div>
  537.             </div>
  538.         </div>
  539.     </div>
  540.     </div>
  541. </div>
  542.  
  543. <!-- // Skills
  544. =============================-->
  545.  
  546.  
  547.  
  548. <!-- Skills
  549. =============================-->
  550.  
  551. <div id="skills2" class="item subpage">
  552.     <div class="content">
  553.         <div class="content_overlay"></div>
  554.     <div class="content_inner">
  555.         <div class="row contentscroll">
  556.             <div class="container">
  557.                 <div class="col-md-6 empty">&nbsp;</div>
  558.             <div class="col-md-6 content_text">
  559.                 <div class="clearfix" >
  560.                     <h1>My Skills</h1>
  561.                     <div class="tags">In my experience the following are skills key to a good UI/UX Designer. unde omnis iste natus error sit.</div>
  562.                 <div class="pad_top40 clearfix">
  563.                    <h2 class="pad_top13">Programming Skills <i class="fa fa-file-code-o sub-shadow"></i></h2>
  564.                 <div class="clearfix pad_top20">
  565.                     <div class="row">
  566.                         <div class="clearfix">
  567.                             <!--Skills 1-->
  568.                             <div class="skills col-md-6">
  569.                                 <div class="chart" data-percent="90">
  570.                                     <span class="percent">90</span>
  571.                                     <div class="subtitle">HTML5 &amp; CSS3</div>
  572.                                     <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
  573.                                 </div>
  574.                             </div>
  575.                             <!-- // Skills 1-->
  576.                            
  577.                             <!--Skills 2-->
  578.                             <div class="skills col-md-6">
  579.                                 <div class="chart" data-percent="75">
  580.                                     <span class="percent">75</span>
  581.                                     <div class="subtitle">WORDPRESS</div>
  582.                                     <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
  583.                                 </div>
  584.                             </div>
  585.                             <!-- // Skills 2-->
  586.                         </div>
  587.                        
  588.                         <div class="clearfix">
  589.                             <!--Skills 3-->
  590.                             <div class="skills col-md-6">
  591.                                 <div class="chart" data-percent="60">
  592.                                     <span class="percent">60</span>
  593.                                     <div class="subtitle">JQUERY</div>
  594.                                     <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
  595.                                 </div>
  596.                             </div>
  597.                             <!-- // Skills 3-->
  598.                            
  599.                             <!--Skills 4-->
  600.                             <div class="skills col-md-6">
  601.                                 <div class="chart" data-percent="40">
  602.                                     <span class="percent">40</span>
  603.                                     <div class="subtitle">WEB DEVELPOPMENT</div>
  604.                                     <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
  605.                                 </div>
  606.                             </div>
  607.                             <!-- // Skills 4-->
  608.                         </div>
  609.                     </div>
  610.                 </div>
  611.                
  612.                 <div class="pad_top30">
  613.                     <h2 class="pad_top13">Graphic Skills <i class="fa fa-paint-brush sub-shadow"></i></h2>
  614.                         <div class="clearfix pad_top20">
  615.                             <div class="row">
  616.                                 <div class="clearfix">
  617.                                     <!--Skills 5-->
  618.                                     <div class="skills col-md-6">
  619.                                         <div class="chart" data-percent="80">
  620.                                             <span class="percent">80</span>
  621.                                             <div class="subtitle">PHOTOSHOP</div>
  622.                                             <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
  623.                                         </div>
  624.                                     </div>
  625.                                     <!-- // Skills 5-->
  626.                                    
  627.                                     <!--Skills 6-->
  628.                                     <div class="skills col-md-6">
  629.                                         <div class="chart" data-percent="60">
  630.                                             <span class="percent">60</span>
  631.                                             <div class="subtitle">ILLUSTRATE</div>
  632.                                             <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
  633.                                         </div>
  634.                                     </div>
  635.                                     <!-- // Skills 6-->
  636.                                 </div>
  637.                                
  638.                                 <div class="clearfix">
  639.                                     <!--Skills 7-->
  640.                                     <div class="skills col-md-6">
  641.                                         <div class="chart" data-percent="90">
  642.                                             <span class="percent">90</span>
  643.                                             <div class="subtitle">FIREWORK</div>
  644.                                             <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
  645.                                         </div>
  646.                                     </div>
  647.                                     <!-- // Skills 7-->
  648.                                    
  649.                                     <!--Skills 8-->
  650.                                     <div class="skills col-md-6">
  651.                                         <div class="chart" data-percent="75">
  652.                                             <span class="percent">75</span>
  653.                                             <div class="subtitle">INDESIGN</div>
  654.                                             <p>Lorem ipsum dolor sit amet adipiscing elit.</p>
  655.                                         </div>
  656.                                     </div>
  657.                                     <!-- // Skills 8-->
  658.                                 </div>
  659.                             </div>
  660.                         </div>
  661.                 </div>
  662.                 </div>
  663.                 </div>
  664.             </div>
  665.             </div>
  666.         </div>
  667.     </div>
  668.     </div>
  669. </div>
  670.  
  671. <!-- // Skills
  672. =============================-->
  673.  
  674.  
  675.  
  676. <!-- Skills
  677. =============================-->
  678.  
  679. <div id="skills3" class="item subpage">
  680.     <div class="content">
  681.         <div class="content_overlay"></div>
  682.     <div class="content_inner">
  683.         <div class="row contentscroll">
  684.             <div class="container">
  685.                 <div class="col-md-6 empty">&nbsp;</div>
  686.             <div class="col-md-6 content_text">
  687.                 <div class="clearfix" >
  688.                     <h1>My Skills</h1>
  689.                     <div class="tags">In my experience the following are skills key to a good UI/UX Designer. unde omnis iste natus error sit.</div>
  690.                 <div class="pad_top40 clearfix">
  691.                     <h2 class="pad_top13">Programming Skills <i class="fa fa-file-code-o sub-shadow"></i></h2>
  692.                         <div class="clearfix pad_top20">
  693.                             <ul class="progress_bars">
  694.                                 <!--Progress 1-->
  695.                                 <li>
  696.                                     <div class="progress_heading">HTMl</div>
  697.                                     <div class="bar-wrap">
  698.                                         <span data-width="90"></span>
  699.                                     </div>
  700.                                 </li>
  701.                                 <!-- // Progress 1-->
  702.                            
  703.                                 <!--Progress 2-->
  704.                                 <li>
  705.                                     <div class="progress_heading">CSS</div>
  706.                                     <div class="bar-wrap">
  707.                                         <span data-width="75"></span>
  708.                                     </div>
  709.                                 </li>
  710.                                 <!-- // Progress 2-->
  711.                                
  712.                                 <!--Progress 3-->
  713.                                 <li>
  714.                                     <div class="progress_heading">JQUERY</div>
  715.                                     <div class="bar-wrap">
  716.                                         <span data-width="60"></span>
  717.                                     </div>
  718.                                 </li>
  719.                                 <!-- // Progress 3-->
  720.                                
  721.                                 <!--Progress 4-->
  722.                                 <li>
  723.                                     <div class="progress_heading">PHP</div>
  724.                                     <div class="bar-wrap">
  725.                                         <span data-width="40"></span>              
  726.                                     </div>
  727.                                 </li>
  728.                                 <!-- // Progress 4-->
  729.                                
  730.                                 <!--Progress 5-->
  731.                                 <li>
  732.                                     <div class="progress_heading">WORD PRESS</div>
  733.                                     <div class="bar-wrap">
  734.                                         <span data-width="70"></span>                
  735.                                     </div>
  736.                                 </li>
  737.                                 <!-- // Progress 5-->
  738.                             </ul>
  739.                         </div>
  740.                
  741.                         <div class="pad_top50">
  742.                             <h2 class="pad_top13">Graphic Skills <i class="fa fa-paint-brush sub-shadow"></i></h2>
  743.                                 <div class="clearfix pad_top20">
  744.                                     <ul class="progress_bars">
  745.                                         <!--Progress 6-->
  746.                                         <li>
  747.                                             <div class="progress_heading">Photoshop</div>
  748.                                             <div class="bar-wrap">
  749.                                                 <span data-width="80"></span>                
  750.                                             </div>
  751.                                             </li>
  752.                                         <!-- // Progress 6-->
  753.                                        
  754.                                         <!--Progress 7-->
  755.                                        
  756.                                         <li>
  757.                                             <div class="progress_heading">Illustrator</div>
  758.                                             <div class="bar-wrap">
  759.                                                 <span data-width="60"></span>                
  760.                                             </div>
  761.                                         </li>
  762.                                         <!-- // Progress 7-->
  763.                                        
  764.                                         <!--Progress 8-->
  765.                                         <li>
  766.                                             <div class="progress_heading">Fireworks</div>
  767.                                             <div class="bar-wrap">
  768.                                                 <span data-width="90"></span>                
  769.                                             </div>
  770.                                         </li>
  771.                                         <!-- // Progress 8-->
  772.                                        
  773.                                         <!--Progress 9-->
  774.                                         <li>
  775.                                             <div class="progress_heading">Indesign</div>
  776.                                             <div class="bar-wrap">
  777.                                                 <span data-width="75"></span>                
  778.                                             </div>
  779.                                         </li>
  780.                                         <!-- // Progress 9-->
  781.                                     </ul>
  782.                                 </div>
  783.                         </div>
  784.                 </div>
  785.                 </div>
  786.             </div>
  787.             </div>
  788.         </div>
  789.     </div>
  790.     </div>
  791. </div>
  792.  
  793. <!-- // Skills
  794. =============================-->
  795.  
  796.  
  797.  
  798. <!-- Resume
  799. =============================-->
  800.  
  801. <div id="resume" class="item subpage">
  802.     <div class="content">
  803.         <div class="content_overlay"></div>
  804.     <div class="content_inner">
  805.         <div class="row contentscroll">
  806.             <div class="container">
  807.                 <div class="col-md-6 empty">&nbsp;</div>
  808.             <div class="col-md-6 content_text">
  809.                 <div class="clearfix" >
  810.                     <h1>Resume</h1>
  811.                     <div class="tags">Professional web development and specializes in developing clean, effective and smart websites.</div>
  812.                 <div class="pad_top40 clearfix">
  813.                     <h2 class="pad_top13">Professional Experience</h2>
  814.                 <ul class="cbp_tmtimeline">
  815.                     <!--Time-Line 1-->
  816.                     <li>
  817.                         <time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>Jan 10</span> <span>to Present</span></time>
  818.                     <div class="cbp_tmicon"><i class="fa fa-pencil"></i></div>
  819.                         <div class="cbp_tmlabel element_from_right">
  820.                             <i class="fa fa-book resume-shadow"></i>
  821.                             <h3>Designer / Art Director - Google Inc</h3>
  822.                         <div class="content-smalltxt">UI Design <span class="bullet">&bull;</span> Graphics Design</div>
  823.                             <p class="pad_top13">Specilaise in 80% in Interactive and web projects and 30% in the print projects for clients In mauris urna, cursus eget. </p>
  824.                         </div>
  825.                     </li>
  826.                     <!-- // Time-Line 1-->
  827.                    
  828.                     <!--Time-Line 2-->
  829.                     <li class="pad_top20">
  830.                         <time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>Aug 06</span> <span>to sep 09</span></time>
  831.                     <div class="cbp_tmicon"><i class="fa fa-pencil"></i></div>
  832.                         <div class="cbp_tmlabel element_from_right">
  833.                             <i class="fa fa-book resume-shadow"></i>
  834.                             <h3>Art Director - Microsoft</h3>
  835.                         <div class="content-smalltxt">UI Design <span class="bullet">&bull;</span> UX Design <span class="bullet">&bull;</span>Interactive Designer</div>
  836.                             <p class="pad_top13"><i class="fa fa-check mar_right10"></i>Nunc in dolor id lacus dictum euismod molestie ut tortor</p>
  837.                             <p><i class="fa fa-check mar_right10"></i>Donec eget nunc pulvinar tortor sollicitudin consectetur id eget eros</p>
  838.                         </div>
  839.                     </li>
  840.                     <!-- // Time-Line 2-->
  841.                 </ul>
  842.                 </div>
  843.                
  844.                 <div class="pad_top50">
  845.                     <div class="pad_top13 clearfix">
  846.                         <h2 class="pad_top13">Education & Certifications</h2>
  847.                    <ul class="cbp_tmtimeline">
  848.                         <!--Time-Line 3-->
  849.                        <li>
  850.                             <time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>2010</span> <span>Graduated</span></time>
  851.                        <div class="cbp_tmicon"><i class="fa fa-book"></i></div>
  852.                            <div class="cbp_tmlabel element_from_right">
  853.                                 <i class="fa fa-graduation-cap resume-shadow"></i>
  854.                                 <h3>The University of Texas</h3>
  855.                                 <div class="content-smalltxt">Master of Computer Applications <span class="bullet">&ndash;</span><span class="bold">Texas</span></div>
  856.                             </div>
  857.                         </li>
  858.                         <!-- // Time-Line 3-->
  859.                        
  860.                         <!--Time-Line 4-->
  861.                         <li class="pad_top20">
  862.                             <time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>2009</span> <span>Graduated</span></time>
  863.                         <div class="cbp_tmicon"><i class="fa fa-book"></i></div>
  864.                             <div class="cbp_tmlabel element_from_right">
  865.                                 <i class="fa fa-graduation-cap resume-shadow"></i>
  866.                                 <h3>The University of Cambridge</h3>
  867.                                 <div class="content-smalltxt">Bachelor Of Computer Applications (BCA)<span class="bullet">&ndash;</span><span class="bold">Cambridge</span></div>
  868.                             </div>
  869.                         </li>
  870.                         <!-- // Time-Line 4-->
  871.                        
  872.                         <!--Time-Line 5-->
  873.                         <li class="pad_top20">
  874.                             <time class="cbp_tmtime" datetime="2013-04-13 05:36"><span>2006</span> <span>Graduated</span></time>
  875.                         <div class="cbp_tmicon"><i class="fa fa-book"></i></div>
  876.                             <div class="cbp_tmlabel element_from_right">
  877.                                 <i class="fa fa-graduation-cap resume-shadow"></i>
  878.                                 <h3>Institude of Design</h3>
  879.                                 <div class="content-smalltxt">Bachelor Of Visual Arts <span class="bullet">&ndash;</span><span class="bold">New Jercy</span></div>
  880.                                 <p class="pad_top15">We're done with you. Go back to the golf course and work on your putz.</p>
  881.                             </div>
  882.                         </li>
  883.                         <!-- // Time-Line 5-->
  884.                     </ul>
  885.                     </div>
  886.                 </div>
  887.                 </div>
  888.             </div>
  889.             </div>
  890.         </div>
  891.     </div>
  892.     </div>
  893. </div>
  894.  
  895. <!-- // Resume
  896. =============================-->
  897.  
  898.  
  899.  
  900. <!--Gallery
  901. =============================-->
  902.  
  903. <div id="gallery" class="item">
  904.     <div id="slides" class="clearfix">
  905.         <div class="cycle-slideshow"
  906.        data-cycle-fx=fade
  907.        data-cycle-speed=1000
  908.        data-cycle-timeout=3000
  909.        data-cycle-caption-plugin=caption2
  910.        data-cycle-overlay-fx-out="fadeOut"
  911.        data-cycle-overlay-fx-in="fadeIn"
  912.          data-cycle-prev=".prev"
  913.      data-cycle-next=".next"    
  914.        >
  915.    
  916.         <div class="cycle-overlay"></div>
  917.             <img src="assets/img/gallery/18.jpg" data-cycle-desc="Web Design."  class="fullBg" alt="">
  918.             <img src="assets/img/gallery/19.jpg" data-cycle-desc="UI/UX Development." class="fullBg" alt="">
  919.             <img src="assets/img/gallery/20.jpg" data-cycle-desc="Web Design" class="fullBg" alt="">
  920.             <img src="assets/img/gallery/21.jpg" data-cycle-desc="Branding & Identity" class="fullBg" alt="">
  921.         </div>
  922. </div>
  923.  
  924. <div class="gal-top">
  925.     <div class="container">
  926.         <div class="galheading galleft"><h1>Gallery Cycle-Slider</h1></div>
  927.         <div id="button" class="clearfix galright">
  928.             <div class="prev"><i class="fa fa-angle-left"></i></div>
  929.             <div class="next"><i class="fa fa-angle-right"></i></div>
  930.         </div>
  931.     </div>
  932. </div>
  933.  
  934. </div>
  935.  
  936.  
  937. <!-- // Gallery
  938. =============================-->
  939.  
  940.  
  941.  
  942. <!-- Gallery  SS
  943. =============================-->
  944.  
  945. <div id="galleryss" class="item">
  946.  
  947.     <!--Thumbnail Navigation-->
  948.     <div id="prevthumb"></div>
  949.     <div id="nextthumb"></div>
  950.    
  951.     <!--Arrow Navigation-->
  952.     <a id="prevslide" class="load-item"></a>
  953.     <a id="nextslide" class="load-item"></a>
  954.    
  955.     <div id="thumb-tray" class="load-item">
  956.         <div id="thumb-back"></div>
  957.         <div id="thumb-forward"></div>
  958.     </div>
  959.    
  960.     <!--Time Bar-->
  961.     <div id="progress-back" class="load-item">
  962.  
  963.  
  964.         <div id="progress-bar"></div>
  965.     </div>
  966.    
  967.     <!--Control Bar-->
  968.     <div id="controls-wrapper" class="load-item">
  969.         <div id="controls">
  970.            
  971.             <a id="play-button"><img id="pauseplay" src="img/pause.png" alt=""/></a>
  972.        
  973.             <!--Slide counter-->
  974.             <div id="slidecounter">
  975.                 <span class="slidenumber"></span> / <span class="totalslides"></span>           </div>
  976.            
  977.             <!--Slide captions displayed here-->
  978.             <div id="slidecaption"></div>
  979.            
  980.             <!--Thumb Tray button-->
  981.             <a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png" alt=""/></a>
  982.            
  983.             <!--Navigation-->
  984.           <ul id="slide-list"></ul>
  985.         </div>
  986.     </div>
  987.     <div class="gal-top">
  988.         <div class="container">
  989.             <div class="galheading galleft"><h1>Gallery Super-Sized</h1></div>
  990.         </div>
  991.     </div>
  992. </div>
  993.  
  994. <!-- // Gallery  SS Ends
  995. =============================-->
  996.  
  997.  
  998.  
  999. <!-- Portfolio
  1000. =============================-->
  1001.  
  1002. <div id="portfolio" class="item">
  1003. <div class="content contentscroll">
  1004. <section class="portfolio">
  1005.  <!-- Portfolio Section -->    
  1006.   <section class="section">
  1007.     <div class="container">
  1008.       <div class="prettygalheading clearfix text-center"><h1>Portfolio Filter</h1>
  1009.       </div>
  1010.       <!-- Portfolio Filters -->
  1011.      <ul class="filters">
  1012.           <li class="filter" data-filter="all">View All</li>
  1013.           <li class="filter" data-filter="animate">Animate</li>
  1014.           <li class="filter" data-filter="design">Design</li>
  1015.           <li class="filter" data-filter="photography">Photography</li>
  1016.       </ul>
  1017.      
  1018.       <!-- End Portfolio Filters -->
  1019.     </div>
  1020.     <div class="portfolio-top"></div>
  1021.     <!-- Portfolio Grid -->
  1022.     <ul  id="portfolio-grid" class="portfolio-grid">
  1023.                 <!-- Portfolio Item 1 -->
  1024.                 <li class="mix all animate photography mix_all">
  1025.                     <div class="view3 third-effect3"><img src="assets/img/gallery/15.jpg" class="img-responsive" alt="" />
  1026.                         <div class="mask">
  1027.                           <a href="assets/img/gallery/15.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1028.                           <div class="project-overlay"></div>
  1029.                                 <div class="port-caption">When Goliath comes out, you should run. </div>
  1030.                           </a>                        </div>
  1031.                   </div>
  1032.                 </li>
  1033.                 <!-- // Portfolio Item 1 -->
  1034.                
  1035.                 <!-- Portfolio Item 2 -->
  1036.       <li class="mix all photography mix_all">
  1037.                     <div class="view3 third-effect3"><img src="assets/img/gallery/14.jpg" class="img-responsive" alt="" />
  1038.                         <div class="mask">
  1039.                           <a href="assets/img/gallery/14.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1040.                           <div class="project-overlay"></div>
  1041.                                  <div class="port-caption">When Goliath comes out, you should run. </div>
  1042.                           </a>                        </div>
  1043.                 </div>
  1044.               </li>
  1045.  
  1046.       <!-- // Portfolio Item 2 -->
  1047.      
  1048.       <!-- Portfolio Item 3 -->
  1049.       <li class="mix all design animate mix_all">
  1050.                     <div class="view3 third-effect3"><img src="assets/img/gallery/17.jpg" class="img-responsive" alt="" />
  1051.                         <div class="mask">
  1052.                           <a href="assets/img/gallery/17.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1053.  
  1054.                           <div class="project-overlay"></div>
  1055.                                 <div class="port-caption">When Goliath comes out, you should run. </div>
  1056.                           </a>                        </div>
  1057.  
  1058.                 </div>
  1059.               </li>
  1060.       <!-- // Portfolio Item 3 -->
  1061.  
  1062.       <!-- Portfolio Item 4 -->
  1063.       <li class="mix all photography design mix_all">
  1064.                     <div class="view3 third-effect3"><img src="assets/img/gallery/16.jpg" class="img-responsive" alt="" />
  1065.                         <div class="mask">
  1066.                           <a href="assets/img/gallery/16.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1067.                           <div class="project-overlay"></div>
  1068.                                 <div class="port-caption">When Goliath comes out, you should run. </div>
  1069.                           </a>                        </div>
  1070.                 </div>
  1071.               </li>
  1072.       <!-- // Portfolio Item 4 -->
  1073.      
  1074.       <!-- Portfolio Item 5 -->
  1075.       <li class="mix all design mix_all">
  1076.                     <div class="view3 third-effect3"><img src="assets/img/gallery/12.jpg" class="img-responsive" alt="" />
  1077.                         <div class="mask">
  1078.                           <a href="assets/img/gallery/12.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1079.                           <div class="project-overlay"></div>
  1080.                                 <div class="port-caption">When Goliath comes out, you should run. </div>
  1081.                           </a>                        </div>
  1082.                 </div>
  1083.               </li>
  1084.       <!-- // Portfolio Item 5 -->
  1085.  
  1086.       <!-- Portfolio Item 6 -->
  1087.       <li class="mix all animate mix_all">
  1088.                     <div class="view3 third-effect3"><img src="assets/img/gallery/6.jpg" class="img-responsive" alt="" />
  1089.                         <div class="mask">
  1090.                           <a href="assets/img/gallery/6.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1091.                           <div class="project-overlay"></div>
  1092.                                 <div class="port-caption">When Goliath comes out, you should run. </div>
  1093.                           </a>                        </div>
  1094.                 </div>
  1095.               </li>
  1096.       <!-- // Portfolio Item 6 -->
  1097.      
  1098.       <!-- Portfolio Item 7 -->
  1099.       <li class="mix all design photography mix_all">
  1100.                     <div class="view3 third-effect3"><img src="assets/img/gallery/7.jpg" class="img-responsive" alt="" />
  1101.                         <div class="mask">
  1102.                           <a href="assets/img/gallery/7.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1103.                           <div class="project-overlay"></div>
  1104.                                 <div class="port-caption">When Goliath comes out, you should run. </div>
  1105.                           </a>                        </div>
  1106.                 </div>
  1107.               </li>
  1108.       <!-- // Portfolio Item 7 -->
  1109.      
  1110.       <!-- Portfolio Item 8 -->
  1111.       <li class="mix all animate mix_all">
  1112.                     <div class="view3 third-effect3"><img src="assets/img/gallery/13.jpg" class="img-responsive" alt="" />
  1113.                         <div class="mask">
  1114.                           <a href="assets/img/gallery/13.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1115.                           <div class="project-overlay"></div>
  1116.                                 <div class="port-caption">When Goliath comes out, you should run. </div>
  1117.                           </a>                        </div>
  1118.                 </div>
  1119.               </li>
  1120.               <!-- // Portfolio Item 8 -->
  1121.             </ul>
  1122.     <!-- End Portfolio Grid -->
  1123.   </section>
  1124.   <!-- End Portfolio Section -->
  1125.  </section>
  1126.  </div>
  1127. </div>
  1128.  
  1129. <!-- // Portfolio
  1130. =============================-->
  1131.  
  1132.  
  1133.  
  1134. <!-- Portfolio Half-Width
  1135. =============================-->
  1136.  
  1137.  <div id="portfoliohalfwidth" class="item">
  1138.     <div class="content">
  1139.         <div class="content_overlay"></div>
  1140.     <div class="content_inner">
  1141.         <div class="row contentscroll">
  1142.             <div class="container col-md-12">
  1143.                 <div class="col-md-6 empty">&nbsp;</div>
  1144.             <div class="col-md-6 content_text">
  1145.                 <div class="clearfix" >
  1146.                     <h1>Gallery Half-Width</h1>
  1147.                     <div class="tags">Nutritionists, naturopaths, doctors, and journalists weigh in on topics organic food.</div>
  1148.                 <div class="clearfix pad_top40">
  1149.                     <div class="two_half pad_top20">
  1150.                         <ul class="portfolio-grid">
  1151.                         <!-- Portfolio Item 1 -->
  1152.                         <li class="mix all animate photography mix_all">
  1153.                             <div class="view3 third-effect3">
  1154.                                 <img src="assets/img/gallery/15.jpg" class="img-responsive" alt="" />
  1155.                                 <div class="mask">
  1156.                                     <a href="assets/img/gallery/15.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1157.                                         <div class="project-overlay"></div>
  1158.                                         <div class="port-caption">When Goliath comes out, you should run. </div>
  1159.                                     </a>                        
  1160.                                 </div>
  1161.                             </div>
  1162.                         </li>
  1163.                         <!-- // Portfolio Item 1 -->
  1164.                        
  1165.                         <!-- Portfolio Item 2 -->
  1166.                         <li class="mix all photography mix_all">
  1167.                             <div class="view3 third-effect3">
  1168.                                 <img src="assets/img/gallery/14.jpg" class="img-responsive" alt="" />
  1169.                                 <div class="mask">
  1170.                                     <a href="assets/img/gallery/14.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1171.                                         <div class="project-overlay"></div>
  1172.                                         <div class="port-caption">When Goliath comes out, you should run. </div>
  1173.                                     </a>                        
  1174.                                 </div>
  1175.                             </div>
  1176.                         </li>
  1177.                         <!-- // Portfolio Item 2 -->
  1178.                        
  1179.                         <!-- Portfolio Item 3 -->
  1180.                         <li class="mix all design animate mix_all">
  1181.                             <div class="view3 third-effect3"><img src="assets/img/gallery/17.jpg" class="img-responsive" alt="" />
  1182.                                 <div class="mask">
  1183.                                     <a href="assets/img/gallery/17.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1184.                                         <div class="project-overlay"></div>
  1185.                                         <div class="port-caption">When Goliath comes out, you should run. </div>
  1186.                                     </a>                        
  1187.                                 </div>
  1188.                             </div>
  1189.                         </li>
  1190.                         <!-- // Portfolio Item 3 -->
  1191.                        
  1192.                         <!-- Portfolio Item 4 -->
  1193.                         <li class="mix all photography design mix_all">
  1194.                             <div class="view3 third-effect3"><img src="assets/img/gallery/16.jpg" class="img-responsive" alt="" />
  1195.                                 <div class="mask">
  1196.                                     <a href="assets/img/gallery/16.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1197.                                         <div class="project-overlay"></div>
  1198.                                         <div class="port-caption">When Goliath comes out, you should run. </div>
  1199.                                     </a>                        
  1200.                                 </div>
  1201.                             </div>
  1202.                         </li>
  1203.                         <!-- // Portfolio Item 4 -->
  1204.                        
  1205.                         <!-- Portfolio Item 5 -->
  1206.                         <li class="mix all design mix_all">
  1207.                             <div class="view3 third-effect3"><img src="assets/img/gallery/12.jpg" class="img-responsive" alt="" />
  1208.                                 <div class="mask">
  1209.                                     <a href="assets/img/gallery/12.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1210.                                         <div class="project-overlay"></div>
  1211.                                         <div class="port-caption">When Goliath comes out, you should run. </div>
  1212.                                     </a>                        
  1213.                                 </div>
  1214.                             </div>
  1215.                         </li>
  1216.                         <!-- // Portfolio Item 5 -->
  1217.                        
  1218.                         <!-- Portfolio Item 6 -->
  1219.                         <li class="mix all animate mix_all">
  1220.                             <div class="view3 third-effect3"><img src="assets/img/gallery/6.jpg" class="img-responsive" alt="" />
  1221.                                 <div class="mask">
  1222.                                     <a href="assets/img/gallery/6.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1223.                                         <div class="project-overlay"></div>
  1224.                                         <div class="port-caption">When Goliath comes out, you should run. </div>
  1225.                                     </a>                        
  1226.                                 </div>
  1227.                             </div>
  1228.                         </li>
  1229.                         <!-- // Portfolio Item 6 -->
  1230.                        
  1231.                         <!-- Portfolio Item 7 -->
  1232.                         <li class="mix all design photography mix_all">
  1233.                             <div class="view3 third-effect3"><img src="assets/img/gallery/7.jpg" class="img-responsive" alt="" />
  1234.                                 <div class="mask">
  1235.                                     <a href="assets/img/gallery/7.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1236.                                         <div class="project-overlay"></div>
  1237.                                         <div class="port-caption">When Goliath comes out, you should run. </div>
  1238.                                     </a>                        
  1239.                                 </div>
  1240.                             </div>
  1241.                         </li>
  1242.                         <!-- // Portfolio Item 7 -->
  1243.                        
  1244.                         <!-- Portfolio Item 8 -->
  1245.                         <li class="mix all animate mix_all">
  1246.                             <div class="view3 third-effect3"><img src="assets/img/gallery/13.jpg" class="img-responsive" alt="" />
  1247.                                 <div class="mask">
  1248.                                     <a href="assets/img/gallery/13.jpg" title="Project description" data-rel="prettyPhoto[gallery1]" class="viewDetail lightbox info">
  1249.                                         <div class="project-overlay"></div>
  1250.                                         <div class="port-caption">When Goliath comes out, you should run. </div>
  1251.                                     </a>                        
  1252.                                 </div>
  1253.                             </div>
  1254.                         </li>
  1255.                         <!-- // Portfolio Item 8 -->
  1256.                         </ul>  
  1257.                     </div>
  1258.                 </div>                                                 
  1259.                 </div>
  1260.             </div>
  1261.             </div>
  1262.         </div>
  1263.     </div>
  1264.     </div>
  1265. </div>
  1266.  
  1267. <!-- // Portfolio Half-Width
  1268. =============================-->
  1269.  
  1270.  
  1271.  
  1272. <!-- Portfolio Modal
  1273. =============================-->
  1274.  
  1275. <!-- PORTFOLIO STARTS
  1276. ===============================================================================================-->
  1277.  
  1278. <div id="projectmodal" class="item projectmodal">
  1279. <!-- Portfolio Section -->
  1280. <div class="content contentscroll">
  1281. <section class="portfolio">  
  1282.   <section class="section">
  1283.     <div class="text-center">
  1284.   <h1>Project Modal</h1>
  1285.     <div class="tags">We build great sites, thanks for visiting this section. Here’s a collection of some of my favs works.</div>
  1286.     </div>
  1287.     <div class="container">
  1288.       <!-- Portfolio Filters -->
  1289.      <ul class="filters">
  1290.           <li class="filter" data-filter="all">View All</li>
  1291.           <li class="filter" data-filter="animate">Animate</li>
  1292.           <li class="filter" data-filter="design">Design</li>
  1293.           <li class="filter" data-filter="photography">Photography</li>
  1294.       </ul>
  1295.       <!-- End Portfolio Filters -->
  1296.     </div>
  1297.     <div class="portfolio-top"></div>
  1298.  <!-- Portfolio Grid -->
  1299.     <ul id="portfolio-grid-modal">
  1300.       <li class="mix photography design  mix_all">
  1301.         <a href="#project_title1" data-toggle="modal">
  1302.         <img src="assets/img/gallery/15.jpg" alt="">
  1303.         </a>
  1304.       </li>
  1305.       <li class="mix animate design mix_all">
  1306.         <a href="#project_title2" data-toggle="modal">
  1307.         <img src="assets/img/gallery/14.jpg" alt="">
  1308.         </a>
  1309.       </li>
  1310.       <li class="mix animate photography mix_all">
  1311.         <a href="#project_title3" data-toggle="modal">
  1312.         <img src="assets/img/gallery/17.jpg" alt="">
  1313.         </a>
  1314.       </li>
  1315.       <li class="mix photography mix_all">
  1316.         <a href="#project_title4" data-toggle="modal">
  1317.         <img src="assets/img/gallery/16.jpg" alt="">
  1318.         </a>
  1319.       </li>
  1320.       <li class="mix design mix_all">
  1321.         <a href="#project_title5" data-toggle="modal">
  1322.         <img src="assets/img/gallery/12.jpg" alt="">
  1323.         </a>
  1324.       </li>
  1325.       <li class="mix animate mix_all">
  1326.         <a href="#project_title6" data-toggle="modal">
  1327.         <img src="assets/img/gallery/6.jpg" alt="">
  1328.         </a>
  1329.       </li>
  1330.       <li class="mix design photography  mix_all">
  1331.         <a href="#project_title7" data-toggle="modal">
  1332.         <img src="assets/img/gallery/7.jpg" alt="">
  1333.         </a>
  1334.       </li>
  1335.       <li class="mix animate photography  mix_all">
  1336.         <a href="#project_title8" data-toggle="modal">
  1337.         <img src="assets/img/gallery/13.jpg" alt="">
  1338.         </a>
  1339.       </li>
  1340.     </ul>
  1341.     <!-- End Portfolio Grid -->
  1342.   </section>
  1343.   </section>
  1344.   </div>
  1345.  
  1346.  
  1347.     <!-- Project Title1 modal
  1348. ========================================================================================================================================-->
  1349.             <div id="project_title1" class="modal contentscroll fade white_bg" tabindex="-1" role="dialog" aria-labelledby="project_title1" aria-hidden="true">
  1350.                 <!-- Modal body start -->
  1351.                 <div class="modal-body color_background">
  1352.                     <!-- Modal container -->
  1353.                     <div class="container">
  1354.                         <div class="row">
  1355.                             <!-- Project navigation -->
  1356.                             <div class="clearfix col-lg-12">
  1357.                             <div class="project_navigation">
  1358.                                 <div class="navigation_button"><a href="#project_title8" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-left"></i></a></div>
  1359.                                 <div class="navigation_button1"><a href="#" data-dismiss="modal"><i class="fa fa-times"></i></a></div>
  1360.                                 <div class="navigation_button"><a href="#project_title2" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-right"></i></a></div>
  1361.                               </div>
  1362.                             </div>
  1363.                             <!-- // Project navigation -->
  1364.                            
  1365.                             <!-- Project Heading -->
  1366.                             <div class="clearfix col-lg-12">
  1367.                                 <div class="port-title clearfix">
  1368.                                     <h1>Wings of Beauty</h1>
  1369.                                     <div class="tags">Static Portfolio</div>
  1370.                                 </div>
  1371.                                
  1372.                                
  1373.                             </div>
  1374.                             <!-- // Project Heading -->
  1375.                             <div class="pad_top30">
  1376.                             <div class="col-md-6 mar_bot30">
  1377.                                 <img src="assets/img/gallery/15.jpg" alt="" class="img-responsive img_width"/>                            </div>
  1378.                              <div class="col-md-6 project_content">
  1379.                             <h5>Project Descriptions</h5>
  1380.                                 <p class="pad_top13">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus nibh
  1381.                                 sed elit mattis adipiscing. Fusce in hendrerit purus. Suspendisse potenti.
  1382.                                 Proin quis odio, dapibus mauris. Donec nisi libero, adipiscing
  1383.                                 id pretium eget, consectetur sit amet leo.</p>
  1384.                                 <div class="project_details">
  1385.                                 <h5>Project Details</h5>
  1386.                                 <div class="clearfix pad_top13">   
  1387.                                
  1388.                                 <div class="pinfo clearfix">
  1389.                                     <span class="input-box">Date </span>
  1390.                                     <span class="pright">15th December 2013</span>
  1391.                                 </div>
  1392.                                 <div class="pinfo clearfix">
  1393.                                     <span class="input-box">Categories </span>
  1394.                                     <span class="pright">Brochures</span>
  1395.                                 </div>
  1396.                                 <div class="pinfo clearfix">
  1397.                                     <span class="input-box">Client </span>
  1398.                                     <span class="pright">John Doe</span>
  1399.                                 </div>
  1400.                                    
  1401.                                 </div>
  1402.                                 </div>
  1403.                             <div class="clearfix pad_top10">
  1404.                                 <a href="#" class="btn btn-3 btn-3e nav-link" target="_blank">Live Preview</a>
  1405.                              </div>
  1406.                             </div>  
  1407.                             </div>
  1408.                         </div>
  1409.                     </div>
  1410.                     <!-- // Modal container -->
  1411.                 </div>
  1412.                 <!-- // Modal body start -->
  1413.             </div>
  1414.             <!-- // Project Title1 modal -->
  1415.        
  1416.             <!-- Project Title2 modal
  1417. ========================================================================================================================================-->
  1418.             <div id="project_title2" class="modal contentscroll fade white_bg" tabindex="-1" role="dialog" aria-labelledby="project_title2" aria-hidden="true">
  1419.                 <div class="modal-body color_background">
  1420.                     <div class="container">
  1421.                         <div class="row">
  1422.                             <!-- Project navigation -->
  1423.                             <div class="clearfix col-lg-12">
  1424.                                 <div class="project_navigation">
  1425.                                 <div class="navigation_button"><a href="#project_title1" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-left"></i></a></div>
  1426.                                 <div class="navigation_button1"><a href="#" data-dismiss="modal"><i class="fa fa-times"></i></a></div>
  1427.                                 <div class="navigation_button"><a href="#project_title3" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-right"></i></a></div>
  1428.                               </div>
  1429.                             </div>
  1430.                             <!-- // Project navigation -->
  1431.                        
  1432.                             <div class="clearfix col-lg-12">
  1433.                                 <div class="port-title clearfix">
  1434.                                     <h1>I Believe I Can Fly</h1>
  1435.                                     <div class="tags">Landscape Portfolio</div>
  1436.                                 </div>
  1437.                             </div>
  1438.                        
  1439.                             <div class="clearfix col-lg-12 pad_top30">
  1440.                                 <img src="assets/img/gallery/26.jpg" alt=""  class="img-responsive port-modal-img"/>                            </div>
  1441.                        
  1442.                             <div class="project_content_top">
  1443.                                 <div class="col-lg-12 clearfix text-left">
  1444.                                     <div class="row">
  1445.                                     <div class="col-lg-4">
  1446.                                         <p>Lorem ipsum dolor sit amet, consectetur  elit. Cras vel turpis laoreet, auctor sapien sit amet, condimentum metus.</p>
  1447.                                         <div class="clearfix pad_top20">
  1448.                                             <a href="#" class="btn btn-3 btn-3e nav-link" target="_blank">Live Preview</a>                                   </div>
  1449.                                     </div>
  1450.                                     <div class="col-lg-4 mar_bot30 restop30">
  1451.                                         <p>Proin eleifend velit et lacus aliquet sodales. Ut condimentum lacus quis tellus scelerisque rutrum. Duis at auctor mi. Sed scelerisque eget.</p>
  1452.                                     </div>
  1453.                                     <div class="col-lg-4">
  1454.                                         <h5>Project Details</h5>
  1455.                                         <div class="clearfix pad_top13">
  1456.                                        
  1457.                                         <div class="pinfo clearfix">
  1458.                                             <span class="input-box">Date </span>
  1459.                                             <span class="pright">15th December 2013</span>
  1460.                                         </div>
  1461.                                         <div class="pinfo clearfix">
  1462.                                             <span class="input-box">Categories </span>
  1463.                                             <span class="pright">Brochures</span>
  1464.                                         </div>
  1465.                                         <div class="pinfo clearfix">
  1466.                                             <span class="input-box">Client </span>
  1467.                                             <span class="pright">John Doe</span>
  1468.                                         </div>
  1469.                                        
  1470.                                         </div>
  1471.                                     </div>
  1472.                                     </div>
  1473.                                 </div>
  1474.                             </div>
  1475.                         </div>
  1476.                     </div>
  1477.                 </div>
  1478.             </div>
  1479.         <!-- //Project Title2 modal -->
  1480.        
  1481.         <!-- Project Title3 modal
  1482. ========================================================================================================================================-->
  1483.         <div id="project_title3" class="modal contentscroll fade white_bg" tabindex="-1" role="dialog" aria-labelledby="project_title3" aria-hidden="true">
  1484.             <div class="modal-body color_background">
  1485.                 <div class="container">
  1486.                     <div class="row">
  1487.                         <!-- Project navigation -->
  1488.                             <div class="clearfix col-lg-12">
  1489.                                 <div class="project_navigation">
  1490.                                 <div class="navigation_button"><a href="#project_title2" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-left"></i></a></div>
  1491.                                 <div class="navigation_button1"><a href="#" data-dismiss="modal"><i class="fa fa-times"></i></a></div>
  1492.                                 <div class="navigation_button"><a href="#project_title4" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-right"></i></a></div>
  1493.                               </div>
  1494.                             </div>
  1495.                             <!-- // Project navigation -->
  1496.                    
  1497.                         <div class="clearfix col-lg-12">
  1498.                             <div class="port-title clearfix">
  1499.                                 <h1>Flying Rose</h1>
  1500.                                 <div class="tags">Vimeo Portfolio</div>
  1501.                             </div>
  1502.                         </div>
  1503.                    
  1504.                         <div class="col-md-12 text-center pad_top30">
  1505.                         <div class="video_containers">
  1506.                         <iframe src="http://player.vimeo.com/video/85330977?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="500" height="281" ></iframe>
  1507. </div> 
  1508.                       </div>
  1509.                    
  1510.                         <div class="clearfix text-left project_content_top">
  1511.                             <div class="col-lg-8">
  1512.                                 <div class="clearfix">
  1513.                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel turpis laoreet, auctor sapien sit amet, condimentum metus. Vivamus vehicula nisl id rutrum volutpat. Mauris ut mauris in dui .pretium porttitor ut quis sapien.</p>
  1514.                                 </div>
  1515.                                 <div class="clearfix pad_top20">
  1516.                                     <a href="#" class="btn btn-3 btn-3e nav-link" target="_blank">Live Preview</a>
  1517.                                 </div>
  1518.                             </div>
  1519.                             <div class="col-lg-4  restop30">
  1520.                                 <h5 class="martop0">Project Details</h5>
  1521.                                 <div class="clearfix pad_top13">
  1522.                                
  1523.                                 <div class="pinfo clearfix">
  1524.                                     <span class="input-box">Date </span>
  1525.                                     <span class="pright">15th December 2013</span>
  1526.                                 </div>
  1527.                                 <div class="pinfo clearfix">
  1528.                                     <span class="input-box">Categories </span>
  1529.                                     <span class="pright">Brochures</span>
  1530.                                 </div>
  1531.                                 <div class="pinfo clearfix">
  1532.                                     <span class="input-box">Client </span>
  1533.                                     <span class="pright">John Doe</span>
  1534.                                 </div>
  1535.                                
  1536.                                 </div>
  1537.                             </div>
  1538.                         </div>
  1539.                     </div>
  1540.                 </div>
  1541.             </div>
  1542.         </div>
  1543.         <!-- //Project Title3 modal -->
  1544.        
  1545.         <!-- Project Title4 modal
  1546. ========================================================================================================================================-->
  1547.         <div id="project_title4" class="modal contentscroll fade white_bg" tabindex="-1" role="dialog" aria-labelledby="project_title4" aria-hidden="true">
  1548.             <div class="modal-body color_background">
  1549.                 <div class="container">
  1550.                     <div class="row">
  1551.                         <!-- Project navigation -->
  1552.                             <div class="clearfix col-lg-12">
  1553.                                 <div class="project_navigation">
  1554.                                 <div class="navigation_button"><a href="#project_title3" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-left"></i></a></div>
  1555.                                 <div class="navigation_button1"><a href="#" data-dismiss="modal"><i class="fa fa-times"></i></a></div>
  1556.                                 <div class="navigation_button"><a href="#project_title5" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-right"></i></a></div>
  1557.                               </div>
  1558.                             </div>
  1559.                             <!-- // Project navigation -->
  1560.                    
  1561.                         <div class="clearfix col-lg-12">
  1562.                             <div class="port-title clearfix">
  1563.                                 <h1>Shy on Sky</h1>
  1564.                                 <div class="tags">Portfolio with Slider</div>
  1565.                             </div>
  1566.                         </div>
  1567.                         <div class="clearfix col-md-12 pad_top30"> 
  1568.                             <div id="myCarousel" class="carousel slide">
  1569.                                 <ol class="carousel-indicators">
  1570.                                     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  1571.                                     <li data-target="#myCarousel" data-slide-to="1"></li>
  1572.                                     <li data-target="#myCarousel" data-slide-to="2"></li>
  1573.                                 </ol>
  1574.                                
  1575.                                 <div class="carousel-inner">
  1576.                                     <div class="item active"><img src="assets/img/gallery/24.jpg" class="img-responsive img_width" alt=""/></div>
  1577.                                     <div class="item"><img src="assets/img/gallery/25.jpg" class="img-responsive img_width" alt=""/></div>
  1578.                                     <div class="item"><img src="assets/img/gallery/23.jpg" class="img-responsive img_width" alt=""/></div>
  1579.                                 </div> 
  1580.                             </div>         
  1581.                         </div>
  1582.                     </div>
  1583.                
  1584.                     <div class="row  project_content_top">
  1585.                                 <div class="col-lg-12 clearfix text-left">
  1586.                                     <div class="row">
  1587.                                     <div class="col-lg-4">
  1588.                                         <p>Lorem ipsum dolor sit amet, consectetur  elit. Cras vel turpis laoreet, auctor sapien sit amet, condimentum metus.</p>
  1589.                                         <div class="clearfix pad_top20">
  1590.                                             <a href="#" class="btn btn-3 btn-3e nav-link" target="_blank">Live Preview</a>                                   </div>
  1591.                                     </div>
  1592.                                     <div class="col-lg-4 mar_bot30  restop30">
  1593.                                         <p>Proin eleifend velit et lacus aliquet sodales. Ut condimentum lacus quis tellus scelerisque rutrum. Duis at auctor mi.</p>
  1594.                                     </div>
  1595.                                     <div class="col-lg-4">
  1596.                                         <h5>Project Details</h5>
  1597.                                         <div class="clearfix pad_top13">
  1598.                                        
  1599.                                         <div class="pinfo clearfix">
  1600.                                             <span class="input-box">Date </span>
  1601.                                             <span class="pright">15th December 2013</span>
  1602.                                         </div>
  1603.                                         <div class="pinfo clearfix">
  1604.                                             <span class="input-box">Categories </span>
  1605.                                             <span class="pright">Brochures</span>
  1606.                                         </div>
  1607.                                         <div class="pinfo clearfix">
  1608.                                             <span class="input-box">Client </span>
  1609.                                             <span class="pright">John Doe</span>
  1610.                                         </div>
  1611.                                        
  1612.                                         </div>
  1613.                                     </div>
  1614.                                     </div>
  1615.                                 </div>
  1616.                   </div>                   
  1617.                 </div>
  1618.             </div>
  1619.         </div>
  1620.         <!-- //Project Title4 modal -->
  1621.        
  1622.         <!-- Project Title5 modal
  1623. ========================================================================================================================================-->
  1624.         <div id="project_title5" class="modal contentscroll fade white_bg" tabindex="-1" role="dialog" aria-labelledby="project_title5" aria-hidden="true">
  1625.             <div class="modal-body color_background">
  1626.                 <div class="container">
  1627.                     <div class="row">
  1628.                         <!-- Project navigation -->
  1629.                             <div class="clearfix col-lg-12">
  1630.                                 <div class="project_navigation">
  1631.                                 <div class="navigation_button"><a href="#project_title4" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-left"></i></a></div>
  1632.                                 <div class="navigation_button1"><a href="#" data-dismiss="modal"><i class="fa fa-times"></i></a></div>
  1633.                                 <div class="navigation_button"><a href="#project_title6" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-right"></i></a></div>
  1634.                               </div>
  1635.                             </div>
  1636.                             <!-- // Project navigation -->
  1637.                    
  1638.                         <div class="clearfix col-lg-12">
  1639.                             <div class="port-title clearfix">
  1640.                                 <h1>Portraitable Beauty</h1>
  1641.                                 <div class="tags">Landscape Portfolio Images</div>
  1642.                             </div>
  1643.                        </div>
  1644.                    
  1645.                         <div class="clearfix col-lg-12 pad_top30">             
  1646.                             <img src="assets/img/gallery/26.jpg" alt="" class="img-responsive port-modal-img"/>
  1647.                             <img src="assets/img/gallery/25.jpg" alt="" class="pad_top10 img-responsive port-modal-img"/>                        </div>                
  1648.                         <div class="clearfix text-left project_content_top">
  1649.                             <div class="col-lg-8">
  1650.                                 <div class="clearfix">
  1651.                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel turpis laoreet, auctor sapien sit amet, condimentum metus. Vivamus vehicula nisl id rutrum volutpat. Mauris ut mauris in dui .pretium porttitor ut quis sapien.</p>
  1652.                                 </div>
  1653.                                 <div class="clearfix pad_top20">
  1654.                                 <a href="#" class="btn btn-3 btn-3e nav-link" target="_blank">Live Preview</a>
  1655.                                 </div>
  1656.                             </div>
  1657.                             <div class="col-lg-4 restop30">
  1658.                                 <h5 class="martop0">Project Details</h5>
  1659.                                 <div class="clearfix pad_top13">
  1660.                                
  1661.                                 <div class="pinfo clearfix">
  1662.                                     <span class="input-box">Date </span>
  1663.                                     <span class="pright">15th December 2013</span>
  1664.                                 </div>
  1665.                                 <div class="pinfo clearfix">
  1666.                                     <span class="input-box">Categories </span>
  1667.                                     <span class="pright">Brochures</span>
  1668.                                 </div>
  1669.                                 <div class="pinfo clearfix">
  1670.                                     <span class="input-box">Client </span>
  1671.                                     <span class="pright">John Doe</span>
  1672.                                 </div>
  1673.                                        
  1674.                                 </div>
  1675.                             </div>
  1676.                         </div>
  1677.                     </div>
  1678.                 </div>
  1679.             </div>
  1680.         </div>
  1681.         <!-- //Project Title5 modal -->
  1682.    
  1683.         <!-- Project Title6 modal
  1684. ========================================================================================================================================-->
  1685.         <div id="project_title6" class="modal contentscroll fade white_bg" tabindex="-1" role="dialog" aria-labelledby="project_title6" aria-hidden="true">
  1686.             <div class="modal-body color_background">
  1687.                 <div class="container">
  1688.                     <div class="row">
  1689.                         <!-- Project navigation -->
  1690.                             <div class="clearfix col-lg-12">
  1691.                                 <div class="project_navigation">
  1692.                                 <div class="navigation_button"><a href="#project_title5" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-left"></i></a></div>
  1693.                                 <div class="navigation_button1"><a href="#" data-dismiss="modal"><i class="fa fa-times"></i></a></div>
  1694.                                 <div class="navigation_button"><a href="#project_title7" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-right"></i></a></div>
  1695.                               </div>
  1696.                             </div>
  1697.                             <!-- // Project navigation -->
  1698.                    
  1699.                         <div class="clearfix col-lg-12">
  1700.                             <div class="port-title clearfix">
  1701.                                 <h1>Buttery Beauty</h1>
  1702.                                 <div class="tags">3 BY 1 Image Portfolio</div>
  1703.                             </div>
  1704.                         </div>
  1705.                        
  1706.                         <div class=" pad_top30">
  1707.                         <div class="col-md-8 mar_bot30">
  1708.                             <img src="assets/img/gallery/6.jpg" alt="" class="img-responsive img_width"/>                        </div>
  1709.                          
  1710.                          <div class="col-md-4 project_content">
  1711.                             <h5>Project Descriptions</h5>
  1712.                             <p class="pad_top13">Lorem ipsum dolor sit amet, adipiscing elit. Aenean vitae lacinia justo. Lorem ipsum amet, consectetur adipiscing elit. Suspendisse volutpat quam vitae enim hendrerit venenatis.<br/><br/> Integer aliquet ac ipsum id pulvinar. Nulla varius ut congue bibendum. Quisque luctus laoreet.</p>
  1713.                        
  1714.                         <div class="team-line-port"></div>
  1715.                        
  1716.                         <div class="project_details">
  1717.                                 <h5>Project Details</h5>
  1718.                                 <div class="clearfix pad_top13">   
  1719.                                    
  1720.                                     <div class="pinfo clearfix">
  1721.                                         <span class="input-box">Date </span>
  1722.                                         <span class="pright">15th December 2013</span>
  1723.                                     </div>
  1724.                                     <div class="pinfo clearfix">
  1725.                                         <span class="input-box">Categories </span>
  1726.                                         <span class="pright">Brochures</span>
  1727.                                     </div>
  1728.                                     <div class="pinfo clearfix">
  1729.                                         <span class="input-box">Client </span>
  1730.                                         <span class="pright">John Doe</span>
  1731.  
  1732.                                     </div>
  1733.  
  1734.                                 </div>
  1735.                                 </div>
  1736.                             <div class="clearfix pad_top10">
  1737.                                 <a href="#" class="btn btn-3 btn-3e nav-link" target="_blank">Live Preview</a>
  1738.                             </div>
  1739.                         </div>  
  1740.                         </div>
  1741.                     </div>
  1742.                 </div>
  1743.             </div>
  1744.         </div>
  1745.         <!-- //Project Title6 modal -->
  1746.    
  1747.         <!-- Project Title7 modal
  1748. ========================================================================================================================================-->
  1749.         <div id="project_title7" class="modal contentscroll fade white_bg" tabindex="-1" role="dialog" aria-labelledby="project_title7" aria-hidden="true">
  1750.             <div class="modal-body color_background">
  1751.                 <div class="container">
  1752.                     <div class="row">
  1753.                         <!-- Project navigation -->
  1754.                             <div class="clearfix col-lg-12">
  1755.                                 <div class="project_navigation">
  1756.                                 <div class="navigation_button"><a href="#project_title6" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-left"></i></a></div>
  1757.                                 <div class="navigation_button1"><a href="#" data-dismiss="modal"><i class="fa fa-times"></i></a></div>
  1758.                                 <div class="navigation_button"><a href="#project_title8" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-right"></i></a></div>
  1759.                               </div>
  1760.                             </div>
  1761.                             <!-- // Project navigation -->
  1762.                    
  1763.                         <div class="clearfix col-lg-12">
  1764.                             <div class="port-title clearfix">
  1765.                                 <h1>Shy on Sky</h1>
  1766.                                 <div class="tags">Portfolio with Slider</div>
  1767.                             </div>
  1768.                         </div>
  1769.                         <div class="clearfix col-md-12 pad_top30"> 
  1770.                             <div id="myCarousel1" class="carousel slide">
  1771.                                 <ol class="carousel-indicators">
  1772.                                     <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
  1773.                                     <li data-target="#myCarousel1" data-slide-to="1"></li>
  1774.                                     <li data-target="#myCarousel1" data-slide-to="2"></li>
  1775.                                 </ol>
  1776.                                 <div class="carousel-inner">
  1777.                                       <div class="item active"><img src="assets/img/gallery/24.jpg" class="img-responsive img_width" alt=""/></div>
  1778.                                     <div class="item"><img src="assets/img/gallery/25.jpg" class="img-responsive img_width" alt=""/></div>
  1779.                                     <div class="item"><img src="assets/img/gallery/23.jpg" class="img-responsive img_width" alt=""/></div>
  1780.                                 </div> 
  1781.                             </div>         
  1782.                         </div>
  1783.                     </div>
  1784.                
  1785.                     <div class="row  project_content_top">
  1786.                                 <div class="clearfix text-left">
  1787.                                     <div class="col-lg-4">
  1788.                                         <p>Lorem ipsum dolor sit amet, consectetur  elit. Cras vel turpis laoreet, auctor sapien sit amet, condimentum metus. Vivamus vehicula nisl id rutrum volutpat.</p>
  1789.                                         <div class="clearfix pad_top20">
  1790.                                             <a href="#" class="btn btn-3 btn-3e nav-link" target="_blank">Live Preview</a>                                   </div>
  1791.                                     </div>
  1792.                                     <div class="col-lg-4 mar_bot30  restop30">
  1793.                                         <p>Proin eleifend velit et lacus aliquet sodales. Ut condimentum lacus quis tellus scelerisque rutrum. Duis at auctor mi. Sed scelerisque mi dui, eget libero ornare eget.</p>
  1794.                                     </div>
  1795.                                     <div class="col-lg-4">
  1796.                                         <h5>Project Details</h5>
  1797.                                         <div class="clearfix pad_top13">
  1798.                                            
  1799.                                             <div class="pinfo clearfix">
  1800.                                                 <span class="input-box">Date </span>
  1801.                                                 <span class="pright">15th December 2013</span>
  1802.                                             </div>
  1803.                                             <div class="pinfo clearfix">
  1804.                                                 <span class="input-box">Categories </span>
  1805.                                                 <span class="pright">Brochures</span>
  1806.                                             </div>
  1807.                                             <div class="pinfo clearfix">
  1808.                                                 <span class="input-box">Client </span>
  1809.                                                 <span class="pright">John Doe</span>
  1810.                                             </div>
  1811.  
  1812.                                         </div>
  1813.                                     </div>
  1814.                                 </div>
  1815.                   </div>                   
  1816.                 </div>
  1817.             </div>
  1818.         </div>
  1819.         <!-- //Project Title7 modal -->
  1820.    
  1821.         <!-- Project Title8 modal
  1822. ========================================================================================================================================-->
  1823.     <div id="project_title8" class="modal contentscroll fade white_bg" tabindex="-1" role="dialog" aria-labelledby="project_title8" aria-hidden="true">
  1824.     <div class="modal-body color_background">
  1825.     <div class="container">
  1826.     <div class="row">
  1827.    
  1828.     <!-- Project navigation -->
  1829.                             <div class="clearfix col-lg-12">
  1830.                                 <div class="project_navigation">
  1831.                                 <div class="navigation_button"><a href="#project_title7" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-left"></i></a></div>
  1832.                                 <div class="navigation_button1"><a href="#" data-dismiss="modal"><i class="fa fa-times"></i></a></div>
  1833.                                 <div class="navigation_button"><a href="#project_title1" role="button" data-toggle="modal" data-dismiss="modal" aria-hidden="true"><i class="fa fa-angle-right"></i></a></div>
  1834.                               </div>
  1835.                             </div>
  1836.                             <!-- // Project navigation -->
  1837.    
  1838.     <div class="clearfix col-lg-12">
  1839.         <div class="port-title clearfix">
  1840.             <h1>I Believe I Can Fly</h1>
  1841.             <div class="tags">You tube Video</div>
  1842.         </div>
  1843.     </div>
  1844.    
  1845.    
  1846.     <div class="clearfix col-lg-12 pad_top30">
  1847.     <div class="video_containers">
  1848.         <iframe src="http://www.youtube.com/embed/iU8iA7jfrIg?html5=1" width="500" height="281" ></iframe>
  1849.     </div>
  1850. </div>
  1851.  
  1852. <div class="col-lg-12 marleft_10 clearfix text-left project_content_top">
  1853. <div class="row">
  1854. <div class="col-lg-8">
  1855. <div class="clearfix"><p>In interdum ante nisi, vel venenatis metus ullamcorper et. Duis malesuada sapien ac nunc congue bibendum. Nam quis risus vulputate risus faucibus ultrices. Nullam ultricies dui justo, quis imperdiet nunc fringilla non. Sed luctus mattis pellentesque. </p></div>
  1856. <div class="clearfix pad_top20">
  1857.                                 <a href="#" class="btn btn-3 btn-3e nav-link" target="_blank">Live Preview</a>
  1858.               </div>
  1859. </div>
  1860.  
  1861. <div class="col-lg-4  restop30">
  1862. <h5 class="martop0">Project Details</h5>
  1863. <div class="clearfix pad_top13">
  1864.  
  1865.     <div class="pinfo clearfix">
  1866.         <span class="input-box">Date </span>
  1867.         <span class="pright">15th December 2013</span>
  1868.     </div>
  1869.     <div class="pinfo clearfix">
  1870.         <span class="input-box">Categories </span>
  1871.         <span class="pright">Brochures</span>
  1872.     </div>
  1873.     <div class="pinfo clearfix">
  1874.         <span class="input-box">Client </span>
  1875.         <span class="pright">John Doe</span>
  1876.     </div>
  1877.  
  1878. </div>
  1879. </div>
  1880. </div>
  1881. </div>
  1882.     </div>
  1883.     </div>
  1884.     </div>
  1885.     </div>
  1886.     <!-- //Project Title8 modal -->
  1887.  
  1888. </div>
  1889. <!-- Portfolio CONTENT -->
  1890.  
  1891. <!-- Portfolio Modal
  1892. =============================-->
  1893.  
  1894.  
  1895. <!-- Pages
  1896. =============================-->
  1897.  
  1898.  
  1899. <!-- Full-Width
  1900. =============================-->    
  1901.  
  1902. <div id="fullwidth" class="item subpage fullwidth">
  1903.     <div class="content">
  1904.         <div class="content_overlay_fullwidth"></div>
  1905.     <div class="content_inner">
  1906.         <div class="row contentscroll">
  1907.             <div class="container">
  1908.             <div class="col-md-12 content_text">
  1909.                 <div class="clearfix" >
  1910.                     <h1>About Me</h1>
  1911.                     <div class="tags">A little about myself, and the UI & UX design services I provide.</div>
  1912.                <div class="row clearfix pad_top40">
  1913.                    <!--Left Section-->
  1914.                    <div class="about col-md-6">
  1915.                        <div class="subtitle">multi-disciplinary designer & wp theme developer.</div>
  1916.                         <p class="pad_top13">Lorem ipsum dolor shabit. Nulla et facisis interd um elit Suspen disse libero dia aliquam lum arcu pede nam, erat aenean.</p><br/>
  1917.                         <p>Suspendisse libero diam, dolorib aliquam con seced tetuer nec.</p>
  1918.                    </div>
  1919.                    <!--Left Section-->
  1920.                    
  1921.                    <!--Right Section-->
  1922.                    <div class="about col-md-6">
  1923.                        <div class="subtitle">Personal Info <i class="fa fa-user sub-shadow"></i></div>
  1924.                            <div class="clearfix pad_top13">
  1925.                                <!--Info 1-->
  1926.                                <div class="pinfo clearfix">
  1927.                                    <span class="input-box">Name </span>
  1928.                                    <span class="pright">Mathew Joyson</span>
  1929.                                </div>
  1930.                                <!-- // Info 1-->
  1931.                                
  1932.                                <!--Info 2-->
  1933.                                <div class="pinfo clearfix">
  1934.                                    <span class="input-box">DOB </span>
  1935.                                    <span class="pright"> 21-Jan-1980</span>
  1936.                                </div>
  1937.                                <!-- // Info 2-->
  1938.                                
  1939.                                <!--Info 3-->
  1940.                                <div class="pinfo clearfix">
  1941.                                    <span class="input-box">Address</span>
  1942.                                    <span class="pright"> Street name, habitasse pretium dolor</span>
  1943.                                </div>
  1944.                                <!-- // Info 3-->
  1945.                                
  1946.                                <!--Info 4-->
  1947.                                <div class="pinfo clearfix">
  1948.                                    <span class="input-box">Phone</span>
  1949.                                    <span class="pright">+123.456.7890</span>  
  1950.                                </div>
  1951.                                <!-- // Info 4-->
  1952.                                
  1953.                                <!--Info 5-->
  1954.                                <div class="pinfo clearfix">
  1955.                                    <span class="input-box">E-mail</span>
  1956.                                    <span class="pright"><a href="#">Email@domainame.com</a></span>
  1957.                                </div>
  1958.                                <!-- // Info 5-->
  1959.                            </div>
  1960.                    </div>
  1961.                     <!--Right Section-->
  1962.                 </div>     
  1963.                     <!--Buttons-->                                 
  1964.                    <div class="clearfix">
  1965.                        <a href="#contact" class="btn btn-3 btn-3e nav-link"><i class="fa fa-user"></i>Hire Me</a>
  1966.                         <a href="sample.pdf" class="btn btn-3 btn-3e link"><i class="fa fa-download down_icon"></i>Download Resume</a>                                      </div>
  1967.                    <!--Buttons-->
  1968.                </div>
  1969.            </div>
  1970.            </div>
  1971.        </div>
  1972.    </div>
  1973.    </div>
  1974. </div>
  1975.  
  1976. <!-- Full-Width
  1977. =============================-->
  1978.  
  1979.  
  1980. <!-- Three-Fourth
  1981. =============================-->    
  1982.  
  1983. <div id="threefourth" class="item subpage three_fourth">
  1984.    <div class="content">
  1985.         <div class="content_overlay_three_fourth"></div>
  1986.    <div class="content_inner">
  1987.        <div class="row contentscroll">
  1988.            <div class="container">
  1989.                <div class="col-md-3 empty">&nbsp;</div>
  1990.             <div class="col-md-9 content_text">
  1991.                 <div class="clearfix" >
  1992.                     <h1>About Me</h1>
  1993.                     <div class="tags">A little about myself, and the UI & UX design services I provide.</div>
  1994.                <div class="row clearfix pad_top40">
  1995.                    <!--Left Section-->
  1996.                    <div class="about col-md-6">
  1997.                        <div class="subtitle">multi-disciplinary designer & wp theme developer.</div>
  1998.                         <p class="pad_top13">Lorem ipsum dolor shabit. Nulla et facisis interd um elit Suspen disse libero dia aliquam lum arcu pede nam, erat aenean.</p><br/>
  1999.                         <p>Suspendisse libero diam, dolorib aliquam con seced tetuer nec.</p>
  2000.                    </div>
  2001.                    <!--Left Section-->
  2002.                    
  2003.                    <!--Right Section-->
  2004.                    <div class="about col-md-6">
  2005.                        <div class="subtitle">Personal Info <i class="fa fa-user sub-shadow"></i></div>
  2006.                            <div class="clearfix pad_top13">
  2007.                                <!--Info 1-->
  2008.                                <div class="pinfo clearfix">
  2009.                                    <span class="input-box">Name </span>
  2010.                                    <span class="pright">Mathew Joyson</span>
  2011.                                </div>
  2012.                                <!-- // Info 1-->
  2013.                                
  2014.                                <!--Info 2-->
  2015.                                <div class="pinfo clearfix">
  2016.                                    <span class="input-box">DOB </span>
  2017.                                    <span class="pright"> 21-Jan-1980</span>
  2018.                                </div>
  2019.                                <!-- // Info 2-->
  2020.                                
  2021.                                <!--Info 3-->
  2022.                                <div class="pinfo clearfix">
  2023.                                    <span class="input-box">Address</span>
  2024.                                    <span class="pright"> Street name, habitasse pretium dolor</span>
  2025.                                </div>
  2026.                                <!-- // Info 3-->
  2027.                                
  2028.                                <!--Info 4-->
  2029.                                <div class="pinfo clearfix">
  2030.                                    <span class="input-box">Phone</span>
  2031.                                    <span class="pright">+123.456.7890</span>  
  2032.                                </div>
  2033.                                <!-- // Info 4-->
  2034.                                
  2035.                                <!--Info 5-->
  2036.                                <div class="pinfo clearfix">
  2037.                                    <span class="input-box">E-mail</span>
  2038.                                    <span class="pright"><a href="#">Email@domainame.com</a></span>
  2039.                                </div>
  2040.                                <!-- // Info 5-->
  2041.                            </div>
  2042.                    </div>
  2043.                     <!--Right Section-->
  2044.                 </div>     
  2045.                     <!--Buttons-->                                 
  2046.                    <div class="clearfix">
  2047.                        <a href="#contact" class="btn btn-3 btn-3e nav-link"><i class="fa fa-user"></i>Hire Me</a>
  2048.                         <a href="sample.pdf" class="btn btn-3 btn-3e link"><i class="fa fa-download down_icon"></i>Download Resume</a>                                      </div>
  2049.                    <!--Buttons-->
  2050.                </div>
  2051.            </div>
  2052.            </div>
  2053.        </div>
  2054.    </div>
  2055.    </div>
  2056. </div>
  2057.  
  2058. <!-- Three-Fourth
  2059. =============================-->
  2060.  
  2061. <!-- Default
  2062. =============================-->    
  2063.  
  2064. <div id="default" class="item subpage">
  2065.    <div class="content">
  2066.         <div class="content_overlay"></div>
  2067.    <div class="content_inner">
  2068.        <div class="row contentscroll">
  2069.            <div class="container">
  2070.                <div class="col-md-6 empty">&nbsp;</div>
  2071.             <div class="col-md-6 content_text">
  2072.                 <div class="clearfix" >
  2073.                     <h1>About Me</h1>
  2074.                     <div class="tags">A little about myself, and the UI & UX design services I provide.</div>
  2075.                <div class="row clearfix pad_top40">
  2076.                    <!--Left Section-->
  2077.                    <div class="about col-md-6">
  2078.                        <div class="subtitle">multi-disciplinary designer & wp theme developer.</div>
  2079.                         <p class="pad_top13">Lorem ipsum dolor shabit. Nulla et facisis interd um elit Suspen disse libero dia aliquam lum arcu pede nam, erat aenean.</p><br/>
  2080.                         <p>Suspendisse libero diam, dolorib aliquam con seced tetuer nec.</p>
  2081.                    </div>
  2082.                    <!--Left Section-->
  2083.                    
  2084.                    <!--Right Section-->
  2085.                    <div class="about col-md-6">
  2086.                        <div class="subtitle">Personal Info <i class="fa fa-user sub-shadow"></i></div>
  2087.                            <div class="clearfix pad_top13">
  2088.                                <!--Info 1-->
  2089.                                <div class="pinfo clearfix">
  2090.                                    <span class="input-box">Name </span>
  2091.                                    <span class="pright">Mathew Joyson</span>
  2092.                                </div>
  2093.                                <!-- // Info 1-->
  2094.                                
  2095.                                <!--Info 2-->
  2096.                                <div class="pinfo clearfix">
  2097.                                    <span class="input-box">DOB </span>
  2098.                                    <span class="pright"> 21-Jan-1980</span>
  2099.                                </div>
  2100.                                <!-- // Info 2-->
  2101.                                
  2102.                                <!--Info 3-->
  2103.                                <div class="pinfo clearfix">
  2104.                                    <span class="input-box">Address</span>
  2105.                                    <span class="pright"> Street name, habitasse pretium dolor</span>
  2106.                                </div>
  2107.                                <!-- // Info 3-->
  2108.                                
  2109.                                <!--Info 4-->
  2110.                                <div class="pinfo clearfix">
  2111.                                    <span class="input-box">Phone</span>
  2112.                                    <span class="pright">+123.456.7890</span>  
  2113.                                </div>
  2114.                                <!-- // Info 4-->
  2115.                                
  2116.                                <!--Info 5-->
  2117.                                <div class="pinfo clearfix">
  2118.                                    <span class="input-box">E-mail</span>
  2119.                                    <span class="pright"><a href="#">Email@domainame.com</a></span>
  2120.                                </div>
  2121.                                <!-- // Info 5-->
  2122.                            </div>
  2123.                    </div>
  2124.                     <!--Right Section-->
  2125.                 </div>     
  2126.                     <!--Buttons-->                                 
  2127.                    <div class="clearfix">
  2128.                        <a href="#contact" class="btn btn-3 btn-3e nav-link"><i class="fa fa-user"></i>Hire Me</a>
  2129.                         <a href="sample.pdf" class="btn btn-3 btn-3e link"><i class="fa fa-download down_icon"></i>Download Resume</a>                                      </div>
  2130.                    <!--Buttons-->
  2131.                </div>
  2132.            </div>
  2133.            </div>
  2134.        </div>
  2135.    </div>
  2136.    </div>
  2137. </div>
  2138.  
  2139. <!-- Default
  2140. =============================-->
  2141.  
  2142.  
  2143. <!-- Services
  2144. =============================-->  
  2145.  
  2146. <div id="services" class="item subpage">
  2147.    <div class="content">
  2148.        <div class="content_overlay"></div>
  2149.    <div class="content_inner">
  2150.        <div class="row contentscroll">
  2151.            <div class="container">
  2152.                <div class="col-md-6 empty">&nbsp;</div>
  2153.             <div class="col-md-6 content_text">
  2154.                 <div class="clearfix" >
  2155.                     <h1>Services</h1>
  2156.                     <div class="tags"> We design pleasant Graphical User Interface (GUI) designs that enable you to maximize profits through increased customer satisfaction.    </div>
  2157.                 <div class="clearfix pad_top40">
  2158.                     <div class="row pad_top20">
  2159.                         <div class="clearfix">
  2160.                             <!--Services 1-->
  2161.                             <div class="clearfix service col-md-6">
  2162.                                 <span aria-hidden="true" data-icon="&#xe037;" class="service-shadow"></span>
  2163.                                 <div class="service-circle"><span aria-hidden="true" data-icon="&#xe037;"></span></div>
  2164.                                 <div class="service-content">
  2165.                                     <div class="subtitle">Web Design</div>
  2166.                                     <p>Lorem ipsum dolor sit amt conse at gravid augue elit rutrum sed.</p>                                
  2167.                                 </div>
  2168.                             </div>
  2169.                             <!-- // Services 1-->
  2170.                            
  2171.                             <!--Services 2-->
  2172.                             <div class="clearfix service col-md-6">
  2173.                                 <span aria-hidden="true" data-icon="&#xe034;" class="service-shadow"></span>
  2174.                                 <div class="service-circle"><span aria-hidden="true" data-icon="&#xe034;"></span></div>
  2175.                                 <div class="service-content">
  2176.                                      <div class="subtitle">CMS Integration</div>
  2177.                                     <p>Atutv ariuset vel sociis at gravid augue elit rutrum at gravid augue elit.</p>                      
  2178.                                 </div>
  2179.                             </div>
  2180.                             <!-- // Services 2-->
  2181.                         </div>
  2182.                        
  2183.                         <div class="clearfix">
  2184.                             <!--Services 3-->
  2185.                             <div class="clearfix service col-md-6">
  2186.                                 <span aria-hidden="true" data-icon="&#xe010;" class="service-shadow"></span>
  2187.                                 <div class="service-circle"><span aria-hidden="true" data-icon="&#xe010;"></span></div>
  2188.                                 <div class="service-content">
  2189.                                     <div class="subtitle">Responsive Design</div>
  2190.                                     <p>Vel sociis at gravid augue dolor sit amet conse elit sit rutrum tempo.</p>              
  2191.                                 </div>
  2192.                             </div>
  2193.                             <!-- // Services 3-->
  2194.                            
  2195.                             <!--Services 4-->
  2196.                             <div class="clearfix service col-md-6">
  2197.                                 <span aria-hidden="true" data-icon="&#xe021;" class="service-shadow"></span>
  2198.                                 <div class="service-circle"><span aria-hidden="true" data-icon="&#xe021;"></span></div>
  2199.                                 <div class="service-content">
  2200.                                     <div class="subtitle">Corporate Design</div>
  2201.                                     <p>Lorem ipsum dolor sit at amet gravid elit rutrumco sociis nse ctetur sed.</p>           
  2202.                                 </div>
  2203.                             </div>
  2204.                             <!--Services 4-->
  2205.                         </div>
  2206.                     </div>
  2207.                 </div>
  2208.                 </div>
  2209.             </div>
  2210.             </div>
  2211.         </div>
  2212.     </div>
  2213.     </div>
  2214. </div>
  2215.  
  2216. <!-- // Services
  2217. =============================-->
  2218.  
  2219.  
  2220.  
  2221. <!-- Testimonials
  2222. =============================-->
  2223.              
  2224. <div id="testimonials" class="item">
  2225.     <div class="content">
  2226.         <div class="content_overlay"></div>
  2227.     <div class="content_inner">
  2228.         <div class="row contentscroll">
  2229.             <div class="container">
  2230.                 <div class="col-md-6 empty">&nbsp;</div>
  2231.             <div class="col-md-6 content_text">
  2232.                 <div class="clearfix" >
  2233.                     <h1>Testimonials</h1>
  2234.                     <div class="tags">We Love our Clients, What our clients say about me.</div>
  2235.                    
  2236.                 <!--Testimonials 1-->
  2237.                 <div class="pad_top40">
  2238.                     <div class="pad_top20 testimonials">
  2239.                         <div class="arrow_box">
  2240.                             <i class="fa fa-pencil test-shadow"></i>
  2241.                             <div class="quote">
  2242.                                 <i class="fa fa-quote-left"></i>
  2243.                             </div>
  2244.                             <div class="clearfix">
  2245.                                 <p class="test-content">Mathew designed our website & business cards. very talented person to work with! Very <span class="bold">professional and prompt, highly recommended </span>for all kinds of design work.</p>
  2246.                            </div>
  2247.                            <div class="author-foot">
  2248.                                <p class="t1author">David Jacob, <span>Founder</span></p>
  2249.                                 <a href="#" class="dlink"> Design Inc </a>                 
  2250.                            </div>
  2251.                        </div>
  2252.                     </div> 
  2253.                 </div>     
  2254.                <!-- // Testimonials 1-->
  2255.                
  2256.                <!--Testimonials 2-->
  2257.                <div class="pad_top30">
  2258.                    <div class="pad_top20 testimonials">
  2259.                        <div class="arrow_box">
  2260.                             <i class="fa fa-pencil test-shadow"></i>
  2261.                            <div class="quote">
  2262.                                 <i class="fa fa-quote-left"></i>
  2263.                            </div>
  2264.                            <div class="clearfix">
  2265.                                 <p class="test-content">Awesome to work with.  <span class="bold"> Easy to communicate with</span>, who are not only <span class="bold">flexible, efficient and professional</span> but a group of people who really care about delivering results for you.</p>
  2266.                            </div>
  2267.                            <div class="author-foot">
  2268.                                <p class="t1author">Sharon, <span>CEO</span></p>
  2269.                                 <a href="#" class="dlink">Company Name inc</a>                             
  2270.                            </div>
  2271.                        </div>
  2272.                     </div> 
  2273.                 </div> 
  2274.                 <!-- // Testimonials 2-->  
  2275.                
  2276.                <!--Testimonials 3-->
  2277.                <div class="pad_top30">
  2278.                    <div class="pad_top20 testimonials">
  2279.                        <div class="arrow_box">
  2280.                             <i class="fa fa-pencil test-shadow"></i>
  2281.                            <div class="quote">
  2282.                                 <i class="fa fa-quote-left"></i>
  2283.                            </div>
  2284.                            <div class="clearfix">
  2285.                                <p class="test-content">Thank you all for the <span class="bold">huge amount of time and effort</span> that you’ve put into the creativity, design, development of our site.</p>
  2286.                            </div>
  2287.                            <div class="author-foot">
  2288.                                <p class="t1author">Andrew Smith, <span>Strategic Coordinator</span></p>
  2289.                                <a href="#" class="dlink"> Company Name inc</a>
  2290.                             </div> 
  2291.                        </div>
  2292.                     </div> 
  2293.                 </div> 
  2294.                 <!-- // Testimonials 3-->                      
  2295.                </div>
  2296.            </div>
  2297.            </div>
  2298.        </div>
  2299.    </div>
  2300.    </div>
  2301. </div>
  2302.    
  2303. <!-- // Testimonials ends
  2304. =============================-->
  2305.  
  2306.  
  2307.  
  2308. <!-- Clients
  2309. =============================-->
  2310.  
  2311. <div id="clients" class="item subpage">
  2312.    <div class="content">
  2313.        <div class="content_overlay"></div>
  2314.    <div class="content_inner">
  2315.        <div class="row contentscroll">
  2316.            <div class="container">
  2317.                <div class="col-md-6 empty">&nbsp;</div>
  2318.             <div class="col-md-6 content_text">
  2319.                 <div class="clearfix" >
  2320.                     <h1>Clients</h1>
  2321.                     <div class="tags"> Some awesome companies i've had the pleasure to work with.</div>
  2322.                 <div class="clearfix">
  2323.                     <div class="pad_top40">
  2324.                         <div class="pad_top20 clearfix">
  2325.                             <ul class="clearfix cbp-ig-grid">
  2326.                                 <!--Clients 1-->
  2327.                                 <li class="element_from_bottom">
  2328.                                     <a href="#"><img src="assets/img/client_img16.png" alt=""  class="img-responsive"/></a>
  2329.                                 </li>
  2330.                                 <!-- // Clients 1-->
  2331.                                
  2332.                                 <!--Clients 2-->
  2333.                                 <li class="element_from_bottom">
  2334.                                     <a href="#"><img src="assets/img/client_img17.png" alt=""  class="img-responsive"/></a>
  2335.                                 </li>
  2336.                                 <!-- // Clients 2-->
  2337.                                
  2338.                                 <!--Clients 3-->
  2339.                                 <li class="element_from_bottom">
  2340.                                     <a href="#"><img src="assets/img/client_img18.png" alt=""  class="img-responsive"/></a>
  2341.                                 </li>
  2342.                                 <!-- // Clients 3-->
  2343.                                
  2344.                                 <!--Clients 4-->
  2345.                                 <li class="element_from_bottom">
  2346.                                     <a href="#"><img  src="assets/img/client_img19.png" alt=""  class="img-responsive"/></a>
  2347.                                 </li>
  2348.                                 <!-- // Clients 4-->
  2349.                                
  2350.                                 <!--Clients 5-->
  2351.                                 <li class="element_from_bottom">
  2352.                                     <a href="#"><img src="assets/img/client_img20.png" alt=""  class="img-responsive"/></a>
  2353.                                 </li>
  2354.                                 <!-- // Clients 5-->
  2355.                                
  2356.                                 <!--Clients 6-->
  2357.                                 <li class="element_from_bottom">
  2358.                                     <a href="#"><img src="assets/img/client_img21.png" alt=""  class="img-responsive"/></a>
  2359.                                 </li>
  2360.                                 <!-- // Clients 6-->
  2361.                             </ul>
  2362.                         </div>
  2363.                     </div>
  2364.                 </div>
  2365.                 </div>
  2366.             </div>
  2367.             </div>
  2368.         </div>
  2369.     </div>
  2370.     </div>
  2371. </div>
  2372.  
  2373. <!-- // Clients
  2374. =============================-->
  2375.  
  2376.  
  2377. <!-- Team
  2378. =============================-->
  2379.  
  2380. <div id="team" class="item subpage">
  2381.     <div class="content">
  2382.         <div class="content_overlay"></div>
  2383.     <div class="content_inner">
  2384.         <div class="row contentscroll">
  2385.             <div class="container">
  2386.                 <div class="col-md-6 empty">&nbsp;</div>
  2387.             <div class="col-md-6 content_text">
  2388.                 <div class="clearfix" >
  2389.                     <h1>Our Team</h1>
  2390.                     <div class="tags"> Some awesome companies i've had the pleasure to work with.</div>
  2391.                 <div class="clearfix">
  2392.                     <div class="pad_top40">
  2393.                         <div class="pad_top20 clearfix">
  2394.                             <div class="row">
  2395.                                 <!--Team 1-->
  2396.                                 <div class="clearfix team">
  2397.                                     <div class="col-md-3">
  2398.                                         <div class="team-img">
  2399.                                             <img src="assets/img/1.jpg" width="330" height="330" class="img-responsive" alt="">
  2400.                                         <div class="person-overlay">
  2401.                                             <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
  2402.                                             <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
  2403.                                             <a href="https://instagram.com/accounts/login/" target="_blank"><i class="fa fa-instagram"></i></a>                                                                         </div>
  2404.                                         </div>
  2405.                                     </div>
  2406.                                     <div class="team-space col-md-9">
  2407.                                         <div class="team-box">
  2408.                                             <i class="fa fa-users team-shadow"></i>
  2409.                                             <div class="team-title">Andrew Olivia</div>
  2410.                                         <div class="content-smalltxt">Designer</div>
  2411.                                             <p>I am a GUI designer, specializing in user experience for web-based applications and websites with <span class="bold">11 years of experience </span>. voluptate velit esse cillum dolore eu fugiat.</p>
  2412.                                         </div>
  2413.                                     </div>
  2414.                                 </div>
  2415.                                 <!-- // Team 1-->
  2416.                                
  2417.                                 <!--Team 2-->                                
  2418.                                 <div class="clearfix team">
  2419.                                     <div class="col-md-3">
  2420.                                         <div class="team-img">
  2421.                                             <img src="assets/img/2.jpg" width="330" height="330" class="img-responsive" alt="">
  2422.                                         <div class="person-overlay">
  2423.                                             <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
  2424.                                             <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
  2425.                                             <a href="https://instagram.com/accounts/login/" target="_blank"><i class="fa fa-instagram"></i></a>                                                             </div>
  2426.                                         </div>
  2427.                                     </div>
  2428.                                     <div class="team-space col-md-9">
  2429.                                         <div class="team-box">
  2430.                                             <i class="fa fa-users team-shadow"></i>
  2431.                                             <div class="team-title">William Wegman</div>
  2432.                                         <div class="content-smalltxt">Developer</div>
  2433.                                             <p>Our passion for dynamic, <span class="bold">gorgeous design and the little details</span> come through with every click of mouse.</p>
  2434.                                         </div>
  2435.                                     </div>
  2436.                                 </div>
  2437.                                 <!-- // Team 2-->
  2438.                                
  2439.                                 <!--Team 3-->
  2440.                                 <div class="clearfix team">
  2441.                                     <div class="col-md-3">
  2442.                                         <div class="team-img">
  2443.                                             <img src="assets/img/3.jpg" width="330" height="330" class="img-responsive" alt="">
  2444.                                         <div class="person-overlay">
  2445.                                             <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
  2446.                                             <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
  2447.                                             <a href="https://instagram.com/accounts/login/" target="_blank"><i class="fa fa-instagram"></i></a>                                                             </div>
  2448.                                         </div>
  2449.                                     </div>
  2450.                                     <div class="team-space col-md-9">
  2451.                                         <div class="team-box">
  2452.                                             <i class="fa fa-users team-shadow"></i>
  2453.                                             <div class="team-title">Charles Tyler</div>
  2454.                                         <div class="content-smalltxt">Manager</div>
  2455.                                         <p>Duis aute irure dolor in reprehenderit in <span class="bold">WWW Awarded WP Developer </span>esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
  2456.                                         </div>
  2457.                                     </div>
  2458.                                 </div>
  2459.                                 <!-- // Team 3-->
  2460.                                
  2461.                                 <!--Team 4-->
  2462.                                 <div class="clearfix team">
  2463.                                     <div class="col-md-3">
  2464.                                         <div class="team-img">
  2465.                                             <img src="assets/img/4.jpg" width="330" height="330" class="img-responsive" alt="">
  2466.                                         <div class="person-overlay">
  2467.                                             <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
  2468.                                             <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
  2469.                                             <a href="https://instagram.com/accounts/login/" target="_blank"><i class="fa fa-instagram"></i></a>                                                             </div>
  2470.                                         </div>
  2471.                                     </div>
  2472.                                     <div class="team-space col-md-9">
  2473.                                         <div class="team-box">
  2474.                                             <i class="fa fa-users team-shadow"></i>
  2475.                                             <div class="team-title">Benjamin Fillier</div>
  2476.                                         <div class="content-smalltxt">Designer</div>
  2477.                                         <p>Duis aute irure dolor in <span class="bold">reprehenderit in voluptate velit</span> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
  2478.                                         </div>
  2479.                                     </div>
  2480.                                 </div>
  2481.                                 <!-- // Team 4-->
  2482.                            
  2483.                             </div>
  2484.                         </div>
  2485.                     </div>
  2486.                 </div>
  2487.                 </div>
  2488.             </div>
  2489.             </div>
  2490.         </div>
  2491.     </div>
  2492.     </div>
  2493. </div>
  2494.  
  2495. <!-- // Team
  2496. =============================-->
  2497.  
  2498.  
  2499.  
  2500. <!--Contact
  2501. =============================-->
  2502.  
  2503. <div id="contact" class="item">
  2504.     <div class="content">
  2505.         <div id="map_canvas" class="fullBg"></div>
  2506.     <div class="content_overlay"></div>
  2507.         <div class="content_inner">
  2508.             <div class="row contentscroll">
  2509.                 <div class="container">
  2510.                     <div class="col-md-6 empty">&nbsp;</div>
  2511.                 <div class="col-md-6 content_text">
  2512.                     <h1>Contact Us</h1>
  2513.                     <div class="tags">For general questions you can call or mail me. If you’re considering hiring me, click button below.<span class="bold"> Thank you! </span></div>
  2514.                 <div class="clearfix pad_top40">
  2515.                
  2516.                 <h2 class="pad_top20 clearfix address">
  2517.                     <span class="left"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;</span>
  2518.                     <span class="left"> #12 Fifth main street,<br/> NY 10307, USA</span>                   
  2519.                 </h2>
  2520.                
  2521.                 <div class="phone"><i class="fa fa-phone"></i>&nbsp;&nbsp;+ 1 123 456 7890</div>
  2522.                
  2523.                 <a href="mailto:info@mathewjoyson.com" class="mail-text">
  2524.                     <i class="fa fa-envelope"></i>info@mathewjoyson.com
  2525.                 </a>
  2526.                
  2527.                 <div class="clearfix">
  2528.                     <div class="header_icons accura-header-block accura-hidden-2xs social_top">
  2529.                         <ul class="accura-social-icons accura-stacked accura-jump accura-full-height accura-bordered accura-small accura-colored-bg clearFix">
  2530.                         <!--Social Icon 1-->
  2531.                         <li>
  2532.                             <a href="http://www.facebook.com/" target="_blank" class="accura-social-icon-facebook circle">
  2533.                                 <i class="fa fa-facebook"></i>
  2534.                             </a>
  2535.                         </li>
  2536.                         <!-- // Social Icon 1-->
  2537.                        
  2538.                         <!--Social Icon 2-->
  2539.                         <li>
  2540.                             <a href="http://www.twitter.com/" target="_blank" class="accura-social-icon-twitter circle">
  2541.                                 <i class="fa fa-twitter"></i>
  2542.                             </a>
  2543.                         </li>
  2544.                         <!-- // Social Icon 2-->
  2545.                        
  2546.                         <!--Social Icon 3-->
  2547.                         <li>
  2548.                             <a href="http://www.googleplus.com/" target="_blank" class="accura-social-icon-gplus circle">
  2549.                                 <i class="fa fa-google-plus"></i>
  2550.                             </a>
  2551.                         </li>
  2552.                         <!-- // Social Icon 3-->
  2553.                        
  2554.                         <!--Social Icon4-->
  2555.                         <li>
  2556.                             <a href="https://instagram.com/accounts/login/" target="_blank" class="accura-social-icon-instagram circle">
  2557.                                 <i class="fa fa-instagram"></i>
  2558.                             </a>
  2559.                         </li>
  2560.                         <!-- // Social Icon 4-->
  2561.                        
  2562.                         <!--Social Icon 5-->
  2563.                         <li>
  2564.                             <a href="https://www.linkedin.com/uas/login" target="_blank" class="accura-social-icon-linkedin circle">
  2565.                                 <i class="fa fa-linkedin"></i>
  2566.                             </a>
  2567.                         </li>
  2568.                         <!-- // Social Icon 5-->
  2569.                         </ul>
  2570.                     </div>
  2571.                 </div>
  2572.                 <!--Button-->
  2573.                 <div class="pad_top30">
  2574.                     <a class="btn btn-3 btn-3e nav-link" href="#contactform">Request a Quote</a>
  2575.                 </div>
  2576.                 <!-- // Button-->
  2577.                 </div>
  2578.                 </div>
  2579.                 </div>
  2580.             </div>
  2581.         </div>
  2582.     </div>
  2583. </div>
  2584.        
  2585. <!-- // Contact
  2586. =============================-->
  2587.  
  2588.  
  2589. <!-- Contact Form
  2590. =============================-->
  2591.  
  2592. <div id="contactform" class="item">
  2593.     <div class="content">
  2594.         <div class="content_overlay"></div>
  2595.     <div class="content_inner" >
  2596.         <div class="row contentscroll">
  2597.             <div class="container col-md-12">
  2598.                 <div class="col-md-6 empty">&nbsp;</div>
  2599.             <div class="col-md-6 content_text">
  2600.                 <div id="contactforms">
  2601.                     <h1>Request A Quote</h1>
  2602.                     <div class="tags">If you’re considering hiring me or would like a free project price quote, please fill the form below Thank you!
  2603. </div>
  2604.                 <!--Form Starts-->
  2605.                 <form id="contact_form" class="cont_form pad_top13" action="#" method="post">
  2606.                    
  2607.                 <div class="clearfix cont_form pad_top30">
  2608.                
  2609.                     <div class="subtitle">Enter Your Contact Details</div>
  2610.                     <!--Input 1-->
  2611.                     <input type="text" name="name" class="validate['required'] textbox1" placeholder="* Name : "
  2612.                    onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Name :'" />
  2613.                     <!--Input 1-->
  2614.                    
  2615.                     <!--Input 2-->
  2616.                     <input type="text" name="email"  class="validate['required','email']  textbox1"
  2617.                    placeholder="* Email : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Email :'" />
  2618.                     <!-- // Input 2-->
  2619.                    
  2620.                     <!--Input 3-->
  2621.                     <input type="text" name="phone" class="validate['required','phone']  textbox1"
  2622.                    placeholder="* Phone : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Phone :'" />
  2623.                     <!-- // Input 3-->
  2624.                    
  2625.                     <!--Input 4-->
  2626.                     <textarea name="message" class="validate['required'] messagebox1"
  2627.                    placeholder="* Message : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Message :'"></textarea>
  2628.                     <!-- // Input 4-->
  2629.                    
  2630.                     <!--Button-->
  2631.                     <button id="contactsubmitBtn" type="submit" class="btn btn-3 btn-3e">Submit</button>
  2632.                     <!-- // Button-->
  2633.                 </div>
  2634.                 </form>
  2635.                 <!--Form Ends-->
  2636.                 </div>
  2637.             </div>
  2638.             </div>
  2639.         </div>
  2640.     </div>
  2641.     </div>
  2642. </div>
  2643.  
  2644. <!-- // Contact Form
  2645. =============================-->
  2646.  
  2647.  
  2648. <!-- Footer
  2649. =============================-->
  2650.  
  2651. <div id="footer" class="footer">
  2652.     <div class="copyright">Copyrights &copy; <span>Mathew Joyson</span> 2015.</div>
  2653. </div>
  2654.  
  2655. <!-- // Footer Ends
  2656. =============================-->
  2657.  
  2658.  
  2659.  
  2660. <!--Special Menu
  2661. =============================-->
  2662.  
  2663. <div id="specialmenu" class="toHideTheBubbles hidden-phone">
  2664.     <div class="spcontainer">
  2665.     <!--Spmenu 1-->
  2666.     <div id="spmenu1">
  2667.         <a href="#contactform" class="spmenu spmenu1 nav-link">
  2668.         <span><i class="fa fa-envelope-o"></i></span>
  2669.         <span class="sptext"><span>available'</span>freelance</span>
  2670.         </a>
  2671.     </div>
  2672.     <!-- // Spmenu 1-->
  2673.    
  2674.     <!--Spmenu 2-->
  2675.     <div id="spmenu2">   <button class="spmenu spmenu2"  onclick="modalshow('#video1')"  data-toggle="modal" data-target="#lightbox2">
  2676.             <span><i class="fa fa-desktop"></i></span>
  2677.             <span class="sptext">Videos</span>
  2678.         </button>
  2679.     </div>
  2680.     <!-- // Spmenu 2-->
  2681.    
  2682.     <!--Spmenu 3-->
  2683.     <div id="spmenu3">
  2684.         <a href="sample.pdf" class="spmenu spmenu3 link">
  2685.             <span><i class="fa fa-download down_icon"></i></span>
  2686.             <span class="sptext"><span>Resume</span>Download</span>
  2687.         </a>
  2688.     </div>
  2689.     <!-- // Spmenu 3-->
  2690.     </div>
  2691. </div>
  2692.  
  2693. <!-- // Special Menu
  2694. =============================-->
  2695.  
  2696.  
  2697. <div id="video1" >
  2698.     <div id="lightbox2" class="lightbox2 modal fade in" tabindex="-1" role="dialog" aria-labelledby="video1" aria-hidden="true">
  2699.         <div class="modal-dialog">
  2700.             <div class="modal-content">
  2701.                 <button type="button" class="close" data-dismiss="modal" ><img src="assets/img/close.png" alt=" "></button>
  2702.                 <div class="modal-body">
  2703.                 <div class="video_containers">
  2704.                    <iframe src="http://player.vimeo.com/video/85330977?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff" width="500" height="281" ></iframe>
  2705.                 </div>
  2706.             </div>
  2707.         </div>
  2708.     </div>
  2709.     </div>
  2710. </div>
  2711.  
  2712. </div>
  2713. </div>
  2714. <!-- // Wrapper =============================-->
  2715.  
  2716.  
  2717.  
  2718. <!--java script-->
  2719.  
  2720. <!-- Preloader Starts -->
  2721. <script type="text/javascript" src="assets/js/jpreloader.min.js"></script>
  2722. <!-- Preloader Starts -->
  2723.  
  2724. <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
  2725. <script type="text/javascript" src="assets/js/jquery.scrollTo.min.js"></script>
  2726. <script type="text/javascript" src="assets/js/jquery.validate.min.js"></script>
  2727. <script type="text/javascript" src="assets/js/jquery.fitvids.js"></script>
  2728. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  2729. <script type="text/javascript" src="assets/js/appear.js"></script>
  2730.  
  2731.  
  2732. <!-- Slick Navigation -->
  2733. <script type="text/javascript" src="assets/js/jquery.slicknav.min.js"></script>
  2734. <!-- Slick Navigation -->
  2735.  
  2736. <!-- Nice Scroll-->
  2737. <script type="text/javascript" src="assets/js/jquery.nicescroll.min.js"></script>
  2738. <script type="text/javascript" src="assets/js/jquery.mousewheel.min.js"></script>
  2739. <script type="text/javascript" src="assets/js/jquery.easing.1.3.js"></script>
  2740.  
  2741. <!-- include retina js -->
  2742. <script type="text/javascript" src="assets/js/retina-1.1.0.min.js"></script>
  2743. <!-- include retina js -->
  2744.  
  2745. <!-- Typing Slider Starts-->
  2746. <script type="text/javascript" src='assets/js/typed.js'></script>
  2747. <!-- Typing Slider Ends-->
  2748.  
  2749. <!-- Cycle Slider Sldier -->
  2750. <script type="text/javascript" src="assets/js/jquery.cycle.all.js"></script>
  2751. <script type="text/javascript" src="assets/js/jquery.cycle2.caption2.js"></script>
  2752. <!-- Cycle Slider Sldier Ends-->
  2753.  
  2754. <!--SuperSized Gallery-->
  2755. <script type="text/javascript" src="assets/js/supersized.3.2.7.min.js"></script>
  2756. <script type="text/javascript" src="assets/js/supersized.shutter.min.js"></script>
  2757. <!--SuperSized Gallery End-->
  2758.  
  2759. <!-- Filter Gallery And PrettyPhoto-->
  2760. <script type="text/javascript" src="assets/js/jquery.prettyPhoto.js"></script>
  2761. <script type="text/javascript" src="assets/js/jquery.mixitup.min.js"></script>
  2762. <!-- Filter Gallery And PrettyPhoto End-->
  2763.  
  2764. <!-- Skills Progress Bar Starts-->
  2765. <script src="assets/js/jquery.easypiechart.min.js"></script>
  2766. <!-- Skills Progress Bar Ends-->
  2767.  
  2768. <!-- Fit Text Starts-->
  2769. <script type="text/javascript" src="assets/js/jquery.fittext.js"></script>
  2770. <script type="text/javascript">
  2771.     $("#home_title").fitText(1.1, { minFontSize: '24px', maxFontSize: '65px' });
  2772.     $(".home_title_type").fitText(1.1, { minFontSize: '24px', maxFontSize: '65px' });
  2773.    
  2774. </script>
  2775. <!-- Fit Text Ends-->
  2776.  
  2777. <!-- Place Holder Scripts Starts-->
  2778. <script type="text/javascript" src="assets/js/jquery.placeholder.min.js"></script>
  2779. <!-- Place Holder Scripts Ends-->
  2780.  
  2781. <!-- Custom Scripts Starts-->
  2782. <script type="text/javascript" src="assets/js/custom-general.js"></script>
  2783. <script type="text/javascript" src="assets/js/google-map-custom.js"></script>
  2784. <script type="text/javascript" src="assets/js/typed-custom.js"></script>
  2785. <!-- Custom Scripts Ends-->
  2786.    
  2787.  
  2788. <!--IE9 Hack Code For Gradient Color-->
  2789.  
  2790. <!--[if gte IE 9]>
  2791.  <style type="text/css">
  2792.    .pattern_bg {
  2793.       filter: none;
  2794.    }
  2795.  </style>
  2796. <![endif]-->
  2797.  
  2798. </body>
  2799.  
  2800.  
  2801. <!-- Mirrored from www.edigitaldreams.com/vcard-jan31-3/site/single-page/home-typewriter.htm by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 02 Feb 2016 12:50:03 GMT -->
  2802. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!