API tools faq
paste
Advertisement
salmancreation

themeforest index style porto theme code

salmancreation
Jun 19th, 2015
389
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 35.11 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if IE 8]>          <html class="ie ie8"> <![endif]-->
  3. <!--[if IE 9]>          <html class="ie ie9"> <![endif]-->
  4. <!--[if gt IE 9]><!-->  <html> <!--<![endif]-->
  5.     <head>
  6.  
  7.         <!-- Basic -->
  8.         <meta charset="utf-8">
  9.         <title>Porto - Responsive HTML5 Template</title>
  10.         <meta name="keywords" content="HTML5 Template" />
  11.         <meta name="description" content="Porto - Responsive HTML5 Template">
  12.         <meta name="author" content="Crivos.com">
  13.  
  14.         <!-- Mobile Metas -->
  15.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16.  
  17.         <!-- Web Fonts  -->
  18.         <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
  19.  
  20.         <!-- Libs CSS -->
  21.         <link rel="stylesheet" href="css/bootstrap.css">
  22.         <link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.css">
  23.         <link rel="stylesheet" href="vendor/flexslider/flexslider.css" media="screen" />
  24.         <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen" />
  25.  
  26.         <!-- Theme CSS -->
  27.         <link rel="stylesheet" href="css/theme.css">
  28.         <link rel="stylesheet" href="css/theme-elements.css">
  29.         <link rel="stylesheet" href="css/theme-animate.css">
  30.  
  31.         <!-- Current Page Styles -->
  32.         <link rel="stylesheet" href="vendor/revolution-slider/css/settings.css" media="screen" />
  33.         <link rel="stylesheet" href="vendor/revolution-slider/css/captions.css" media="screen" />
  34.         <link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen" />
  35.  
  36.         <!-- Custom CSS -->
  37.         <link rel="stylesheet" href="css/custom.css">
  38.  
  39.         <!-- Skin CSS -->
  40.         <link rel="stylesheet" href="css/skins/blue.css">
  41.  
  42.         <!-- Responsive CSS -->
  43.         <link rel="stylesheet" href="css/bootstrap-responsive.css" />
  44.         <link rel="stylesheet" href="css/theme-responsive.css" />
  45.  
  46.         <!-- Favicons -->
  47.         <link rel="shortcut icon" href="img/favicon.ico">
  48.         <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
  49.         <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
  50.         <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
  51.         <link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144.png">
  52.  
  53.         <!-- Head Libs -->
  54.         <script src="vendor/modernizr.js"></script>
  55.  
  56.         <!--[if IE]>
  57.             <link rel="stylesheet" href="css/ie.css">
  58.         <![endif]-->
  59.  
  60.         <!--[if lte IE 8]>
  61.             <script src="vendor/respond.js"></script>
  62.         <![endif]-->
  63.  
  64.         <!-- Facebook OpenGraph Tags - Go to http://developers.facebook.com/ for more information.
  65.         <meta property="og:title" content="Porto Website Template."/>
  66.         <meta property="og:type" content="website"/>
  67.         <meta property="og:url" content="http://www.crivos.com/themes/porto"/>
  68.         <meta property="og:image" content="http://www.crivos.com/themes/porto/"/>
  69.         <meta property="og:site_name" content="Porto"/>
  70.         <meta property="fb:app_id" content=""/>
  71.         <meta property="og:description" content="Porto - Responsive HTML5 Template"/>
  72.         -->
  73.  
  74.     </head>
  75.     <body class="one-page" data-target=".single-menu" data-spy="scroll" data-offset="150">
  76.  
  77.         <div class="body">
  78.             <header class="single-menu flat-menu">
  79.                 <div class="container">
  80.                     <h1 class="logo">
  81.                         <a href="index.html">
  82.                             <img alt="Porto" src="img/logo.png">
  83.                         </a>
  84.                     </h1>
  85.                     <div class="social-icons">
  86.                         <ul class="social-icons">
  87.                             <li class="facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook">Facebook</a></li>
  88.                             <li class="twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter">Twitter</a></li>
  89.                             <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin">Linkedin</a></li>
  90.                         </ul>
  91.                     </div>
  92.                     <nav>
  93.                         <ul class="nav nav-pills nav-main" id="mainMenu">
  94.                             <li class="dropdown active">
  95.                                 <a data-hash class="dropdown-toggle" href="#home">
  96.                                     Home
  97.                                     <i class="icon-angle-down"></i>
  98.                                 </a>
  99.                                 <ul class="dropdown-menu">
  100.                                     <li><a href="index.html">Default Home</a></li>
  101.                                     <li><a href="index-one-page.html">One Page Website</a></li>
  102.                                 </ul>
  103.                             </li>
  104.                             <li>
  105.                                 <a data-hash href="#projects">Latest Projects</a>
  106.                             </li>
  107.                             <li>
  108.                                 <a data-hash href="#features">Features</a>
  109.                             </li>
  110.                             <li>
  111.                                 <a data-hash href="#team">Meet the Team</a>
  112.                             </li>
  113.                             <li>
  114.                                 <a data-hash href="#contact">Contact Us</a>
  115.                             </li>
  116.                         </ul>
  117.                     </nav>
  118.                 </div>
  119.             </header>
  120.  
  121.             <div role="main" class="main" id="home">
  122.                 <div id="content" class="content full">
  123.  
  124.                     <div class="slider-container slider-container-fullscreen hidden-phone">
  125.                         <div class="slider" id="revolutionSliderFullScreen">
  126.                             <ul>
  127.                                 <li data-transition="fade" data-slotamount="10" data-masterspeed="300">
  128.                                     <img src="img/slides/slide-bg-full.jpg" data-fullwidthcentering="on" alt="">
  129.  
  130.                                         <div class="caption sft stb visible-desktop"
  131.                                              data-x="417"
  132.                                              data-y="100"
  133.                                              data-speed="300"
  134.                                              data-start="1000"
  135.                                              data-easing="easeOutExpo"><img src="img/slides/slide-title-border.png" alt=""></div>
  136.  
  137.                                         <div class="caption top-label lfl stl"
  138.                                              data-x="467"
  139.                                              data-y="100"
  140.                                              data-speed="300"
  141.                                              data-start="500"
  142.                                              data-easing="easeOutExpo">DO YOU NEED A NEW</div>
  143.  
  144.                                         <div class="caption sft stb visible-desktop"
  145.                                              data-x="717"
  146.                                              data-y="100"
  147.                                              data-speed="300"
  148.                                              data-start="1000"
  149.                                              data-easing="easeOutExpo"><img src="img/slides/slide-title-border.png" alt=""></div>
  150.  
  151.                                         <div class="caption main-label sft stb"
  152.                                              data-x="375"
  153.                                              data-y="150"
  154.                                              data-speed="300"
  155.                                              data-start="1500"
  156.                                              data-easing="easeOutExpo">WEB DESIGN?</div>
  157.  
  158.                                         <div class="caption bottom-label sft stb"
  159.                                              data-x="425"
  160.                                              data-y="200"
  161.                                              data-speed="500"
  162.                                              data-start="2000"
  163.                                              data-easing="easeOutExpo">Check out our options and features.</div>
  164.  
  165.                                         <div class="caption sft stb center-caption"
  166.                                              data-x="0"
  167.                                              data-y="250"
  168.                                              data-speed="300"
  169.                                              data-start="2500"
  170.                                              data-easing="easeOutExpo"><a data-hash href="#projects" class="btn btn-large btn-primary main-button">Get Started Now!</a></div>
  171.  
  172.  
  173.                                 </li>
  174.                             </ul>
  175.                         </div>
  176.                     </div>
  177.                     <section class="highlight top">
  178.                         <div class="container">
  179.                             <div class="row" id="projects">
  180.                                 <div class="span12">
  181.                                     <h1>Latest <strong>Projects</strong></h1>
  182.  
  183.                                     <div id="popupProject" class="popup-inline-content">
  184.                                         <h2>Lorem Ipsum Dolor</h2>
  185.  
  186.                                         <div class="row">
  187.                                             <div class="span6">
  188.  
  189.                                                 <img class="thumbnail" alt="" src="img/projects/project.jpg">
  190.  
  191.                                             </div>
  192.  
  193.                                             <div class="span6">
  194.  
  195.                                                 <h4>Project <strong>Description</strong></h4>
  196.                                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus nibh sed elit mattis adipiscing. Fusce in hendrerit purus. Suspendisse potenti. Proin quis eros odio, dapibus dictum mauris. Donec nisi libero, adipiscing id pretium eget, consectetur sit amet leo. Nam at eros quis mi egestas fringilla non nec purus.</p>
  197.  
  198.                                                 <a href="#" class="btn btn-primary">Live Preview</a> <span class="arrow hlb hidden-phone"></span>
  199.  
  200.                                                 <h4 class="pull-top">Services</h4>
  201.  
  202.                                                 <ul class="list icons unstyled">
  203.                                                     <li><i class="icon-ok"></i> Design</li>
  204.                                                     <li><i class="icon-ok"></i> HTML/CSS</li>
  205.                                                     <li><i class="icon-ok"></i> Javascript</li>
  206.                                                     <li><i class="icon-ok"></i> Backend</li>
  207.                                                 </ul>
  208.  
  209.                                             </div>
  210.                                         </div>
  211.                                     </div>
  212.  
  213.                                     <div class="row">
  214.                                         <div class="flexslider flexslider-top-title flexslider-center-mobile unstyled" data-plugin-options='{"controlNav":false, "slideshow": false, "animationLoop": true, "animation":"slide", "maxVisibleItems": 4}'>
  215.                                             <ul class="slides">
  216.                                                 <li class="websites">
  217.                                                     <div class="span3">
  218.                                                         <div class="portfolio-item thumbnail">
  219.                                                             <a class="thumb-info lightbox" href="#popupProject" data-plugin-options='{"type":"inline", preloader: false}'>
  220.                                                                 <img alt="" src="img/projects/project.jpg">
  221.                                                                 <span class="thumb-info-title">
  222.                                                                     <span class="thumb-info-inner">SEO</span>
  223.                                                                     <span class="thumb-info-type">Website</span>
  224.                                                                 </span>
  225.                                                                 <span class="thumb-info-action">
  226.                                                                     <span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
  227.                                                                 </span>
  228.                                                             </a>
  229.                                                         </div>
  230.                                                     </div>
  231.                                                 </li>
  232.                                                 <li class="brands">
  233.                                                     <div class="span3">
  234.                                                         <div class="portfolio-item thumbnail">
  235.                                                             <a class="thumb-info lightbox" href="#popupProject" data-plugin-options='{"type":"inline", preloader: false}'>
  236.                                                                 <img alt="" src="img/projects/project-1.jpg">
  237.                                                                 <span class="thumb-info-title">
  238.                                                                     <span class="thumb-info-inner">Red Wine</span>
  239.                                                                     <span class="thumb-info-type">Brand</span>
  240.                                                                 </span>
  241.                                                                 <span class="thumb-info-action">
  242.                                                                     <span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
  243.                                                                 </span>
  244.                                                             </a>
  245.                                                         </div>
  246.                                                     </div>
  247.                                                 </li>
  248.                                                 <li class="logos">
  249.                                                     <div class="span3">
  250.                                                         <div class="portfolio-item thumbnail">
  251.                                                             <a class="thumb-info lightbox" href="#popupProject" data-plugin-options='{"type":"inline", preloader: false}'>
  252.                                                                 <img alt="" src="img/projects/project-2.jpg">
  253.                                                                 <span class="thumb-info-title">
  254.                                                                     <span class="thumb-info-inner">Man Running</span>
  255.                                                                     <span class="thumb-info-type">Logo</span>
  256.                                                                 </span>
  257.                                                                 <span class="thumb-info-action">
  258.                                                                     <span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
  259.                                                                 </span>
  260.                                                             </a>
  261.                                                         </div>
  262.                                                     </div>
  263.                                                 </li>
  264.                                                 <li class="websites">
  265.                                                     <div class="span3">
  266.                                                         <div class="portfolio-item thumbnail">
  267.                                                             <a class="thumb-info lightbox" href="#popupProject" data-plugin-options='{"type":"inline", preloader: false}'>
  268.                                                                 <img alt="" src="img/projects/project-3.jpg">
  269.                                                                 <span class="thumb-info-title">
  270.                                                                     <span class="thumb-info-inner">The Code</span>
  271.                                                                     <span class="thumb-info-type">Website</span>
  272.                                                                 </span>
  273.                                                                 <span class="thumb-info-action">
  274.                                                                     <span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
  275.                                                                 </span>
  276.                                                             </a>
  277.                                                         </div>
  278.                                                     </div>
  279.                                                 </li>
  280.                                                 <li class="websites">
  281.                                                     <div class="span3">
  282.                                                         <div class="portfolio-item thumbnail">
  283.                                                             <a class="thumb-info lightbox" href="#popupProject" data-plugin-options='{"type":"inline", preloader: false}'>
  284.                                                                 <img alt="" src="img/projects/project.jpg">
  285.                                                                 <span class="thumb-info-title">
  286.                                                                     <span class="thumb-info-inner">SEO</span>
  287.                                                                     <span class="thumb-info-type">Website</span>
  288.                                                                 </span>
  289.                                                                 <span class="thumb-info-action">
  290.                                                                     <span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
  291.                                                                 </span>
  292.                                                             </a>
  293.                                                         </div>
  294.                                                     </div>
  295.                                                 </li>
  296.                                                 <li class="brands">
  297.                                                     <div class="span3">
  298.                                                         <div class="portfolio-item thumbnail">
  299.                                                             <a class="thumb-info lightbox" href="#popupProject" data-plugin-options='{"type":"inline", preloader: false}'>
  300.                                                                 <img alt="" src="img/projects/project-1.jpg">
  301.                                                                 <span class="thumb-info-title">
  302.                                                                     <span class="thumb-info-inner">Red Wine</span>
  303.                                                                     <span class="thumb-info-type">Brand</span>
  304.                                                                 </span>
  305.                                                                 <span class="thumb-info-action">
  306.                                                                     <span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
  307.                                                                 </span>
  308.                                                             </a>
  309.                                                         </div>
  310.                                                     </div>
  311.                                                 </li>
  312.                                                 <li class="logos">
  313.                                                     <div class="span3">
  314.                                                         <div class="portfolio-item thumbnail">
  315.                                                             <a class="thumb-info lightbox" href="#popupProject" data-plugin-options='{"type":"inline", preloader: false}'>
  316.                                                                 <img alt="" src="img/projects/project-2.jpg">
  317.                                                                 <span class="thumb-info-title">
  318.                                                                     <span class="thumb-info-inner">Man Running</span>
  319.                                                                     <span class="thumb-info-type">Logo</span>
  320.                                                                 </span>
  321.                                                                 <span class="thumb-info-action">
  322.                                                                     <span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
  323.                                                                 </span>
  324.                                                             </a>
  325.                                                         </div>
  326.                                                     </div>
  327.                                                 </li>
  328.                                                 <li class="websites">
  329.                                                     <div class="span3">
  330.                                                         <div class="portfolio-item thumbnail">
  331.                                                             <a class="thumb-info lightbox" href="#popupProject" data-plugin-options='{"type":"inline", preloader: false}'>
  332.                                                                 <img alt="" src="img/projects/project-3.jpg">
  333.                                                                 <span class="thumb-info-title">
  334.                                                                     <span class="thumb-info-inner">The Code</span>
  335.                                                                     <span class="thumb-info-type">Website</span>
  336.                                                                 </span>
  337.                                                                 <span class="thumb-info-action">
  338.                                                                     <span title="Universal" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
  339.                                                                 </span>
  340.                                                             </a>
  341.                                                         </div>
  342.                                                     </div>
  343.                                                 </li>
  344.                                             </ul>
  345.                                         </div>
  346.                                     </div>
  347.                                 </div>
  348.                             </div>
  349.                         </div>
  350.                     </section>
  351.  
  352.                     <div class="container">
  353.  
  354.                         <div class="row center">
  355.                             <div class="span12">
  356.                                 <h2 class="short">Porto is <strong class="inverted" data-appear-animation="bounceIn">incredibly</strong> beautiful and fully responsive.</h2>
  357.                                 <p class="featured lead">
  358.                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum, nulla vel pellentesque consequat, ante nulla hendrerit arcu, ac tincidunt mauris lacus sed leo. vamus suscipit molestie vestibulum.
  359.                                 </p>
  360.                             </div>
  361.                         </div>
  362.  
  363.                         <hr class="tall" />
  364.                     </div>
  365.  
  366.                     <div class="container">
  367.                         <div class="row" id="features">
  368.                             <div class="span8">
  369.                                 <h2 data-appear-animation="fadeInLeft">Our <strong>Features</strong></h2>
  370.                                 <div class="row">
  371.                                     <div class="span4">
  372.                                         <div class="feature-box">
  373.                                             <div class="feature-box-icon">
  374.                                                 <i class="icon-group"></i>
  375.                                             </div>
  376.                                             <div class="feature-box-info">
  377.                                                 <h4 class="shorter">Customer Support</h4>
  378.                                                 <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
  379.                                             </div>
  380.                                         </div>
  381.                                         <div class="feature-box">
  382.                                             <div class="feature-box-icon">
  383.                                                 <i class="icon-file"></i>
  384.                                             </div>
  385.                                             <div class="feature-box-info">
  386.                                                 <h4 class="shorter">HTML5 / CSS3 / JS</h4>
  387.                                                 <p class="tall">Lorem ipsum dolor sit amet, adip.</p>
  388.                                             </div>
  389.                                         </div>
  390.                                         <div class="feature-box">
  391.                                             <div class="feature-box-icon">
  392.                                                 <i class="icon-google-plus"></i>
  393.                                             </div>
  394.                                             <div class="feature-box-info">
  395.                                                 <h4 class="shorter">500+ Google Fonts</h4>
  396.                                                 <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
  397.                                             </div>
  398.                                         </div>
  399.                                         <div class="feature-box">
  400.                                             <div class="feature-box-icon">
  401.                                                 <i class="icon-adjust"></i>
  402.                                             </div>
  403.                                             <div class="feature-box-info">
  404.                                                 <h4 class="shorter">Colors</h4>
  405.                                                 <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
  406.                                             </div>
  407.                                         </div>
  408.                                     </div>
  409.                                     <div class="span4">
  410.                                         <div class="feature-box">
  411.                                             <div class="feature-box-icon">
  412.                                                 <i class="icon-film"></i>
  413.                                             </div>
  414.                                             <div class="feature-box-info">
  415.                                                 <h4 class="shorter">Sliders</h4>
  416.                                                 <p class="tall">Lorem ipsum dolor sit amet, consectetur.</p>
  417.                                             </div>
  418.                                         </div>
  419.                                         <div class="feature-box">
  420.                                             <div class="feature-box-icon">
  421.                                                 <i class="image-icon small user"></i>
  422.                                             </div>
  423.                                             <div class="feature-box-info">
  424.                                                 <h4 class="shorter">Icons</h4>
  425.                                                 <p class="tall">Lorem ipsum dolor sit amet, consectetur adip.</p>
  426.                                             </div>
  427.                                         </div>
  428.                                         <div class="feature-box">
  429.                                             <div class="feature-box-icon">
  430.                                                 <i class="icon-reorder"></i>
  431.                                             </div>
  432.                                             <div class="feature-box-info">
  433.                                                 <h4 class="shorter">Buttons</h4>
  434.                                                 <p class="tall">Lorem ipsum dolor sit, consectetur adip.</p>
  435.                                             </div>
  436.                                         </div>
  437.                                         <div class="feature-box">
  438.                                             <div class="feature-box-icon">
  439.                                                 <i class="icon-desktop"></i>
  440.                                             </div>
  441.                                             <div class="feature-box-info">
  442.                                                 <h4 class="shorter">Lightbox</h4>
  443.                                                 <p class="tall">Lorem sit amet, consectetur adip.</p>
  444.                                             </div>
  445.                                         </div>
  446.                                     </div>
  447.                                 </div>
  448.                             </div>
  449.                             <div class="span4">
  450.                                 <h2 data-appear-animation="fadeInRight">and more...</h2>
  451.                                 <div class="accordion" id="accordion">
  452.                                     <div class="accordion-group">
  453.                                         <div class="accordion-heading">
  454.                                             <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><i class="icon-lightbulb"></i> Group Item #1</a>
  455.                                         </div>
  456.                                         <div id="collapseOne" class="accordion-body collapse in">
  457.                                             <div class="accordion-inner">
  458.                                                 Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor odio vulputate eleifend in in tortorodio vulputate eleifend in in tortor.
  459.                                             </div>
  460.                                         </div>
  461.                                     </div>
  462.                                     <div class="accordion-group">
  463.                                         <div class="accordion-heading">
  464.                                             <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><i class="icon-bell-alt"></i> Group Item #2</a>
  465.                                         </div>
  466.                                         <div id="collapseTwo" class="accordion-body collapse">
  467.                                             <div class="accordion-inner">
  468.                                                 Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
  469.                                             </div>
  470.                                         </div>
  471.                                     </div>
  472.                                     <div class="accordion-group">
  473.                                         <div class="accordion-heading">
  474.                                             <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><i class="icon-laptop"></i> Group Item #3</a>
  475.                                         </div>
  476.                                         <div id="collapseThree" class="accordion-body collapse">
  477.                                             <div class="accordion-inner">
  478.                                                 Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
  479.                                             </div>
  480.                                         </div>
  481.                                     </div>
  482.                                 </div>
  483.                             </div>
  484.                         </div>
  485.  
  486.                     </div>
  487.  
  488.                     <section class="parallax" data-stellar-background-ratio="0.5" style="background-image: url(img/parallax.jpg);">
  489.                         <div class="container">
  490.                             <div class="row center">
  491.                                 <div class="span12">
  492.                                     <i class="icon icon-featured icon-comments" data-appear-animation="bounceIn"></i>
  493.                                     <h1 class="short text-shadow big white bold"><strong>We're excited about Porto Template</strong></h1>
  494.                                     <h3 class="lead white">5,500 customers in 100 countries use Porto Template. Meet our customers.</h3>
  495.                                 </div>
  496.                             </div>
  497.                         </div>
  498.                     </section>
  499.  
  500.                     <div class="container">
  501.                         <div class="row" id="team">
  502.                             <div class="span12">
  503.                                 <h2 data-appear-animation="fadeInLeft">Meet the <strong>Team</strong></h2>
  504.  
  505.                                 <div class="row">
  506.  
  507.                                     <ul class="team-list">
  508.                                         <li class="span3">
  509.                                             <div class="team-item thumbnail">
  510.                                                 <a href="#" class="thumb-info team">
  511.                                                     <img alt="" src="img/team/team-1.jpg">
  512.                                                     <span class="thumb-info-title">
  513.                                                         <span class="thumb-info-inner">John Doe</span>
  514.                                                         <span class="thumb-info-type">CEO</span>
  515.                                                     </span>
  516.                                                 </a>
  517.                                                 <span class="thumb-info-caption">
  518.                                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</p>
  519.                                                     <span class="thumb-info-social-icons">
  520.                                                         <a rel="tooltip" data-placement="bottom" target="_blank" href="http://www.facebook.com" data-original-title="Facebook"><i class="icon-facebook"></i><span>Facebook</span></a>
  521.                                                         <a rel="tooltip" data-placement="bottom" href="http://www.twitter.com" data-original-title="Twitter"><i class="icon-twitter"></i><span>Twitter</span></a>
  522.                                                         <a rel="tooltip" data-placement="bottom" href="http://www.linkedin.com" data-original-title="Linkedin"><i class="icon-linkedin"></i><span>Linkedin</span></a>
  523.                                                     </span>
  524.                                                 </span>
  525.                                             </div>
  526.                                         </li>
  527.                                         <li class="span3">
  528.                                             <div class="team-item thumbnail">
  529.                                                 <a href="#" class="thumb-info team">
  530.                                                     <img alt="" src="img/team/team-2.jpg">
  531.                                                     <span class="thumb-info-title">
  532.                                                         <span class="thumb-info-inner">Jessica Doe</span>
  533.                                                         <span class="thumb-info-type">Marketing</span>
  534.                                                     </span>
  535.                                                 </a>
  536.                                                 <span class="thumb-info-caption">
  537.                                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</p>
  538.                                                     <span class="thumb-info-social-icons">
  539.                                                         <a rel="tooltip" data-placement="bottom" target="_blank" href="http://www.facebook.com" data-original-title="Facebook"><i class="icon-facebook"></i><span>Facebook</span></a>
  540.                                                         <a rel="tooltip" data-placement="bottom" href="http://www.twitter.com" data-original-title="Twitter"><i class="icon-twitter"></i><span>Twitter</span></a>
  541.                                                         <a rel="tooltip" data-placement="bottom" href="http://www.linkedin.com" data-original-title="Linkedin"><i class="icon-linkedin"></i><span>Linkedin</span></a>
  542.                                                     </span>
  543.                                                 </span>
  544.                                             </div>
  545.                                         </li>
  546.                                         <li class="span3">
  547.                                             <div class="team-item thumbnail">
  548.                                                 <a href="#" class="thumb-info team">
  549.                                                     <img alt="" src="img/team/team-3.jpg">
  550.                                                     <span class="thumb-info-title">
  551.                                                         <span class="thumb-info-inner">Rick Edward Doe</span>
  552.                                                         <span class="thumb-info-type">Developer</span>
  553.                                                     </span>
  554.                                                 </a>
  555.                                                 <span class="thumb-info-caption">
  556.                                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</p>
  557.                                                     <span class="thumb-info-social-icons">
  558.                                                         <a rel="tooltip" data-placement="bottom" target="_blank" href="http://www.facebook.com" data-original-title="Facebook"><i class="icon-facebook"></i><span>Facebook</span></a>
  559.                                                         <a rel="tooltip" data-placement="bottom" href="http://www.twitter.com" data-original-title="Twitter"><i class="icon-twitter"></i><span>Twitter</span></a>
  560.                                                         <a rel="tooltip" data-placement="bottom" href="http://www.linkedin.com" data-original-title="Linkedin"><i class="icon-linkedin"></i><span>Linkedin</span></a>
  561.                                                     </span>
  562.                                                 </span>
  563.                                             </div>
  564.                                         </li>
  565.                                         <li class="span3">
  566.                                             <div class="team-item thumbnail">
  567.                                                 <a href="#" class="thumb-info team">
  568.                                                     <img alt="" src="img/team/team-4.jpg">
  569.                                                     <span class="thumb-info-title">
  570.                                                         <span class="thumb-info-inner">Melinda Wolosky</span>
  571.                                                         <span class="thumb-info-type">Design</span>
  572.                                                     </span>
  573.                                                 </a>
  574.                                                 <span class="thumb-info-caption">
  575.                                                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.</p>
  576.                                                     <span class="thumb-info-social-icons">
  577.                                                         <a rel="tooltip" data-placement="bottom" target="_blank" href="http://www.facebook.com" data-original-title="Facebook"><i class="icon-facebook"></i><span>Facebook</span></a>
  578.                                                         <a rel="tooltip" data-placement="bottom" href="http://www.twitter.com" data-original-title="Twitter"><i class="icon-twitter"></i><span>Twitter</span></a>
  579.                                                         <a rel="tooltip" data-placement="bottom" href="http://www.linkedin.com" data-original-title="Linkedin"><i class="icon-linkedin"></i><span>Linkedin</span></a>
  580.                                                     </span>
  581.                                                 </span>
  582.                                             </div>
  583.                                         </li>
  584.                                     </ul>
  585.  
  586.                                 </div>
  587.                             </div>
  588.                         </div>
  589.                     </div>
  590.  
  591.                     <section class="parallax" data-stellar-background-ratio="0.5" style="background-image: url(img/parallax-transparent.jpg);">
  592.                         <div class="container">
  593.                             <div class="row center">
  594.                                 <div class="span12">
  595.                                     <i class="icon icon-featured icon-envelope" data-appear-animation="bounceIn"></i>
  596.                                     <h1 class="short text-shadow big bold" data-appear-animation="fadeInUp"><strong>Get in Touch With Us</strong></h1>
  597.                                 </div>
  598.                             </div>
  599.                         </div>
  600.                     </section>
  601.  
  602.                     <!-- Google Maps -->
  603.                     <div id="googlemaps" class="google-map hidden-phone pull-top"></div>
  604.  
  605.                     <div class="container">
  606.  
  607.                         <div class="row" id="contact">
  608.                             <div class="span6">
  609.  
  610.                                 <div class="alert alert-success hidden" id="contactSuccess">
  611.                                     <strong>Success!</strong> Your message has been sent to us.
  612.                                 </div>
  613.  
  614.                                 <div class="alert alert-error hidden" id="contactError">
  615.                                     <strong>Error!</strong> There was an error sending your message.
  616.                                 </div>
  617.  
  618.                                 <h2 class="short" data-appear-animation="fadeInLeft"><strong>Contact</strong> Us</h2>
  619.                                 <form action="" id="contactForm" type="post">
  620.                                     <div class="row controls">
  621.                                         <div class="span3 control-group">
  622.                                             <label>Your name *</label>
  623.                                             <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="span3" name="name" id="name">
  624.                                         </div>
  625.                                         <div class="span3 control-group">
  626.                                             <label>Your email address *</label>
  627.                                             <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="span3" name="email" id="email">
  628.                                         </div>
  629.                                     </div>
  630.                                     <div class="row controls">
  631.                                         <div class="span6 control-group">
  632.                                             <label>Subject</label>
  633.                                             <input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="span6" name="subject" id="subject">
  634.                                         </div>
  635.                                     </div>
  636.                                     <div class="row controls">
  637.                                         <div class="span6 control-group">
  638.                                             <label>Message *</label>
  639.                                             <textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="span6" name="message" id="message"></textarea>
  640.                                         </div>
  641.                                     </div>
  642.                                     <div class="btn-toolbar">
  643.                                         <input type="submit" value="Send Message" class="btn btn-primary btn-large" data-loading-text="Loading...">
  644.                                     </div>
  645.                                 </form>
  646.                             </div>
  647.                             <div class="span6">
  648.  
  649.                                 <h4 class="pull-top">Get in <strong>touch</strong></h4>
  650.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus.</p>
  651.  
  652.                                 <hr />
  653.  
  654.                                 <h4>The <strong>Office</strong></h4>
  655.                                 <ul class="unstyled">
  656.                                     <li><i class="icon-map-marker"></i> <strong>Address:</strong> 1234 Street Name, City Name, United States</li>
  657.                                     <li><i class="icon-phone"></i> <strong>Phone:</strong> (123) 456-7890</li>
  658.                                     <li><i class="icon-envelope"></i> <strong>Email:</strong> <a href="mailto:mail@example.com">mail@example.com</a></li>
  659.                                 </ul>
  660.  
  661.                                 <hr />
  662.  
  663.                                 <h4>Business <strong>Hours</strong></h4>
  664.                                 <ul class="unstyled">
  665.                                     <li><i class="icon-time"></i> Monday - Friday 9am to 5pm</li>
  666.                                     <li><i class="icon-time"></i> Saturday - 9am to 2pm</li>
  667.                                     <li><i class="icon-time"></i> Sunday - Closed</li>
  668.                                 </ul>
  669.  
  670.                             </div>
  671.  
  672.                         </div>
  673.  
  674.                     </div>
  675.  
  676.                 </div>
  677.             </div>
  678.  
  679.             <footer class="short" id="footer">
  680.                 <div class="container">
  681.                     <div class="row">
  682.                         <div class="span8">
  683.                             <h4>About Porto</h4>
  684.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu pulvinar magna. Phasellus semper scelerisque purus, et semper nisl lacinia sit amet. Praesent venenatis turpis vitae purus semper, eget sagittis velit venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos...</p>
  685.                             <hr class="light">
  686.                         </div>
  687.                         <div class="span3 offset1">
  688.                             <h5 class="short">Contact Us</h5>
  689.                             <span class="phone">(800) 123-4567</span>
  690.                             <p class="short">International: (333) 456-6670</p>
  691.                             <p class="short">Fax: (222) 531-8999</p>
  692.                             <ul class="list icons unstyled">
  693.                                 <li><i class="icon-envelope"></i> <a href="mailto:crivos@crivos.com">crivos@crivos.com</a></li>
  694.                             </ul>
  695.                             <div class="social-icons">
  696.                                 <ul class="social-icons">
  697.                                     <li class="facebook"><a href="http://www.facebook.com/" target="_blank" data-placement="bottom" rel="tooltip" title="Facebook">Facebook</a></li>
  698.                                     <li class="twitter"><a href="http://www.twitter.com/" target="_blank" data-placement="bottom" rel="tooltip" title="Twitter">Twitter</a></li>
  699.                                     <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank" data-placement="bottom" rel="tooltip" title="Linkedin">Linkedin</a></li>
  700.                                 </ul>
  701.                             </div>
  702.                         </div>
  703.                     </div>
  704.                 </div>
  705.                 <div class="footer-copyright">
  706.                     <div class="container">
  707.                         <div class="row">
  708.                             <div class="span1">
  709.                                 <a href="index.html" class="logo">
  710.                                     <img alt="Porto Website Template" src="img/logo-footer.png">
  711.                                 </a>
  712.                             </div>
  713.                             <div class="span11">
  714.                                 <p>© Copyright 2013 by Crivos. All Rights Reserved.</p>
  715.                             </div>
  716.                         </div>
  717.                     </div>
  718.                 </div>
  719.             </footer>
  720.         </div>
  721.  
  722.         <!-- Libs -->
  723.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  724.         <script>window.jQuery || document.write('<script src="vendor/jquery.js"><\/script>')</script>
  725.         <script src="vendor/jquery.easing.js"></script>
  726.         <script src="vendor/jquery.appear.js"></script>
  727.         <script src="vendor/jquery.cookie.js"></script>
  728.         <!-- <script src="master/style-switcher/style.switcher.js"></script> Style Switcher -->
  729.         <script src="vendor/bootstrap.js"></script>
  730.         <script src="vendor/selectnav.js"></script>
  731.         <script src="vendor/twitterjs/twitter.js"></script>
  732.         <script src="vendor/revolution-slider/js/jquery.themepunch.plugins.js"></script>
  733.         <script src="vendor/revolution-slider/js/jquery.themepunch.revolution.js"></script>
  734.         <script src="vendor/flexslider/jquery.flexslider.js"></script>
  735.         <script src="vendor/circle-flip-slideshow/js/jquery.flipshow.js"></script>
  736.         <script src="vendor/magnific-popup/magnific-popup.js"></script>
  737.         <script src="vendor/jquery.stellar.js"></script>
  738.         <script src="vendor/jquery.validate.js"></script>
  739.  
  740.         <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  741.         <script src="vendor/jquery.gmap.js"></script>
  742.  
  743.         <script>
  744.  
  745.             /*
  746.             Map Settings
  747.  
  748.                 Find the Latitude and Longitude of your address:
  749.                     - http://universimmedia.pagesperso-orange.fr/geo/loc.htm
  750.                     - http://www.findlatitudeandlongitude.com/find-address-from-latitude-and-longitude/
  751.  
  752.             */
  753.  
  754.             // Map Markers
  755.             var mapMarkers = [{
  756.                 address: "217 Summit Boulevard, Birmingham, AL 35243",
  757.                 html: "<strong>Alabama Office</strong><br>217 Summit Boulevard, Birmingham, AL 35243<br><br><a href='#' onclick='mapCenterAt({latitude: 33.44792, longitude: -86.72963, zoom: 16}, event)'>[+] zoom here</a>",
  758.                 icon: {
  759.                     image: "img/pin.png",
  760.                     iconsize: [26, 46],
  761.                     iconanchor: [12, 46]
  762.                 }
  763.             },{
  764.                 address: "645 E. Shaw Avenue, Fresno, CA 93710",
  765.                 html: "<strong>California Office</strong><br>645 E. Shaw Avenue, Fresno, CA 93710<br><br><a href='#' onclick='mapCenterAt({latitude: 36.80948, longitude: -119.77598, zoom: 16}, event)'>[+] zoom here</a>",
  766.                 icon: {
  767.                     image: "img/pin.png",
  768.                     iconsize: [26, 46],
  769.                     iconanchor: [12, 46]
  770.                 }
  771.             },{
  772.                 address: "New York, NY 10017",
  773.                 html: "<strong>New York Office</strong><br>New York, NY 10017<br><br><a href='#' onclick='mapCenterAt({latitude: 40.75198, longitude: -73.96978, zoom: 16}, event)'>[+] zoom here</a>",
  774.                 icon: {
  775.                     image: "img/pin.png",
  776.                     iconsize: [26, 46],
  777.                     iconanchor: [12, 46]
  778.                 }
  779.             }];
  780.  
  781.             // Map Initial Location
  782.             var initLatitude = 37.09024;
  783.             var initLongitude = -95.71289;
  784.  
  785.             // Map Extended Settings
  786.             var mapSettings = {
  787.                 controls: {
  788.                     panControl: true,
  789.                     zoomControl: true,
  790.                     mapTypeControl: true,
  791.                     scaleControl: true,
  792.                     streetViewControl: true,
  793.                     overviewMapControl: true
  794.                 },
  795.                 scrollwheel: false,
  796.                 markers: mapMarkers,
  797.                 latitude: initLatitude,
  798.                 longitude: initLongitude,
  799.                 zoom: 5
  800.             };
  801.  
  802.             var map = $("#googlemaps").gMap(mapSettings);
  803.  
  804.             // Map Center At
  805.             var mapCenterAt = function(options, e) {
  806.                 e.preventDefault();
  807.                 $("#googlemaps").gMap("centerAt", options);
  808.             }
  809.  
  810.         </script>
  811.  
  812.         <script src="js/plugins.js"></script>
  813.  
  814.         <!-- Current Page Scripts -->
  815.         <script src="js/views/view.home.js"></script>
  816.         <script src="js/views/view.contact.js"></script>
  817.  
  818.         <!-- Theme Initializer -->
  819.         <script src="js/theme.js"></script>
  820.  
  821.         <!-- Custom JS -->
  822.         <script src="js/custom.js"></script>
  823.  
  824.         <!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. -->
  825.         <!--
  826.         <script>
  827.             var _gaq = _gaq || [];
  828.             _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  829.             _gaq.push(['_trackPageview']);
  830.  
  831.             (function() {
  832.                 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  833.                 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  834.                 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  835.             })();
  836.         </script>
  837.         -->
  838.     </body>
  839. </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!