mirror of
https://github.com/danilt2000/Alma-vid.git
synced 2025-12-08 19:29:26 +02:00
updated the version and added the label a home
updated the version and added the label a home
This commit is contained in:
Madara0330E
10232
package-lock.json
generated
10232
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -39,5 +39,9 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"sass": "^1.63.6"
|
"sass": "^1.63.6"
|
||||||
|
},
|
||||||
|
"overrides": {
|
||||||
|
"nth-check": "^2.0.1",
|
||||||
|
"postcss": "^8.4.31"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,48 +1,48 @@
|
|||||||
import 'react-image-gallery/styles/scss/image-gallery.scss';
|
import "react-image-gallery/styles/css/image-gallery.css";
|
||||||
import './Gallery.scss';
|
import "./Gallery.scss";
|
||||||
import ImageGallery from 'react-image-gallery';
|
import ImageGallery from "react-image-gallery";
|
||||||
|
|
||||||
import objectPicOne from '../../assets/images/apartaments/image-47.jpg';
|
import objectPicOne from "../../assets/images/apartaments/image-47.jpg";
|
||||||
import objectPicTwo from '../../assets/images/apartaments/image-48.jpg';
|
import objectPicTwo from "../../assets/images/apartaments/image-48.jpg";
|
||||||
import objectPicThree from '../../assets/images/apartaments/image-49.jpg';
|
import objectPicThree from "../../assets/images/apartaments/image-49.jpg";
|
||||||
import objectPicFour from '../../assets/images/apartaments/image-50.jpg';
|
import objectPicFour from "../../assets/images/apartaments/image-50.jpg";
|
||||||
import objectPicFive from '../../assets/images/apartaments/image-51.jpg';
|
import objectPicFive from "../../assets/images/apartaments/image-51.jpg";
|
||||||
|
|
||||||
function Gallery() {
|
function Gallery() {
|
||||||
const images = [
|
const images = [
|
||||||
{
|
{
|
||||||
original: objectPicOne,
|
original: objectPicOne,
|
||||||
thumbnail: objectPicOne
|
thumbnail: objectPicOne,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
original: objectPicTwo,
|
original: objectPicTwo,
|
||||||
thumbnail: objectPicTwo
|
thumbnail: objectPicTwo,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
original: objectPicThree,
|
original: objectPicThree,
|
||||||
thumbnail: objectPicThree
|
thumbnail: objectPicThree,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
original: objectPicFour,
|
original: objectPicFour,
|
||||||
thumbnail: objectPicFour
|
thumbnail: objectPicFour,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
original: objectPicFive,
|
original: objectPicFive,
|
||||||
thumbnail: objectPicFive
|
thumbnail: objectPicFive,
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="custom-gallery">
|
<div className="custom-gallery">
|
||||||
<ImageGallery
|
<ImageGallery
|
||||||
items={images}
|
items={images}
|
||||||
showPlayButton={false}
|
showPlayButton={false}
|
||||||
showFullscreenButton={false}
|
showFullscreenButton={false}
|
||||||
slideInterval={1000}
|
slideInterval={1000}
|
||||||
slideOnThumbnailOver={false}
|
slideOnThumbnailOver={false}
|
||||||
showIndex={true}
|
showIndex={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
export { Gallery} ;
|
export { Gallery };
|
||||||
|
|||||||
@@ -1,71 +1,102 @@
|
|||||||
import { useEffect } from 'react';
|
import { useEffect } from "react";
|
||||||
import './Home.scss';
|
import "./Home.scss";
|
||||||
import { YMaps, Map } from '@pbe/react-yandex-maps';
|
import { YMaps, Map } from "@pbe/react-yandex-maps";
|
||||||
|
|
||||||
import { Header } from '../../components/Header/Header';
|
import { Header } from "../../components/Header/Header";
|
||||||
import { Form } from '../../components/Form/Form';
|
import { Form } from "../../components/Form/Form";
|
||||||
import lawyer from '../../assets/images/lawyer/Mask-group.svg';
|
import lawyer from "../../assets/images/lawyer/Mask-group.svg";
|
||||||
|
|
||||||
function Home() {
|
function Home() {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.title = 'Агентство недвижимости АЛМА-ВИД';
|
document.title = "Агентство недвижимости АЛМА-ВИД";
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="wrapper">
|
<div className="wrapper">
|
||||||
<Header />
|
<Header />
|
||||||
</div>
|
<div className="hero-tagline">
|
||||||
<section className="info">
|
<p>4 000 лично успешных проведенных сделок + 20 лет опыта</p>
|
||||||
<div className="info__desc">
|
</div>
|
||||||
<h3 className="info__title font-inter-extrabold">ПОЧЕМУ НАМ МОЖНО ДОВЕРЯТЬ</h3>
|
</div>
|
||||||
<ul className="font-inter-regular">
|
<section className="info">
|
||||||
<li>Помогаем продать и купить жилую и коммерческую недвижимость;</li>
|
<div className="info__desc">
|
||||||
<li>Консультации по покупке или продаже недвижимости;</li>
|
<h3 className="info__title font-inter-extrabold">
|
||||||
<li>Работаем в соответствии с Законодательством РФ;</li>
|
ПОЧЕМУ НАМ МОЖНО ДОВЕРЯТЬ
|
||||||
<li>Юридическая проверка всех сделок и соблюдение закона о защите персональных данных делают
|
</h3>
|
||||||
сделки безопасными для своих клиентов;</li>
|
<ul className="font-inter-regular">
|
||||||
<li>Эффективность.</li>
|
<li>
|
||||||
<li>Широкая база объектов недвижимости, профессиональная продажа
|
Помогаем продать и купить жилую и коммерческую недвижимость;
|
||||||
и подбор, собственные рекламные алгоритмы, и огромный опыт
|
</li>
|
||||||
в проведении сделок любой сложности;</li>
|
<li>Консультации по покупке или продаже недвижимости;</li>
|
||||||
<li>Выгодная процентная ставка по ипотеке;</li>
|
<li>Работаем в соответствии с Законодательством РФ;</li>
|
||||||
<li>Партнерские отношения с банками;</li>
|
<li>
|
||||||
<li>Индивидуальный подход к каждому клиенту;</li>
|
Юридическая проверка всех сделок и соблюдение закона о защите
|
||||||
<li>Участие в аукционах государственных закупок жилья.</li>
|
персональных данных делают сделки безопасными для своих клиентов;
|
||||||
</ul>
|
</li>
|
||||||
</div>
|
<li>Эффективность.</li>
|
||||||
<div className="info__separator"></div>
|
<li>
|
||||||
<div className="info__lead font-inter-bold">
|
Широкая база объектов недвижимости, профессиональная продажа и
|
||||||
<p>Высокое качество <span>обслуживания</span></p>
|
подбор, собственные рекламные алгоритмы, и огромный опыт в
|
||||||
<p>Сэкономим <span>ваше время</span></p>
|
проведении сделок любой сложности;
|
||||||
<p>Оплата после <span>сделки</span></p>
|
</li>
|
||||||
</div>
|
<li>Выгодная процентная ставка по ипотеке;</li>
|
||||||
</section>
|
<li>Партнерские отношения с банками;</li>
|
||||||
<section className="lawyer-info font-inter-bold">
|
<li>Индивидуальный подход к каждому клиенту;</li>
|
||||||
<div className="lawyer-info__container">
|
<li>Участие в аукционах государственных закупок жилья.</li>
|
||||||
<img className="lawyer-info__image" src={lawyer} alt="Наталья Ткаченко" />
|
</ul>
|
||||||
<div className="lawyer-info__desc">
|
</div>
|
||||||
<h3 className="lawyer-info__title">Наталья Ткаченко</h3>
|
<div className="info__separator"></div>
|
||||||
<p className="lawyer-info__text font-inter-regular">Руководитель агентства недвижимости,
|
<div className="info__lead font-inter-bold">
|
||||||
опыт юридической практики 20 лет, более 4 000 лично проведённых сделок
|
<p>
|
||||||
с недвижимостью по РФ</p>
|
Высокое качество <span>обслуживания</span>
|
||||||
</div>
|
</p>
|
||||||
</div>
|
<p>
|
||||||
<p className="lawyer-info__para">Оказываем квалифицированную помощь в любых вопросах, связанных
|
Сэкономим <span>ваше время</span>
|
||||||
с недвижимостью! Бесплатные консультации по недвижимости.</p>
|
</p>
|
||||||
<p className="lawyer-info__paraMobile">Оказываем квалифицированную помощь в любых вопросах, связанных
|
<p>
|
||||||
с недвижимостью!</p>
|
Оплата после <span>сделки</span>
|
||||||
<p className="lawyer-info__paraMobile">Бесплатные консультации по недвижимости</p>
|
</p>
|
||||||
</section>
|
</div>
|
||||||
<div className="map-container">
|
</section>
|
||||||
<YMaps>
|
<section className="lawyer-info font-inter-bold">
|
||||||
<Map className="map" defaultState={{ center: [55.16, 61.4], zoom: 12 }} />
|
<div className="lawyer-info__container">
|
||||||
</YMaps>
|
<img
|
||||||
</div>
|
className="lawyer-info__image"
|
||||||
<Form scrolledThreshold={2750}/>
|
src={lawyer}
|
||||||
</>
|
alt="Наталья Ткаченко"
|
||||||
);
|
/>
|
||||||
|
<div className="lawyer-info__desc">
|
||||||
|
<h3 className="lawyer-info__title">Наталья Ткаченко</h3>
|
||||||
|
<p className="lawyer-info__text font-inter-regular">
|
||||||
|
Руководитель агентства недвижимости, опыт юридической практики 20
|
||||||
|
лет, более 4 000 лично проведённых сделок с недвижимостью по РФ
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="lawyer-info__para">
|
||||||
|
Оказываем квалифицированную помощь в любых вопросах, связанных с
|
||||||
|
недвижимостью! Бесплатные консультации по недвижимости.
|
||||||
|
</p>
|
||||||
|
<p className="lawyer-info__paraMobile">
|
||||||
|
Оказываем квалифицированную помощь в любых вопросах, связанных с
|
||||||
|
недвижимостью!
|
||||||
|
</p>
|
||||||
|
<p className="lawyer-info__paraMobile">
|
||||||
|
Бесплатные консультации по недвижимости
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<div className="map-container">
|
||||||
|
<YMaps>
|
||||||
|
<Map
|
||||||
|
className="map"
|
||||||
|
defaultState={{ center: [55.16, 61.4], zoom: 12 }}
|
||||||
|
/>
|
||||||
|
</YMaps>
|
||||||
|
</div>
|
||||||
|
<Form scrolledThreshold={2750} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { Home };
|
export { Home };
|
||||||
|
|||||||
@@ -1,256 +1,311 @@
|
|||||||
@import '../../styles/vars.scss';
|
@import "../../styles/vars.scss";
|
||||||
|
|
||||||
.info ul {
|
.info ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info ul li {
|
.info ul li {
|
||||||
line-height: 29px;
|
line-height: 29px;
|
||||||
|
|
||||||
@media (min-width: 1800px) {
|
@media (min-width: 1800px) {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info__lead p span {
|
.info__lead p span {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
background-image: url(../../assets/images/background/Ud_EgKxddHk.jpg);
|
background-image: url(../../assets/images/background/Ud_EgKxddHk.jpg);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 100vh;
|
height: 100vh; // Рассмотрите возможность изменения на min-height: 100vh; height: auto; на мобильных, если контент будет выходить за пределы экрана
|
||||||
|
|
||||||
|
@media (max-width: $mobileWidth) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// height: auto; // Если содержимое может превышать высоту экрана
|
||||||
|
// min-height: 100vh; // Чтобы заполнить экран, если содержимое короткое
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
display: flex;
|
display: flex;
|
||||||
column-gap: 184px;
|
column-gap: 184px;
|
||||||
padding: 72px;
|
padding: 72px;
|
||||||
background: linear-gradient(270deg, #17628C 0%, #FFFFFF 100%);
|
background: linear-gradient(270deg, #17628c 0%, #ffffff 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info__title {
|
.info__title {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
|
|
||||||
@media (min-width: 1800px) {
|
@media (min-width: 1800px) {
|
||||||
font-size: 34px;
|
font-size: 34px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info__separator {
|
.info__separator {
|
||||||
margin: 35px 0;
|
margin: 35px 0;
|
||||||
border-left: 4.5px solid rgba(255, 255, 255, 0.57);
|
border-left: 4.5px solid rgba(255, 255, 255, 0.57);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info__lead p {
|
.info__lead p {
|
||||||
min-width: 280px;
|
min-width: 280px;
|
||||||
margin: 80px 0;
|
margin: 80px 0;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
@media (min-width: 1800px) {
|
@media (min-width: 1800px) {
|
||||||
min-width: 325px;
|
min-width: 325px;
|
||||||
font-size: 29px;
|
font-size: 29px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lawyer-info {
|
.lawyer-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
row-gap: 65px;
|
row-gap: 65px;
|
||||||
margin: 82px 263px;
|
margin: 82px 263px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lawyer-info__container {
|
.lawyer-info__container {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
column-gap: 104px;
|
column-gap: 104px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lawyer-info__title {
|
.lawyer-info__title {
|
||||||
font-size: 34px;
|
font-size: 34px;
|
||||||
|
|
||||||
@media (min-width: 1800px) {
|
@media (min-width: 1800px) {
|
||||||
font-size: 38px;
|
font-size: 38px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lawyer-info__text {
|
.lawyer-info__text {
|
||||||
font-size: 27px;
|
font-size: 27px;
|
||||||
|
|
||||||
@media (min-width: 1800px) {
|
@media (min-width: 1800px) {
|
||||||
font-size: 31px;
|
font-size: 31px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lawyer-info__image {
|
.lawyer-info__image {
|
||||||
height: 349px;
|
height: 349px;
|
||||||
width: 349px;
|
width: 349px;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
@media (min-width: 1800px) {
|
@media (min-width: 1800px) {
|
||||||
height: 379px;
|
height: 379px;
|
||||||
width: 379px;
|
width: 379px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lawyer-info__para {
|
.lawyer-info__para {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
@media (min-width: 1800px) {
|
@media (min-width: 1800px) {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.map-container {
|
.map-container {
|
||||||
padding: 0 146px 80px 146px;
|
padding: 0 146px 80px 146px;
|
||||||
|
|
||||||
@media (max-width: $laptopWidth) {
|
@media (max-width: $laptopWidth) {
|
||||||
padding: 0px 50px 80px 50px;
|
padding: 0px 50px 80px 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $tabletWidth) {
|
@media (max-width: $tabletWidth) {
|
||||||
padding: 0px 35px 50px 35px;
|
padding: 0px 35px 50px 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $mobileWidth) {
|
@media (max-width: $mobileWidth) {
|
||||||
padding: 0px 18px 40px 18px;
|
padding: 0px 18px 40px 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.map {
|
.map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
@media (max-width: $laptopWidth) {
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hero-tagline {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 100px 60px 0;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
font-size: max(50px, 3.646vw);
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
max-width: max(600px, min(1150px, 59.896vw));
|
||||||
|
|
||||||
|
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: $tabletWidth) {
|
||||||
|
|
||||||
|
padding: 15px 30px 0;
|
||||||
|
p {
|
||||||
|
font-size: 18px;
|
||||||
|
max-width: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $mobileWidth) {
|
||||||
|
|
||||||
|
order: 1;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 15px 0;
|
||||||
|
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero-tagline {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $desktopWidth) {
|
||||||
|
.info__lead {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1120px) {
|
||||||
|
.info {
|
||||||
|
column-gap: 154px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $laptopWidth) {
|
||||||
|
.info {
|
||||||
|
padding: 36px;
|
||||||
|
column-gap: 92px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info {
|
||||||
|
margin: 41px 131px;
|
||||||
|
row-gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info__text {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info__title {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $tabletWidth) {
|
||||||
|
.lawyer-info__para {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__separator,
|
||||||
|
.info__lead {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background: linear-gradient(270deg, #abc3d1 0%, #ffffff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info__title {
|
||||||
|
font-size: 26px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info__container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info__title {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info__title,
|
||||||
|
.lawyer-info__text {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info__text {
|
||||||
|
margin-top: 12.5px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info__paraMobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
margin: 0;
|
||||||
|
padding: 40px;
|
||||||
@media (max-width: $laptopWidth) {
|
font-size: 25px;
|
||||||
height: 50vh;
|
text-align: center;
|
||||||
}
|
border-radius: 20px;
|
||||||
|
background-color: #17628c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width:$desktopWidth) {
|
@media (max-width: 640px) {
|
||||||
|
.lawyer-info__paraMobile {
|
||||||
.info__lead {
|
width: 125%;
|
||||||
align-self: center;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width:1120px) {
|
@media (max-width: $mobileWidth) {
|
||||||
.info {
|
.info__title {
|
||||||
column-gap: 154px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lawyer-info__title {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info__text {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lawyer-info__paraMobile {
|
||||||
|
width: 200%;
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width:$laptopWidth) {
|
@media (min-width: 769px) {
|
||||||
.info {
|
.lawyer-info__paraMobile {
|
||||||
padding: 36px;
|
display: none;
|
||||||
column-gap: 92px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info {
|
|
||||||
margin: 41px 131px;
|
|
||||||
row-gap: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__text {
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__title {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width:$tabletWidth) {
|
|
||||||
|
|
||||||
.lawyer-info__para {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info__separator,
|
|
||||||
.info__lead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
background: linear-gradient(270deg, #abc3d1 0%, #FFFFFF 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info__title {
|
|
||||||
font-size: 26px;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__container {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__title {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__title,
|
|
||||||
.lawyer-info__text {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__text {
|
|
||||||
margin-top: 12.5px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__paraMobile {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 40px;
|
|
||||||
font-size: 25px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 20px;
|
|
||||||
background-color: #17628C;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width:640px) {
|
|
||||||
|
|
||||||
.lawyer-info__paraMobile {
|
|
||||||
width: 125%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width:$mobileWidth) {
|
|
||||||
|
|
||||||
.info__title {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__title {
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__text {
|
|
||||||
font-size: 21px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lawyer-info__paraMobile {
|
|
||||||
width: 200%;
|
|
||||||
font-size: 21px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width:769px) {
|
|
||||||
|
|
||||||
.lawyer-info__paraMobile {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user