Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/abdunader/Charity-Organization
Browse files Browse the repository at this point in the history
  • Loading branch information
@abdunader
abdunader committed Nov 29, 2024
2 parents bc362b2 + 5d4aef6 commit 987425d
Show file tree
Hide file tree
Showing 13 changed files with 449 additions and 3 deletions.
114 changes: 114 additions & 0 deletions CSS/event.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@

.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.item-container {
position: relative;
margin: 24px;
width: 320px;
height: 570px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
.img-container,
.body-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-container img {
width: 100%;
}
.body-container {
position: relative;
}
.overlay {
position: relative;
width: 100%;
height: 400px;
background-color: rgba(24, 83, 122, 0.6);
opacity: 0;
transition: height linear 0.4s, opacity linear 0.2s;
}
.item-container:hover .overlay {
opacity: 1;
height: 150px;
}
.event-info {
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px;
}
.title,
.price {
color: #18537a;
font-size: 1.5em;
font-weight: bold;
letter-spacing: 1px;
margin: 12px;
}
.info {
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.separator {
width: 20%;
height: 6px;
background-color: #17537a;
margin-bottom: 16px;
}
.additional-info {
border-top: 1px solid #bbb;
margin-top: 12px;
padding: 28px;
padding-bottom: 0;
}
.additional-info .info {
font-size: 0.9em;
margin-bottom: 20px;
text-align: center;
}
.info i {
color: #18537a;
font-size: 1.1em;
margin-right: 4px;
}
.info span {
color: #18537a;
font-weight: bolder;
}
.action {
color: #fff;
border: 3px solid #fff;
background-color: transparent;
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 60%;
outline: none;
cursor: pointer;
padding: 12px;
text-transform: uppercase;
font-size: 1.3em;
font-weight: bold;
letter-spacing: 2px;
transition: background-color 0.4s, top 0.4s;
}
.item-container:hover .action {
top: 50px;
}
.action:hover {
background-color: rgba(255, 255, 255, 0.2);
}
114 changes: 114 additions & 0 deletions CSS/project.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@

.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.item-container {
position: relative;
margin: 24px;
width: 320px;
height: 570px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
.img-container,
.body-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.img-container img {
width: 100%;
}
.body-container {
position: relative;
}
.overlay {
position: relative;
width: 100%;
height: 400px;
background-color: rgba(24, 83, 122, 0.6);
opacity: 0;
transition: height linear 0.4s, opacity linear 0.2s;
}
.item-container:hover .overlay {
opacity: 1;
height: 150px;
}
.event-info {
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px;
}
.title,
.price {
color: #18537a;
font-size: 1.5em;
font-weight: bold;
letter-spacing: 1px;
margin: 12px;
}
.info {
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.separator {
width: 20%;
height: 6px;
background-color: #17537a;
margin-bottom: 16px;
}
.additional-info {
border-top: 1px solid #bbb;
margin-top: 12px;
padding: 28px;
padding-bottom: 0;
}
.additional-info .info {
font-size: 0.9em;
margin-bottom: 20px;
text-align: center;
}
.info i {
color: #18537a;
font-size: 1.1em;
margin-right: 4px;
}
.info span {
color: #18537a;
font-weight: bolder;
}
.action {
color: #fff;
border: 3px solid #fff;
background-color: transparent;
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 60%;
outline: none;
cursor: pointer;
padding: 12px;
text-transform: uppercase;
font-size: 1.3em;
font-weight: bold;
letter-spacing: 2px;
transition: background-color 0.4s, top 0.4s;
}
.item-container:hover .action {
top: 50px;
}
.action:hover {
background-color: rgba(255, 255, 255, 0.2);
}
26 changes: 26 additions & 0 deletions CSS/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
padding: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
}

:root {
--body: #fff;
Expand Down Expand Up @@ -290,3 +293,26 @@ footer {
padding: 1rem;
}
}
/* Add responsiveness */
@media (max-width: 768px) {
.formname {
flex-direction: column;
}
}
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.item-container {
position: relative;
margin: 24px;
width: 320px;
height: 570px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 30px 5px rgb(0, 0, 0, 0.15);
cursor: pointer;
}
Binary file added Media/blood.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Media/clothes.avif
View file
Binary file not shown.
Binary file added Media/cover.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Media/donate phpto.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Media/money.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Media/mosque.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Media/treatment.avif
View file
Binary file not shown.
Binary file added Media/water.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
111 changes: 109 additions & 2 deletions events.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Char-E-T - Making a Difference</title>
<!-- Main css for header and footer and colors -->
<link rel="stylesheet" href="./CSS/style.css" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="./CSS/event.css"
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
Expand All @@ -15,7 +18,111 @@
<our-header></our-header>

<main>
<!-- Your main content goes here -->
<div class="container">
<div class="item-container">
<div class="img-container">
<img src="./Media/donate phpto.jpg" alt="Event image" />
</div>

<div class="body-container">
<div class="overlay"></div>

<div class="event-info">
<p class="title">Food donation</p>
<div class="separator"></div>
<p class="info">Cairo</p>
<p class="price">Free</p>

<div class="additional-info">
<p class="info description">
Donate A Meal' is a charitable trust striving to help more
than 500 kids across its three shelters. We are dedicated to
our mission to create a family where the kids feel safe and
find growth opportunities.
</p>
</div>
</div>
</div>
</div>

<div class="item-container">
<div class="img-container">
<img src="./Media/money.jpg" alt="Event image" />
</div>

<div class="body-container">
<div class="overlay"></div>

<div class="event-info">
<p class="title">Fundraising event</p>
<div class="separator"></div>
<p class="info">Alexandria</p>
<p class="price">Free</p>
<div class="additional-info">
<p class="info description">
Fundraising is not just about collecting money; it is about
creating opportunities for individuals and communities to come
together and support a cause they believe in. These events
serve as a platform for building relationships, raising
awareness, and fostering a sense of community.
</p>
</div>
</div>
</div>
</div>

<div class="item-container">
<div class="img-container">
<img src="./Media/clothes.avif" alt="Event image" />
</div>
<div class="body-container">
<div class="overlay"></div>
<div class="event-info">
<p class="title">clothes donation event</p>
<div class="separator"></div>
<p class="info">Luxor</p>
<p class="price">Free</p>
<div class="additional-info">
<p class="info description">
Clothing donation is a cornerstone of sustainable living,
offering a practical solution to the problem of consumer
waste. By donating your unwanted garments, you're not only
decluttering responsibly but also promoting the reuse and
recycling of textiles.
</p>
</div>
</div>
</div>
</div>

<div class="item-container">
<div class="img-container">
<img src="./Media/blood.jpeg" alt="Event image" />
</div>

<div class="body-container">
<div class="overlay"></div>

<div class="event-info">
<p class="title">blood donation event</p>
<div class="separator"></div>
<p class="info">Giza</p>
<p class="price">Free</p>

<div class="additional-info">
<p class="info">
Most of this is used to help people with medical conditions
that require blood or blood products regularly. For example,
34% of donated red blood cells are used to help treat people
with cancer and blood diseases.
</p>

<p class="info description"></p>
</div>
</div>
</div>
</div>
</div>
</main>

<!-- The footer -->
Expand Down
Loading

0 comments on commit 987425d

Please sign in to comment.