diff --git a/css/components.css b/css/components.css index e69de29..581d837 100644 --- a/css/components.css +++ b/css/components.css @@ -0,0 +1,55 @@ +/* ========================= + EVENT CARD COMPONENT +========================= */ + +.event-card { + background: white; + border: 1px solid #ddd; + border-radius: 10px; + padding: 1rem; + + display: flex; + flex-direction: column; + gap: 0.3rem; + + transition: transform 0.2s, box-shadow 0.2s; + } + + /* Hover only on devices that support it */ + @media (hover: hover) { + .event-card:hover { + transform: translateY(-3px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } + } + + /* Title */ + .event-card__title { + font-size: 1.1rem; + margin-bottom: 0.5rem; + } + + /* Date */ + .event-card__date { + color: gray; + font-size: 0.9rem; + } + + /* Venue */ + .event-card__venue { + font-size: 0.9rem; + } + + /* ========================= + FORM ELEMENT IMPROVEMENTS + ========================= */ + + button, + input { + min-height: 44px; + } + + button:focus, + input:focus { + outline: 2px solid #007bff; + } \ No newline at end of file diff --git a/css/main.css b/css/main.css index 008ea5f..f5a77c2 100644 --- a/css/main.css +++ b/css/main.css @@ -1,14 +1,119 @@ -.event-card { - border: 1px solid #ddd; - padding: 1rem; - margin-bottom: 1rem; - border-radius: 8px; +/* ========================= + RESET & BASE +========================= */ + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #f9f9f9; + color: #333; +} + +img { + max-width: 100%; + height: auto; +} + +/* ========================= + GLOBAL LAYOUT +========================= */ + +main { + padding: 1rem; +} + +section { + margin-bottom: 2rem; +} + +/* ========================= + HEADER +========================= */ + +.site-header { + background-color: #3dd0a9; + color: #222; /* fixed contrast */ + padding: 1rem; + text-align: center; +} + +/* ========================= + SEARCH SECTION +========================= */ + +.event-search h2 { + margin-bottom: 0.5rem; +} + +.search__controls { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +/* ========================= + EVENTS LIST +========================= */ + +.events h2 { + margin-bottom: 1rem; +} + +#event-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +/* ========================= + FOOTER +========================= */ + +footer { + text-align: center; + padding: 1rem; + margin-top: 2rem; + font-size: 0.9rem; + color: #777; +} + +/* ========================= + TABLET (>=768px) +========================= */ + +@media (min-width: 768px) { + + .search__controls { + flex-direction: row; } - - .event-card__title { - font-size: 1.2rem; + + .search__controls input { + flex: 1; } - - .event-card__date { - color: gray; - } \ No newline at end of file + + .search__controls button { + width: 150px; + } + + #event-list { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + +} + +/* ========================= + DESKTOP (>=1024px) +========================= */ + +@media (min-width: 1024px) { + + #event-list { + grid-template-columns: repeat(3, 1fr); + } + +} \ No newline at end of file diff --git a/index.html b/index.html index 6e9633c..1657ea1 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,14 @@ Encore – Discover Events - - - - + + + + + @@ -32,13 +33,11 @@
  • Events
    • - -
    @@ -47,7 +46,7 @@

    Find Events

    -
    +
    -

    Upcoming Events

    -
    +

    Search for events to begin.

    @@ -81,15 +79,11 @@
    - -