| body { |
| font-family: Arial, sans-serif; |
| background-color: #f4f4f4; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .container { |
| width: 80%; |
| margin: auto; |
| overflow: hidden; |
| } |
|
|
| h1 { |
| text-align: center; |
| margin-top: 20px; |
| } |
|
|
| .filters { |
| text-align: center; |
| margin-bottom: 20px; |
| } |
|
|
| .events-grid { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: space-around; |
| } |
|
|
| .event-card { |
| background: white; |
| border: 1px solid #ddd; |
| border-radius: 5px; |
| margin: 10px; |
| padding: 20px; |
| width: 30%; |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
| } |
|
|
| .event-card h2 { |
| margin-top: 0; |
| } |
|
|
| .event-card p { |
| margin: 5px 0; |
| } |
|
|
| .event-card .tags { |
| margin-top: 10px; |
| } |
|
|
| .event-card .tag { |
| display: inline-block; |
| background: #007bff; |
| color: white; |
| padding: 5px 10px; |
| border-radius: 3px; |
| margin-right: 5px; |
| } |
|
|
| .event-card .time-remaining { |
| color: red; |
| font-weight: bold; |
| } |
|
|
| .modal { |
| display: none; |
| position: fixed; |
| z-index: 1; |
| left: 0; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| overflow: auto; |
| background-color: rgb(0,0,0); |
| background-color: rgba(0,0,0,0.4); |
| padding-top: 60px; |
| } |
|
|
| .modal-content { |
| background-color: #fefefe; |
| margin: 5% auto; |
| padding: 20px; |
| border: 1px solid #888; |
| width: 80%; |
| max-width: 600px; |
| border-radius: 10px; |
| } |
|
|
| .close-button { |
| color: #aaa; |
| float: right; |
| font-size: 28px; |
| font-weight: bold; |
| } |
|
|
| .close-button:hover, |
| .close-button:focus { |
| color: black; |
| text-decoration: none; |
| cursor: pointer; |
| } |
|
|
