index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">
        
        <title>trillo &mdash; Your all-in-one booking app</title>
    </head>
    <body>
        <div class="container">
            <header class="header">
                 <img class="logo" src="img/logo.png" alt="logo picture">
                 <form action="#" class="search">
                     <input type="text" class="search__input" placeholder="Search hotel">
                     <button class="search__button">
                         <svg class="search__icon">
                             <use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
                         </svg>
                     </button>
                 </form>

                 <nav class="user-nav">
                   
                         <div class="user-nav__icon-box">
                             <svg class="user-nav__icon">
                                 <use xlink:href="img/sprite.svg#icon-bookmark"></use>
                             </svg>
                             <span class="user-nav__notification">7</span>
                         </div>

                         <div class="user-nav__icon-box">
                            <svg class="user-nav__icon">
                                <use xlink:href="img/sprite.svg#icon-chat"></use>
                            </svg>
                            <span class="user-nav__notification">13</span>
                        </div>

                    <div class="user-nav__user">
                     <img src="img/user-niki.jpg" alt="" class="user-nav__user-photo">
                     <span class="user-nav__user-name">Nikola Ekmedzic</span>
                    </div>

                 </nav>
            </header>
            <div class="content">


                <nav class="sidebar">
                    <ul class="side-nav">
                        <li class="side-nav__item side-nav__item--active" >
                            <a href="#" class="side-nav__link">
                                <svg class="side-nav__icon">
                                    <use xlink:href="img/sprite.svg#icon-home"></use>
                                </svg>
                          <span class="">Hotel</span>
                            </a>
                        </li>
                        <li class="side-nav__item">
                                <a href="#" class="side-nav__link">
                                    <svg class="side-nav__icon">
                                        <use xlink:href="img/sprite.svg#icon-aircraft-take-off"></use>
                                    </svg>
                              <span class="">Flight</span>
                                </a>
                            </li>
                            <li class="side-nav__item">
                                    <a href="#" class="side-nav__link">
                                        <svg class="side-nav__icon">
                                            <use xlink:href="img/sprite.svg#icon-key"></use>
                                        </svg>
                                  <span class="">Car rental</span>
                                    </a>
                                </li>
                                <li class="side-nav__item">
                                        <a href="#" class="side-nav__link">
                                            <svg class="side-nav__icon">
                                                <use xlink:href="img/sprite.svg#icon-map
                                                "></use>
                                            </svg>
                                      <span class="">Tours</span>
                                        </a>
                                    </li>
                    </ul>
                    <div class="legal">
     &copy; 2019 by Trillo .All rights deserved. Created by <a href="#">Nikola Ekmedzic</a> as a course project
      , designed by Jonas Schmedtmann  
                    </div>
                </nav>


                <main class="hotel-view">
                   
                   <div class="gallery">

                    <figure class="gallery__item">
                         <img src="./img/hotel-1.jpg" alt="hotel image 1" class="gallery__photo">
                     </figure>
                     <figure class="gallery__item">
                            <img src="./img/hotel-2.jpg" alt="hotel image 2" class="gallery__photo">
                        </figure>
                        <figure class="gallery__item">
                                <img src="./img/hotel-3.jpg" alt="hotel image 3" class="gallery__photo">
                            </figure>
                   </div>

                   <div class="overview">

                     <h1 class="overview__header">Hotel Las Palmas</h1>

                     <div class="overview__stars">
                         <svg class="overview__star">
                         <use xlink:href="./img/sprite.svg#icon-star"></use>
                         </svg>
                         <svg class="overview__star">
                   <use xlink:href="./img/sprite.svg#icon-star"></use>
                    </svg>
                   <svg class="overview__star">
                  <use xlink:href="./img/sprite.svg#icon-star"></use>
                             </svg>
                        <svg class="overview__star">
                 <use xlink:href="./img/sprite.svg#icon-star"></use>
                               </svg>
                         <svg class="overview__star">
                             <use xlink:href="./img/sprite.svg#icon-star"></use>
                                     </svg>                                 
                     </div>
                
                     <div class="overview__location">
                            <svg class="overview__location-star">
                            <use xlink:href="./img/sprite.svg#icon-location-pin"></use>
                            </svg>
                      <button class="btn-inline">Albufeira, Portugal</button>      
                     </div>

                     <div class="overview__rating">
                         <div class="overview__rating-average">
                             8.6
                         </div>
                         <div class="overview__rating-count">
                             429 votes
                         </div>
                     </div>

                   </div>    

                   <!-- donji deo opis i review -->
                   <div class="detail">
                        
                   <div class="description">
                      <p class="paraf">
             The Las Palmas Hotel is a modern, elegant 5-star hotel overlooking the sea, perfect for a romantic,
              charming vacation.While you enjoy a cocktail by the swimming pool on the rooftop terrace,
               you will be stunned by the breathtaking view.
                      </p>
                      <p class="paraf">
                            Imagine waking up to the sound of waves, or having a drink under one of
                             the most beautiful sunsets in Portugal. 
                         </p>
                         <ul class="list">
                             <li class="list-item">Close to the beach</li>
                             <li class="list-item">Breakfast included</li>
                             <li class="list-item">Free airport shutle</li>
                             <li class="list-item">Free WiFi in all rooms</li>
                             <li class="list-item">Air conditioning and heating</li>
                             <li class="list-item">Pets allowed</li>
                             <li class="list-item">We speak multiple languages</li>
                             <li class="list-item">Ideal for families</li>
                         </ul>
                         <div class="recommend">
                             <p class="recommend__count">
                                 Lucy and 3 others recommend this hotel
                             </p>
                             <div class="recommend__friend">
                                 <img src="img/user-3.jpg" alt="friend 1" class="recommend__photo">
                                 <img src="img/user-4.jpg" alt="friend 2" class="recommend__photo">
                                 <img src="img/user-5.jpg" alt="friend 3" class="recommend__photo">
                                 <img src="img/user-6.jpg" alt="friend 4" class="recommend__photo">
                             </div>
                         </div>
                   </div>

                   <!-- User reviews -->
                   <div class="user-reviews">
                      
                    <figure class="review">
                         
                       <blockquote class="review__text">
                        Nullam velit massa, bibendum eget posuere non, dignissim non augue.
                         Vivamus posuere, turpis sed rhoncus molestie, ex nibh suscipit massa,
                          eget aliquam libero lacus nec augue.
                       </blockquote>

                        <fiqcaption class="review__user">
                              
                            <img src="img/user-1.jpg" alt="user1 photo" class="review__photo">

                            <div class="review__user-box">
                                <p class="review-username">Nick Smith</p>
                                <p class="review__user-date">Feb 23rd,2019</p>

                            </div>

                            <div class="review__rate">7.8</div>

                        </fiqcaption>

                            
                    </figure>

                     <!--Second one-->
                   <div class="user-reviews">
                      
                    <figure class="review">
                         
                       <blockquote class="review__text">
                        Mauris dignissim augue sit amet bibendum varius. Nullam cursus
                         dapibus diam. Nam condimentum porta vulputate. Vestibulum et pulvinar lectus,
                          et viverra magna.
                       </blockquote>

                        <fiqcaption class="review__user">
                              
                            <img src="img/user-2.jpg" alt="user2 photo" class="review__photo">

                            <div class="review__user-box">
                                <p class="review-username">Mary Thomas</p>
                                <p class="review__user-date">Sept 25rd,2019</p>

                            </div>

                            <div class="review__rate">9.3</div>

                        </fiqcaption>

                           
                    </figure>

                    <button class="btn-inline" id="annoy">Show all <span>&rarr;</span></button>

                   </div>

                  
                   </div>

                  
                  <!-- Review end-->

                   </div>
                    <!--  kraj sekcije-->
                    <div class="cta">
                        <h2 class="cta__book">Good news! We have 4 rooms for your selected dates!</h2>
              <button class="btn">
                  <span class="btn__visible">Book now</span>
                  <span class="btn__invisible">Only 4 rooms left</span>

              </button>
                    </div>
                </main>
            </div>
        </div>
    </body>
</html>