Skip to content

Commit 45a0139

Browse files
deepeshahlawatdeepeshahlawat
committed
Enhanced the About page
1 parent 75a11f8 commit 45a0139

File tree

4 files changed

+108
-103
lines changed

4 files changed

+108
-103
lines changed

‎assets/about/about.css‎

Lines changed: 39 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -16,74 +16,55 @@ body {
1616

1717
/* Dark mode Css*/
1818

19-
body.dark-mode .about-text {
20-
color: #000000;
19+
body.dark-mode .content-section {
20+
background-color: #000000;
2121
}
2222

2323
body.dark-mode .feature-item {
2424
background-color: #282828;
2525
color: #f4f4f4;
2626
}
2727

28-
.about-section {
29-
width: 100%;
28+
.about-container {
3029
display: flex;
3130
flex-wrap: wrap;
32-
min-height: 100vh;
33-
align-items: center;
34-
padding: 6rem 0 4rem;
3531
justify-content: center;
36-
}
37-
38-
.about-content {
39-
flex: 1;
40-
padding: 2rem;
41-
display: flex;
42-
text-align: center;
4332
align-items: center;
44-
border-radius: 10px;
45-
flex-direction: column;
46-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
47-
background: linear-gradient(135deg, #4a90e2, #e74c3c);
33+
padding: 65px 20px 20px 20px;
34+
min-height: calc(100vh - 120px);
35+
gap: 100px;
4836
}
4937

50-
.image {
51-
flex: 1;
52-
overflow: hidden;
53-
border-radius: 10px;
54-
margin-bottom: 10px;
38+
.illustration-section img {
39+
max-width: 100%;
40+
width: 600px;
41+
height: auto;
5542
}
5643

57-
.image img {
58-
width: 70%;
59-
border-radius: 10px;
60-
transition: transform 0.3s ease;
44+
.content-section {
45+
flex: 1;
46+
max-width: 500px;
47+
padding: 20px;
48+
text-align: center;
49+
background-color: #ffffff;
50+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
51+
border-radius: 8px;
6152
}
6253

63-
.image img:hover {
64-
transform: scale(1.02);
54+
.content-section p {
55+
font-size: 1.1em;
56+
margin-bottom: 20px;
6557
}
6658

67-
.about-text {
68-
flex: 1;
69-
padding: 1.5rem;
70-
line-height: 1.8;
71-
text-align: left;
72-
font-size: 1.1rem;
73-
max-width: 1000px;
74-
text-align: center;
75-
border-radius: 10px;
76-
color: var(--text-color);
77-
background-color: #ffffff;
78-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
79-
transition: transform 0.3s ease, box-shadow 0.3s ease;
59+
.section-title {
60+
margin-bottom: 2rem !important;
8061
}
8162

8263
.feature-grid {
8364
display: grid;
8465
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
8566
gap: 2rem;
86-
margin-top: 3rem;
67+
padding: 3rem 3rem;
8768
width: 100%;
8869
}
8970

@@ -119,16 +100,24 @@ body.dark-mode .feature-item {
119100
}
120101

121102
@media (max-width: 768px) {
122-
.about-content {
123-
padding: 1.5rem;
103+
.feature-grid {
104+
grid-template-columns: 1fr;
105+
gap: 1.5rem;
106+
}
107+
.about-container {
108+
gap: 10px;
109+
}
110+
.about-container{
111+
padding-top: 85px;
124112
}
125113

126-
.about-text {
127-
font-size: 1rem;
114+
.content-section {
115+
max-width: 100%;
128116
}
117+
}
129118

130-
.feature-grid {
131-
grid-template-columns: 1fr;
132-
gap: 1.5rem;
119+
@media (max-width: 480px) {
120+
.content-section p {
121+
font-size: 0.9em;
133122
}
134123
}

‎assets/about/about.html‎

Lines changed: 69 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
<link rel="stylesheet" href="../../style.css">
1010
<link rel="stylesheet" href="../customcursor.css">
1111
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
12-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
12+
<link rel="stylesheet"
13+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
1314
<script src="https://kit.fontawesome.com/4cf6385dfa.js" crossorigin="anonymous"></script>
1415
<title>Eventica | About</title>
1516
</head>
@@ -56,15 +57,19 @@
5657
<li><a href="../../index.html"><i class="fas fa-house"></i> Home</a></li>
5758
<li><a href="#"><i class="fas fa-circle-info"></i> About</a></li>
5859
<li><a href="../../index.html#events"><i class="fas fa-calendar-alt"></i> Upcoming Events</a></li>
59-
<li><a href="../pastevents/pastevents.html"><i class="fas fa-calendar-check"></i> Past Events</a></li>
60-
<li><a href="../contributors/contributor.html"><i class="fa-solid fa-users"></i> Contributors</a></li>
60+
<li><a href="../pastevents/pastevents.html"><i class="fas fa-calendar-check"></i> Past Events</a>
61+
</li>
62+
<li><a href="../contributors/contributor.html"><i class="fa-solid fa-users"></i> Contributors</a>
63+
</li>
6164
<li><a href="../contact/contact.html"><i class="fas fa-phone"></i> Contact</a></li>
6265
</ul>
6366
<div class="theme-switcher">
6467
<button id="theme-toggle" aria-label="Change theme color">
65-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
66-
<circle cx="12" cy="12" r="5"/>
67-
<path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4">
68+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
69+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
70+
<circle cx="12" cy="12" r="5" />
71+
<path
72+
d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4">
6873
</svg>
6974
</button>
7075
<div class="theme-options">
@@ -86,40 +91,36 @@
8691

8792
<!-- About main section -->
8893
<main>
89-
<section class="about-section">
90-
<div class="container">
91-
<div class="about-content">
92-
<h1 class="section-title">About Us</h1>
93-
<div class="image">
94-
<img src="../images/about.jpeg" alt="Bangalore Cityscape">
95-
</div>
96-
<p class="about-text">
97-
Welcome to Eventica, an ultimate guide to the dynamic and diverse events in Bangalore. As the heart of India's tech and cultural hub, Eventica is dedicated to bridging the gap between event organizers and eager participants, creating a vibrant community centered around knowledge-sharing, cultural exchange, and entertainment.
98-
</p><br>
99-
<p class="about-text">
100-
From innovative tech conferences to insightful and engaging meetups, Eventica covers it all. We believe in the power of events to educate, inspire, and unite people, fostering unforgettable experiences and meaningful connections along the way.
101-
</p>
94+
<div class="about-container">
95+
<div class="content-section">
96+
<h1 class="section-title">ABOUT US</h1>
97+
<p>Welcome to Eventica, an ultimate guide to the dynamic and diverse events in Bangalore. As the heart of India's tech and cultural hub, Eventica is dedicated to bridging the gap between event organizers and eager participants, creating a vibrant community centered around knowledge-sharing, cultural exchange, and entertainment.</p>
10298

103-
<div class="feature-grid">
104-
<div class="feature-item">
105-
<div class="feature-icon">🎭</div>
106-
<h3 class="feature-title">Diverse Events</h3>
107-
<p class="feature-description">From tech to innovation, we cover it all</p>
108-
</div>
109-
<div class="feature-item">
110-
<div class="feature-icon">🤝</div>
111-
<h3 class="feature-title">Community Building</h3>
112-
<p class="feature-description">Connect with like-minded individuals</p>
113-
</div>
114-
<div class="feature-item">
115-
<div class="feature-icon">📅</div>
116-
<h3 class="feature-title">Up-to-date Calendar</h3>
117-
<p class="feature-description">Never miss an exciting event</p>
118-
</div>
119-
</div>
120-
</div>
99+
100+
<p>From innovative tech conferences to insightful and engaging meetups, Eventica covers it all. We believe in the power of events to educate, inspire, and unite people, fostering unforgettable experiences and meaningful connections along the way.</p>
101+
</div>
102+
<div class="illustration-section">
103+
<img src="../images/about.png" alt="About Illustration">
121104
</div>
122-
</section>
105+
</div>
106+
107+
<div class="feature-grid">
108+
<div class="feature-item">
109+
<div class="feature-icon">🎭</div>
110+
<h3 class="feature-title">Diverse Events</h3>
111+
<p class="feature-description">From tech to innovation, we cover it all</p>
112+
</div>
113+
<div class="feature-item">
114+
<div class="feature-icon">🤝</div>
115+
<h3 class="feature-title">Community Building</h3>
116+
<p class="feature-description">Connect with like-minded individuals</p>
117+
</div>
118+
<div class="feature-item">
119+
<div class="feature-icon">📅</div>
120+
<h3 class="feature-title">Up-to-date Calendar</h3>
121+
<p class="feature-description">Never miss an exciting event</p>
122+
</div>
123+
</div>
123124
</main>
124125

125126
<!-- Footer section -->
@@ -128,40 +129,55 @@ <h3 class="feature-title">Up-to-date Calendar</h3>
128129
<div class="company-info">
129130
<h1 class="company-name heading"><img src="../images/logos/logo1.png">Eventica</h1>
130131
<p>Eventica, an ultimate guide to the dynamic and diverse events in Bangalore.
131-
As the heart of India's tech and cultural hub, Eventica is dedicated to bridging the gap between event organizers and eager participants, creating a vibrant community.</p>
132+
As the heart of India's tech and cultural hub, Eventica is dedicated to bridging the gap between
133+
event organizers and eager participants, creating a vibrant community.</p>
132134
</div>
133135
<div class="quick-links">
134136
<h1 class="heading">Quick Links</h1>
135137
<ul class="footer-ul">
136138
<li><a href="../../index.html"><i class="fa fa-house" aria-hidden="true"></i> Home</a></li>
137139
<li><a href="#"><i class="fa-solid fa-circle-info" aria-hidden="true"></i> About</a></li>
138-
<li><a href="../../index.html#events"><i class="fas fa-calendar-alt" aria-hidden="true"></i> Upcoming Events</a></li>
139-
<li><a href="../pastevents/pastevents.html"><i class="fas fa-calendar-check" aria-hidden="true"></i> Past Events</a></li>
140-
<li><a href="../contributors/contributor.html"><i class="fa-solid fa-users" aria-hidden="true"></i> Contributors</a></li>
141-
<li><a href="../contact/contact.html"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a></li>
140+
<li><a href="../../index.html#events"><i class="fas fa-calendar-alt" aria-hidden="true"></i>
141+
Upcoming Events</a></li>
142+
<li><a href="../pastevents/pastevents.html"><i class="fas fa-calendar-check" aria-hidden="true"></i>
143+
Past Events</a></li>
144+
<li><a href="../contributors/contributor.html"><i class="fa-solid fa-users" aria-hidden="true"></i>
145+
Contributors</a></li>
146+
<li><a href="../contact/contact.html"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
147+
</li>
142148
</ul>
143149
</div>
144150
<div class="send-message">
145151
<h1 class="heading">Keep In Touch</h1>
146152
<form id="contact-form" name="Eventica Contact" autocomplete="off" netlify>
147153
<div class="form-group group1">
148-
<input type="text" id="name" name="name" placeholder="Enter your name" autocomplete="name" required oninput="validateName('name')">
149-
<input type="email" id="email" name="email" placeholder="Enter your email" autocomplete="email" required oninput="validateEmail('email')">
154+
<input type="text" id="name" name="name" placeholder="Enter your name" autocomplete="name"
155+
required oninput="validateName('name')">
156+
<input type="email" id="email" name="email" placeholder="Enter your email" autocomplete="email"
157+
required oninput="validateEmail('email')">
150158
</div>
151159
<div class="form-group group1">
152160
<textarea id="message" name="message" placeholder="Leave your message" required></textarea>
153161
<button type="submit">SEND</button>
154162
</div>
155163
</form>
156164
<div class="social">
157-
<a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
158-
<a class="message" href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i class="fa-solid fa-envelope"></i></a>
159-
<a class="linkedin" href="https://www.linkedin.com/in/rakesh-roshan-9100/" target="_blank"><i class="fa fa-linkedin-square"></i></a>
160-
<a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
161-
<a class="instagram" href="https://www.instagram.com/rakesh250602/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
162-
<a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
163-
<a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
164-
<a class="discord" href="https://discord.com/users/944144134950748170" target="_blank"><i class="fa-brands fa-discord"></i></a>
165+
<a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i
166+
class="fa-solid fa-user socials"></i></a>
167+
<a class="message" href="mailto:roshanrakesh7362@gmail.com" target="_blank"><i
168+
class="fa-solid fa-envelope"></i></a>
169+
<a class="linkedin" href="https://www.linkedin.com/in/rakesh-roshan-9100/" target="_blank"><i
170+
class="fa fa-linkedin-square"></i></a>
171+
<a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i
172+
class="fa-brands fa-square-github"></i></a>
173+
<a class="instagram" href="https://www.instagram.com/rakesh250602/" target="_blank"><i
174+
class="fa-brands fa-instagram"></i></a>
175+
<a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i
176+
class="fa-brands fa-square-facebook"></i></a>
177+
<a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i
178+
class="fa-brands fa-square-x-twitter"></i></a>
179+
<a class="discord" href="https://discord.com/users/944144134950748170" target="_blank"><i
180+
class="fa-brands fa-discord"></i></a>
165181
</div>
166182
</div>
167183
</div>

‎assets/images/about.jpg‎

-171 KB
Binary file not shown.

‎assets/images/about.png‎

466 KB
Loading

0 commit comments

Comments
 (0)