Skip to content

Commit ea19248

Browse files
deepeshahlawatdeepeshahlawat
authored
Enhanced the About page (#82)
1 parent f8139a0 commit ea19248

File tree

4 files changed

+77
-82
lines changed

4 files changed

+77
-82
lines changed

‎assets/about/about.css‎

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -16,74 +16,56 @@ 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;
32+
align-items: center;
33+
padding: 65px 20px 20px 20px;
34+
min-height: calc(100vh - 120px);
35+
gap: 100px;
3636
}
3737

38-
.about-content {
39-
flex: 1;
40-
padding: 2rem;
41-
display: flex;
42-
text-align: center;
43-
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);
38+
.illustration-section img {
39+
max-width: 100%;
40+
width: 600px;
41+
height: auto;
4842
}
4943

50-
.image {
44+
.content-section {
5145
flex: 1;
52-
overflow: hidden;
53-
border-radius: 10px;
54-
margin-bottom: 10px;
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;
52+
min-width: 350px;
5553
}
5654

57-
.image img {
58-
width: 70%;
59-
border-radius: 10px;
60-
transition: transform 0.3s ease;
55+
.content-section p {
56+
font-size: 1.1em;
57+
margin-bottom: 20px;
6158
}
6259

63-
.image img:hover {
64-
transform: scale(1.02);
65-
}
66-
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;
60+
.section-title {
61+
margin-bottom: 2rem !important;
8062
}
8163

8264
.feature-grid {
8365
display: grid;
8466
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
8567
gap: 2rem;
86-
margin-top: 3rem;
68+
padding: 3rem 10rem;
8769
width: 100%;
8870
}
8971

@@ -119,16 +101,34 @@ body.dark-mode .feature-item {
119101
}
120102

121103
@media (max-width: 768px) {
122-
.about-content {
123-
padding: 1.5rem;
104+
.feature-grid {
105+
grid-template-columns: 1fr;
106+
padding: 3rem 3rem;
107+
gap: 1.5rem;
124108
}
125109

126-
.about-text {
127-
font-size: 1rem;
110+
.about-container {
111+
gap: 10px;
128112
}
129113

130-
.feature-grid {
131-
grid-template-columns: 1fr;
132-
gap: 1.5rem;
114+
.about-container {
115+
padding-top: 85px;
116+
}
117+
118+
.content-section {
119+
max-width: 100%;
120+
margin-top: 0;
121+
}
122+
}
123+
124+
@media (max-width: 480px) {
125+
.content-section p {
126+
font-size: 0.9em;
127+
}
128+
}
129+
130+
@media (min-width: 768px) and (max-width: 1244px) {
131+
.content-section {
132+
margin-top: 58px;
133133
}
134134
}

‎assets/about/about.html‎

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -86,40 +86,35 @@
8686

8787
<!-- About main section -->
8888
<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>
89+
<div class="about-container">
90+
<div class="content-section">
91+
<h1 class="section-title">ABOUT US</h1>
92+
<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>
10293

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>
94+
<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>
95+
</div>
96+
<div class="illustration-section">
97+
<img src="../images/about.png" alt="About Illustration">
98+
</div>
99+
</div>
100+
101+
<div class="feature-grid">
102+
<div class="feature-item">
103+
<div class="feature-icon">🎭</div>
104+
<h3 class="feature-title">Diverse Events</h3>
105+
<p class="feature-description">From tech to innovation, we cover it all</p>
106+
</div>
107+
<div class="feature-item">
108+
<div class="feature-icon">🤝</div>
109+
<h3 class="feature-title">Community Building</h3>
110+
<p class="feature-description">Connect with like-minded individuals</p>
121111
</div>
122-
</section>
112+
<div class="feature-item">
113+
<div class="feature-icon">📅</div>
114+
<h3 class="feature-title">Up-to-date Calendar</h3>
115+
<p class="feature-description">Never miss an exciting event</p>
116+
</div>
117+
</div>
123118
</main>
124119

125120
<!-- Footer section -->

‎assets/images/about.jpg‎

-171 KB
Binary file not shown.

‎assets/images/about.png‎

466 KB
Loading

0 commit comments

Comments
 (0)