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

Join-Us form Modified #709

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Join-Us form Modified #709

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
71161c7
changed button properties in enquiry form
rarevyom09 Jun 4, 2023
fca943b
Merge branch 'main' of https://github.com/rarevyom09/codesetgo
rarevyom09 Aug 6, 2023
2d96d2f
necessary changes made in join-us form
rarevyom09 Aug 7, 2023
2afc9c7
join-us form css modified
rarevyom09 Aug 7, 2023
e2c04e8
Merge branch 'main' of https://github.com/rarevyom09/codesetgo
rarevyom09 Aug 8, 2023
3385d22
modified media queries for join-us form
rarevyom09 Aug 8, 2023
3e41931
join-us form mq-2
rarevyom09 Aug 8, 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
2 changes: 2 additions & 0 deletions assets/css/enquiry-form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,5 @@
margin: 20px auto 0;
border-radius: 10px;
}


2 changes: 1 addition & 1 deletion assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1361,7 +1361,7 @@ section {
font-size: 20px !important;
margin-bottom: 0px;
margin: 2px;
color: #2796ff;
color: #000000;
}

#contact .contact-info i:hover {
Expand Down
132 changes: 102 additions & 30 deletions join-us-form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
padding: 10px 15px;
margin-inline:auto ;
display: flex;
background-color: #243447;
background-color: #004a8e;
box-shadow: 10px 15px 35px rgba(0, 0, 0, 0.462);
}
.contactform{
Expand All @@ -24,55 +24,68 @@
width: 20rem;
height: 100%;
z-index: 2;
/* border: 5px solid white;
border-radius: 20px; */
/* width: fit-content; */
position: relative;
animation: up-down 3.24s .5s infinite alternate-reverse;
}

.form-1{
width: 30rem;
margin-top: 30px;
/* background-color: #2ecc71; */

}
.form-2{
display: flex;
flex-direction: column;
width: 20rem;
margin-top: 20px;
/* display: flex; */
/* flex-direction: column; */
width: fit-content;
margin-top: 34px;
margin-left: -66px;
}
.form-1 input{
width:90%;
margin-top: 5px;
background-color: transparent;
color: rgb(234, 226, 226);
background-color: rgb(255, 255, 255);
color:#2797ff;
font-weight: 500;
font-size: 15px;
padding-left: 40px;
border: 2px #000000 solid;
border-radius: 15px;
margin-bottom: 0px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.462);
}

.form-1 .inputContainer i{
top: 15px;
left: 17px;
}
.form-1 input.error{
border-bottom: 2px solid #e74c3c;
border: 2px solid #ff0000;
}
.form-1 input.success{
border-bottom: 2px solid #2ecc71;
border: 2px solid #2ecc71;
}

.form-1 .spandiv{
margin-top: -15px;
margin-bottom: 5px;
}
.form-1 .spandiv small {
color: #e74c3c;
margin-left: 10px;
position: relative;
color: #fd0000;
margin-left: 25px;
/* margin-top: 40px; */
top: 12px;
}

.form-2 .spandiv{
margin-top: -20px;
margin-left: 10px;
margin-bottom: 10px;

}
.form-2 .spandiv small {
color: #e74c3c;
Expand All @@ -84,14 +97,21 @@ padding-left: 40px;
}

.form-2 textarea{
width: 150%;
color: rgb(236, 225, 225);
width: 250%;
height: auto;
color:#2797ff;
font-weight: 500;
font-size: 15px;
background-color: transparent;
background-color: rgb(255, 255, 255);
border: 2px solid black;
border-radius: 15px;
/* margin-right: 50px; */
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.462);
margin-right: 0px;
}

.form-2 textarea.error{
border: 2px solid #e74c3c;
border: 2px solid #ff0000;
}
.form-2 textarea.success{
border: 2px solid #2ecc71;
Expand All @@ -116,17 +136,29 @@ h1 span {
}
h1 span:hover{
font-size: 60px;
color: #024584;
color: #ffffff;
background-color: #2797ff;
padding: 2px;
/* border: 2px solid black; */
cursor: pointer;
}
.Subtn{
position: relative;
transition: .6s;
letter-spacing: 1px;
margin-left: 10px;
top: 20px;
margin-left: 0px;
float: right;
margin-right: 25px;
background-color: rgb(4, 1, 70);
color: rgb(255, 255, 255);
font-weight: 600;
margin-bottom: 20px;
}
.Subtn:hover{
background-color: rgb(24, 219, 24);
background-color: rgb(255, 255, 255);
transform-origin: right;
color: rgb(0, 0, 0);
}

input,
Expand Down Expand Up @@ -157,13 +189,13 @@ form {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-size: 15px;
font-size: 11px;
line-height: 27px;
/* identical to box height */

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

textarea {
Expand Down Expand Up @@ -195,13 +227,13 @@ input{
border-right:none ;
border-radius: none;
}
input:focus,
textarea:focus {
box-shadow: 3px 4px 23px rgba(0, 0, 0, 0.11);
}
.contactimg{
max-width: 100vh;
}
#sub_icon{
margin-left: 20px;
color: #45c1ff;
}
@keyframes up-down {
0%{
transform: translateY(-5px);
Expand All @@ -217,16 +249,19 @@ transform: translateY(-5px);
@media screen and (max-width:14651px) {

.form-1{

width: 120%;
width: 150%;
}
.form-2{
margin-left: 5%;
}
}
@media screen and (max-width:1240px) {
.form-2{
width: 240px;
width: 100%;
}
.form-2 textarea{
width: fit-content;
}
.form-1{
width: 130%;
Expand All @@ -240,16 +275,53 @@ transform: translateY(-5px);
width: 100%;
}
.contactpage{height: fit-content;}
.form-2 textarea{
width: fit-content;
}
}
@media screen and (max-width:999px) {


.form-1{
max-width:22rem ;
max-width:20rem ;

}
.form-2{
width: 12rem;
width: 7rem;
}
.form-2 textarea{
max-width: 15rem;
}
}


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


.form-1{
max-width:12rem ;

}
.form-2{
/* width: 7rem; */
}
.form-2 textarea{
max-width: 20rem;
/* margin-right: 10px; */
}
}
@media screen and (max-width:840px) {


.form-1{
max-width:12rem ;

}
.form-2{
width: 7rem;
}
.form-2 textarea{
max-width: 7rem;
margin-right: 10px;
}
}

14 changes: 12 additions & 2 deletions join-us-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,8 @@ <h1 class="h-title">Registrations for <span>CodeSetGo</span> Captain Program</h1
<div class="spandiv"><small class="small" id="countryerr" role="alert"></small></div>
</div>

<button type="submit" class="Subtn">SUBMIT FORM</button>
<button type="submit" class="Subtn">SUBMIT FORM <i class="fa fa-paper-plane" id="sub_icon"></i></button>
<!-- <i class="fa fa-paper-plane"></i> -->
</form>
<form class="form-2" required>
<div>
Expand All @@ -159,10 +160,19 @@ <h1 class="h-title">Registrations for <span>CodeSetGo</span> Captain Program</h1
<div class="spandiv"><small class="small" id="whycaptainerr" role="alert"></small></div>
</div>
<div>
<textarea id="comment" rows="8" placeholder=" * Any Comments or Questions? (Not Mandatory)"
<textarea id="comment" rows="5" placeholder=" * Any expectations from this CodeSetGo Captain program?"
name="Any expectations from this CodeSetGo Captain program?" required aria-required="true" aria-label="Enter you email" aria-describedby="mailerr"></textarea>

</div>
<div>
<textarea id="comment" rows="6" placeholder=" * Any Comments or Questions? (Not Mandatory)"
name="Any Comments or Questions? " required aria-required="true" aria-label="Enter you email" aria-describedby="mailerr"></textarea>

</div>


</form>

</div>
</section>

Expand Down