muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added event section

Browse source
This commit is contained in:
JSriwongsa 2023-07-25 14:27:29 -05:00
parent af1f094594
commit df6cb6a236
3 changed files with 209 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
donation_website/index.html
View file

@ -427,6 +427,86 @@
</div>
</div>
<div class="event">
<div class="container">
<div class="event-heading">
<h2>June Events</h2>
</div>
<div class="card-event">
<div class="event-image">
<img src="images/event-1.jpg" alt="">
</div>
<div class="event-content">
<h2 class="event-title">World Blood Doner Day 2023</h2>
<div class="event-detail">
<div class="icon-text">
<span class="icon-event"><i class='bx bxs-calendar'></i></span>
<span class="text-event">June 14, 2023</span>
</div>
<div class="icon-text">
<span class="icon-event"><i class='bx bx-map' ></i></span>
<span class="text-event">Grant Park</span>
</div>
</div>
<p class="event-subtitle">By donating blood at this event, you will be impacting the lives of many in your community.</p>
<div class="event-btn">
<a href="" class="button-event">View events</a>
<div class="share-button"><i class='bx bxs-share' ></i></div>
</div>
</div>
</div>
<div class="card-event">
<div class="event-image">
<img src="images/event-2.jpg" alt="">
</div>
<div class="event-content">
<h2 class="event-title">Lincoln Park Community Blood Drive</h2>
<div class="event-detail">
<div class="icon-text">
<span class="icon-event"><i class='bx bxs-calendar'></i></span>
<span class="text-event">June 20, 2023</span>
</div>
<div class="icon-text">
<span class="icon-event"><i class='bx bx-map' ></i></span>
<span class="text-event">Lincoln Park</span>
</div>
</div>
<p class="event-subtitle">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.</p>
<div class="event-btn">
<a href="" class="button-event">View events</a>
<div class="share-button"><i class='bx bxs-share' ></i></div>
</div>
</div>
</div>
<div class="card-event">
<div class="event-image">
<img src="images/event-3.jpg" alt="">
</div>
<div class="event-content">
<h2 class="event-title">Chicago Pride Festival</h2>
<div class="event-detail">
<div class="icon-text">
<span class="icon-event"><i class='bx bxs-calendar'></i></span>
<span class="text-event">June 30, 2023</span>
</div>
<div class="icon-text">
<span class="icon-event"><i class='bx bx-map' ></i></span>
<span class="text-event">Millennium Park</span>
</div>
</div>
<p class="event-subtitle">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</p>
<div class="event-btn">
<a href="" class="button-event">View events</a>
<div class="share-button"><i class='bx bxs-share' ></i></div>
</div>
</div>
</div>
</div>
</div>
<div class="partner">
<div class="container">
<div class="partner-slider">
@ -472,12 +552,8 @@
</div>
</div>
</main>
<footer></footer>
<div class="overlay" data-overlay></div>

2
donation_website/main.js
View file

@ -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();
}

131
donation_website/style.css
View file

@ -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){