API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 23rd, 2017
859
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 25.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <!-- Theme Made By www.w3schools.com - No Copyright -->
  6.     <title>Bootstrap Theme Company Page</title>
  7.     <meta charset="utf-8">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  10.     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  11.     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  12.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  13.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  14.     <style>
  15.         body {
  16.             font: 400 15px Lato, sans-serif;
  17.             line-height: 1.8;
  18.             color: #818181;
  19.         }
  20.        
  21.         h2 {
  22.             font-size: 24px;
  23.             text-transform: uppercase;
  24.             color: #303030;
  25.             font-weight: 600;
  26.             margin-bottom: 30px;
  27.         }
  28.        
  29.         h4 {
  30.             font-size: 19px;
  31.             line-height: 1.375em;
  32.             color: #303030;
  33.             font-weight: 400;
  34.             margin-bottom: 30px;
  35.         }
  36.        
  37.         .jumbotron {
  38.             background-color: #f4511e;
  39.             color: #fff;
  40.             padding: 100px 25px;
  41.             font-family: Montserrat, sans-serif;
  42.         }
  43.        
  44.         .container-fluid {
  45.             padding: 60px 50px;
  46.         }
  47.        
  48.         .bg-grey {
  49.             background-color: #f6f6f6;
  50.         }
  51.        
  52.         .logo-small {
  53.             color: #f4511e;
  54.             font-size: 50px;
  55.         }
  56.        
  57.         .logo {
  58.             color: #f4511e;
  59.             font-size: 200px;
  60.         }
  61.        
  62.         .thumbnail {
  63.             padding: 0 0 15px 0;
  64.             border: none;
  65.             border-radius: 0;
  66.         }
  67.        
  68.         .thumbnail img {
  69.             width: 100%;
  70.             height: 100%;
  71.             margin-bottom: 10px;
  72.         }
  73.        
  74.         .carousel-control.right,
  75.         .carousel-control.left {
  76.             background-image: none;
  77.             color: #f4511e;
  78.         }
  79.        
  80.         .carousel-indicators li {
  81.             border-color: #f4511e;
  82.         }
  83.        
  84.         .carousel-indicators li.active {
  85.             background-color: #f4511e;
  86.         }
  87.        
  88.         .item h4 {
  89.             font-size: 19px;
  90.             line-height: 1.375em;
  91.             font-weight: 400;
  92.             font-style: italic;
  93.             margin: 70px 0;
  94.         }
  95.        
  96.         .item span {
  97.             font-style: normal;
  98.         }
  99.        
  100.         .panel {
  101.             border: 1px solid #f4511e;
  102.             border-radius: 0 !important;
  103.             transition: box-shadow 0.5s;
  104.         }
  105.        
  106.         .panel:hover {
  107.             box-shadow: 5px 0px 40px rgba(0, 0, 0, .2);
  108.         }
  109.        
  110.         .panel-footer .btn:hover {
  111.             border: 1px solid #f4511e;
  112.             background-color: #fff !important;
  113.             color: #f4511e;
  114.         }
  115.        
  116.         .panel-heading {
  117.             color: #fff !important;
  118.             background-color: #f4511e !important;
  119.             padding: 25px;
  120.             border-bottom: 1px solid transparent;
  121.             border-top-left-radius: 0px;
  122.             border-top-right-radius: 0px;
  123.             border-bottom-left-radius: 0px;
  124.             border-bottom-right-radius: 0px;
  125.         }
  126.        
  127.         .panel-footer {
  128.             background-color: white !important;
  129.         }
  130.        
  131.         .panel-footer h3 {
  132.             font-size: 32px;
  133.         }
  134.        
  135.         .panel-footer h4 {
  136.             color: #aaa;
  137.             font-size: 14px;
  138.         }
  139.        
  140.         .panel-footer .btn {
  141.             margin: 15px 0;
  142.             background-color: #f4511e;
  143.             color: #fff;
  144.         }
  145.        
  146.         .navbar {
  147.             margin-bottom: 0;
  148.             background-color: #f4511e;
  149.             z-index: 9999;
  150.             border: 0;
  151.             font-size: 12px !important;
  152.             line-height: 1.42857143 !important;
  153.             letter-spacing: 4px;
  154.             border-radius: 0;
  155.             font-family: Montserrat, sans-serif;
  156.         }
  157.        
  158.         .navbar li a,
  159.         .navbar .navbar-brand {
  160.             color: #fff !important;
  161.         }
  162.        
  163.         .navbar-nav li a:hover,
  164.         .navbar-nav li.active a {
  165.             color: #f4511e !important;
  166.             background-color: #fff !important;
  167.         }
  168.        
  169.         .navbar-default .navbar-toggle {
  170.             border-color: transparent;
  171.             color: #fff !important;
  172.         }
  173.        
  174.         footer .glyphicon {
  175.             font-size: 20px;
  176.             margin-bottom: 20px;
  177.             color: #f4511e;
  178.         }
  179.        
  180.         .slideanim {
  181.             visibility: hidden;
  182.         }
  183.        
  184.         .slide {
  185.             animation-name: slide;
  186.             -webkit-animation-name: slide;
  187.             animation-duration: 1s;
  188.             -webkit-animation-duration: 1s;
  189.             visibility: visible;
  190.         }
  191.        
  192.         @keyframes slide {
  193.             0% {
  194.                 opacity: 0;
  195.                 transform: translateY(70%);
  196.             }
  197.             100% {
  198.                 opacity: 1;
  199.                 transform: translateY(0%);
  200.             }
  201.         }
  202.        
  203.         @-webkit-keyframes slide {
  204.             0% {
  205.                 opacity: 0;
  206.                 -webkit-transform: translateY(70%);
  207.             }
  208.             100% {
  209.                 opacity: 1;
  210.                 -webkit-transform: translateY(0%);
  211.             }
  212.         }
  213.        
  214.         @media screen and (max-width: 768px) {
  215.             .col-sm-4 {
  216.                 text-align: center;
  217.                 margin: 25px 0;
  218.             }
  219.             .btn-lg {
  220.                 width: 100%;
  221.                 margin-bottom: 35px;
  222.             }
  223.         }
  224.        
  225.         @media screen and (max-width: 480px) {
  226.             .logo {
  227.                 font-size: 150px;
  228.             }
  229.         }
  230.     </style>
  231. </head>
  232.  
  233. <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
  234.  
  235.     <nav class="navbar navbar-default navbar-fixed-top">
  236.         <div class="container">
  237.             <div class="navbar-header">
  238.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  239.                     <span class="icon-bar"></span>
  240.                     <span class="icon-bar"></span>
  241.                     <span class="icon-bar"></span>
  242.                 </button>
  243.                 <a class="navbar-brand" href="#myPage">Logo</a>
  244.             </div>
  245.             <div class="collapse navbar-collapse" id="myNavbar">
  246.                 <ul class="nav navbar-nav navbar-right">
  247.                     <li><a href="#about">ABOUT</a></li>
  248.                     <li><a href="#services">SERVICES</a></li>
  249.                     <li><a href="#portfolio">PORTFOLIO</a></li>
  250.                     <li><a href="#pricing">PRICING</a></li>
  251.                     <li><a href="#contact">CONTACT</a></li>
  252.                 </ul>
  253.             </div>
  254.         </div>
  255.     </nav>
  256.  
  257.     <div class="jumbotron text-center">
  258.         <h1>Company</h1>
  259.         <p>We specialize in blablabla</p>
  260.         <form>
  261.             <div class="input-group">
  262.                 <input type="email" class="form-control" size="50" placeholder="Email Address" required>
  263.                 <div class="input-group-btn">
  264.                     <button type="button" class="btn btn-danger">Subscribe</button>
  265.                 </div>
  266.             </div>
  267.         </form>
  268.     </div>
  269.  
  270.     <!-- Container (About Section) -->
  271.     <div id="about" class="container-fluid">
  272.         <div class="row">
  273.             <div class="col-sm-8">
  274.                 <h2>About Company Page</h2>
  275.                 <br>
  276.                 <h4>Lorem ipsum dolor sit amet, consectetur adipiscing 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 consequat.</h4>
  277.                 <br>
  278.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 consequat. Excepteur
  279.                     sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  280.                     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  281.                 <br>
  282.                 <button class="btn btn-default btn-lg">Get in Touch</button>
  283.             </div>
  284.             <div class="col-sm-4">
  285.                 <span class="glyphicon glyphicon-signal logo"></span>
  286.             </div>
  287.         </div>
  288.     </div>
  289.  
  290.     <div class="container-fluid bg-grey">
  291.         <div class="row">
  292.             <div class="col-sm-4">
  293.                 <span class="glyphicon glyphicon-globe logo slideanim"></span>
  294.             </div>
  295.             <div class="col-sm-8">
  296.                 <h2>Our Values</h2>
  297.                 <br>
  298.                 <h4><strong>MISSION:</strong> Our mission lorem ipsum dolor sit amet, consectetur adipiscing 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 consequat.</h4>
  299.                 <br>
  300.                 <p><strong>VISION:</strong> Our vision Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  301.                     aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  302.                     aliquip ex ea commodo consequat.</p>
  303.             </div>
  304.         </div>
  305.     </div>
  306.  
  307.     <!-- Container (Services Section) -->
  308.     <div id="services" class="container-fluid text-center">
  309.         <h2>SERVICES</h2>
  310.         <h4>What we offer</h4>
  311.         <br>
  312.         <div class="row slideanim">
  313.             <div class="col-sm-4">
  314.                 <span class="glyphicon glyphicon-off logo-small"></span>
  315.                 <h4>POWER</h4>
  316.                 <p>Lorem ipsum dolor sit amet..</p>
  317.             </div>
  318.             <div class="col-sm-4">
  319.                 <span class="glyphicon glyphicon-heart logo-small"></span>
  320.                 <h4>LOVE</h4>
  321.                 <p>Lorem ipsum dolor sit amet..</p>
  322.             </div>
  323.             <div class="col-sm-4">
  324.                 <span class="glyphicon glyphicon-lock logo-small"></span>
  325.                 <h4>JOB DONE</h4>
  326.                 <p>Lorem ipsum dolor sit amet..</p>
  327.             </div>
  328.         </div>
  329.         <br>
  330.         <br>
  331.         <div class="row slideanim">
  332.             <div class="col-sm-4">
  333.                 <span class="glyphicon glyphicon-leaf logo-small"></span>
  334.                 <h4>GREEN</h4>
  335.                 <p>Lorem ipsum dolor sit amet..</p>
  336.             </div>
  337.             <div class="col-sm-4">
  338.                 <span class="glyphicon glyphicon-certificate logo-small"></span>
  339.                 <h4>CERTIFIED</h4>
  340.                 <p>Lorem ipsum dolor sit amet..</p>
  341.             </div>
  342.             <div class="col-sm-4">
  343.                 <span class="glyphicon glyphicon-wrench logo-small"></span>
  344.                 <h4 style="color:#303030;">HARD WORK</h4>
  345.                 <p>Lorem ipsum dolor sit amet..</p>
  346.             </div>
  347.         </div>
  348.     </div>
  349.  
  350.     <!-- Container (Portfolio Section) -->
  351.     <div id="portfolio" class="container-fluid text-center bg-grey">
  352.         <h2>Portfolio</h2>
  353.         <br>
  354.         <h4>What we have created</h4>
  355.         <div class="row text-center slideanim">
  356.             <div class="col-sm-4">
  357.                 <div class="thumbnail">
  358.                     <img src="paris.jpg" alt="Paris" width="400" height="300">
  359.                     <p><strong>Paris</strong></p>
  360.                     <p>Yes, we built Paris</p>
  361.                 </div>
  362.             </div>
  363.             <div class="col-sm-4">
  364.                 <div class="thumbnail">
  365.                     <img src="newyork.jpg" alt="New York" width="400" height="300">
  366.                     <p><strong>New York</strong></p>
  367.                     <p>We built New York</p>
  368.                 </div>
  369.             </div>
  370.             <div class="col-sm-4">
  371.                 <div class="thumbnail">
  372.                     <img src="sanfran.jpg" alt="San Francisco" width="400" height="300">
  373.                     <p><strong>San Francisco</strong></p>
  374.                     <p>Yes, San Fran is ours</p>
  375.                 </div>
  376.             </div>
  377.         </div>
  378.         <br>
  379.  
  380.         <h2>What our customers say</h2>
  381.         <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
  382.             <!-- Indicators -->
  383.             <ol class="carousel-indicators">
  384.                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  385.                 <li data-target="#myCarousel" data-slide-to="1"></li>
  386.                 <li data-target="#myCarousel" data-slide-to="2"></li>
  387.             </ol>
  388.  
  389.             <!-- Wrapper for slides -->
  390.             <div class="carousel-inner" role="listbox">
  391.                 <div class="item active">
  392.                     <h4>"This company is the best. I am so happy with the result!"<br><span>Michael Roe, Vice President, Comment Box</span></h4>
  393.                 </div>
  394.                 <div class="item">
  395.                     <h4>"One word... WOW!!"<br><span>John Doe, Salesman, Rep Inc</span></h4>
  396.                 </div>
  397.                 <div class="item">
  398.                     <h4>"Could I... BE any more happy with this company?"<br><span>Chandler Bing, Actor, FriendsAlot</span></h4>
  399.                 </div>
  400.             </div>
  401.  
  402.             <!-- Left and right controls -->
  403.             <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  404.                 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  405.                 <span class="sr-only">Previous</span>
  406.             </a>
  407.             <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  408.                 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  409.                 <span class="sr-only">Next</span>
  410.             </a>
  411.         </div>
  412.     </div>
  413.  
  414.     <!-- Container (Pricing Section) -->
  415.     <div id="pricing" class="container-fluid">
  416.         <div class="text-center">
  417.             <h2>Pricing</h2>
  418.             <h4>Choose a payment plan that works for you</h4>
  419.         </div>
  420.         <div class="row slideanim">
  421.             <div class="col-sm-4 col-xs-12">
  422.                 <div class="panel panel-default text-center">
  423.                     <div class="panel-heading">
  424.                         <h1>Basic</h1>
  425.                     </div>
  426.                     <div class="panel-body">
  427.                         <p><strong>20</strong> Lorem</p>
  428.                         <p><strong>15</strong> Ipsum</p>
  429.                         <p><strong>5</strong> Dolor</p>
  430.                         <p><strong>2</strong> Sit</p>
  431.                         <p><strong>Endless</strong> Amet</p>
  432.                     </div>
  433.                     <div class="panel-footer">
  434.                         <h3>$19</h3>
  435.                         <h4>per month</h4>
  436.                         <button class="btn btn-lg">Sign Up</button>
  437.                     </div>
  438.                 </div>
  439.             </div>
  440.             <div class="col-sm-4 col-xs-12">
  441.                 <div class="panel panel-default text-center">
  442.                     <div class="panel-heading">
  443.                         <h1>Pro</h1>
  444.                     </div>
  445.                     <div class="panel-body">
  446.                         <p><strong>50</strong> Lorem</p>
  447.                         <p><strong>25</strong> Ipsum</p>
  448.                         <p><strong>10</strong> Dolor</p>
  449.                         <p><strong>5</strong> Sit</p>
  450.                         <p><strong>Endless</strong> Amet</p>
  451.                     </div>
  452.                     <div class="panel-footer">
  453.                         <h3>$29</h3>
  454.                         <h4>per month</h4>
  455.                         <button class="btn btn-lg">Sign Up</button>
  456.                     </div>
  457.                 </div>
  458.             </div>
  459.             <div class="col-sm-4 col-xs-12">
  460.                 <div class="panel panel-default text-center">
  461.                     <div class="panel-heading">
  462.                         <h1>Premium</h1>
  463.                     </div>
  464.                     <div class="panel-body">
  465.                         <p><strong>100</strong> Lorem</p>
  466.                         <p><strong>50</strong> Ipsum</p>
  467.                         <p><strong>25</strong> Dolor</p>
  468.                         <p><strong>10</strong> Sit</p>
  469.                         <p><strong>Endless</strong> Amet</p>
  470.                     </div>
  471.                     <div class="panel-footer">
  472.                         <h3>$49</h3>
  473.                         <h4>per month</h4>
  474.                         <button class="btn btn-lg">Sign Up</button>
  475.                     </div>
  476.                 </div>
  477.             </div>
  478.         </div>
  479.     </div>
  480.  
  481.     <!-- Container (Contact Section) -->
  482.     <div id="contact" class="container-fluid bg-grey">
  483.         <h2 class="text-center">CONTACT</h2>
  484.         <div class="row">
  485.             <div class="col-sm-5">
  486.                 <p>Contact us and we'll get back to you within 24 hours.</p>
  487.                 <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
  488.                 <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
  489.                 <p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
  490.             </div>
  491.             <div class="col-sm-7 slideanim">
  492.                 <div class="row">
  493.                     <div class="col-sm-6 form-group">
  494.                         <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
  495.                     </div>
  496.                     <div class="col-sm-6 form-group">
  497.                         <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
  498.                     </div>
  499.                 </div>
  500.                 <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
  501.                 <br>
  502.                 <div class="row">
  503.                     <div class="col-sm-12 form-group">
  504.                         <button class="btn btn-default pull-right" type="submit">Send</button>
  505.                     </div>
  506.                 </div>
  507.             </div>
  508.         </div>
  509.     </div>
  510.  
  511.     <!-- Add Google Maps -->
  512.     <div id="map" style="height:500px;width:100%;"></div>
  513.     <script>
  514.         var map;
  515.         var my_map_center = {
  516.             lat: 38.23,
  517.             lng: 21.74
  518.         };
  519.  
  520.         /**
  521.          * The CenterControl adds a control to the map that recenters the map on
  522.          * Chicago.
  523.          * This constructor takes the control DIV as an argument.
  524.          * @constructor
  525.          */
  526.         function CenterControl(controlDiv, map) {
  527.  
  528.             // Set CSS for the control border.
  529.             var show_hubs_UI = document.createElement('div');
  530.             show_hubs_UI.style.backgroundColor = '#CCFFE5';
  531.             show_hubs_UI.style.border = '2px solid #000';
  532.             show_hubs_UI.style.borderRadius = '3px';
  533.             show_hubs_UI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  534.             show_hubs_UI.style.cursor = 'pointer';
  535.             show_hubs_UI.style.marginBottom = '22px';
  536.             show_hubs_UI.style.textAlign = 'center';
  537.             show_hubs_UI.title = 'Click to show our hubs.';
  538.             controlDiv.appendChild(show_hubs_UI);
  539.  
  540.             // Set CSS for the control interior.
  541.             var show_hubs_TEXT = document.createElement('div');
  542.             show_hubs_TEXT.style.color = 'rgb(25,25,25)';
  543.             show_hubs_TEXT.style.fontFamily = 'Roboto,Arial,sans-serif';
  544.             show_hubs_TEXT.style.fontSize = '16px';
  545.             show_hubs_TEXT.style.lineHeight = '38px';
  546.             show_hubs_TEXT.style.paddingLeft = '5px';
  547.             show_hubs_TEXT.style.paddingRight = '5px';
  548.             show_hubs_TEXT.innerHTML = 'Show Hubs';
  549.             show_hubs_UI.appendChild(show_hubs_TEXT);
  550.  
  551.             var show_stores_UI = document.createElement('div');
  552.             show_stores_UI.style.backgroundColor = '#CCFFE5';
  553.             show_stores_UI.style.border = '2px solid #000';
  554.             show_stores_UI.style.borderRadius = '3px';
  555.             show_stores_UI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  556.             show_stores_UI.style.cursor = 'pointer';
  557.             show_stores_UI.style.marginBottom = '22px';
  558.             show_stores_UI.style.textAlign = 'center';
  559.             show_stores_UI.title = 'Click to show our stores.';
  560.             controlDiv.appendChild(show_stores_UI);
  561.  
  562.             // Set CSS for the control interior.
  563.             var show_stores_TEXT = document.createElement('div');
  564.             show_stores_TEXT.style.color = 'rgb(25,25,25)';
  565.             show_stores_TEXT.style.fontFamily = 'Roboto,Arial,sans-serif';
  566.             show_stores_TEXT.style.fontSize = '16px';
  567.             show_stores_TEXT.style.lineHeight = '38px';
  568.             show_stores_TEXT.style.paddingLeft = '5px';
  569.             show_stores_TEXT.style.paddingRight = '5px';
  570.             show_stores_TEXT.innerHTML = 'Show Stores';
  571.             show_stores_UI.appendChild(show_stores_TEXT);
  572.  
  573.             // Setup the click event listeners: simply show the hubs.
  574.             show_hubs_UI.addEventListener('click', function() {
  575.                 var marker = new google.maps.Marker({
  576.                     position: new google.maps.LatLng(40.237886, 21.740455),
  577.                     map: map,
  578.                     title: "Magazi edw",
  579.                     animation: google.maps.Animation.DROP
  580.                 });
  581.             });
  582.             // Setup the click event listeners: simply show the stores.
  583.             show_stores_UI.addEventListener('click', function() {
  584.                 var marker = new google.maps.Marker({
  585.                     position: new google.maps.LatLng(38.237886, 21.740455),
  586.                     map: map,
  587.                     icon: 'localhost/giorgos/1.ico',
  588.                     title: "Magazi edw",
  589.                     animation: google.maps.Animation.DROP
  590.                 });
  591.             });
  592.  
  593.         }
  594.  
  595.         function initMap() {
  596.             map = new google.maps.Map(document.getElementById('map'), {
  597.                 center: {
  598.                     lat: 38.237886,
  599.                     lng: 21.740455
  600.                 },
  601.                 mapTypeId: google.maps.MapTypeId.ROADMAP,
  602.                 zoom: 7
  603.             });
  604.             // Create the DIV to hold the control and call the CenterControl()
  605.             // constructor passing in this DIV.
  606.             var centerControlDiv = document.createElement('div');
  607.             var centerControl = new CenterControl(centerControlDiv, map);
  608.  
  609.             centerControlDiv.index = 1;
  610.             map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);
  611.         }
  612.     </script>
  613.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtpIJpQynjBq3mm9mqHuP-Z_yUcAChksU&callback=initMap"></script>
  614.     <!--
  615. To use this code on your website, get a free API key from Google.
  616. Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
  617. -->
  618.  
  619.     <footer class="container-fluid text-center">
  620.         <a href="#myPage" title="To Top">
  621.             <span class="glyphicon glyphicon-chevron-up"></span>
  622.         </a>
  623.         <p>Bootstrap Theme Made By <a href="https://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p>
  624.     </footer>
  625.  
  626.     <script>
  627.         $(document).ready(function() {
  628.             // Add smooth scrolling to all links in navbar + footer link
  629.             $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
  630.                 // Make sure this.hash has a value before overriding default behavior
  631.                 if (this.hash !== "") {
  632.                     // Prevent default anchor click behavior
  633.                     event.preventDefault();
  634.  
  635.                     // Store hash
  636.                     var hash = this.hash;
  637.  
  638.                     // Using jQuery's animate() method to add smooth page scroll
  639.                     // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  640.                     $('html, body').animate({
  641.                         scrollTop: $(hash).offset().top
  642.                     }, 900, function() {
  643.  
  644.                         // Add hash (#) to URL when done scrolling (default click behavior)
  645.                         window.location.hash = hash;
  646.                     });
  647.                 } // End if
  648.             });
  649.  
  650.             $(window).scroll(function() {
  651.                 $(".slideanim").each(function() {
  652.                     var pos = $(this).offset().top;
  653.  
  654.                     var winTop = $(window).scrollTop();
  655.                     if (pos < winTop + 600) {
  656.                        $(this).addClass("slide");
  657.                    }
  658.                });
  659.            });
  660.        })
  661.    </script>
  662.  
  663. </body>
  664.  
  665. </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!