SHARE
TWEET

Untitled

a guest Jul 5th, 2017 493 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Matkadlooduses - matkarajad, vaatamisväärsused</title>
  5.         <link rel="stylesheet" type=text/css href="css/stylesheet.css">
  6.         <link rel="icon" type="image/png" href="img/logo_uus_trans.png">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     </head>
  9.     <body>
  10.         <div id="container">
  11.             <div class="leaf_icon">
  12.                    <img src="img/leaf_icon.png" alt="">
  13.              </div>
  14.            
  15.              <!-- Navigation bar -->
  16.              <div id="nav_bar_text">
  17.                  <ul>
  18.                     <li class="avaleht"><a href="index.html">AVALEHT</a></li>
  19.                      <li class="matkakohad"><a href="">MATKAKOHAD</a></li>
  20.                     <li class="kontakt"><a href="">KONTAKT</a></li>
  21.                 </ul>
  22.              </div>
  23.            
  24.             <!-- Top Image Container -->
  25.             <div id="top_image">
  26.                
  27.                 <!-- Slideshow -->
  28.                     <ul id="mySlides">
  29.                         <li class="slide_picture"> <img src="img/slide_1.jpg" alt=""></li>
  30.                         <li class="slide_picture"> <img src="img/slide_2.jpg" alt=""></li>
  31.                         <li class="slide_picture"> <img src="img/slide_3.jpg" alt=""></li>
  32.                         <li class="slide_picture"> <img src="img/slide_4.jpg" alt=""></li>
  33.                     </ul>
  34.                 <div class="slideshow_gradient">
  35.                     <p class="slideshow_gradient_text">Matkadlooduses - tuntumad matkarajad Eestis</p>
  36.                     <p class="slideshow_gradient_text2"> Tegemist on veebilehega, kust on võimalik leida informatsiooni Eestis asuvate matkaradade kohta, kus veeta päev koos pere või kolleegidega. Pakume ülevaadet Eesti tuntumatest matkakohtadest ning nende ohtutusest. Parim reis loodusesse!
  37.                     </p>
  38.                 </div>
  39.                
  40.                 <!-- Center background container -->
  41.                 <div class="background_container">
  42.                     <div class="background_color">
  43.                        
  44.                         <!-- The part of Jussijarve -->
  45.                         <div id="category-1" class="jussijarve">
  46.                             <div class="jussijarve_image">
  47.                                 <img src="img/jussijarve_image.jpg" alt="">
  48.                             </div>
  49.                             <div>
  50.                                 <h3>Jussijärve matkarada</h3>
  51.                                 <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  52.                             </div>
  53.                             <div class="button1">
  54.                                 <a href='#' class='button'>Vaata lähemalt</a>
  55.                             </div>
  56.                         </div>
  57.                        
  58.                         <!-- The part of Kakerdaja -->
  59.                         <div id="category-2" class="kakerdaja">
  60.                             <div class="kakerdaja_image">
  61.                                 <img src="img/kakerdaja_image.jpg" alt="">
  62.                             </div>
  63.                             <div>
  64.                                 <h3>Kakerdaja Matkarada</h3>
  65.                                 <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  66.                             </div>
  67.                             <div class="button2">
  68.                                 <a href='#' class='button'>Vaata lähemalt</a>
  69.                             </div>
  70.                         </div>
  71.                        
  72.                         <!-- The part of Paukjarve -->
  73.                         <div id="category-3" class="paukjarve">
  74.                             <div class="paukjarve_image">
  75.                                 <img src="img/paukj%C3%A4rve_image.jpg" alt="" width="75%">
  76.                             </div>
  77.                             <div>
  78.                                 <h3>Paukjärve matkarada</h3>
  79.                                 <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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  80.                             </div>
  81.                             <div class="button3">
  82.                                 <a href='#' class='button'>Vaata lähemalt</a>
  83.                             </div>
  84.                         </div>
  85.                        
  86.                         <!-- Google maps - shows the nearest hiking rails for the ip of a device -->
  87.                         <div id="map"></div>
  88.                         <script>
  89.                             function initMap() {
  90.                                 var uluru = {lat: 59.345885, lng: 26.367438};
  91.                                 var map = new google.maps.Map(document.getElementById('map'), {
  92.                                     zoom: 14,
  93.                                     center: uluru
  94.                                 });
  95.                                 var marker = new google.maps.Marker({
  96.                                 position: uluru,
  97.                                 map: map
  98.                                 });
  99.                             }
  100.                         </script>
  101.                         <script async defer
  102.                             src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBp4Mz988ECq7ZhokasyN8zWhjDMv6K6Qg&callback=initMap">
  103.                         </script>
  104.                         <div class="GoogleMaps_Shadow">
  105.                         </div>
  106.                        
  107.                     <!-- Google maps text -->    
  108.                     </div>
  109.                     <div class="GoogleMaps_textbox">
  110.                         <p class="GoogleMaps_text"> Leia endale lähim matkarada!</p>
  111.                     </div>
  112.                    
  113.                     <!-- Bottom page container -->
  114.                     <footer>
  115.                         <div class="bottom_page">
  116.                             <!-- Right bottom logos - hovering over changes the color to the official social media color -->
  117.                             <div class="footer-social-icons">
  118.                                 <ul class="social-icons">
  119.                                     <li><a href="https://www.facebook.com/" target="_blank" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
  120.                                     <li><a href="https://twitter.com/" target="_blank" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
  121.                                     <li><a href="https://www.youtube.com/" target="_blank" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
  122.                                 </ul>
  123.                             </div>
  124.                         </div>
  125.                     </footer>
  126.                 </div>
  127.             </div>
  128.         </div>
  129.     </body>
  130. </html>
RAW Paste Data
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
 
Top