Skip to content

Enhanced the website design and user experience #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Dec 28, 2024
Merged

Enhanced the website design and user experience #22

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ec45a7b
nav link underline effect added
wildcraft958 Dec 22, 2024
baa4ed7
background preparation
wildcraft958 Dec 22, 2024
1cf701f
card design added
wildcraft958 Dec 22, 2024
c55d42a
card design added on main page
wildcraft958 Dec 22, 2024
73114a9
Merge branch 'main' into ux-webdesign
Rakesh9100 Dec 23, 2024
dd8bcfb
register button fix
wildcraft958 Dec 27, 2024
ebabfa2
Added changes
Rakesh9100 Dec 28, 2024
647697b
Few updates
Rakesh9100 Dec 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 34 additions & 2 deletions assets/pastevents/pastevents.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
background-color: rgba(243, 238, 238, 0.616);
color: var(--text-color);
}

.past-events-section {
padding: 6rem 0;
background-color: #fff;
/* background-color: #fff; */
}

.past-event-card {
Expand All @@ -22,21 +23,30 @@ body {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
margin-bottom: 2rem;
border: 2px solid #c3c6ce;
transition: 0.5s ease-out;
position: relative;
}

.past-event-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
border-color: var(--primary-color);
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.past-event-image {
position: relative;
padding: 1rem;
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px;
}

.past-event-details {
padding: 1.5rem;
padding-top: 0;
}

.past-event-title {
Expand All @@ -57,7 +67,7 @@ body {
margin-bottom: 1rem;
}

.gallery-button {
/* .gallery-button {
display: inline-block;
background-color: var(--accent-color);
color: #fff;
Expand All @@ -71,4 +81,26 @@ body {
.gallery-button:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
} */
.gallery-button {
transform: translate(-50%, 125%);
width: 60%;
border-radius: 1rem;
border: none;
background-color: var(--accent-color);
color: #fff;
font-size: 1rem;
padding: .5rem 1rem;
position: relative;
left: 30%;
bottom: 0;
opacity: 0;
transition: 0.3s ease-out;
text-decoration: none;
}

.past-event-card:hover .gallery-button {
transform: translate(-50%, 50%);
opacity: 1;
background-color: var(--accent-color);
}
57 changes: 47 additions & 10 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,27 @@ body {
color: var(--primary-color);
}

.nav-links a {
text-decoration: none;
position: relative;
color: #000;
}

.nav-links a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease-in-out;
}

.nav-links a:hover::after {
width: 100%; /* Animate width to slide the underline */
}

/* Theme Switcher Css */

.theme-switcher {
Expand Down Expand Up @@ -310,7 +331,7 @@ body {

.events {
padding: 6rem 0;
background-color: #fff;
background-color:rgba(243, 238, 238, 0.616);
}

.section-title {
Expand All @@ -337,22 +358,31 @@ body {
}

.event-card {
background-color: #fff;
background-color: #f9f9f9;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
margin-bottom: 2rem;
border: 2px solid #c3c6ce;
transition: 0.5s ease-out;
position: relative;
}

.event-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
border-color: var(--primary-color);
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.event-image {
/* position: relative; */
padding: 1rem;
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
}

.event-details {
Expand Down Expand Up @@ -383,19 +413,26 @@ body {
}

.register-button {
display: inline-block;
transform: translate(-50%, 125%);
width: 60%;
border-radius: 1rem;
border: none;
background-color: var(--accent-color);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 1rem;
padding: .5rem 1rem;
position: relative;
left: 30%;
bottom: 0;
opacity: 0;
transition: 0.3s ease-out;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}

.register-button:hover {
background-color: #c0392b;
transform: translateY(-2px);
.past-event-card:hover .register-button {
transform: translate(-50%, 50%);
opacity: 1;
background-color: var(--accent-color);
}

/* Footer Css */
Expand Down
Loading