API tools faq
paste
Advertisement
Guest User

ХТМЛ

a guest
Nov 21st, 2014
174
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.77 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Author: W3layouts
  3. Author URL: http://w3layouts.com
  4. License: Creative Commons Attribution 3.0 Unported
  5. License URL: http://creativecommons.org/licenses/by/3.0/
  6. -->
  7. <!DOCTYPE html>
  8. <html>
  9.     <head>
  10.         <title>Elsta Bootstarp Website Template | Home :: w3layouts</title>
  11.         <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  12.         <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
  13.         <!-- web-font -->
  14.         <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,700,800,400,600' rel='stylesheet' type='text/css'>
  15.         <link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>
  16.         <!-- web-font -->
  17.         <!-- js -->
  18.         <script src="js/jquery.min.js"></script>
  19.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  20.         <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  21.         <!-- js -->
  22.         <!-- start-smoth-scrolling -->
  23.         <script type="text/javascript" src="js/move-top.js"></script>
  24.         <script type="text/javascript" src="js/easing.js"></script>
  25.         <script type="text/javascript">
  26.             jQuery(document).ready(function($) {
  27.                 $(".scroll").click(function(event){    
  28.                     event.preventDefault();
  29.                     $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
  30.                 });
  31.             });
  32.         </script>
  33.         <!-- start-smoth-scrolling -->
  34.     </head>
  35.     <body>
  36.         <!-- header -->
  37.         <div class="head-bg">
  38.             <div class="header">
  39.                 <!-- container -->
  40.                 <div class="container">
  41.                     <div class="head-logo">
  42.                         <a href="#"><img src="images/logo.png" alt="" /></a>
  43.                     </div>
  44.                     <!-- banner Slider starts Here -->
  45.                     <script src="js/responsiveslides.min.js"></script>
  46.                      <script>
  47.                         // You can also use "$(window).load(function() {"
  48.                         $(function () {
  49.                           // Slideshow 4
  50.                           $("#slider4").responsiveSlides({
  51.                             auto: true,
  52.                             pager: true,
  53.                             nav: false,
  54.                             speed: 500,
  55.                             namespace: "callbacks",
  56.                             before: function () {
  57.                               $('.events').append("<li>before event fired.</li>");
  58.                             },
  59.                             after: function () {
  60.                               $('.events').append("<li>after event fired.</li>");
  61.                             }
  62.                           });
  63.                    
  64.                         });
  65.                       </script>
  66.                     <!--//End-slider-script -->
  67.                     <div  id="top" class="callbacks_container">
  68.                         <ul class="rslides" id="slider4">
  69.                             <li>
  70.                                 <div class="head-info">
  71.                                     <span><img src="images/mobile.png" alt="" /> </span>
  72.                                     <div class="head-text">
  73.                                         <h1>Awesome Design</h1>
  74.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labornisi ut aliquip ex ea commodo consequa</p>
  75.                                         <div class="button">
  76.                                             <a href="#">DOWNLOAD</a>
  77.                                         </div>
  78.                                     </div>
  79.                                     <div class="mobile-device">
  80.                                         <img src="images/mobile.png" alt="" />
  81.                                     </div>
  82.                                     <div class="clearfix"> </div>
  83.                                 </div>
  84.                             </li>
  85.                             <li>
  86.                                 <div class="head-info">
  87.                                     <span><img src="images/mobile.png" alt="" /> </span>
  88.                                     <div class="head-text">
  89.                                         <h1>Beautiful Design</h1>
  90.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labornisi ut aliquip ex ea commodo consequa</p>
  91.                                         <div class="button">
  92.                                             <a href="#">DOWNLOAD</a>
  93.                                         </div>
  94.                                     </div>
  95.                                     <div class="mobile-device">
  96.                                         <img src="images/mobile.png" alt="" />
  97.                                     </div>
  98.                                     <div class="clearfix"> </div>
  99.                                 </div>
  100.                             </li><li>
  101.                                 <div class="head-info">
  102.                                     <span><img src="images/mobile.png" alt="" /> </span>
  103.                                     <div class="head-text">
  104.                                         <h1>Awesome Design</h1>
  105.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labornisi ut aliquip ex ea commodo consequa</p>
  106.                                         <div class="button">
  107.                                             <a href="#">DOWNLOAD</a>
  108.                                         </div>
  109.                                     </div>
  110.                                     <div class="mobile-device">
  111.                                         <img src="images/mobile.png" alt="" />
  112.                                     </div>
  113.                                     <div class="clearfix"> </div>
  114.                                 </div>
  115.                             </li>
  116.                         </ul>
  117.                         <div class="clearfix"> </div>
  118.                         <!-- banner Slider Ends Here -->
  119.                     </div>
  120.                     <div class="clearfix"> </div>
  121.                 </div>
  122.                 <!-- //container -->
  123.             </div>
  124.         </div>
  125.         <!-- header -->
  126.         <!-- welcome-note -->
  127.         <div class="welcome-note">
  128.             <h2>Welcome To elsta</h2>
  129.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
  130.                 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  131.         </div>
  132.         <!-- welcome-note -->
  133.         <!-- app -->
  134.         <div class="app">
  135.             <!-- container -->
  136.             <div class="container">
  137.                 <div class="col-md-6 app-left">
  138.                     <h3>Get The App</h3>
  139.                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa</p>
  140.                     <div class="button">
  141.                         <a href="#">DOWNLOAD</a>
  142.                     </div>
  143.                 </div>
  144.                 <div class="col-md-6">
  145.                     <iframe src="//player.vimeo.com/video/35839668" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  146.                 </div>
  147.                 <div class="clearfix"> </div>
  148.             </div>
  149.             <!-- //container -->
  150.         </div>
  151.         <!-- //app -->
  152.         <!-- app-bottom -->
  153.         <div class="app-bottom">
  154.             <!-- container -->
  155.             <div class="container">
  156.                 <div class="bottom-grids">
  157.                     <div class="col-md-3 bottom-grid">
  158.                         <img src="images/rocket.png" alt="" />
  159.                         <div class="border"> </div>
  160.                         <h4>Great concept</h4>
  161.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  162.                     </div>
  163.                     <div class="col-md-3 bottom-grid">
  164.                         <img src="images/user.png" alt="" />
  165.                         <div class="border"> </div>
  166.                         <h4>Great concept</h4>
  167.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  168.                     </div>
  169.                     <div class="col-md-3 bottom-grid">
  170.                         <img src="images/setting.png" alt="" />
  171.                         <div class="border"> </div>
  172.                         <h4>Great concept</h4>
  173.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  174.                     </div>
  175.                     <div class="col-md-3 bottom-grid">
  176.                         <img src="images/lock.png" alt="" />
  177.                         <div class="border"> </div>
  178.                         <h4>Great concept</h4>
  179.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  180.                     </div>
  181.                     <div class="clearfix"> </div>
  182.                 </div>
  183.             </div>
  184.             <!-- //container -->
  185.         </div>
  186.         <!-- app-bottom -->
  187.         <!-- team -->
  188.         <div class="team">
  189.             <!-- container -->
  190.             <div class="container">
  191.                 <script>
  192.                         // You can also use "$(window).load(function() {"
  193.                         $(function () {
  194.                           // Slideshow 4
  195.                           $("#slider3").responsiveSlides({
  196.                             auto: true,
  197.                             pager: true,
  198.                             nav: false,
  199.                             speed: 500,
  200.                             namespace: "callbacks",
  201.                             before: function () {
  202.                               $('.events').append("<li>before event fired.</li>");
  203.                             },
  204.                             after: function () {
  205.                               $('.events').append("<li>after event fired.</li>");
  206.                             }
  207.                           });
  208.                    
  209.                         });
  210.                       </script>
  211.                       <div  id="top" class="callbacks_container">
  212.                         <ul class="rslides" id="slider3">
  213.                             <li>
  214.                                 <img src="images/ceo.png" alt="" />
  215.                                 <p>John Smith, CEO</p>
  216.                                 <div class="u-coma">
  217.                                     <img src="images/u-coma.png" alt="" />
  218.                                 </div>
  219.                                 <p class="subtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa</p>
  220.                                 <div class="d-coma">
  221.                                     <img src="images/d-coma.png" alt="" />
  222.                                 </div>
  223.                             </li>
  224.                             <li>
  225.                                 <img src="images/2.png" alt="" />
  226.                                 <p>MELISSA DOE,Director</p>
  227.                                 <div class="u-coma">
  228.                                     <img src="images/u-coma.png" alt="" />
  229.                                 </div>
  230.                                 <p class="subtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa</p>
  231.                                 <div class="d-coma">
  232.                                     <img src="images/d-coma.png" alt="" />
  233.                                 </div>
  234.                             </li>
  235.                             <li>
  236.                                 <img src="images/3.png" alt="" />
  237.                                 <p>Angelica, Designer</p>
  238.                                 <div class="u-coma">
  239.                                     <img src="images/u-coma.png" alt="" />
  240.                                 </div>
  241.                                 <p class="subtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa</p>
  242.                                 <div class="d-coma">
  243.                                     <img src="images/d-coma.png" alt="" />
  244.                                 </div>
  245.                             </li>
  246.                         </ul>
  247.                     </div>
  248.             </div>
  249.            
  250.             <!-- //container -->
  251.         </div>
  252.         <!-- //team -->
  253.         <!-- plans -->
  254.         <div class="plans">
  255.             <!-- container -->
  256.             <div class="container">
  257.                 <h3>Pricing Plans</h3>
  258.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
  259.                 <div class="plans-grids">
  260.                     <div class="plans-grid">
  261.                         <div class="plan-text">
  262.                             <a href="#">$ <span>25</span></a>
  263.                             <p>/month</p>
  264.                         </div>
  265.                         <div class="plans-grid-bottom">
  266.                             <div class="plans-grid-head">
  267.                                 <h4>Basic</h4>
  268.                                 <span>Description goes here</span>
  269.                             </div>
  270.                             <p>Feature 1</p>
  271.                             <p>Feature 2</p>
  272.                             <p>Feature 3</p>
  273.                             <p>Feature 4</p>
  274.                             <div class="plan-button">
  275.                                 <a class="signup play-icon popup-with-zoom-anim" href="#small-dialog2">Purchase</a>
  276.                             </div>
  277.                         </div>
  278.                     </div>
  279.                     <div class="plans-grid">
  280.                         <div class="plan-text">
  281.                             <a href="#">$ <span>50</span></a>
  282.                             <p>/month</p>
  283.                         </div>
  284.                         <div class="plans-grid-bottom">
  285.                             <div class="plans-grid-head">
  286.                                 <h4>Standard</h4>
  287.                                 <span>Description goes here</span>
  288.                             </div>
  289.                             <p>Feature 1</p>
  290.                             <p>Feature 2</p>
  291.                             <p>Feature 3</p>
  292.                             <p>Feature 4</p>
  293.                             <div class="plan-button">
  294.                                 <a class="signup play-icon popup-with-zoom-anim" href="#small-dialog2">Purchase</a>
  295.                             </div>
  296.                         </div>
  297.                     </div>
  298.                     <div class="plans-grid">
  299.                         <div class="plan-text">
  300.                             <a href="#">$ <span>75</span></a>
  301.                             <p>/month</p>
  302.                         </div>
  303.                         <div class="plans-grid-bottom">
  304.                             <div class="plans-grid-head">
  305.                                 <h4>Deluxe</h4>
  306.                                 <span>Description goes here</span>
  307.                             </div>
  308.                             <p>Feature 1</p>
  309.                             <p>Feature 2</p>
  310.                             <p>Feature 3</p>
  311.                             <p>Feature 4</p>
  312.                             <div class="plan-button">
  313.                                 <a class="signup play-icon popup-with-zoom-anim" href="#small-dialog2">Purchase</a>
  314.                             </div>
  315.                         </div>
  316.                     </div>
  317.                     <div class="plans-grid">
  318.                         <div class="plan-text">
  319.                             <a href="#">$ <span>99</span></a>
  320.                             <p>/month</p>
  321.                         </div>
  322.                         <div class="plans-grid-bottom">
  323.                             <div class="plans-grid-head">
  324.                                 <h4>Premium</h4>
  325.                                 <span>Description goes here</span>
  326.                             </div>
  327.                             <p>Feature 1</p>
  328.                             <p>Feature 2</p>
  329.                             <p>Feature 3</p>
  330.                             <p>Feature 4</p>
  331.                             <div class="plan-button">
  332.                                 <a class="signup play-icon popup-with-zoom-anim" href="#small-dialog2">Purchase</a>
  333.                                 <!-- script-for-menu -->
  334.                                      <script>
  335.                                        $( "span.menu" ).click(function() {
  336.                                          $( "ul.nav1" ).slideToggle( 300, function() {
  337.                                          // Animation complete.
  338.                                           });
  339.                                          });
  340.                                     </script>
  341.                                 <!-- /script-for-menu -->
  342.                             </div>
  343.                         </div>
  344.                     </div>
  345.                     <div class="clearfix"> </div>
  346.                 </div>
  347.             </div>
  348.             <!-- //container -->
  349.         </div>
  350.         <!-- //plans -->
  351.         <!-- pop-up-box -->
  352.                 <script type="text/javascript" src="js/modernizr.custom.min.js"></script>    
  353.                 <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
  354.                 <script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
  355.             <!--//pop-up-box -->
  356.             <div id="small-dialog2" class="mfp-hide">
  357.                     <div class="signup">
  358.                         <h3>Online Shipping</h3>
  359.                         <input type="text" placeholder="First Name" required="">
  360.                         <input type="text" placeholder="Second Name" required="">
  361.                         <input type="text" placeholder="Email" required="">
  362.                         <input type="text" placeholder="Phone" required="">                    
  363.                         <input type="text" class="email" placeholder="Address" required="">
  364.                         <h4>Payment</h4>
  365.                         <input type="text" placeholder="Card Number" required="">
  366.                         <input type="text" placeholder="Card Name" required="">
  367.                         <input type="text" placeholder="Date of expired" required="">
  368.                         <input type="text" placeholder="CNN" required="">          
  369.                         <input type="submit" value="PROCEED"/>
  370.                     </div>
  371.                 </div> 
  372.  
  373.             <script>
  374.                         $(document).ready(function() {
  375.                         $('.popup-with-zoom-anim').magnificPopup({
  376.                             type: 'inline',
  377.                             fixedContentPos: false,
  378.                             fixedBgPos: true,
  379.                             overflowY: 'auto',
  380.                             closeBtnInside: true,
  381.                             preloader: false,
  382.                             midClick: true,
  383.                             removalDelay: 300,
  384.                             mainClass: 'my-mfp-zoom-in'
  385.                         });
  386.                                                                                        
  387.                         });
  388.                 </script>  
  389.  
  390.         <!-- contact -->
  391.         <div class="contact">
  392.             <!-- //container -->
  393.             <div class="container">
  394.                 <div class="contact-info">
  395.                     <h3>Contact Us</h3>
  396.                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
  397.                     <div class="text-fields-left">
  398.                         <div class="text-field-email">
  399.                             <form>
  400.                                 <input type="text" placeholder="Name" required="">
  401.                             </form>
  402.                         </div>
  403.                         <div class="text-field-name">
  404.                             <form>
  405.                                 <input type="text" placeholder="Email" required="">
  406.                             </form>
  407.                         </div>
  408.                         <div class="clearfix"> </div>
  409.                         <div class="text-field-area ">
  410.                             <form>
  411.                                 <textarea placeholder="Message....." required=""></textarea>
  412.                                 <input type="submit" value="SEND">
  413.                             </form>
  414.                             <div class="pen-img"></div>
  415.                         </div>
  416.                     </div>
  417.                 </div>
  418.             </div>
  419.             <!-- //container -->
  420.         </div>
  421.         <!-- //contact -->
  422.         <!-- footer -->
  423.         <div class="footer">
  424.             <!-- container -->
  425.             <div class="container wrap">
  426.                 <div class="footer-left">
  427.                     <a href="#"><img src="images/flogo.png" alt="" /></a>
  428.                     <p>
  429.                         Template by <a href="http://w3layouts.com/">W3layouts</a>
  430.                     </p>
  431.                 </div>
  432.                 <div class="footer-right">
  433.                     <ul>
  434.                         <li><a href="#" class="facebook"> </a></li>
  435.                         <li><a href="#" class="twitter"> </a></li>
  436.                         <li><a href="#" class="chrome"> </a></li>
  437.                     </ul>
  438.                 </div>
  439.                 <div class="clearfix"> </div>
  440.             </div>
  441.             <!-- //container -->
  442.         </div>
  443.         <!-- //footer -->
  444.         <script type="text/javascript">
  445.                                     $(document).ready(function() {
  446.                                         /*
  447.                                         var defaults = {
  448.                                             containerID: 'toTop', // fading element id
  449.                                             containerHoverID: 'toTopHover', // fading element hover id
  450.                                             scrollSpeed: 1200,
  451.                                             easingType: 'linear'
  452.                                         };
  453.                                         */
  454.                                        
  455.                                         $().UItoTop({ easingType: 'easeOutQuart' });
  456.                                        
  457.                                     });
  458.                                 </script>
  459.                                     <a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
  460.     <!-- content-Get-in-touch -->
  461.     </body>
  462. </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!