├── css ├── .gitkeep └── app.css ├── img └── .gitkeep ├── js └── .gitkeep ├── .gitignore ├── README.md ├── .gitattributes └── index.html /css/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .eslintrc.json 3 | .htmlhintrc 4 | .stylelintrc 5 | .editorconfig 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Travel Destinations 2 | 3 | A simple app to keep track of destinations I'd like to visit. 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | # https://help.github.com/articles/dealing-with-line-endings/ 3 | * text=auto 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Travels 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Belize

15 |
16 | 17 |
18 |

Barcelona

19 |
20 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /css/app.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | height: 100%; 4 | } 5 | 6 | *, 7 | *::before, 8 | *::after { 9 | box-sizing: inherit; 10 | } 11 | 12 | body { 13 | display: flex; 14 | margin: 0; 15 | height: 100%; 16 | } 17 | 18 | .container { 19 | margin: auto; 20 | padding: 1em; 21 | width: 80%; 22 | } 23 | 24 | .destination-container { 25 | display: flex; 26 | flex-flow: wrap; 27 | justify-content: center; 28 | } 29 | 30 | .destination { 31 | background: #03a9f4; 32 | box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 0.4); 33 | color: white; 34 | margin: 0.5em; 35 | min-height: 200px; 36 | flex: 0 1 200px; 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | text-align: center; 41 | } 42 | 43 | .destination:hover h2 { 44 | transform: rotate(0deg); 45 | } 46 | 47 | h2 { 48 | margin: 0; 49 | transform: rotate(-45deg); 50 | transition: transform 0.5s; 51 | text-shadow: 0 0 5px #01579b; 52 | } 53 | 54 | #belize { 55 | background-color: #4dd0e1; 56 | } 57 | 58 | #barcelona { 59 | background-color: #800000; 60 | } 61 | --------------------------------------------------------------------------------