AzitaRahimi/contactus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

contactus-final

Browse Source
This commit is contained in:
Azita Rahimi
2026-06-14 10:26:08 +03:30
parent e9b3977c77 03a21c9ddb
commit 1d046fa445
6 changed files with 121 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -1,3 +1,4 @@
<<<<<<< HEAD
# Inova - Frontend
فرانت‌اند قالب وردپرس پروژه Inova
@@ -30,3 +31,7 @@ npm install
# اجرای محیط توسعه
npm run dev
```
=======
# contactus
>>>>>>> 03a21c9ddbfa4f72d94be8d6392c258571cfc994

23
contactus.html
View File

@@ -98,12 +98,12 @@
</div>
<div class="form-text">
<label class="required-label">متن درخواست </label>
<label>متن درخواست </label>
<textarea id="message"></textarea>
</div>
<button type="submit" class="form-btn" id="submitBtn">
<span class="btn-text">ثبت درخواست</span>
<span class="btn-text">ارسال درخواست</span>
<span class="form-btn-icon btn-icon-default" aria-hidden="true">
<svg width="24" height="24" focusable="false" color="white">
@@ -136,14 +136,14 @@
</div>
<div class="form-brands__logos">
<div class="logos-track">
<img src="./public/images/logo 4.png" />
<img src="./public/images/logo 5.png" />
<img src="./public/images/logo 6.png" />
<img src="./public/images/logo1.png" />
<img src="./public/images/logo2.png" />
<img src="./public/images/logo3.png" />
<img src="./public/images/logo7.png" />
<img src="./public/images/logo8.png" />
<img id="logo-customer1" src="./public/images/logo 4.png" />
<img id="logo-customer2" src="./public/images/logo 5.png" />
<img id="logo-customer3" src="./public/images/logo 6.png" />
<img id="logo-customer4" src="./public/images/logo1.png" />
<img id="logo-customer5" src="./public/images/logo2.png" />
<img id="logo-customer6" src="./public/images/logo3.png" />
<img id="logo-customer7" src="./public/images/logo7.png" />
<img id="logo-customer8" src="./public/images/logo8.png" />
</div>
</div>
</div>
@@ -516,9 +516,10 @@
<section class="map-section">
<div class="container">
<div class="map-card">
<span class="map-txt"> خیابان ناوک</span>
<img
class="map-card__img"
src="./public/images/Map.png"
src="./public/images/Map4X.png"
alt="نقشه دفتر اینوا - خیابان ناوک، تهران"
/>

BIN
public/images/Map.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 417 KiB

BIN
public/images/Map4X.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 MiB

9
src/assets/css/contactus-responsive.css
View File

@@ -120,15 +120,6 @@
font-size: 20px;
line-height: 32px;
}
.contact-item__label {
font-size: 13px;
}
.contact-item__value {
font-size: 12px;
}
.contact-social__icons {
flex-wrap: wrap;
justify-content: flex-start;

172
src/assets/css/contactus.css
View File

@@ -31,7 +31,6 @@ main {
justify-content: center;
}
.hero-content {
position: relative;
z-index: 1;
@@ -71,11 +70,26 @@ main {
right: 50%;
transform: translate(50%, -50%);
}
.circle--1 { width: 698px; height: 698px; background-color:rgba(216, 233, 255, 0.2);}
.circle--2 { width: 616px; height: 616px; background-color: rgba(216, 233, 255, 0.4); }
.circle--3 { width: 534px; height: 534px; background-color: rgba(216, 233, 255, 0.6); }
.circle--4 { width: 452px; height: 452px; background-color: rgba(216, 233, 255, 0.8); }
.circle--1 {
width: 698px;
height: 698px;
background-color: rgba(216, 233, 255, 0.2);
}
.circle--2 {
width: 616px;
height: 616px;
background-color: rgba(216, 233, 255, 0.4);
}
.circle--3 {
width: 534px;
height: 534px;
background-color: rgba(216, 233, 255, 0.6);
}
.circle--4 {
width: 452px;
height: 452px;
background-color: rgba(216, 233, 255, 0.8);
}
.hero-hollow {
position: absolute;
@@ -86,14 +100,14 @@ main {
top: 75%;
transform: translateY(-50%);
pointer-events: none;
filter: blur(250px);
filter: blur(250px);
}
.hero-hollow--left {
.hero-hollow--left {
left: -290px;
}
.hero-hollow--right {
right: -290px;
}
}
.hero-dot-pattern {
position: absolute;
@@ -103,15 +117,13 @@ main {
pointer-events: none;
opacity: 0.4;
}
.contactus-hands{
position: absolute;
.contactus-hands {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
/* ═══════════════════════════════════════════════════════
CONTACT SECTION
═══════════════════════════════════════════════════════ */
@@ -199,7 +211,6 @@ main {
overflow: hidden;
}
.contact-item__body {
flex: 1;
display: flex;
@@ -262,7 +273,7 @@ main {
display: flex;
flex-direction: column;
gap: 16px;
align-items:flex-start ;
align-items: flex-start;
}
.contact-social__label {
@@ -345,21 +356,20 @@ main {
.form-input input:focus,
.form-text textarea:focus {
border-color: var(--color-primary);
background-color: #EAF7FF;
background-color: #eaf7ff;
}
.error-message {
color: #DC2626;
color: #dc2626;
font-size: 13px;
margin-top: 6px;
display: block;
}
.input-error {
background-color: #FFEBEB !important;
background-color: #ffebeb !important;
border-color: #ef4444 !important;
}
/* ── Brands logos scroll ── */
.form-brands {
display: flex;
@@ -394,21 +404,9 @@ main {
overflow: hidden;
position: relative;
mask-image: linear-gradient(
90deg,
transparent 0%,
black 8%,
black 92%,
transparent 100%
);
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
black 8%,
black 92%,
transparent 100%
);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logos-track {
@@ -429,26 +427,16 @@ main {
}
@keyframes logos-scroll {
from { transform: translateX(-1%); }
to { transform: translateX(50%); }
from {
transform: translateX(-1%);
}
to {
transform: translateX(50%);
}
}
form {
display: flex;
/* display: flex; */
flex-wrap: wrap;
gap: 16px;
}
@@ -476,7 +464,7 @@ textarea {
font-weight: 400;
line-height: 1.8;
color: var(--color-title);
background-color: #f9f9f9;
background-color: #ffffff;
}
textarea {
min-height: 114px;
@@ -485,6 +473,7 @@ textarea {
.form-input {
flex-basis: 48%;
position: relative;
margin-bottom: 16px;
}
.label {
display: block;
@@ -536,7 +525,7 @@ textarea {
.option {
padding: 0px 12px;
height: 38px;
font-size: 17px;
font-size: 13px;
transition: 0.2s;
background-color: #f9f9f9;
display: flex;
@@ -548,12 +537,14 @@ textarea {
}
.form-text {
flex-basis: 98%;
font-size: 14px;
margin-bottom: 16px;
}
.form-btn {
background-color: var(--color-primary);
border: none;
border-radius: 10px;
padding: 10px 12px 10px 10px;
padding: 10px 24px 10px 20px;
display: flex;
align-items: center;
justify-content: center;
@@ -657,13 +648,11 @@ textarea {
text-align: center;
}
/* ═══════════════════════════════════════════════════════
PROCESS STEPS
═══════════════════════════════════════════════════════ */
.steps-section {
padding-bottom: 100px;
}
.steps-header {
@@ -711,7 +700,9 @@ textarea {
border-radius: 16px;
overflow: hidden;
text-align: right;
transition: background-color 0.3s ease, color 0.3s ease;
transition:
background-color 0.3s ease,
color 0.3s ease;
background-image: url(/src/img/Vector\(1\).png);
z-index: 1;
}
@@ -731,8 +722,8 @@ textarea {
.step-card:hover::before {
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
} */
.step-card::before {
content: "";
.step-card::before {
content: '';
position: absolute;
width: 400%;
@@ -755,7 +746,6 @@ textarea {
transform: scale(1);
}
.step-card > * {
position: relative;
z-index: 2;
@@ -773,7 +763,7 @@ textarea {
border: 1px solid var(--color-primary);
color: var(--color-primary);
white-space: nowrap;
transition: border-color 0.3s ease, color 0.3s ease;
/* transition: border-color 0.3s ease, color 0.3s ease; */
}
.step-card__icon {
@@ -803,7 +793,7 @@ textarea {
line-height: 28px;
color: var(--color-text);
white-space: nowrap;
transition: color 0.3s ease;
/* transition: color 0.3s ease; */
}
.step-card__desc {
@@ -811,7 +801,7 @@ textarea {
font-weight: 400;
line-height: 26px;
color: var(--color-body-text);
transition: color 0.3s ease;
/* transition: color 0.3s ease; */
}
/* ─── Hover: ALL cards turn blue ────────────────── */
@@ -820,7 +810,29 @@ textarea {
opacity: 0.15; /* dim the pattern so it doesn't clash with the blue bg */
}
.step-card__meta svg {
color: var(--color-primary) ;
color: var(--color-primary);
}
/* .step-card {
color: var(--color-text);
} */
.step-card:hover {
color: #fff;
}
.step-card__title,
.step-card__desc,
.step-card__badge,
.step-card__meta svg {
transition:
color ease 0.3s,
border-color ease 0.3s;
}
.step-card:hover .step-card__title,
.step-card:hover .step-card__desc,
.step-card:hover .step-card__badge,
.step-card:hover .step-card__meta svg {
transition-delay: 0.3s;
}
.step-card:hover .step-card__meta svg {
color: #ffffff;
@@ -867,7 +879,28 @@ textarea {
border-radius: 48px;
pointer-events: none;
}
.map-txt {
position: absolute;
top: 43%;
left: 56%;
transform: translate(-50%, -50%);
color: #556574;
font-size: 12px;
z-index: 10;
text-shadow:
-1px 0 #fff,
1px 0 #fff,
0 -1px #fff,
0 1px #fff,
-1px -1px #fff,
1px -1px #fff,
-1px 1px #fff,
1px 1px #fff;
}
.map-txt::before {
-webkit-text-stroke: 2px #fff;
}
.map-card__location {
position: absolute;
left: 56%;
@@ -878,22 +911,21 @@ textarea {
display: flex;
align-items: center;
justify-content: center;
}
.map-location-dot {
position: relative;
display: block;
width: 12px;
height: 12px;
background-color: #0274B3;
width: 18px;
height: 18px;
background-color: #0274b3;
border-radius: 50%;
border: 2.2px solid #ffffff;
z-index: 100;
}
.map-card__location::before,
.map-card__location::after {
content: "";
content: '';
position: absolute;
left: 50%;
top: 50%;
@@ -901,7 +933,7 @@ textarea {
height: 12px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: #0274B3;
background: #0274b3;
z-index: -1;
animation: locationPulse 2s infinite ease-out;
filter: blur(2px);
@@ -926,7 +958,7 @@ textarea {
.map-card__nav {
position: absolute;
right: 40px;
bottom: 40px;
bottom: 24px;
display: flex;
gap: 16px;
align-items: center;