Created
March 25, 2019 11:32
-
-
Save MurhafSousli/db8b6c9d45b5b258c1ff3623805762f8 to your computer and use it in GitHub Desktop.
kasim-murhaf
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Reputation Ranking</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css" /> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="page-container"> | |
| <div class="header"></div> | |
| <div class="ranking"> | |
| <h1>reputation ranking</h1> | |
| <p>The Reputation Ranking is an annually-published list showcasing the cities which have the best hotel | |
| reputations - either worldwide or in specific countries. Reputation Ranking releases can also be sent | |
| out | |
| during the summer and winter months with a sole focus on holiday destinations.</p> | |
| </div> | |
| <div class="photos"> | |
| <div class="column colum1"> | |
| <div class="img-wrapper italy"> | |
| </div> | |
| </div> | |
| <div class="column colum2"> | |
| <div class="img-wrapper germany"> | |
| </div> | |
| <div class="img-wrapper poland"> | |
| </div> | |
| </div> | |
| <div class="column colum3"> | |
| <div class="img-wrapper croatia"> | |
| </div> | |
| <div class="img-wrapper cambodia"> | |
| </div> | |
| <div class="img-wrapper poland2"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hpi"> | |
| <div class="hpi-header"> | |
| <div class="hpi-icon"></div> | |
| <img src="icn_trv_icon_coloured.svg" alt="icn_trv_icon_coloured"> | |
| <h1>HPI (Hotel Price Index)</h1> | |
| </div> | |
| <p>The trivago Hotel Price Index is released monthly and forecasts | |
| the average hotel prices of major European, North American, | |
| South American and Asian cities. It shows the average overnight | |
| accommodation prices based on a double standard room.</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| .page-container { | |
| } | |
| .header { | |
| width: 100%; | |
| height: 25px; | |
| border-radius: 3px; | |
| background-color: #206db6; | |
| } | |
| /* Reputation Ranking block which is upper the photos*/ | |
| .ranking { | |
| width: 70%; | |
| margin: 50px auto; | |
| border-left: 2px solid #818181; | |
| padding: 20px; | |
| padding-top: 0px; | |
| margin-bottom: 0px; | |
| } | |
| .ranking h1 { | |
| text-transform: capitalize; | |
| margin-top: 0px; | |
| color: #2778b9; | |
| font-family: "Courier New", Courier, monospace; | |
| } | |
| .ranking p { | |
| color: #818181; | |
| } | |
| /*the container which contain all the photos*/ | |
| .photos { | |
| width: 100%; | |
| height: 400px; | |
| display: flex; | |
| } | |
| .column { | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /*the container which contain the image1 */ | |
| .colum1 { | |
| flex: 6; | |
| margin-right: 5px; | |
| } | |
| /* the container which contain the image2 +image3 */ | |
| .colum2 { | |
| flex: 4; | |
| margin-right: 5px; | |
| } | |
| /* the container which contain imag4 +image5 + image6 */ | |
| .colum3 { | |
| flex: 2; | |
| } | |
| .italy { | |
| background: url("./italy.jpg") no-repeat; | |
| } | |
| .germany { | |
| background: url("germany.jpg") no-repeat; | |
| } | |
| .poland { | |
| background: url("poland.jpg") no-repeat; | |
| } | |
| .croatia { | |
| background: url("croatia.jpg") no-repeat; | |
| } | |
| .cambodia { | |
| background: url("cambodia.jpg") no-repeat; | |
| } | |
| .poland2 { | |
| background: url("poland2.jpg") no-repeat; | |
| } | |
| .img-wrapper { | |
| background-size: cover; | |
| background-position: center center; | |
| flex: 1; | |
| position: relative; | |
| } | |
| .img-wrapper img { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| object-fit: cover; | |
| } | |
| /* defining the width and height of the images to prevent expanding in the containers*/ | |
| /* .photos .colum1 #image1 { | |
| width: 100%; | |
| height: 100%; | |
| max-width: 100%; | |
| max-height: 100%; | |
| } | |
| .photos .colum2 #image2 { | |
| width: 100%; | |
| height: 50%; | |
| max-width: 100%; | |
| max-height: 50%; | |
| } | |
| .photos .colum2 #image3 { | |
| width: 100%; | |
| height: 50%; | |
| max-width: 100%; | |
| max-height: 50%; | |
| } | |
| .photos .colum3 #image4 { | |
| width: 100%; | |
| height: 33%; | |
| max-width: 100%; | |
| max-height: 33%; | |
| } | |
| .photos .colum3 #image5 { | |
| width: 100%; | |
| height: 33%; | |
| max-width: 100%; | |
| max-height: 33%; | |
| } | |
| .photos .colum3 #image6 { | |
| width: 100%; | |
| height: 33%; | |
| max-width: 100%; | |
| max-height: 33%; | |
| } */ | |
| .hpi { | |
| width: 40%; | |
| margin: auto; | |
| border-left: 2px solid #818181; | |
| padding: 40px; | |
| } | |
| .hpi .hpi-header { | |
| } | |
| .hpi-header { | |
| display: flex; | |
| } | |
| .hpi .hpi-header h1 { | |
| margin-top: 0px; | |
| margin-bottom: 0px; | |
| margin-left: 10px; | |
| color: #2778b9; | |
| font-family: "Courier New", Courier, monospace; | |
| } | |
| .hpi p { | |
| color: #818181; | |
| } | |
| /* prevent the text enter to the next line when the screen become smaller*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment