From aab3d52b09c2f7af2b8c6e132f607d6f9980ca1e Mon Sep 17 00:00:00 2001
From: Rob Thorne <rob@torenware.com>
Date: Sun, 12 Jul 2020 18:32:50 -0700
Subject: [PATCH] Fix of issue #48: CTA section is not rendering right.
Moved the CTA div out of div.details to fix rendering issue.
---
Trillo/final/index.html | 450 ++++++++++++++++++++++------------------
1 file changed, 248 insertions(+), 202 deletions(-)
diff --git a/Trillo/final/index.html b/Trillo/final/index.html
index 9ae2b27a60..0987cd6978 100644
--- a/Trillo/final/index.html
+++ b/Trillo/final/index.html
@@ -1,221 +1,267 @@
<!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 — Your all-in-one booking app</title>
- </head>
- <body>
- <div class="container">
- <header class="header">
- <img src="img/logo.png" alt="trillo logo" class="logo">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <form action="#" class="search">
- <input type="text" class="search__input" placeholder="Search hotels">
- <button class="search__button">
- <svg class="search__icon">
- <use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
- </svg>
- </button>
- </form>
+ <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" />
- <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.jpg" alt="User photo" class="user-nav__user-photo">
- <span class="user-nav__user-name">Jonas</span>
- </div>
- </nav>
- </header>
+ <title>trillo — Your all-in-one booking app</title>
+ </head>
+ <body>
+ <div class="container">
+ <header class="header">
+ <img src="img/logo.png" alt="trillo logo" class="logo" />
+ <form action="#" class="search">
+ <input
+ type="text"
+ class="search__input"
+ placeholder="Search hotels"
+ />
+ <button class="search__button">
+ <svg class="search__icon">
+ <use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
+ </svg>
+ </button>
+ </form>
- <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>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>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>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>Tours</span>
- </a>
- </li>
- </ul>
+ <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.jpg"
+ alt="User photo"
+ class="user-nav__user-photo"
+ />
+ <span class="user-nav__user-name">Jonas</span>
+ </div>
+ </nav>
+ </header>
- <div class="legal">
- © 2017 by trillo. All rights reserved.
- </div>
- </nav>
+ <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>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>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>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>Tours</span>
+ </a>
+ </li>
+ </ul>
+ <div class="legal">
+ © 2017 by trillo. All rights reserved.
+ </div>
+ </nav>
+ <main class="hotel-view">
+ <div class="gallery">
+ <figure class="gallery__item">
+ <img
+ src="img/hotel-1.jpg"
+ alt="Photo of hotel 1"
+ class="gallery__photo"
+ />
+ </figure>
+ <figure class="gallery__item">
+ <img
+ src="img/hotel-2.jpg"
+ alt="Photo of hotel 2"
+ class="gallery__photo"
+ />
+ </figure>
+ <figure class="gallery__item">
+ <img
+ src="img/hotel-3.jpg"
+ alt="Photo of hotel 3"
+ class="gallery__photo"
+ />
+ </figure>
+ </div>
- <main class="hotel-view">
- <div class="gallery">
- <figure class="gallery__item">
- <img src="img/hotel-1.jpg" alt="Photo of hotel 1" class="gallery__photo">
- </figure>
- <figure class="gallery__item">
- <img src="img/hotel-2.jpg" alt="Photo of hotel 2" class="gallery__photo">
- </figure>
- <figure class="gallery__item">
- <img src="img/hotel-3.jpg" alt="Photo of hotel 3" class="gallery__photo">
- </figure>
- </div>
+ <div class="overview">
+ <h1 class="overview__heading">
+ Hotel Las Palmas
+ </h1>
- <div class="overview">
- <h1 class="overview__heading">
- Hotel Las Palmas
- </h1>
-
- <div class="overview__stars">
- <svg class="overview__icon-star">
- <use xlink:href="img/sprite.svg#icon-star"></use>
- </svg>
- <svg class="overview__icon-star">
- <use xlink:href="img/sprite.svg#icon-star"></use>
- </svg>
- <svg class="overview__icon-star">
- <use xlink:href="img/sprite.svg#icon-star"></use>
- </svg>
- <svg class="overview__icon-star">
- <use xlink:href="img/sprite.svg#icon-star"></use>
- </svg>
- <svg class="overview__icon-star">
- <use xlink:href="img/sprite.svg#icon-star"></use>
- </svg>
- </div>
-
- <div class="overview__location">
- <svg class="overview__icon-location">
- <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>
-
- <div class="detail">
- <div class="description">
- <p class="paragraph">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi dignissimos debitis ratione sapiente saepe. Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate.
- </p>
- <p class="paragraph">
- Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate delectus, inventore iure aliquid aliquam.
- </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 shuttle</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 all languages</li>
- <li class="list__item">Perfect for families</li>
- </ul>
- <div class="recommend">
- <p class="recommend__count">
- Lucy and 3 other friends recommend this hotel.
- </p>
- <div class="recommend__friends">
- <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>
-
- <div class="user-reviews">
- <figure class="review">
- <blockquote class="review__text">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi, totam, itaque officia ex.
- </blockquote>
- <figcaption class="review__user">
- <img src="img/user-1.jpg" alt="User 1" class="review__photo">
- <div class="review__user-box">
- <p class="review__user-name">Nick Smith</p>
- <p class="review__user-date">Feb 23rd, 2017</p>
- </div>
- <div class="review__rating">7.8</div>
- </figcaption>
- </figure>
+ <div class="overview__stars">
+ <svg class="overview__icon-star">
+ <use xlink:href="img/sprite.svg#icon-star"></use>
+ </svg>
+ <svg class="overview__icon-star">
+ <use xlink:href="img/sprite.svg#icon-star"></use>
+ </svg>
+ <svg class="overview__icon-star">
+ <use xlink:href="img/sprite.svg#icon-star"></use>
+ </svg>
+ <svg class="overview__icon-star">
+ <use xlink:href="img/sprite.svg#icon-star"></use>
+ </svg>
+ <svg class="overview__icon-star">
+ <use xlink:href="img/sprite.svg#icon-star"></use>
+ </svg>
+ </div>
- <figure class="review">
- <blockquote class="review__text">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi.
- </blockquote>
- <figcaption class="review__user">
- <img src="img/user-2.jpg" alt="User 1" class="review__photo">
- <div class="review__user-box">
- <p class="review__user-name">Mary Thomas</p>
- <p class="review__user-date">Sept 13th, 2017</p>
- </div>
- <div class="review__rating">9.3</div>
- </figcaption>
- </figure>
+ <div class="overview__location">
+ <svg class="overview__icon-location">
+ <use xlink:href="img/sprite.svg#icon-location-pin"></use>
+ </svg>
+ <button class="btn-inline">Albufeira, Portugal</button>
+ </div>
- <button class="btn-inline">Show all <span>→</span></button>
- </div>
+ <div class="overview__rating">
+ <div class="overview__rating-average">8.6</div>
+ <div class="overview__rating-count">429 votes</div>
+ </div>
+ </div>
- <div class="cta">
- <h2 class="cta__book-now">
- Good news! We have 4 free 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>
+ <div class="detail">
+ <div class="description">
+ <p class="paragraph">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi
+ nisi dignissimos debitis ratione sapiente saepe. Accusantium
+ cumque, quas, ut corporis incidunt deserunt quae architecto
+ voluptate.
+ </p>
+ <p class="paragraph">
+ Accusantium cumque, quas, ut corporis incidunt deserunt quae
+ architecto voluptate delectus, inventore iure aliquid aliquam.
+ </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 shuttle</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 all languages</li>
+ <li class="list__item">Perfect for families</li>
+ </ul>
+ <div class="recommend">
+ <p class="recommend__count">
+ Lucy and 3 other friends recommend this hotel.
+ </p>
+ <div class="recommend__friends">
+ <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>
- </div>
+ <div class="user-reviews">
+ <figure class="review">
+ <blockquote class="review__text">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
+ doloremque architecto dicta animi, totam, itaque officia ex.
+ </blockquote>
+ <figcaption class="review__user">
+ <img
+ src="img/user-1.jpg"
+ alt="User 1"
+ class="review__photo"
+ />
+ <div class="review__user-box">
+ <p class="review__user-name">Nick Smith</p>
+ <p class="review__user-date">Feb 23rd, 2017</p>
+ </div>
+ <div class="review__rating">7.8</div>
+ </figcaption>
+ </figure>
+ <figure class="review">
+ <blockquote class="review__text">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
+ doloremque architecto dicta animi.
+ </blockquote>
+ <figcaption class="review__user">
+ <img
+ src="img/user-2.jpg"
+ alt="User 1"
+ class="review__photo"
+ />
+ <div class="review__user-box">
+ <p class="review__user-name">Mary Thomas</p>
+ <p class="review__user-date">Sept 13th, 2017</p>
+ </div>
+ <div class="review__rating">9.3</div>
+ </figcaption>
+ </figure>
- </main>
+ <button class="btn-inline">Show all <span>→</span></button>
</div>
- </div>
- </body>
+ </div>
+ <div class="cta">
+ <h2 class="cta__book-now">
+ Good news! We have 4 free 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>