-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a51d831
commit 4c6fddc
Showing
2 changed files
with
286 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| html, body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| ul { | ||
| list-style: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| a { | ||
| text-decoration: none; | ||
| color: #000000; | ||
| } | ||
|
|
||
| header { | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| z-index: 1; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } | ||
| header .logo { | ||
| height: 50px; | ||
| margin: 5px; | ||
| } | ||
|
|
||
| header .header-nav { | ||
| margin: 5px; | ||
| } | ||
|
|
||
| header .header-nav ul li { | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| } | ||
| header .header-nav ul li button { | ||
| border: none; | ||
| background-color: rgba(1,1,1,0); | ||
| font-size: 15px; | ||
| padding: 10px; | ||
| border-radius: 20px; | ||
| } | ||
| header .header-nav ul li button:hover { | ||
| cursor: pointer; | ||
| background-color: rgba(237, 237, 237, 1); | ||
| } | ||
| header .header-nav ul li .btn-signin { | ||
| background-color: rgba(0,0,0,1); | ||
| color: white; | ||
| } | ||
| header .header-nav ul li .btn-signin:hover { | ||
| background-color: rgba(0,0,0,0.5); | ||
| } | ||
|
|
||
| main { | ||
| position: relative; | ||
| } | ||
| main .nav-menu ul { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| height: 100px; | ||
| } | ||
| main .nav-menu ul li { | ||
| width: 23%; | ||
| } | ||
| main .nav-menu ul li a { | ||
| padding: 20px; | ||
| display: block; | ||
| text-align: left; | ||
| border: solid 1px #000000; | ||
| border-radius: 15px; | ||
| transition: background-color 0.1s, color 0.1s; | ||
| } | ||
| main .nav-menu ul li a:hover { | ||
| background-color: #000000; | ||
| color: white; | ||
| } | ||
|
|
||
| .stay-lists h2, .stay-lists p, .stay-lists h3 { | ||
| margin: 0; | ||
| } | ||
| .stay-lists p { | ||
| margin-bottom: 20px; | ||
| } | ||
| .stay-lists { | ||
| padding-left: 20px; | ||
| padding-right: 20px; | ||
| } | ||
| .stay-lists div ul li { | ||
| box-sizing: border-box; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| width: 250px; | ||
| overflow: hidden; | ||
| } | ||
| .stay-lists div ul li a .stay-img { | ||
| width: 100%; | ||
| transition: opacity 0.1s; | ||
| } | ||
| .stay-lists div ul li a:hover .stay-img { | ||
| opacity: 0.7; | ||
| } | ||
| .stay-lists div ul li a:hover .stay-info h3 { | ||
| transition: opacity 0.1s, text-decoration 0.1s; | ||
| } | ||
| .stay-lists div ul li a:hover .stay-info h3 { | ||
| text-decoration: underline; | ||
| opacity: 0.7; | ||
| } | ||
|
|
||
|
|
||
| .sky, .sky2 { | ||
| width: 100%; | ||
| height: 500px; | ||
| } | ||
| .sky .airplane-img { | ||
| position: relative; | ||
| width:150px; | ||
| height: 150px; | ||
| animation: airplaneFly 2s linear 0.5s infinite normal backwards; | ||
| } | ||
| @keyframes airplaneFly { | ||
| 0% { | ||
| transform: rotate(-20deg); | ||
| left: 0; | ||
| top: 100px; | ||
| } | ||
| 25% { | ||
| /* transform: rotate(-10deg); */ | ||
| /* left: 100; */ | ||
| /* top: 50px; */ | ||
| } | ||
| 50% { | ||
| transform: rotate(0deg); | ||
| left: 200px; | ||
| top: 0px; | ||
| } | ||
| 75% { | ||
| /* transform: rotate(10deg); */ | ||
| /* left: 100; */ | ||
| /* top: 50px; */ | ||
| } | ||
| 100% { | ||
| transform: rotate(20deg); | ||
| left: 400px; | ||
| top: 100px; | ||
| } | ||
| } | ||
|
|
||
| .sky2 .airplane-img2 { | ||
| position: relative; | ||
| width:150px; | ||
| height: 150px; | ||
| } | ||
|
|
||
| .sky2 .airplane-path { | ||
| animation-name: airplane-path-keyframes; | ||
| animation-duration: 2000ms; | ||
| animation-delay: 0ms; | ||
| animation-fill-mode: forwards; | ||
| animation-timing-function: linear; | ||
| animation-iteration-count: infinite; | ||
| transform-origin: 0 0; | ||
| } | ||
| @keyframes airplane-path-keyframes { | ||
| 0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} | ||
| 16.67% {transform:translate(88.4291px, -36.6667px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} | ||
| 33.33% {transform:translate(141.5709px, -73.3333px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} | ||
| 50% {transform:translate(230px, -110px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} | ||
| 66.67% {transform:translate(332.2702px, -71.3333px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} | ||
| 83.33% {transform:translate(393.7298px, -32.6667px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} | ||
| 100% {transform:translate(496px, 6px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);} | ||
| }html::after { content: url(https://ga-beacon.appspot.com/UA-42910121-1/stylie?pixel); position: absolute; left: -999em; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <link rel="stylesheet" href="css/style.css"> | ||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
| <header> | ||
| <img class="logo" src="https://static.tacdn.com/img2/brand_refresh/Tripadvisor_lockup_horizontal_secondary_registered.svg" alt=""> | ||
| <nav class="header-nav"> | ||
| <ul> | ||
| <li> | ||
| <a href="#"> | ||
| <button type="button">Review</button> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <button type="button">Trips</button> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <button type="button">Alerts</button> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <button class="btn-signin" type="button">Sign in</button> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main role="main"> | ||
| <div class="nav-menu"> | ||
| <ul> | ||
| <li> | ||
| <a href="#">Hotels</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Vacation | ||
| Rentals</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Things to Do</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">Restaurant</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="stay-lists"> | ||
| <h2>Cool Plus stays</h2> | ||
| <p>Where Tripadvisor Plus members are staying and saving</p> | ||
|
|
||
| <div> | ||
| <ul> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="stay-img" src="../resources/bedroom1.jfif" alt=""> | ||
| <div class="stay-info"> | ||
| <h3>Palafitos Overwater Bungalows</h3> | ||
| <span>from $1,225/night</span> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="stay-img" src="../resources/bedroom2.jfif" alt=""> | ||
| <div class="stay-info"> | ||
| <h3>Palafitos Overwater Bungalows</h3> | ||
| <span>from $1,225/night</span> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#"> | ||
| <img class="stay-img" src="../resources/bedroom1.jfif" alt=""> | ||
| <div class="stay-info"> | ||
| <h3>Palafitos Overwater Bungalows</h3> | ||
| <span>from $1,225/night</span> | ||
| </div> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="sky"> | ||
| <img class="airplane-img" src="../resources/airplane-icon.png" alt=""> | ||
| </div> | ||
|
|
||
| <div class="sky2"> | ||
| <img class="airplane-img2 airplane-path" src="../resources/airplane-icon.png" alt=""> | ||
| </div> | ||
|
|
||
| </main> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| </body> | ||
| </html> |