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 all 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
2 changes: 1 addition & 1 deletion assets/about/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
</svg>
</button>
<div class="theme-options">
<button class="theme-btn" data-color="red" aria-label="Red theme"></button>
<button class="theme-btn" data-color="blue" aria-label="Blue theme"></button>
<button class="theme-btn" data-color="red" aria-label="Red theme"></button>
<button class="theme-btn" data-color="yellow" aria-label="Yellow theme"></button>
<button class="theme-btn" data-color="green" aria-label="Green theme"></button>
<button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
Expand Down
38 changes: 25 additions & 13 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,12 @@
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;
}

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

.past-card-link{
.past-event-card a {
text-decoration: none;
all: unset;
color: inherit;
}

.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 @@ -64,17 +72,21 @@ body {
}

.gallery-button {
display: inline-block;
background-color: var(--accent-color);
color: #fff;
width: 60%;
border-radius: 1rem;
border: none;
color: #fff !important;
background-color: var(--primary-color);
font-size: 1rem;
padding: 0.5rem 1rem;
border-radius: 5px;
position: relative;
left: 30%;
bottom: 0;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
text-decoration: none;
transition: background-color 0.3s ease;
}

.gallery-button:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
}
background-color: var(--text-color);
}
2 changes: 1 addition & 1 deletion assets/pastevents/pastevents.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
</svg>
</button>
<div class="theme-options">
<button class="theme-btn" data-color="red" aria-label="Red theme"></button>
<button class="theme-btn" data-color="blue" aria-label="Blue theme"></button>
<button class="theme-btn" data-color="red" aria-label="Red theme"></button>
<button class="theme-btn" data-color="yellow" aria-label="Yellow theme"></button>
<button class="theme-btn" data-color="green" aria-label="Green theme"></button>
<button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
<button class="theme-btn" data-color="yellow" aria-label="Yellow theme"></button>
<button class="theme-btn" data-color="green" aria-label="Green theme"></button>
<button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
</div>
</div>
</div>
</div>
</div>
Expand Down
69 changes: 54 additions & 15 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 @@ -291,7 +312,7 @@ body {
color: #1f1f1f;
text-decoration: none;
opacity: 0;
pointer-events:none;
pointer-events: none;
transition: all .4s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
Expand All @@ -303,14 +324,14 @@ body {
.to-top.active {
bottom: 32px;
pointer-events: auto;
opacity: 1;
opacity: 1;
}

/* Events Section Css */

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

.section-title {
Expand All @@ -337,22 +358,30 @@ 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 {
padding: 1rem;
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
}

.event-details {
Expand All @@ -365,13 +394,20 @@ body {
color: var(--primary-color);
}

.event-date, .event-location {
.event-date,
.event-location {
font-size: 0.9rem;
color: var(--light-text-color);
margin-bottom: 0.5rem;
}

.event-time, .past-event-time {
.event-card a {
text-decoration: none;
color: inherit;
}

.event-time,
.past-event-time {
font-size: 0.9rem;
color: #555;
margin: 0.5rem 0;
Expand All @@ -383,19 +419,22 @@ body {
}

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

.register-button:hover {
background-color: #c0392b;
transform: translateY(-2px);
background-color: var(--text-color);
}

/* Footer Css */
Expand All @@ -407,7 +446,7 @@ body {
padding: 2rem 0;
}

/* Responsiveness */
/* Media queries for responsiveness */

@media (max-width: 768px) {
.navbar-container {
Expand Down
Loading