diff --git a/donation_website/index.html b/donation_website/index.html index 3832448..a7d31eb 100644 --- a/donation_website/index.html +++ b/donation_website/index.html @@ -427,6 +427,86 @@ +
+
+
+

June Events

+
+
+
+ +
+
+

World Blood Doner Day 2023

+
+
+ + June 14, 2023 +
+
+ + Grant Park +
+
+ +

By donating blood at this event, you will be impacting the lives of many in your community.

+
+ View events + +
+
+
+
+
+ +
+
+

Lincoln Park Community Blood Drive

+
+
+ + June 20, 2023 +
+
+ + Lincoln Park +
+
+ +

Schedule your appointment to donate at an upcoming Lincoln Park community blood drive at Lincoln Park fitness center from 1:00 pm to 3:00 pm.

+
+ View events + +
+
+
+
+
+ +
+
+

Chicago Pride Festival

+
+
+ + June 30, 2023 +
+
+ + Millennium Park +
+
+ +

Blood donation costs you nothing, but it can mean to someone in need. Join the effort and save lives at Millennium Park from 1:00 pm to 4:00pm

+
+ View events + +
+
+
+
+
+
@@ -472,12 +552,8 @@
- - - -
diff --git a/donation_website/main.js b/donation_website/main.js index b15565b..be80aab 100644 --- a/donation_website/main.js +++ b/donation_website/main.js @@ -157,7 +157,7 @@ chatInput.addEventListener("input", () => { }); chatInput.addEventListener("keydown", (x) => { - if(x.key === "Enter" && !x.shiftKey && window.innerWidth > 800){ + if(x.key === "Enter" && !x.shiftKey && window.innerWidth > 490){ x.preventDefault(); handleChat(); } diff --git a/donation_website/style.css b/donation_website/style.css index 1c91d05..d58593a 100644 --- a/donation_website/style.css +++ b/donation_website/style.css @@ -822,9 +822,10 @@ form.search i{ background-color: #DCDCDC; align-items: center; justify-content: center; + margin-top: 100px; } .partner-slider{ - height: 150px; + height: 200px; width: auto; margin: auto; overflow: hidden; @@ -837,7 +838,7 @@ form.search i{ gap: 50px; } .partner-logo img{ - margin-top: 30px; + margin-top: 50px; width: 250px; height: 100px; } @@ -849,6 +850,95 @@ form.search i{ transform: translateX(calc(-250px * 5)); } } +/*----- event -----*/ +.card-event{ + background-color: white; + box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); + margin-bottom: 30px; +} +.event-heading{ + text-align: center; +} +.event-heading h2{ + font-size: 22px; + text-shadow: 2px 2px gray; + text-transform: uppercase; + margin-bottom: 30px; +} +.event-image{ + height: 200px; + overflow: hidden; +} +.event-image img{ + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} +.event-content{ + padding: 32px; +} +.event-title{ + margin-bottom: 10px; + font-size: 22px; + font-weight: 600; +} +.event-detail, .icon-text{ + display: flex; + align-items: center; +} +.icon-event i{ + font-size: 20px; +} +.text-event{ + font-size: 14px; + color: #625a71; +} +.icon-text{ + margin-right: 15px; +} +.icon-text .icon-event{ + color: #E34234; + margin-right: 10px; +} +.event-subtitle{ + margin-top: 10px; + font-size: 16px; + color: #625a71; +} +.event-btn{ + margin-top: 10px; + display: flex; + align-items: center; + justify-content: space-between; +} +.button-event{ + padding: 5px 10px; + display: inline-block; + background-color: transparent; + border: 2px solid #FA8072; + color: #E34234; + font-weight: 600; +} +.button-event:hover{ + border: none; + background-color: #E34234; + color: white; +} +.share-button i{ + font-size: 30px; + color: #FA8072; + cursor: pointer; +} +.loading-event{ + padding: 5px 10px; + background-color: #E34234; + color: white; + font-weight: 600; + justify-content: center; + text-align: center; + align-items: center; +} @@ -857,6 +947,26 @@ form.search i{ + + + + + + + + +@media only screen and (max-width:1500px){ + .event-heading{ + margin-top: 100px; + } +} + +@media only screen and (max-width:1200px){ + .content-2-img{ + display: none; + } +} + @media only screen and (min-width:992px){ .header-main nav > ul{ display: flex; @@ -932,7 +1042,22 @@ form.search i{ margin-top: 50px; font-size: 36px; } - + /*----- event -----*/ + .card-event{ + display: flex; + height: 180px; + overflow: hidden; + } + .event-image{ + height: auto; + flex: 1; + } + .event-content{ + flex: 5; + display: flex; + flex-direction: column; + justify-content: center; + } } @media screen and (min-width:768px){