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": {
|
||||
"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 './Gallery.scss';
|
||||
import ImageGallery from 'react-image-gallery';
|
||||
import "react-image-gallery/styles/css/image-gallery.css";
|
||||
import "./Gallery.scss";
|
||||
import ImageGallery from "react-image-gallery";
|
||||
|
||||
import objectPicOne from '../../assets/images/apartaments/image-47.jpg';
|
||||
import objectPicTwo from '../../assets/images/apartaments/image-48.jpg';
|
||||
import objectPicThree from '../../assets/images/apartaments/image-49.jpg';
|
||||
import objectPicFour from '../../assets/images/apartaments/image-50.jpg';
|
||||
import objectPicFive from '../../assets/images/apartaments/image-51.jpg';
|
||||
import objectPicOne from "../../assets/images/apartaments/image-47.jpg";
|
||||
import objectPicTwo from "../../assets/images/apartaments/image-48.jpg";
|
||||
import objectPicThree from "../../assets/images/apartaments/image-49.jpg";
|
||||
import objectPicFour from "../../assets/images/apartaments/image-50.jpg";
|
||||
import objectPicFive from "../../assets/images/apartaments/image-51.jpg";
|
||||
|
||||
function Gallery() {
|
||||
const images = [
|
||||
{
|
||||
original: objectPicOne,
|
||||
thumbnail: objectPicOne
|
||||
},
|
||||
{
|
||||
original: objectPicTwo,
|
||||
thumbnail: objectPicTwo
|
||||
},
|
||||
{
|
||||
original: objectPicThree,
|
||||
thumbnail: objectPicThree
|
||||
},
|
||||
{
|
||||
original: objectPicFour,
|
||||
thumbnail: objectPicFour
|
||||
},
|
||||
{
|
||||
original: objectPicFive,
|
||||
thumbnail: objectPicFive
|
||||
}
|
||||
];
|
||||
const images = [
|
||||
{
|
||||
original: objectPicOne,
|
||||
thumbnail: objectPicOne,
|
||||
},
|
||||
{
|
||||
original: objectPicTwo,
|
||||
thumbnail: objectPicTwo,
|
||||
},
|
||||
{
|
||||
original: objectPicThree,
|
||||
thumbnail: objectPicThree,
|
||||
},
|
||||
{
|
||||
original: objectPicFour,
|
||||
thumbnail: objectPicFour,
|
||||
},
|
||||
{
|
||||
original: objectPicFive,
|
||||
thumbnail: objectPicFive,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="custom-gallery">
|
||||
<ImageGallery
|
||||
items={images}
|
||||
showPlayButton={false}
|
||||
showFullscreenButton={false}
|
||||
slideInterval={1000}
|
||||
slideOnThumbnailOver={false}
|
||||
showIndex={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="custom-gallery">
|
||||
<ImageGallery
|
||||
items={images}
|
||||
showPlayButton={false}
|
||||
showFullscreenButton={false}
|
||||
slideInterval={1000}
|
||||
slideOnThumbnailOver={false}
|
||||
showIndex={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export { Gallery} ;
|
||||
export { Gallery };
|
||||
|
||||
@@ -1,71 +1,102 @@
|
||||
import { useEffect } from 'react';
|
||||
import './Home.scss';
|
||||
import { YMaps, Map } from '@pbe/react-yandex-maps';
|
||||
import { useEffect } from "react";
|
||||
import "./Home.scss";
|
||||
import { YMaps, Map } from "@pbe/react-yandex-maps";
|
||||
|
||||
import { Header } from '../../components/Header/Header';
|
||||
import { Form } from '../../components/Form/Form';
|
||||
import lawyer from '../../assets/images/lawyer/Mask-group.svg';
|
||||
import { Header } from "../../components/Header/Header";
|
||||
import { Form } from "../../components/Form/Form";
|
||||
import lawyer from "../../assets/images/lawyer/Mask-group.svg";
|
||||
|
||||
function Home() {
|
||||
useEffect(() => {
|
||||
document.title = 'Агентство недвижимости АЛМА-ВИД';
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
document.title = "Агентство недвижимости АЛМА-ВИД";
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="wrapper">
|
||||
<Header />
|
||||
</div>
|
||||
<section className="info">
|
||||
<div className="info__desc">
|
||||
<h3 className="info__title font-inter-extrabold">ПОЧЕМУ НАМ МОЖНО ДОВЕРЯТЬ</h3>
|
||||
<ul className="font-inter-regular">
|
||||
<li>Помогаем продать и купить жилую и коммерческую недвижимость;</li>
|
||||
<li>Консультации по покупке или продаже недвижимости;</li>
|
||||
<li>Работаем в соответствии с Законодательством РФ;</li>
|
||||
<li>Юридическая проверка всех сделок и соблюдение закона о защите персональных данных делают
|
||||
сделки безопасными для своих клиентов;</li>
|
||||
<li>Эффективность.</li>
|
||||
<li>Широкая база объектов недвижимости, профессиональная продажа
|
||||
и подбор, собственные рекламные алгоритмы, и огромный опыт
|
||||
в проведении сделок любой сложности;</li>
|
||||
<li>Выгодная процентная ставка по ипотеке;</li>
|
||||
<li>Партнерские отношения с банками;</li>
|
||||
<li>Индивидуальный подход к каждому клиенту;</li>
|
||||
<li>Участие в аукционах государственных закупок жилья.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="info__separator"></div>
|
||||
<div className="info__lead font-inter-bold">
|
||||
<p>Высокое качество <span>обслуживания</span></p>
|
||||
<p>Сэкономим <span>ваше время</span></p>
|
||||
<p>Оплата после <span>сделки</span></p>
|
||||
</div>
|
||||
</section>
|
||||
<section className="lawyer-info font-inter-bold">
|
||||
<div className="lawyer-info__container">
|
||||
<img className="lawyer-info__image" 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}/>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="wrapper">
|
||||
<Header />
|
||||
<div className="hero-tagline">
|
||||
<p>4 000 лично успешных проведенных сделок + 20 лет опыта</p>
|
||||
</div>
|
||||
</div>
|
||||
<section className="info">
|
||||
<div className="info__desc">
|
||||
<h3 className="info__title font-inter-extrabold">
|
||||
ПОЧЕМУ НАМ МОЖНО ДОВЕРЯТЬ
|
||||
</h3>
|
||||
<ul className="font-inter-regular">
|
||||
<li>
|
||||
Помогаем продать и купить жилую и коммерческую недвижимость;
|
||||
</li>
|
||||
<li>Консультации по покупке или продаже недвижимости;</li>
|
||||
<li>Работаем в соответствии с Законодательством РФ;</li>
|
||||
<li>
|
||||
Юридическая проверка всех сделок и соблюдение закона о защите
|
||||
персональных данных делают сделки безопасными для своих клиентов;
|
||||
</li>
|
||||
<li>Эффективность.</li>
|
||||
<li>
|
||||
Широкая база объектов недвижимости, профессиональная продажа и
|
||||
подбор, собственные рекламные алгоритмы, и огромный опыт в
|
||||
проведении сделок любой сложности;
|
||||
</li>
|
||||
<li>Выгодная процентная ставка по ипотеке;</li>
|
||||
<li>Партнерские отношения с банками;</li>
|
||||
<li>Индивидуальный подход к каждому клиенту;</li>
|
||||
<li>Участие в аукционах государственных закупок жилья.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="info__separator"></div>
|
||||
<div className="info__lead font-inter-bold">
|
||||
<p>
|
||||
Высокое качество <span>обслуживания</span>
|
||||
</p>
|
||||
<p>
|
||||
Сэкономим <span>ваше время</span>
|
||||
</p>
|
||||
<p>
|
||||
Оплата после <span>сделки</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section className="lawyer-info font-inter-bold">
|
||||
<div className="lawyer-info__container">
|
||||
<img
|
||||
className="lawyer-info__image"
|
||||
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 };
|
||||
|
||||
@@ -1,256 +1,311 @@
|
||||
@import '../../styles/vars.scss';
|
||||
@import "../../styles/vars.scss";
|
||||
|
||||
.info ul {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info ul li {
|
||||
line-height: 29px;
|
||||
line-height: 29px;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 20px;
|
||||
line-height: 39px;
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 20px;
|
||||
line-height: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.info__lead p span {
|
||||
display: block;
|
||||
text-align: end;
|
||||
display: block;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
background-image: url(../../assets/images/background/Ud_EgKxddHk.jpg);
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
background-image: url(../../assets/images/background/Ud_EgKxddHk.jpg);
|
||||
background-size: cover;
|
||||
height: 100vh; // Рассмотрите возможность изменения на min-height: 100vh; height: auto; на мобильных, если контент будет выходить за пределы экрана
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height: auto; // Если содержимое может превышать высоту экрана
|
||||
// min-height: 100vh; // Чтобы заполнить экран, если содержимое короткое
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
column-gap: 184px;
|
||||
padding: 72px;
|
||||
background: linear-gradient(270deg, #17628C 0%, #FFFFFF 100%);
|
||||
display: flex;
|
||||
column-gap: 184px;
|
||||
padding: 72px;
|
||||
background: linear-gradient(270deg, #17628c 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.info__title {
|
||||
font-size: 30px;
|
||||
font-size: 30px;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 34px;
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.info__separator {
|
||||
margin: 35px 0;
|
||||
border-left: 4.5px solid rgba(255, 255, 255, 0.57);
|
||||
border-radius: 10px;
|
||||
margin: 35px 0;
|
||||
border-left: 4.5px solid rgba(255, 255, 255, 0.57);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.info__lead p {
|
||||
min-width: 280px;
|
||||
margin: 80px 0;
|
||||
text-align: end;
|
||||
font-size: 25px;
|
||||
line-height: 32px;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
min-width: 280px;
|
||||
margin: 80px 0;
|
||||
text-align: end;
|
||||
font-size: 25px;
|
||||
line-height: 32px;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
min-width: 325px;
|
||||
font-size: 29px;
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
min-width: 325px;
|
||||
font-size: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
.lawyer-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 65px;
|
||||
margin: 82px 263px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 65px;
|
||||
margin: 82px 263px;
|
||||
}
|
||||
|
||||
.lawyer-info__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 104px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 104px;
|
||||
}
|
||||
|
||||
.lawyer-info__title {
|
||||
font-size: 34px;
|
||||
font-size: 34px;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 38px;
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.lawyer-info__text {
|
||||
font-size: 27px;
|
||||
font-size: 27px;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 31px;
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.lawyer-info__image {
|
||||
height: 349px;
|
||||
width: 349px;
|
||||
background-size: cover;
|
||||
height: 349px;
|
||||
width: 349px;
|
||||
background-size: cover;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
height: 379px;
|
||||
width: 379px;
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
height: 379px;
|
||||
width: 379px;
|
||||
}
|
||||
}
|
||||
|
||||
.lawyer-info__para {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.map-container {
|
||||
padding: 0 146px 80px 146px;
|
||||
padding: 0 146px 80px 146px;
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
padding: 0px 50px 80px 50px;
|
||||
}
|
||||
@media (max-width: $laptopWidth) {
|
||||
padding: 0px 50px 80px 50px;
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
padding: 0px 35px 50px 35px;
|
||||
}
|
||||
@media (max-width: $tabletWidth) {
|
||||
padding: 0px 35px 50px 35px;
|
||||
}
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
padding: 0px 18px 40px 18px;
|
||||
}
|
||||
@media (max-width: $mobileWidth) {
|
||||
padding: 0px 18px 40px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
height: 100vh;
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
height: 50vh;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
background-color: #17628c;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:$desktopWidth) {
|
||||
|
||||
.info__lead {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.lawyer-info__paraMobile {
|
||||
width: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1120px) {
|
||||
.info {
|
||||
column-gap: 154px;
|
||||
}
|
||||
@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 (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 (min-width: 769px) {
|
||||
.lawyer-info__paraMobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@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