Skip to content

Commit 8d6ab8f

Browse files
vishal02527vishal02527
authored
Merge pull request #56 from Web-Dev-Learner/improve-aboutus-contactus
Improved About Us and Contact Us sections
2 parents a3a7ac6 + a7cb18c commit 8d6ab8f

17 files changed

+1382
-2667
lines changed

‎aboutus.html‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>About Us</title>
7+
<script
8+
src="https://kit.fontawesome.com/d74f12bccc.js"
9+
crossorigin="anonymous"
10+
></script>
11+
<style>
12+
body {
13+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
14+
background-image: url(https://www.hitaambrish.com/stat/img/home/quotes-bg.jpg);
15+
padding: 0;
16+
margin: 0;
17+
color: #333;
18+
min-height: 100vh;
19+
display: flex;
20+
flex-direction: column;
21+
}
22+
.content {
23+
padding: 20px;
24+
flex-grow: 1;
25+
}
26+
h1 {
27+
text-align: center;
28+
font-size: 36px;
29+
font-weight: 900;
30+
background: linear-gradient(to right, #30cfd0 20%, #330867 100%);
31+
background-clip: text;
32+
-webkit-background-clip: text;
33+
-webkit-text-fill-color: transparent;
34+
}
35+
36+
.about-section {
37+
max-width: 800px;
38+
margin: 0 auto;
39+
padding: 20px;
40+
text-align: center;
41+
background-color: rgba(255, 255, 255, 0.8);
42+
border-radius: 10px;
43+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
44+
}
45+
46+
.about-section h2 {
47+
font-size: 28px;
48+
margin-bottom: 10px;
49+
}
50+
51+
.about-section p {
52+
font-size: 18px;
53+
line-height: 1.6;
54+
margin-bottom: 20px;
55+
}
56+
57+
/* Navbar Styles */
58+
.galleryMain {
59+
text-align: center;
60+
background-image: url(https://www.hitaambrish.com/stat/img/home/Gallery_Bg.jpg);
61+
padding: 10px 20px;
62+
position: sticky;
63+
top: 0;
64+
z-index: 100;
65+
box-shadow: 0px 6px 10px #ccc;
66+
}
67+
68+
.navigation {
69+
padding: 10px;
70+
display: flex;
71+
justify-content: space-between;
72+
align-items: center;
73+
}
74+
75+
.navigation .homeDiv #homeBtn {
76+
background-image: linear-gradient(
77+
144deg,
78+
#af40ff,
79+
#5b42f3 50%,
80+
#00ddeb
81+
);
82+
border: 0;
83+
border-radius: 8px;
84+
color: #fff;
85+
display: flex;
86+
justify-content: center;
87+
line-height: 0.8em;
88+
min-width: 110px;
89+
padding: 3px;
90+
cursor: pointer;
91+
}
92+
93+
.navigation .homeDiv #homeBtn a {
94+
background-color: rgb(5, 6, 45);
95+
color: #fff;
96+
font-size: 16px;
97+
padding: 16px 24px;
98+
border-radius: 6px;
99+
text-decoration: none;
100+
transition: 300ms;
101+
}
102+
103+
.navigation .navbar a {
104+
color: #fff;
105+
text-decoration: none;
106+
margin: 0 8px;
107+
font-size: 16px;
108+
font-weight: 500;
109+
border: 2px solid #fff;
110+
padding: 10px 15px;
111+
border-radius: 20px;
112+
}
113+
114+
.navigation .navbar a:hover {
115+
color: rgb(250, 219, 153);
116+
border-color: rgb(250, 219, 153);
117+
}
118+
#active {
119+
color: rgb(250, 219, 153);
120+
border-color: rgb(250, 219, 153);
121+
}
122+
123+
/* Footer Styles */
124+
footer {
125+
background-color: #2c3e50;
126+
color: #ecf0f1;
127+
padding: 20px;
128+
text-align: center;
129+
width: 100%;
130+
margin-top: auto;
131+
}
132+
133+
.footer-content {
134+
display: flex;
135+
flex-wrap: wrap;
136+
justify-content: space-around;
137+
max-width: 1200px;
138+
margin: 0 auto;
139+
}
140+
141+
.footer-section {
142+
margin-bottom: 20px;
143+
}
144+
145+
.footer-section h3 {
146+
margin-bottom: 10px;
147+
color: #f39c12;
148+
}
149+
150+
.footer-section p {
151+
font-size: 16px;
152+
margin: 0;
153+
}
154+
155+
.social-icons a i {
156+
color: #ecf0f1;
157+
margin: 0 8px;
158+
font-size: 30px;
159+
}
160+
161+
.creatorDiv {
162+
margin-top: 10px;
163+
}
164+
165+
.creatorDiv p {
166+
font-size: 14px;
167+
}
168+
169+
/* Responsive Styles */
170+
@media (max-width: 768px) {
171+
h1 {
172+
font-size: 22px;
173+
}
174+
.about-section h2 {
175+
font-size: 22px;
176+
}
177+
.about-section p {
178+
font-size: 16px;
179+
}
180+
.navigation {
181+
flex-direction: column;
182+
align-items: center;
183+
}
184+
.navigation .navbar {
185+
flex-direction: column;
186+
margin-top: 20px;
187+
}
188+
.navigation .navbar a {
189+
margin: 10px 0;
190+
font-size: 14px;
191+
}
192+
.footer-content {
193+
flex-direction: column;
194+
align-items: center;
195+
}
196+
}
197+
</style>
198+
</head>
199+
<body>
200+
<div class="galleryMain">
201+
<div class="navigation">
202+
<div class="homeDiv">
203+
<button id="homeBtn"><a href="./index.html">Home</a></button>
204+
</div>
205+
206+
<div class="navbar">
207+
<a href="scriptures.html">Scriptures</a>
208+
<a href="gallery.html">Gallery</a>
209+
<a href="aboutus.html" id="active">About Us</a>
210+
<a href="contactus.html">Contact Us</a>
211+
<a href="signup.html">Discussion Forum</a>
212+
<a href="devotional-resources.html">Devotional Resources</a>
213+
</div>
214+
</div>
215+
</div>
216+
217+
<div class="content">
218+
<h1>About Us</h1>
219+
<div class="about-section">
220+
<h2>Welcome to Our Spiritual Hub</h2>
221+
<p>
222+
We are a community dedicated to sharing the timeless teachings of
223+
Lord Krishna and the richness of Hindu scriptures. Our mission is to
224+
spread devotion, knowledge, and the values of spirituality through
225+
engaging content, discussions, and devotional resources.
226+
</p>
227+
<p>
228+
Our platform provides access to sacred scriptures, divine images,
229+
insightful articles, and a supportive discussion forum where you can
230+
connect with like-minded individuals. Whether you are seeking
231+
knowledge, inspiration, or spiritual growth, we are here to guide you
232+
on this sacred journey.
233+
</p>
234+
</div>
235+
</div>
236+
237+
<footer>
238+
<div class="footer-content">
239+
<div class="footer-section">
240+
<h3>About Us</h3>
241+
<p>Your description about the website and its purpose.</p>
242+
</div>
243+
<div class="footer-section">
244+
<h3>Contact Us</h3>
245+
<p>Email: info@example.com</p>
246+
<p>Phone: +1 234 567 890</p>
247+
</div>
248+
<div class="footer-section">
249+
<h3>Follow Us</h3>
250+
<div class="social-icons">
251+
<a href="#" target="_blank" title="Github"
252+
><i class="fa-brands fa-github"></i
253+
></a>
254+
<a href="#" target="_blank" title="Codepen"
255+
><i class="fa-brands fa-codepen"></i
256+
></a>
257+
<a href="#" target="_blank" title="LinkedIn"
258+
><i class="fa-brands fa-linkedin"></i
259+
></a>
260+
</div>
261+
</div>
262+
</div>
263+
<div class="creatorDiv">
264+
<p>&copy; All rights reserved 2023, Created by Vishal.</p>
265+
</div>
266+
</footer>
267+
</body>
268+
</html>
269+
270+

0 commit comments

Comments
 (0)