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

Contact forms, navbar bug #928

Merged
merged 1 commit into from
Jul 2, 2024
Merged

Contact forms, navbar bug #928

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
70 changes: 70 additions & 0 deletions css/contact-sec.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@

.contact1{
display: grid;
grid-auto-flow: column;
border-radius: 5px;
background-color: #ffffff;
padding: 20px;
/* gap: 10px; */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-form1{
margin-left: 0px;
/* margin-right: 150px; */
padding-right: 70px;
background-color: none !important;
}


.contact-form1 label{
font-size: 16px;
color: grey;
font-weight: 100;
padding:0px 5px;
cursor:text;
top:0;
left:0;
position:absolute;
}


.contact-form1 input{
width:100%;
height: 25px !important;
}

.contact-form1 textarea{
width: 100%;
}


form label {
display: block;
margin-top: 10px;
/* color: #0073e6; */
}
form input,
form textarea {
width: calc(100% - 20px);
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

form button {
padding: 10px 20px;
background: #0073e6;
color: #fff;
border: none;
margin-top: 10px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}

form button:hover {
background: #005bb5;
}
68 changes: 68 additions & 0 deletions css/member.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@ body {
min-height: 100vh;
}

#image {
height: 30px;
/* Reduced height of the profile image */
width: 30px;
/* Reduced width of the profile image */
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}


header {
background: #4caf50;
color: #000000;
Expand All @@ -35,6 +46,23 @@ body {
margin: 0 10px;
}

.navbar {
/* Background color for navbar */
padding: 5px 20px;
/* Reduced padding for navbar */

/* Navbar styles */
/* Navbar styles */
/* Navbar styles */

}
nav {
display: flex;
justify-content: space-between;
align-items: center;
/* height: 10px; */
/* Adjust height of the navbar */
}
nav ul li a {
color: #fff;
text-decoration: none;
Expand Down Expand Up @@ -201,4 +229,44 @@ section{
margin-left: 5px;
}


.contact1{
display: grid;
grid-auto-flow: column;
border-radius: 5px;

background-color: #ffffff;
padding: 20px;
/* gap: 10px; */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-form1{
margin-left: 0px;
/* margin-right: 150px; */
padding-right: 70px;
background-color: none !important;
}


.contact-form1 label{
font-size: 16px;
color: grey;
font-weight: 100;
padding:0px 5px;
cursor:text;
top:0;
left:0;
position:absolute;
}


.contact-form1 input{
width:100%;
height: 25px !important;
}

.contact-form1 textarea{
width: 100%;
}

34 changes: 24 additions & 10 deletions css/ourplan.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ body {
form label {
display: block;
margin-top: 10px;
color: #0073e6;
/* color: #0073e6; */
}

form input,
Expand Down Expand Up @@ -453,34 +453,48 @@ body {
background-color: #F5F5F5;
border-radius: 10px;
margin: 0px 10px;
color:#e15509;
color:#ffc5a5;
font-weight: 700;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.contact{
.contact1{
display: grid;
grid-auto-flow: column;
border-radius: 5px;
background-color: #F5F5F5;

background-color: #ffffff;
padding: 20px;
gap: 10px;
/* gap: 10px; */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-form{
.contact-form1{
margin-left: 0px;
margin-right: 50px;
/* margin-right: 150px; */
padding-right: 70px;
background-color: none !important;
}


.contact-form label{
.contact-form1 label{
font-size: 16px;
color: grey;
font-weight: 100;
padding:0px 5px;
cursor:text;
top:0;
left:0;
position:absolute;
}


.contact-form input{
height: 20px !important;
.contact-form1 input{
width:100%;
height: 25px !important;
}

.contact-form1 textarea{
width: 100%;
}
77 changes: 59 additions & 18 deletions member.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/contact-sec.css"/>
<link
href="https://fonts.googleapis.com/css2?family=Gorditas&family=Playpen+Sans:wght@100;500&family=Poppins&family=Prompt&family=Roboto&family=Satisfy&family=Ubuntu:wght@300;400&display=swap"
rel="stylesheet"
Expand Down Expand Up @@ -45,25 +46,35 @@ <h1>Become a Member</h1>
<!-- Navbar -->
<div class="navbar">
<nav>
<a class="logo-link" href="#home"> <label class="logo" style="margin-left:10px;">

<img src="images/fav.png" alt="logo">
<span class="logo-text" style="margin-left: 0;">Open Source Village</span>
</label></a>
<a class="logo-link" href="#home">
<label class="logo">
<img src="images/fav.png" alt="logo">

<span class="logo-text">Open Source Village</span>
</label>

<!-- <div>
<span class="logo-subtext">Source</span>
</div> -->

</a>
<ul>
<li><i class="fa-solid fa-house" style="filter:invert(1)"></i><a class="active" href="#home">Home</a></li>

<li><i class="fa-solid fa-address-card" style="filter:invert(1)"></i><a href="#about">About</a></li>
<li><i class="fa-solid fa-screwdriver-wrench" style="filter:invert(1)"></i><a href="#services">Services</a></li>
<li><i class="fa-solid fa-pen-to-square" style="filter:invert(1)"></i><a href="#testimonials">Reviews</a></li>
<li><i class="fa-solid fa-address-book" style="filter:invert(1)"></i><a href="#contact">Contact Us</a></li>
<li><i class="fa-solid fa-right-to-bracket" style="filter:invert(1)"></i><a href="login.html">Login/Register</a></li>
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round" id="toggle"></div>
</label>
<img id="image" onclick="ProfileClicked()" />
<li><i class="fa-solid fa-house"></i><a class="active" href="#home">Home</a></li>
<li><i class="fa-solid fa-address-card"></i><a href="#about">About</a></li>
<li><i class="fa-solid fa-screwdriver-wrench"></i><a href="#services">Services</a></li>
<li><i class="fa-solid fa-pen-to-square"></i><a href="#testimonials">Reviews</a></li>
<li><i class="fa-solid fa-address-book"></i><a href="#contact">Contact</a></li>
<li><i class="fa-solid fa-right-to-bracket"></i><a href="login.html">Login/Register</a></li>
</ul>
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round" id="toggle"></div>
</label>

<!-- <img id="image" src="path/to/profile/image.jpg" onclick="ProfileClicked()" alt="Profile"> -->

<img id="image" style="margin-right: 55px;" src="images/profile1.jpg" onclick="ProfileClicked()" alt="Profile">

</nav>
</div>
<script>
Expand Down Expand Up @@ -132,7 +143,7 @@ <h2>Steps to Join</h2>
</div>
</section>

<section class="contact" id="contact">
<!-- <section class="contact" id="contact">
<div class=" contactform">
<div class="contacttext">
<h2>Contact Us</h2>
Expand All @@ -157,6 +168,36 @@ <h2>Contact Us</h2>
<button type="submit" class="submit">Submit</button>
</form>
</div>
</section> -->

<section class="contact1" id="contact">
<div style="padding-right: 0px; margin-right: 0px; margin-left: 50px;">
<h2>Contact</h2>
<p>
If you have any questions or need support, feel free to reach out to
us:
</p>
</div>

<div>
<form class="contact-form1" id="contact-form">
<div style="display: flex; gap:5px; position: relative;">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
</div>
<div style="display: flex; gap:5px;position: relative;">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
</div>
<div style="display: flex; gap:5px; position: relative;">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div style="display: flex; gap:5px; position: relative;"></div>
<button type="submit" style="width: 100%; margin-right: 50px;">Submit</button>
</div>
</form>
</div>
</section>
</main>
<special-footer></special-footer>
Expand Down
18 changes: 10 additions & 8 deletions our plan.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,8 @@ <h2>Project Contributions</h2>
</ul>
</section>

<section class="contact" id="contact">
<div style="padding-right: 0px; margin-right: 0px;">
<section class="contact1" id="contact">
<div style="padding-right: 0px; margin-right: 0px; margin-left: 50px;">
<h2>Contact</h2>
<p>
If you have any questions or need support, feel free to reach out to
Expand All @@ -137,20 +137,22 @@ <h2>Contact</h2>
</div>

<div>
<form class="contact-form" id="contact-form">
<div style="display: flex; gap:5px">
<form class="contact-form1" id="contact-form">
<div style="display: flex; gap:5px; position: relative;">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
</div>
<div style="display: flex; gap:5px">
<div style="display: flex; gap:5px;position: relative;">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
</div>
<div style="display: flex; gap:5px">
<div style="display: flex; gap:5px; position: relative;">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit">Submit</button>
</div>
<div style="display: flex; gap:5px; position: relative;"></div>
<button type="submit" style="width: 100%; margin-right: 50px;">Submit</button>
</div>
</form>
</div>
</section>
Expand Down
Loading