Skip to content

contactus page added #17

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

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

contactus page added #17

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
105 changes: 105 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
<script src="https://kit.fontawesome.com/2ca75661ea.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="resources/css/contact.css">

<link rel="stylesheet" href="resources/css/nav.css">
<link rel="stylesheet" href="resources/css/footer.css">
<link rel="stylesheet" href="resources/css/cards.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Contact Us</title>
</head>
<body>

<!--=================================================== navbar starts hear =============================-->
<div id="navbar">
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btnNav"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="logo" >
<a href="#home">
<input id="logo" type="image" src="resources/images/logo.png" alt="Home">
</a>
</div>
<ul class="navlinks">
<li>
<a class="btn" href="main-page.html">Home</a>
</li>
<li>
<a class="btn" href="#watch">Watch</a>
</li>
<li class="add">
<a class="btn" href="form.HTML"><i class="fas fa-plus"></i></a>
</li>
<li class="faq">
<a class="btn" href="#faq">F.A.Q.</a>
</li>
<li>
<a class="btn" href="#about">About</a>
</li>
<li>
<a class="btn active" href="contact.html"><i class="fas fa-phone-square-alt"></i></a>
</li>
<li class="calendar">
<a class="btn" href="#calendar"><i class="far fa-calendar-alt"></i></a>
</li>
</ul>
</div>


<!--=================================================== navbar ends hear =============================-->
<!--=================================================== contact form start hear =============================-->
<div class="content">
<h2>Contact Us</h2>
<form id="contact-form" action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>

<button type="submit">Send Message</button>
</form>



<!--=================================================== categories ends hear =============================-->
<footer class = "footer">
<div class = "icons">
<a href="#" alt="facebook" class="fa fa-facebook"></a>
<a href="#" alt="twitter" class="fa fa-twitter"></a>
<a href="#" alt="instagram" class="fa fa-instagram"></a>

</div>
<div id = "newsletter">
<h3>Subscribe to our newsletter!</h3>
<input type="email" id = "email" placeholder="Enter your email!">
</div>
<div class= "footer-links">
<a class="link" href="">About Us</a>
<a class="link" href="">Code of Conduct</a>
<a class="link" href="">Contact Us</a>
<a class="link" href="">Join the Team</a>
<p id="footerWrap">WWITV is a video streaming service that will soon be converted into an e-commerce site. For everyone's ease of mind please follow the code of conduct for contributing to the site and thanks to all developers that helped make and maintain it. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi recusandae corrupti alias magnam quaerat facere laborum nam voluptate reprehenderit ea at dolorum qui harum exercitationem labore animi, cumque dolorem eligendi.</p>
<br>
<br>
<br>
</div>

</footer>
</div>




</body>
</html>
7 changes: 5 additions & 2 deletions main-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@
</div>
<ul class="navlinks">
<li>
<a class="btn active" href="#watch">Watch</a>
<a class="btn active" href="main-page.html">Home</a>
</li>
<li>
<a class="btn" href="#watch">Watch</a>
</li>
<li class="add">
<a class="btn" href="form.HTML"><i class="fas fa-plus"></i></a>
Expand All @@ -36,7 +39,7 @@
<a class="btn" href="#about">About</a>
</li>
<li>
<a class="btn" href="#contact"><i class="fas fa-phone-square-alt"></i></a>
<a class="btn" href="contact.html"><i class="fas fa-phone-square-alt"></i></a>
</li>
<li class="calendar">
<a class="btn" href="#calendar"><i class="far fa-calendar-alt"></i></a>
Expand Down
180 changes: 180 additions & 0 deletions resources/css/contact.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
/* Reset some default styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
display: flex; /* Use flexbox for centering */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
min-height: 100vh; /* Make body full height */
background-color: #f0f0f0; /* Optional: background color */
}

/* Contact Form Styles */
#contact-form {
display: flex;
flex-direction: column;
max-width: 800px; /* Increased max-width */
margin: 10px auto;
padding: 20px; /* Increased padding */
background-color: rgb(59, 6, 90); /* Form background color */
border-radius: 10px; /* Slightly larger border radius */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Increased shadow depth */
}


#contact-form h2 {
text-align: center; /* Center the title */
color: #f2f2f2; /* Title color */
margin-bottom: 30px; /* Increased space below the title */
font-size: 1.8rem; /* Increased font size for the title */
}

#contact-form label {
margin: 15px 0 5px; /* Spacing for labels */
color: #f2f2f2; /* Label color */
font-size: 1.1rem; /* Increased font size for labels */
}

#contact-form input,
#contact-form textarea {
padding: 15px; /* Increased padding inside inputs */
border: none; /* Remove default border */
border-radius: 8px; /* Larger rounded corners */
margin-bottom: 20px; /* Space between inputs */
font-size: 1.1rem; /* Increased font size */
background-color: #f2f2f2; /* Input background color */
color: #333; /* Text color */
}

#contact-form button {
padding: 15px; /* Increased padding for button */
background-color: #aa12c9; /* Button background color */
border: none; /* Remove border */
border-radius: 8px; /* Larger rounded corners */
color: #fff; /* Text color */
font-size: 1.1rem; /* Increased font size */
cursor: pointer; /* Pointer cursor on hover */
transition: background-color 0.3s ease; /* Smooth background change */
}

#contact-form button:hover {
background-color: rgb(190, 74, 236); /* Background color on hover */
}



.content h2 {
text-align: center; /* Center the text */
color: black; /* Set the color of the heading */
margin-bottom: 20px; /* Space below the title */
}

/* Navbar Styles */
#navbar {
z-index: 10000;
display: flex;
position: fixed;
justify-content: center;
height: 60px; /* Increased navbar height */
top: 0;
left: 0;
width: 100%;
overflow: hidden;
background-color: rgb(59, 6, 90);
}

/* Navbar Links */
.logo {
position: fixed;
opacity: 90%;
top: -62px;
left: -35px;
}

.navlinks {
position: static;
display: flex;
justify-content: space-around;
margin-top: 5px;
}

.navlinks li {
list-style: none;
}

#navbar a {
display: flex;
color: #f2f2f2;
text-align: center;
padding: 16px; /* Increased padding for links */
text-decoration: none;
cursor: pointer;
font-size: x-large; /* Keep as is for large links */
font-family: consolas;
text-transform: uppercase;
}

/* Active Class and Hover Effect */
.active, .btn:hover {
background-color: #aa12c9;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

/* Page Content */
.content {
padding: 30px;
padding-top: 60px; /* Prevent content from being hidden behind the navbar */
}

/* Responsive Styles */
@media screen and (max-width: 800px) {
.logo {
float: left;
}

.navlinks {
position: absolute;
right: 0px;
}
}

@media screen and (max-width: 619px) {
label #btnNav {
display: block;
}

.logo {
position: relative;
top: -90px;
}

.navlinks {
position: fixed;
display: flex;
flex-direction: column;
top: 8vh;
background-color: rgb(59, 6, 90);
align-items: center;
width: 50%;
height: 92vh;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}

#check:checked ~ ul {
transform: translateX(0%);
}

#check:checked ~ label #btnNav {
display: none;
}

#check:checked ~ label #cancel {
display: block;
}
}
4 changes: 2 additions & 2 deletions resources/css/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ h3{
clear: both;
color: #666;
margin: 0 auto 10px auto;
width: 850px;
padding: 5px 0;
width: 1600px;
padding: 5px 5px;
text-align: center;

border-top: 1px solid #F2F2F2;
Expand Down
Loading