Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Matkadlooduses - matkarajad, vaatamisväärsused</title>
        <link rel="stylesheet" type=text/css href="css/stylesheet.css">
        <link rel="icon" type="image/png" href="img/logo_uus_trans.png">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="container">
            <div class="leaf_icon">
                   <img src="img/leaf_icon.png" alt="">
             </div>

             <!-- Navigation bar -->
             <div id="nav_bar_text">
                 <ul>
                    <li class="avaleht"><a href="index.html">AVALEHT</a></li>
                     <li class="matkakohad"><a href="">MATKAKOHAD</a></li>
                    <li class="kontakt"><a href="">KONTAKT</a></li>
                </ul>
             </div>

            <!-- Top Image Container -->
            <div id="top_image">

                <!-- Slideshow -->
                    <ul id="mySlides">
                        <li class="slide_picture"> <img src="img/slide_1.jpg" alt=""></li>
                        <li class="slide_picture"> <img src="img/slide_2.jpg" alt=""></li>
                        <li class="slide_picture"> <img src="img/slide_3.jpg" alt=""></li>
                        <li class="slide_picture"> <img src="img/slide_4.jpg" alt=""></li>
                    </ul>
                <div class="slideshow_gradient">
                    <p class="slideshow_gradient_text">Matkadlooduses - tuntumad matkarajad Eestis</p>
                    <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!
                    </p>
                </div>

                <!-- Center background container -->
                <div class="background_container">
                    <div class="background_color">

                        <!-- The part of Jussijarve -->
                        <div id="category-1" class="jussijarve">
                            <div class="jussijarve_image">
                                <img src="img/jussijarve_image.jpg" alt="">
                            </div>
                            <div>
                                <h3>Jussijärve matkarada</h3>
                                <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>
                            </div>
                            <div class="button1">
                                <a href='#' class='button'>Vaata lähemalt</a>
                            </div>
                        </div>

                        <!-- The part of Kakerdaja -->
                        <div id="category-2" class="kakerdaja">
                            <div class="kakerdaja_image">
                                <img src="img/kakerdaja_image.jpg" alt="">
                            </div>
                            <div>
                                <h3>Kakerdaja Matkarada</h3>
                                <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>
                            </div>
                            <div class="button2">
                                <a href='#' class='button'>Vaata lähemalt</a>
                            </div>
                        </div>

                        <!-- The part of Paukjarve -->
                        <div id="category-3" class="paukjarve">
                            <div class="paukjarve_image">
                                <img src="img/paukj%C3%A4rve_image.jpg" alt="" width="75%">
                            </div>
                            <div>
                                <h3>Paukjärve matkarada</h3>
                                <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>
                            </div>
                            <div class="button3">
                                <a href='#' class='button'>Vaata lähemalt</a>
                            </div>
                        </div>

                        <!-- Google maps - shows the nearest hiking rails for the ip of a device -->
                        <div id="map"></div>
                        <script>
                            function initMap() {
                                var uluru = {lat: 59.345885, lng: 26.367438};
                                var map = new google.maps.Map(document.getElementById('map'), {
                                    zoom: 14,
                                    center: uluru
                                });
                                var marker = new google.maps.Marker({
                                position: uluru,
                                map: map
                                });
                            }
                        </script>
                        <script async defer
                            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBp4Mz988ECq7ZhokasyN8zWhjDMv6K6Qg&callback=initMap">
                        </script>
                        <div class="GoogleMaps_Shadow">
                        </div>

                    <!-- Google maps text -->
                    </div>
                    <div class="GoogleMaps_textbox">
                        <p class="GoogleMaps_text"> Leia endale lähim matkarada!</p>
                    </div>

                    <!-- Bottom page container -->
                    <footer>
                        <div class="bottom_page">
                            <!-- Right bottom logos - hovering over changes the color to the official social media color -->
                            <div class="footer-social-icons">
                                <ul class="social-icons">
                                    <li><a href="https://www.facebook.com/" target="_blank" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
                                    <li><a href="https://twitter.com/" target="_blank" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
                                    <li><a href="https://www.youtube.com/" target="_blank" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </body>
</html>