Skip to content

Join form code #600

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
I-shika wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Join form code #600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5e71992
join form responsive for larger devices
I-shika Jul 3, 2023
089bd72
merge error resolved
I-shika Jul 3, 2023
0137ba7
new changes according to new form
I-shika Jul 3, 2023
4f86e75
Merge branch 'main' of https://github.com/I-shika/codesetgo into Join…
I-shika Jul 12, 2023
37d964b
fields are marked compulsary
I-shika Jul 12, 2023
41544a1
change in code of join us from
I-shika Jul 13, 2023
b7e8441
change in code of join us from
I-shika Jul 13, 2023
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
227 changes: 183 additions & 44 deletions join-us-form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,135 @@
*{
.h-title{
margin-top: 100px;
}
.contactpage {
max-width: 78%;
border-radius: 10px;
height: 80vh;
padding: 10px 15px;
margin-inline:auto ;
display: grid;
grid-template-columns: 1fr 2fr;
background-color: #243447;
box-shadow: 10px 15px 35px rgba(0, 0, 0, 0.462);
}

.cntctimg{
height: 70vh;
z-index: 2;
position: relative;
animation: up-down 3.24s .5s infinite alternate-reverse;
}
.form-1{
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1fr;
padding-top: 4rem;
padding-right: 2%;
}
.form1{
margin-left: 2rem;
}
.form2{
margin-right: 3rem;
}
.label{
padding-left: 20px;
color: white;
}

h1 {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-size: 44px;
line-height: 66px;
text-align: center;

color: #004a8e;
}

h1 span {
color: #0868c0;
font-size: larger;
transition: .7s;
}
h1 span:hover{
font-size: 60px;
color: #024584;
cursor: pointer;
}
.Subtn{
background: #004a8e;
border-radius: 11px;
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
transition: .6s;
letter-spacing: 1px;
margin-left: 5px;
margin-left: 10%;
color: #ffffff;
padding: 15px;
border: none;
padding-left: 20px;
padding-right: 20px;
}
.Subtn:hover{
background-color: rgb(24, 219, 24);
transform-origin: right;
}
::placeholder {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 27px;
padding-left: 10px;
}

input,
textarea {
background: #ffffff;
border: 1px solid #c2c2c2;
height: 50px;
width: 18vw;
text-align: left;
margin-bottom: 1.4rem;
outline: none;
}
textarea{
width: 18vw;
height: 10vw;
color: rgb(236, 225, 225);
font-size: 15px;
background-color: transparent;
overflow: hidden;

}
.textarea1{
width: 18vw;
height: 10vw;
}
input:focus,
textarea:focus {
box-shadow: 3px 4px 23px rgba(0, 0, 0, 0.11);}

@keyframes up-down {
0%{
transform: translateY(-5px);
}
100%{
transform: translateY(5px);
}}

@media screen and (max-width:1300px) {
.form-1{
padding-top: 0px;
}
}
/* {
margin: 0;
padding: 0;
box-sizing: border-box;
Expand All @@ -10,7 +141,6 @@
max-width: 78%;
border-radius: 10px;
height: 80vh;
margin: 10px;
padding: 10px 15px;
margin-inline:auto ;
display: flex;
Expand All @@ -20,6 +150,11 @@
.contactform{
display: flex;
}
.form-1{
display: flex;
gap: 2;
width: 100%;
}
.cntctimg{
width: 20rem;
height: 100%;
Expand All @@ -29,19 +164,12 @@ animation: up-down 3.24s .5s infinite alternate-reverse;
}

.form-1{
width: 30rem;
width: 90rem;
margin-top: 30px;

}
.form-2{
display: flex;
flex-direction: column;
width: 20rem;
margin-top: 20px;
margin-left: -66px;
}

.form-1 input{
width:90%;
width:95%;
margin-top: 5px;
background-color: transparent;
color: rgb(234, 226, 226);
Expand All @@ -52,12 +180,7 @@ font-size: 15px;
color: white;
}

.form-2 textarea{
width: 150%;
color: rgb(236, 225, 225);
font-size: 15px;
background-color: transparent;
}


h1 {
font-family: "Poppins";
Expand Down Expand Up @@ -103,10 +226,6 @@ textarea {
padding-left: 14px;

}
.form{
display: grid;
grid-template-columns: 1fr;
}

form {
display: block;
Expand All @@ -122,15 +241,11 @@ form {
line-height: 27px;
/* identical to box height */

text-align: left;
/* text-align: left;
margin-left: 20px;
color: #8e8c8cb9;
}

textarea {
height: 200px;
}

button {
background: #004a8e;
border-radius: 11px;
Expand All @@ -142,15 +257,15 @@ button {

/* identical to box height */

text-align: center;
/* text-align: center;
margin-left: 35%;
color: #ffffff;
padding: 15px;
border: none;
padding-left: 30px;
padding-right: 30px;
}
input{
} */
/* input{
border-left: none;
border-top: none;
border-right:none ;
Expand All @@ -160,36 +275,51 @@ input:focus,
textarea:focus {
box-shadow: 3px 4px 23px rgba(0, 0, 0, 0.11);
}
.contactimg{
max-width: 100vh;
.textarea{
width: 40rem;
height: 10rem;
color: rgb(236, 225, 225);
font-size: 15px;
background-color: transparent;
overflow: hidden;
}
@keyframes up-down {

@media screen and (max-width: 1220px) {

input{
width: 80%;
}

} */

/* @keyframes up-down {
0%{
transform: translateY(-5px);
}
100%{
transform: translateY(5px);
}

}
} */
/*
} */

.contactpage{height: fit-content;}

@media screen and (max-width:14651px) {

/* @media screen and (max-width:14651px) {

.form-1{

width: 120%;
}
.form-2{
.form2{
margin-left: 5%;
margin-right: 0%;
}
}
@media screen and (max-width:1240px) {
.form-2{
.form2{
width: 240px;
}
.form-1{
.form1{
width: 130%;
}
}
Expand All @@ -200,7 +330,7 @@ transform: translateY(-5px);
.form-2{
width: 100%;
}
.contactpage{height: fit-content;}

}
@media screen and (max-width:999px) {

Expand All @@ -212,5 +342,14 @@ transform: translateY(-5px);
.form-2{
width: 12rem;
}
}

.contactform{
flex-direction: column;
text-align: center;
}
.contactpage{
flex-direction: column;
text-align: center;
}
}

*/ */
29 changes: 15 additions & 14 deletions join-us-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,9 @@ <h1 class="h-title">Registrations for <span>CodeSetGo</span> Captain Program</h1
</div>
<div class="contactform">
<form class="form-1" action="https://formsubmit.co/9e960606c0805e44e7aec5a93537b0cf" method="POST">
<div>

<input type="text" id="name" name="Name" placeholder="Name" />
<div class="form1">
<div>
<input type="text" id="name" name="Name" placeholder="Name" required/>

</div>
<div>
Expand All @@ -114,36 +114,37 @@ <h1 class="h-title">Registrations for <span>CodeSetGo</span> Captain Program</h1
</div>
<div>

<input type="text" id="college" placeholder="College (With City)" name="College" />
<input type="text" id="college" placeholder="College (With City)" name="College" required/>

</div>
<div>

<input type="year" id="year" placeholder="Expected Graduation Year" name="Graduation Year" />
<input type="year" id="year" placeholder="Expected Graduation Year" name="Graduation Year" required />
</div>
<div>

<input type="number" id="phone" placeholder="+91777xxxxxxx(WhatsApp)" name="Phone Number (WhatsApp)" />
<input type="tel" id="phone" placeholder="777xxxxxxx(WhatsApp)" name="Phone Number (WhatsApp)" pattern="[0-9]{10}" required/>

</div>
<div>

<input type="text" id="country" placeholder="Country" name="Country" />
<input type="text" id="country" placeholder="Country" name="Country" required/>
</div>

<button type="submit" class="Subtn">SUBMIT FORM</button>
</form>
<form class="form-2" required>
<div>
<textarea required id="whycaptain" rows="4" placeholder=" * Why do you want to become CodeSetGo Captain?"
</div>
<div classname="form2">
<div class="textarea">
<textarea required id="whycaptain" class="textarea1" placeholder=" * Why do you want to become CodeSetGo Captain?"
name="Why do you want to become CodeSetGo Captain?" required></textarea>
</div>
<div>
<div class="textarea">
<textarea id="comment" rows="8" placeholder=" * Any Comments or Questions? (Not Mandatory)"
name="Any Comments or Questions? " required></textarea>
</div>
<button type="submit" class="Subtn">SUBMIT FORM</button>
</div>
</form>
</div>
</div>
</section>

<!-- ======= Footer ======= -->
Expand Down
Loading