├── README.md ├── index.html └── app.css /README.md: -------------------------------------------------------------------------------- 1 | # Travel Destinations 2 | 3 | A simple app to keep track of destinations I'd like to visit. -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Travels 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Florida

15 |
16 | 17 |
18 |

Paris

19 |
20 |
21 |
22 | 23 | -------------------------------------------------------------------------------- /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 | #florida { 55 | background-color: #03a9f4; 56 | } 57 | 58 | #paris { 59 | background-color: #d32f2f; 60 | } 61 | --------------------------------------------------------------------------------