Skip to content

Commit

Permalink
Added footer and about s.
Browse files Browse the repository at this point in the history
  • Loading branch information
@AAABatteriesAAA
AAABatteriesAAA committed Aug 17, 2024
2 parents 9ed2b03 + 6bced6c commit fb6ce62
Show file tree
Hide file tree
Showing 5 changed files with 268 additions and 153 deletions.
2 changes: 1 addition & 1 deletion app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ button{
margin-top: 20px;
justify-content: center;
transition: all 0.3s ease;
}
}

/*App Starts*/
header::before{
Expand Down
164 changes: 90 additions & 74 deletions contact.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,6 @@ body {margin: 0;
text-align: center;
align-items: center;}

button{
display: flex;
align-items: center;
background: #CAE4C5;
font-family: "Open Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-size:15px;
font-variation-settings:"wdth" 100;
padding: 10px;
box-sizing: border-box;
border: none;
border-radius: 50px;
width: 160px;
color: #1C3312;
height: 50px;
margin-top: 20px;
justify-content: center;
transition: all 0.3s ease;}

/*Contact Starts*/
header {
Expand All @@ -55,9 +35,14 @@ header {
text-align: center;
}

.contact-box{display: flex;}
.contact-left{flex-basis: 60%;
padding: 0px 180px;}
.contact-box{
display: flex;
}
.contact-left{
flex-basis: 60%;
padding: 4px 60px;
flex-wrap: column;
}
.contact-left h3{
color: #315A20;
font-family: "Open Sans", sans-serif;
Expand All @@ -76,33 +61,40 @@ header {
font-style:normal;
font-variation-settings: "wdth" 100;
margin-bottom: 50px;
font-size: 18px;
font-size: 24px;
line-height: 32.68px;
text-align: left;
width: 69%;
}
.contact-left button {
border-radius: 26.71px 26.71px 26.71px 26.71px;
background-color: rgba(49, 90, 32, 1);
color:rgba(202, 228, 197, 1);
width:420px;
height: 115px;}
height: 115px;
}
.contact-left button p {
position: relative;
font-size:18px;
text-align: left;
margin: 20px 200px;
left: 40px;}
left: 40px;
}
.contact-left button a {
color:rgba(202, 228, 197, 1);
width:80%;
}
.mailLeft {
position:relative;
top:-80px;
left:-180px;
transform: scale(1.25);
}

.contact-left button {
width: 70%;
}
#mailicon{
position: relative;
top:0px;
transform: scale(3);
color: #7BA769;
display: block;
left: 170px;
}
.contact-right{
flex-basis: 60%;
padding: 40px 60px;
Expand All @@ -122,7 +114,8 @@ header {
#mailogo {
top:-135px;
}
.email{display: flex;
.email{
display: flex;
align-items: center;
background: #315A20;
font-family: "Open Sans", sans-serif;
Expand All @@ -138,10 +131,8 @@ header {
color: #CAE4C5;
height: 50px;
margin-top: 20px;
text-align: right;}
::placeholder {position:relative;
transform: scale(1.5);
left:125px;}
text-align: right;
}

input, textarea {
width: 80%;
Expand All @@ -168,11 +159,13 @@ textarea{
font-size: 20px;
width:200px;
top:-40px;
left:-60px;}
left:-60px;
}
.contact-right button:hover {
background-color:inherit;
border: 2px solid rgba(202, 228, 197, 1);
color: rgba(202, 228, 197, 1);}
color: rgba(202, 228, 197, 1);
}
.contact-right button:active {
animation-timing-function: ease-out;
animation-duration: 300ms;
Expand All @@ -182,7 +175,6 @@ textarea{
.join-box{
display: flex;
background: #083358;
width:100%;
}
.join-left{
flex-basis: 60%;
Expand All @@ -197,7 +189,8 @@ textarea{
margin-bottom: 30px;
font-size: 48px;
line-height: 65.37px;
text-align: left;}
text-align: left;
}

.join-left h4{
color: #FFFFFF;
Expand All @@ -213,35 +206,45 @@ textarea{
padding: 40px 60px;
color: #083358;
height:350px;}
.join-right button {color: rgba(8, 51, 88, 1);
.join-right button {
color: rgba(8, 51, 88, 1);
background-color: rgba(191, 209, 229, 1);
width:200px;
font-size: 20px;
transform: scale(1.25);
margin: 160px 0px;}
.join-right button:hover {background-color:inherit;
margin: 160px 0px;
}
.join-right button:hover {
background-color:inherit;
border: 2px solid rgba(191, 209, 229, 1);
color: rgba(191, 209, 229, 1);}
.join-right button:active {animation-timing-function: ease-out;
color: rgba(191, 209, 229, 1);
}
.join-right button:active {
animation-timing-function: ease-out;
animation-duration: 300ms;
animation-name: dissolve;}
animation-name: dissolve;
}


/* Media Queries */
@media screen and (max-width: 1226px) {
@media screen and (max-width: 1107px) {
header {
padding: 1.3rem 5%;
}

.contact-box {
flex-direction: column;
margin-top:150px;
}

.contact-left, .contact-right {
padding: 20px;
position:relative;
padding: 50px;
flex-basis: 100%;
justify-content: center;
display:inline-block;
margin-top:-100px;
align-items: center;
}

.contact-container h1, .contact-container img {
Expand All @@ -253,30 +256,42 @@ textarea{
.contact-left h3 {
font-size: 40px;
line-height: 50px;
text-align: center;}
text-align: center;
}
.contact-left h3 {
position:relative;
left:50px;
top:-50px;}
.contact-left h4 {position:relative;
top:-50px;
text-align: center;
}
.contact-left h4 {
position:relative;
text-align: center;
width:60%;
font-size: 40px;
line-height:45px;
left:250px;
top:-50px;}
.email {width:350px;}
.contact-left button, .contact-right button {
top:-50px;
left:200px;
}

.contact-right button {
position:relative;
width: 300px;
height: 90px;
font-size: 16px;
left:380px;}
font-size: 24px;
left: 380px;

}
.contact-left button {
font-size: 18px;
left: 250px;
width: 60%;
top: -60px;
position: relative;

}

input, textarea {
width: 90%;
margin-left: 0;
padding: 15px;
width: 59%;
left: 350px;
}
}

Expand All @@ -287,7 +302,8 @@ textarea{
}
.contact-box, .join-box, .contact-container {
flex-direction: column;
margin-top:120px;}
margin-top:120px;
}

.contact-left, .contact-right, .join-left, .join-right {
padding: 20px;
Expand All @@ -299,8 +315,7 @@ textarea{
.contact-left h3, .join-left h3 {
font-size: 35px;
line-height: 45px;
text-align: center;

text-align: center;
}

.contact-left h4, .join-left h4 {
Expand All @@ -313,14 +328,11 @@ textarea{
}

.contact-left button, .contact-right button, .join-right button {
width: 250px;
height: 80px;
font-size: 14px;
}

input, textarea {
width: 100%;
padding: 10px;
width: 65%;
}
}

Expand All @@ -338,17 +350,21 @@ textarea{
.contact-left h4, .join-left h4 {
font-size: 12px;
line-height: 18px;
text-align: center;
}

.contact-left button, .contact-right button, .join-right button {
width: 200px;
height: 70px;
font-size: 12px;
}


input{
padding: 10;
}

input, textarea {
width: 100%;
padding: 10px;
width: 50%;
}
}

Expand Down
8 changes: 4 additions & 4 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@ <h1>Contact Us</h1>
<div class="contact-left">
<h3>Send Us a Message</h3>
<h4>Have a question? Contact us using the form below, one of our team members will be in touch shortly!</h4>
<button type ="email"> <p>Email us at
<a href="mailto:[email protected]"> [email protected]</p>
</a> </button>
<img class="mailLeft" src="images/Brand/email.svg"/>
<button type ="email">
<i class='bx bxs-envelope'id="mailicon"></i>
<p>Email us at<a href="mailto:[email protected]"> [email protected]</p></a>
</button>


</div>
Expand Down
Loading

0 comments on commit fb6ce62

Please sign in to comment.