Skip to content
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

Added contact us page #58

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added contact us page #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 8 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<body>

<nav class="navbar">
<a href="index.html"><img src="C:\Users\Ananya\OneDrive\Documents\GitHub\official-website\images\logo.png"
<a href="index.html"><img src="images\logo.png"
class="logo"></a>
<span class="website-name">Code Social</span>
<ul>
Expand All @@ -39,7 +39,7 @@
<ul class="dropdown">
<li><a href="#">Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="./pages/contactus.html">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</li>
Expand Down Expand Up @@ -67,25 +67,23 @@ <h2>About Community</h2>
mentorship, and networking opportunities, Code Social Community is an excellent place to connect with
like-minded individuals, build your skills, and take your career to the next level.
</p>
<!-- Social Media Icons -->


<footer>
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="C:\Users\Ananya\OneDrive\Documents\GitHub\official-website\images\whatsapp-icon.png"
<img src="images/whatsapp-icon.png"
alt="WhatsApp">
</a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="C:\Users\Ananya\OneDrive\Documents\GitHub\official-website\images\discord-icon.png"
<img src="images/discord-icon.png"
alt="Discord">
</a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="C:\Users\Ananya\OneDrive\Documents\GitHub\official-website\images\linkedin-icon.png"
<img src="images/linkedin-icon.png"
alt="LinkedIn">
</a>
</div>
</section>

<footer>

</footer>

</body>
Expand Down
79 changes: 79 additions & 0 deletions pages/contactus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Contact Us | Code Social</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles.css" type="text/css">
<script src="../script.js" defer></script>
</head>

<body>
<nav class="navbar">
<a href="../index.html"><img src="../images/logo.png" class="logo" alt="Code Social Logo"></a>
<span class="website-name">Code Social</span>
<ul>
<li>
<a href="#">Live Events</a>
<ul class="dropdown">
<li><a href="#">Why don't you react?</a></li>
</ul>
</li>
<li>
<a href="#">Join our Community</a>
<ul class="dropdown">
<li><a href="#">WhatsApp</a></li>
<li><a href="#">Discord</a></li>
</ul>
</li>
<li class="hamburger-menu">
<a href="javascript:void(0);" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="dropdown">
<li><a href="#">Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="./pages/contactus.html">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</li>
</ul>
</nav>

<div class="contact-container">
<div class="contact-form">
<h2>Contact Us</h2>
<label for="name">Name <span class="required"></span></label>
<input type="text" id="name" placeholder="Enter your name" required>
<label for="email">Email <span class="required"></span></label>
<input type="email" id="email" placeholder="Enter your email" required>
<label for="message">Message <span class="required"></span></label>
<textarea id="message" rows="5" placeholder="Enter your suggestion or query" required></textarea>
<div class="button-container">
<button type="submit">Send Message</button>
</div>
</div>
</div>

<footer>
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="../images/whatsapp-icon.png"
alt="WhatsApp">
</a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="../images/discord-icon.png"
alt="Discord">
</a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="../images/linkedin-icon.png"
alt="LinkedIn">
</a>
</div>
</footer>
</body>

</html>
59 changes: 59 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,65 @@
border-radius: 4px;
}

.contact-form {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-form h2 {
text-align: center;
color: #333;
}

.contact-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

.contact-form textarea {
resize: vertical;
}

.contact-form button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}

.contact-form button:hover {
background-color: #45a049;
}

footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.navbar ul {
Expand Down