MetatroncubeSoftwareSolutions/janahan-law
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contact page updated

Browse Source
This commit is contained in:
Alaguraj0361 2025-08-14 14:54:08 +05:30
parent 11993a630e
commit dbe841eed4
2 changed files with 73 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/Contactpage/Contactpage.js
View File

@ -11,7 +11,7 @@ const Contactpage = () => {
<div className="col col-lg-10 offset-lg-1"> <div className="col col-lg-10 offset-lg-1">
<div className="office-info"> <div className="office-info">
<div className="row"> <div className="row">
<div className="col col-xl-4 col-lg-6 col-md-6 col-12"> {/* <div className="col col-xl-4 col-lg-6 col-md-6 col-12">
<div className="office-info-item"> <div className="office-info-item">
<div className="office-info-icon"> <div className="office-info-icon">
<div className="icon"> <div className="icon">
@ -23,8 +23,8 @@ const Contactpage = () => {
<p>7 Green Lake Street Crawfordsville, IN 47933</p> <p>7 Green Lake Street Crawfordsville, IN 47933</p>
</div> </div>
</div> </div>
</div> </div> */}
<div className="col col-xl-4 col-lg-6 col-md-6 col-12"> <div className="col col-xl-6 col-lg-6 col-md-6 col-12">
<div className="office-info-item"> <div className="office-info-item">
<div className="office-info-icon"> <div className="office-info-icon">
<div className="icon"> <div className="icon">
@ -34,11 +34,11 @@ const Contactpage = () => {
<div className="office-info-text"> <div className="office-info-text">
<h2>Email Us</h2> <h2>Email Us</h2>
<p>info@janahanlaw.com</p> <p>info@janahanlaw.com</p>
<p>helloyou@gmail.com</p> {/* <p>helloyou@gmail.com</p> */}
</div> </div>
</div> </div>
</div> </div>
<div className="col col-xl-4 col-lg-6 col-md-6 col-12"> <div className="col col-xl-6 col-lg-6 col-md-6 col-12">
<div className="office-info-item"> <div className="office-info-item">
<div className="office-info-icon"> <div className="office-info-icon">
<div className="icon"> <div className="icon">
@ -48,7 +48,7 @@ const Contactpage = () => {
<div className="office-info-text"> <div className="office-info-text">
<h2>Call Now</h2> <h2>Call Now</h2>
<p>+1 800 123 456 789</p> <p>+1 800 123 456 789</p>
<p>+1 800 123 654 987</p> {/* <p>+1 800 123 654 987</p> */}
</div> </div>
</div> </div>
</div> </div>

129
styles/sass/page/_contact.scss
View File

@ -1,4 +1,3 @@
/*-------------------------------------------------------------- /*--------------------------------------------------------------
19. wpo-contact-pg-section 19. wpo-contact-pg-section
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@ -6,34 +5,34 @@
padding-bottom: 0px; padding-bottom: 0px;
.wpo-contact-title{ .wpo-contact-title {
max-width: 440px; max-width: 440px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 50px;
@media(max-width:767px){ @media(max-width:767px) {
margin-bottom: 30px; margin-bottom: 30px;
} }
h2{ h2 {
font-size: 35px; font-size: 35px;
font-size: calc-rem-value(35); font-size: calc-rem-value(35);
font-weight: 600; font-weight: 600;
margin-bottom: 20px; margin-bottom: 20px;
@media(max-width:575px){ @media(max-width:575px) {
font-size: 25px; font-size: 25px;
font-size: calc-rem-value(25); font-size: calc-rem-value(25);
} }
} }
} }
.form-field{ .form-field {
margin-bottom: 30px; margin-bottom: 30px;
} }
.errorMessage{ .errorMessage {
color: red; color: red;
font-size: 14px; font-size: 14px;
margin-top: 5px; margin-top: 5px;
@ -50,6 +49,7 @@
box-shadow: none !important; box-shadow: none !important;
padding-left: 25px; padding-left: 25px;
border: 1px solid #ebebeb; border: 1px solid #ebebeb;
color: #a9a9a9;
@include media-query(991px) { @include media-query(991px) {
height: 45px; height: 45px;
@ -68,18 +68,18 @@
form { form {
margin: 0 -15px; margin: 0 -15px;
overflow: hidden; overflow: hidden;
@include placeholder-style(#9d9c9c, 15px, normal); @include placeholder-style(#9d9c9c, 15px, normal);
select { select {
display: inline-block; display: inline-block;
color: #a9a9a9; color: #a9a9a9;
cursor:pointer; cursor: pointer;
opacity: 1; opacity: 1;
padding: 6px 25px; padding: 6px 25px;
font-size: 15px; font-size: 15px;
font-size: calc-rem-value(15); font-size: calc-rem-value(15);
-webkit-appearance: none; -webkit-appearance: none;
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
@ -88,12 +88,12 @@
background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center; background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center;
position: relative; position: relative;
&:focus{ &:focus {
background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center; background: transparent url(/images/select-icon2.png) no-repeat calc(100% - 15px) center;
} }
} }
.submit-area{ .submit-area {
text-align: center; text-align: center;
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
@ -103,22 +103,22 @@
margin-bottom: 0; margin-bottom: 0;
} }
.theme-btn{ .theme-btn {
border-radius: 0px; border-radius: 0px;
font-family: $base-font; font-family: $base-font;
font-size: 16px; font-size: 16px;
&:after{ &:after {
border-radius: 0px; border-radius: 0px;
} }
} }
} }
} }
form > div { form>div {
margin: 0 15px 25px; margin: 0 15px 25px;
@include media-query(600px) { @include media-query(600px) {
width: calc(100% - 25px); width: calc(100% - 25px);
} }
} }
@ -132,21 +132,21 @@
.office-info { .office-info {
padding-bottom: 100px; padding-bottom: 100px;
@media(max-width:767px){ @media(max-width:767px) {
padding-bottom: 60px; padding-bottom: 60px;
} }
.col{ .col {
.office-info-item{ .office-info-item {
@media(max-width:1200px){ @media(max-width:1200px) {
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
&:last-child{ &:last-child {
.office-info-item{ .office-info-item {
@media(max-width:1200px){ @media(max-width:1200px) {
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
@ -154,12 +154,13 @@
} }
.office-info-item{ .office-info-item {
text-align: center; text-align: center;
box-shadow: 0px 5px 15px 0px rgba(62, 65, 159, 0.1); // box-shadow: 0px 5px 15px 0px rgba(62, 65, 159, 0.1);
background-color: rgb(193 32 38);
padding: 40px; padding: 40px;
.office-info-icon{ .office-info-icon {
width: 85px; width: 85px;
height: 85px; height: 85px;
background: #f5f5f5; background: #f5f5f5;
@ -167,59 +168,63 @@
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
@include rounded-border(50%); @include rounded-border(50%);
.icon{ .icon {
.fi{ .fi {
&:before{ &:before {
font-size: 35px; font-size: 35px;
} }
} }
} }
} }
.office-info-text{
h2{ .office-info-text {
h2 {
font-size: 30px; font-size: 30px;
font-weight: 500; font-weight: 500;
margin: 20px 0; margin: 20px 0 5px;
color: white;
} }
p{
p {
margin-bottom: 0; margin-bottom: 0;
color: white;
} }
} }
} }
} }
.wpo-contact-form-area{ .wpo-contact-form-area {
padding: 50px; padding: 50px;
background: $white; background: #102548;
box-shadow: 0px 1px 15px 0px rgba(62, 65, 159, 0.1); // box-shadow: 0px 1px 15px 0px rgba(62, 65, 159, 0.1);
margin-bottom: -125px; margin-bottom: -125px;
position: relative; position: relative;
z-index: 99; z-index: 99;
@media(max-width:767px){ @media(max-width:767px) {
padding: 30px; padding: 30px;
padding-top: 50px; padding-top: 50px;
}
} }
}
} }
.wpo-contact-map-section { .wpo-contact-map-section {
.wpo-contact-map { .wpo-contact-map {
height: 550px; height: 550px;
} }
iframe { iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 0; border: 0;
outline: 0; outline: 0;
} }
h2.hidden{ h2.hidden {
display: none; display: none;
} }
} }