Untitled

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <script src="../js/jquery-3.3.1.min.js"></script>
<style>
body{
    margin:0px;
}
.nav-1 {
    top:0px;
    position:fixed;
    z-index:3;
        width:100%;
        background-color:#f9fbfc;
}

.nav-1 ul {
        width:100%;
        height:100%;
        padding:0px;
        margin:0px;
        list-style:none;
    display:flex;
    justify-content:center;
}

.nav-1 ul li {
    float:left;
        font-family:'Julius Sans One', sans-serif;
        color:#000;
        padding:30px 25px;
        cursor:pointer;
    transition:all 0.3s;
    font-size:12px;
}

.nav-1 ul a li:hover{
    transition:all 0.3s;
    background-color:rgba(0,0,0,0.1);
}

.mySlides {
    display: none;
    width:100%;
    height:75%;
    filter:brightness(60%);
    position: absolute;
    top: 0;
    left: 0;
}


/* Slideshow container */
.slideshow-container {
    width:100%; z-index:-3;
}


.nav-1 {
    top:0px;
    position:fixed;
    z-index:3;
        width:100%;
        background-color:#f9fbfc;
}

.nav-1 ul {
    width:100%;
    height:100%;
        padding:0px;
        margin:0px;
        list-style:none;
    display:flex;
    justify-content:center;
}
.nav-1 ul li {
    float:left;
        font-family:'Julius Sans One', sans-serif;
        color:#000;
        padding:30px 25px;
        cursor:pointer;
    transition:all 0.3s;
    font-size:12px;
}

.nav-1 ul a li:hover{
    transition:all 0.3s;
    background-color:rgba(0,0,0,0.1);
}

.enfeite{
    width:100%;
    padding:20px 0px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.enfeite img {
    width:80px;
    height:80px;
    margin:0px 80px;
    border-radius:100%;
}

.enfeite h3 {
    text-align: center;
    font-family: 'Julius Sans One', sans-serif;
    font-weigth: light;
    color: black;
}

.slide {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
}

.slide-text {
       display: block;
       color: #fff;
       /* text-shadow: 2px 2px #000; */
       font-size: 50px;
       font-family: 'Pacifico', cursive;
}

.icone {
    position:absolute;
    z-index:6;
    width:100px;
    left: 13%;
    top: 200px;
}

.informacoes {
    width:70%;
    margin-left:15%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-bottom:50px;
}

.informacoes p {
    max-width: 800px;
    text-align: center;
    margin: auto;
}

.wrapper{
    float:left;
    width:45%;
    margin-left:20px;
    margin-right:20px;
    margin-top:55px;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-content:flex-start;
}

.wrapper h1{
    width:40%;
    padding-bottom:5px;
    font-family:'Abel', 'sans-serif';
    font-size: 18px;
    color:#999;
    border-bottom:1px solid #999;
}

.wrapper img {
    width:100%;
    height:200px;
}

.wrapper p {
    margin-top:15px;
    width:100%;
    color:#999;
    font-size:13px;
    font-family:"arial";
    text-align:justify;
}

.descricao{
    position:absolute;
        margin-top:190px;
        background-color: #fff;
    height: 40px;
    width: 250px;
}

.descricao h1{
    margin: 0.9rem;
    font-family: sans-serif;
    font-weight: lighter;
}

.slideshow-container-hadley {
    width: 100vw;
    height: 75vh;
    padding: 0;
    position: relative;
}

.slide-hadley {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.slide-image-hadley {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: -1;
    filter: brightness(60%);
}

.slide-text-hadley {
       display: block;
       color: #fff;
       /* text-shadow: 2px 2px #000; */
       font-size: 50px;
       font-family: 'Pacifico', cursive;
}

.slide-text-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.slide-button {
    position: absolute;
    top: 70px;
    z-index: 2;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {font-size: 11px}
    }

/*formatting for gadgets very small*/
@media (min-width:0px) and (max-width:767px) {
    .intro {
        margin-top:30px;
    }
    nav ul li {
        padding:10px 15px;
        font-size:12px;
    }
}

/*formatting for gadgets smalls*/
@media (min-width:768px) and (max-width:997px) {

}

/*formatting for gadgets medium*/
@media (min-width:998px) and (max-width:1199px) {

}

/*formatting for big gadgets*/
@media (min-width:1200px) {

}
</style>
</head>
<body>
<nav class="nav-1">
        <ul>
                <a href="index.html"><li>HOME</li></a>
                    <a href="culture.html"> <li>CULTURE</li></a>
                    <a href="tourism.html"> <li>TOURISM</li></a>
                    <a href="GeographicalAspects.html"> <li>GEOGRAPHICAL ASPECTS</li></a>
            </ul>
</nav>

<!-- nos queremos que o slideshow-container possua o tamanho que vai ficar, ou seja, tendo espaço para
     aparecer o menu em cima e os três icones na parte de baixo. -->
<div class="slideshow-container-hadley">
    <div class="slide-hadley">
        <img class="slide-image-hadley" src="https://i.imgur.com/5QeN1qN.jpg" style="width:100%">
        <div class="slide-text-button">
            <span class="slide-text-hadley">You only live once.</span><br>
            <img class="slide-button" onclick="rolagem()" src="http://www.vivanovocampeche.com.br/img/icon_setabaixo.png">
        </div>
    </div>
    <div class="slide-hadley">
        <img class="slide-image-hadley" src="https://i.imgur.com/ihSWQ14.jpg" style="width:100%">
        <div class="slide-text-button">
            <span class="slide-text-hadley">You only live once.</span><br>
            <img class="slide-button" onclick="rolagem()" src="http://www.vivanovocampeche.com.br/img/icon_setabaixo.png">
        </div>

    </div>
    <div class="slide-hadley">
        <img class="slide-image-hadley" src="https://i.imgur.com/RMFMpwt.jpg" style="width:100%">
        <div class="slide-text-button">
            <span class="slide-text-hadley">You only live once.</span><br>
            <img class="slide-button" onclick="rolagem()" src="http://www.vivanovocampeche.com.br/img/icon_setabaixo.png">
        </div>
    </div>
    <div class="slide-hadley">
        <img class="slide-image-hadley" src="https://i.imgur.com/J9h2nNw.jpg" style="width:100%">
        <div class="slide-text-button">
            <span class="slide-text-hadley">You only live once.</span><br>
            <img class="slide-button" onclick="rolagem()" src="http://www.vivanovocampeche.com.br/img/icon_setabaixo.png">
        </div>
    </div>

</div>

<script>
var myIndex = 0;

function carousel() {
    var i;
    var img = document.getElementsByClassName("slide-hadley");
    //var y = document.getElementsByClassName("slide-text-hadley");
    for (i = 0; i < img.length; i++) {
       img[i].style.display = "none";
      // y[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > img.length) {
        myIndex = 1;
    }
    img[myIndex-1].style.display = "flex";
    //y[myIndex-1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
}

carousel();

function rolagem(){
    $("html, body").animate({scrollTop: $(".enfeite").offset().top-80},700);
}

</script>

<br>

    <section class="enfeite">
        <div>
            <img src="http://travelpedia.com.br/wp-content/uploads/2018/02/food-wine-icon.png">
            <h3>Food</h3>
        </div>
        <div>
            <img src="https://cdn.icon-icons.com/icons2/706/PNG/512/hot-air-balloon_icon-icons.com_61845.png">
            <h3>Fun</h3>
        </div>
        <div>
            <img src="https://cdn.pixabay.com/photo/2015/06/05/10/35/coffee-798315_960_720.png">
            <h3>Relax</h3>
        </div>
    </section>
    <section class="informacoes">
        <div class="wrapper">
            <img src="https://i.imgur.com/hAdDwlW.jpg">
            <h1>Bergen</h1>
            <p>&nbsp;&nbsp;&nbsp;Kygo's home-country, the world-famous DJ, Bergen has different aromas, flavors and experiences of everything.
            Fresh seafood and other local delicacies are comparable to the artwork of the city's lively museums and galleries.
            In addition, the streets of the capital of the fjords are filled with wooden houses, direct exits of fairy tale,
            and still have the characteristics of seven mountains as a backdrop.
            &nbsp;&nbsp;&nbsp;To conclude, the medieval Hanseatic port of Bryggen, with its sixty historic buildings,
            many with foundations dating from the 12th century, has been considered a UNESCO World Heritage Site and is worth a visit.
            </p>
        </div>

        <div class="wrapper">
            <img src="https://i.imgur.com/xiDNNC6.jpg">
            <h1>TTromsø</h1>
            <p>&nbsp;&nbsp;&nbsp;The few main streets of the city can create a very urban international atmosphere, in the polar style.
            This locality of the Tromshalvøya peninsula deserves the nickname "Arctic capital" and has a huge variety of attractions,
            ranging from the Polaria Center, the Arctic Pole Museum, and Mack, the local brewery created in 1877, to the observation whales,
            the midnight sun and the northern lights.
            &nbsp;&nbsp;&nbsp;Tromsø is the largest city in northern Norway.
            However, the steep mountains and deep fjords that surround it are so close to the center that you can admire them from the main street.
            </p>
        </div>

        <div class="wrapper">
            <img src="https://i.imgur.com/Odlz9ae.jpg">
            <h1>The Lofoten Islands</h1>
            <p>&nbsp;&nbsp;&nbsp;TJust as the fjords tear the continent, the Lofoten Islands have the shape of a huge arm that invades the sea.
            Its many peaks extend into the Arctic sky like towers of cathedrals and among them traditional villages replete with fishermen and artists dominate the landscape.
            &nbsp;&nbsp;&nbsp;Sample everything from local dishes with seafood and lamb to white sand beaches and the Lofotr Viking Museum.
            In addition, it is very easy to travel from the islands to the mainland, to Helgeland and to the Vega Islands, which have been declared a World Heritage Site by Unesco.
            </p>

        </div>

        <div class="wrapper">
            <img src="https://i.imgur.com/ljI2Vna.jpg">
            <h1>The region of Stavanger</h1>
            <p>&nbsp;&nbsp;&nbsp;Norway's capital stock of oil fifty years ago did not spoil the charm of this coastal city nor the fact
             that the region has some of the country's most entertaining trails.
            &nbsp;&nbsp;&nbsp;Here you can visit the Lyse Fjord and famous plateaus such as the Preikestolen, the Rock of the Pulpit.
            Local dishes are served in both Michelin-starred restaurants and more modest bistros.
            </p>
        </div>

        <div class="wrapper">
            <img src="https://i.imgur.com/UY0z2wd.jpg">
            <h1>Oslo</h1>
            <p>&nbsp;&nbsp;&nbsp;A capital situated in the middle of nature, Olso was chosen Green Capital of Europe of 2019 and
            considered Best Destination of 2018 by Lonely Planet. Many things stir the city, such as a number of excellent restaurants
            - among them the world's most three-Michelin-starred restaurant.
             Oslo is also home to some of the world's most awarded baristas and coffee producers.
            &nbsp;&nbsp;&nbsp;This unique capital, good for trips with children and with an incredible diversity of musical attractions for adults,
            values mainly nature, modern architecture, art, cyclists and pedestrians.
            Here it is possible to walk up on the roof of the Opera House.
            </p>
        </div>

        <div class="wrapper">
            <img src="https://i.imgur.com/GCuVHy9.jpg">
            <h1>Flåm</h1>
            <p>&nbsp;&nbsp;&nbsp;A twenty-kilometer train journey takes you through the beautiful mountainous landscapes
            of the interior of the Aurland Fjord, an arm of the Sogn Fjord.
            &nbsp;&nbsp;&nbsp;Remember that the place, one of the most visited in Norway, is much less hectic in the spring, fall and even early summer.
            </p>
        </div>

        <div class="wrapper">
            <img src="https://i.imgur.com/XKungPn.jpg">
            <h1>Fiorde of Geiranger</h1>
            <p>&nbsp;&nbsp;&nbsp;The Seven Sisters and many other waterfalls run through steep walls that end in the clear blue waters of the
            fifteen-mile stretch of the Geiranger fjord. Here, you will be able to live all the tranquility of one of the main natural attractions of the world.
            &nbsp;&nbsp;&nbsp;It is even bigger in the low season, since this cultural patrimony of humanity by Unesco receives less visitors
            at that time. The surrounding area also offers many activities throughout the year.
            </p>
        </div>

        <div class="wrapper">
            <img src="https://i.imgur.com/lshpG5U.jpg">
            <h1>The Svalbard Islands</h1>
            <p>&nbsp;&nbsp;&nbsp;This huge island in the northern tip of Europe raises the experience in nature to another level.
            Here, tourists can participate in outdoor activities available year-round but little known in other places.
            At the same time, life in the region is very easy and organized.
            You can even have the same experiences as the locals, since the guides are usually from the region.
            The main town, Longyearbyen, is a small metropolis and offers good services and restaurants, as we expect to find only in the big cities.
            </p>
        </div>

        <div class="wrapper">
            <img src="https://i.imgur.com/1bPmiiB.jpg">
            <h1>Trondheim </h1>
            <p>&nbsp;&nbsp;&nbsp;Lively pedestrian streets with colorful wooden buildings lead you to the Nidaros Cathedral and the ancient warehouses on
            the banks of the Nidelva River.
            Trondheim also has many funky cafes and new restaurants willing to explore and refresh the richness of
            the typical dishes of the Trøndelag region.
            &nbsp;&nbsp;&nbsp;Food fairs and festivals help to compose the lively atmosphere of the city. Music is also a major attraction,
            especially because of the Rockheim and Ringve museums.
            </p>
        </div>

        <div class="wrapper">
            <img src="https://i.imgur.com/ToYZz7y.jpg">
            <h1>The region of Ålesund and Sunnmøre</h1>
            <p>&nbsp;&nbsp;&nbsp;This is the only place in the world where you can walk through art nouveau buildings feeling the scent of the Atlantic Ocean.
            Check out the seafood restaurants after spending the day riding kayaking, hiking, skiing or fishing.
            If you do not enjoy outdoor activities, the city is the cultural center of the region and hosts many festivals all year round.
            &nbsp;&nbsp;&nbsp;But it's not just the city that holds surprises. The entire region of Sunnmøre fjords,
            islands and steep mountains. Even from Ålesund, it is very easy to go out to visit the fjords of Geiranger and Hjørund,
            the island of Runde, the mountain range of Sunnmørsalpene and many other places.
            </p>
        </div>
    </section>
</body>
</html>