mirror of
https://github.com/danilt2000/Alma-vid.git
synced 2026-02-05 02:04:12 +02:00
Init project
This commit is contained in:
Hepatica
38
src/components/Footer/Footer.jsx
Normal file
38
src/components/Footer/Footer.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import './Footer.scss';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
|
||||
function Footer() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleClick = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
};
|
||||
|
||||
const handlePageChange = (path) => {
|
||||
handleClick();
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="footer">
|
||||
<Link to="/" className="footer__logo font-inter-regular"
|
||||
onClick={() => handlePageChange('/')}>OOO "ALMA-VID"</Link>
|
||||
<div className="footer-info font-inter-bold">
|
||||
<Link to="/objects" onClick={() => handlePageChange('/objects')}>Объекты</Link>
|
||||
<Link to="/services" onClick={() => handlePageChange('/services')}>Услуги</Link>
|
||||
<Link to="/about" onClick={() => handlePageChange('/about')}>О компании</Link>
|
||||
<Link to="/office" onClick={() => handlePageChange('/office')}>Контакты</Link>
|
||||
</div>
|
||||
<div className="footer-socials">
|
||||
<a className="footer-socials__tg" href="#"></a>
|
||||
<a className="footer-socials__inst" href="#"></a>
|
||||
<a className="footer-socials__vk" href="#"></a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
export { Footer };
|
||||
126
src/components/Footer/Footer.scss
Normal file
126
src/components/Footer/Footer.scss
Normal file
@@ -0,0 +1,126 @@
|
||||
@import '../../styles/vars.scss';
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// column-gap: 96px;
|
||||
justify-content: space-between;
|
||||
padding: 70px 168px;
|
||||
background: rgba(23, 98, 140, 1);
|
||||
color: white;
|
||||
|
||||
@media (max-width: 1160px) {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
column-gap: 46px;
|
||||
padding: 60px 100px;
|
||||
}
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
padding: 45px 100px;
|
||||
column-gap: 26px;
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
padding: 45px 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
padding: 30px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer__logo {
|
||||
font-size: 20px;
|
||||
|
||||
@media (min-width:1800px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__logo:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
display: flex;
|
||||
column-gap: 46px;
|
||||
font-size: 17px;
|
||||
line-height: 29px;
|
||||
|
||||
@media (min-width:1800px) {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
@media (max-width: 1160px) {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
column-gap: 26px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
column-gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-socials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 1160px) {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
grid-row: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-socials__tg {
|
||||
background-image: url(../../assets/images/icons/telegram.svg);
|
||||
width: 22.5px;
|
||||
height: 19px;
|
||||
background-size: cover;
|
||||
|
||||
@media (min-width:1800px) {
|
||||
width: 28.5px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-socials__inst {
|
||||
background-image: url(../../assets/images/icons/inst.svg);
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background-size: cover;
|
||||
|
||||
@media (min-width:1800px) {
|
||||
width: 47px;
|
||||
height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-socials__vk {
|
||||
background-image: url(../../assets/images/icons/vk.svg);
|
||||
width: 32.5px;
|
||||
height: 34px;
|
||||
background-size: cover;
|
||||
|
||||
@media (min-width:1800px) {
|
||||
width: 35.5px;
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
89
src/components/Form/Form.jsx
Normal file
89
src/components/Form/Form.jsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import './Form.scss';
|
||||
import PencilIcon from '../../assets/images/icons/pencil.svg';
|
||||
|
||||
function Form({ scrolledThreshold }) {
|
||||
const [name, setName] = useState('');
|
||||
const [phone, setPhone] = useState('');
|
||||
const [isVisible, setVisible] = useState(false);
|
||||
|
||||
const checkVisible = () => {
|
||||
const scrolled = document.documentElement.scrollTop;
|
||||
if (scrolled > scrolledThreshold){ // вы можете настроить это значение
|
||||
if(!isVisible) setVisible(true);
|
||||
} else{
|
||||
if(isVisible) setVisible(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', checkVisible);
|
||||
return () => window.removeEventListener('scroll', checkVisible);
|
||||
});
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
// в этой функции можно добавить логику для отправки формы на сервер
|
||||
console.log(`${name}, ваш номер телефона: ${phone}`);
|
||||
setName('');
|
||||
setPhone('');
|
||||
};
|
||||
|
||||
function scrollToTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="consultation-form font-inter-regular">
|
||||
<div className="consultation-form__info form-info">
|
||||
<h2 className="form-info__title font-inter-bold">
|
||||
Решили купить или продать квартиру?
|
||||
<span>Закажите бесплатную консультацию</span>
|
||||
</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<p className="form__title">Заполните форму ниже</p>
|
||||
<p>Мы позвоним вам в ближайшее время</p>
|
||||
<div>
|
||||
<input
|
||||
className="font-inter-regular"
|
||||
type="text"
|
||||
value={name}
|
||||
placeholder="Ваше имя"
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="font-inter-regular"
|
||||
type="tel"
|
||||
value={phone}
|
||||
placeholder="+7(800)555-35-35"
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="form-btn font-inter-regular"
|
||||
type="submit"
|
||||
>
|
||||
Записаться на консультацию
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
Заполняя форму, вы соглашаетесь с политикой
|
||||
конфиденциальности
|
||||
</p>
|
||||
</form>
|
||||
<div className="que-form">
|
||||
<div className={`arrow ${isVisible ? 'arrow__visible' : ''}`} onClick={scrollToTop}></div>
|
||||
<p className="font-inter-bold">
|
||||
У вас остались вопросы? <span>Напишите нам, мы онлайн!</span>
|
||||
</p>
|
||||
<img className="que__img" src={PencilIcon} alt="pencil" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export { Form };
|
||||
237
src/components/Form/Form.scss
Normal file
237
src/components/Form/Form.scss
Normal file
@@ -0,0 +1,237 @@
|
||||
@import '../../styles/vars.scss';
|
||||
|
||||
.consultation-form {
|
||||
background: linear-gradient(270deg, #6ECBFF 0%, #FFFFFF 147.13%);
|
||||
}
|
||||
|
||||
.consultation-form__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
}
|
||||
|
||||
.form-info__title {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
// font-size: 25px;
|
||||
margin: 80px 0;
|
||||
line-height: 41px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.form-info__title>span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 43px;
|
||||
border-radius: 30px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
form div {
|
||||
display: flex;
|
||||
margin: 45px 0;
|
||||
column-gap: 43px;
|
||||
}
|
||||
|
||||
form input,
|
||||
.form-btn {
|
||||
text-align: center;
|
||||
width: 280px;
|
||||
height: 56.5px;
|
||||
border-radius: 24px;
|
||||
border: 0;
|
||||
font-size: 17.5px;
|
||||
background-color: rgba(186, 230, 255, 1);
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
cursor: pointer;
|
||||
background: linear-gradient(90deg, #6ECBFF 0%, #FFFFFF 147.13%);
|
||||
|
||||
}
|
||||
|
||||
.form-btn:hover {
|
||||
background: linear-gradient(90deg, #25afff 0%, #FFFFFF 147.13%);
|
||||
}
|
||||
|
||||
form p:nth-child(2) {
|
||||
margin: 0;
|
||||
line-height: 24.5px;
|
||||
font-size: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
form p:last-child {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.form__title {
|
||||
margin: 0;
|
||||
font-size: 36px;
|
||||
line-height: 60px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.que-form {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 43px;
|
||||
margin: 60px 0;
|
||||
}
|
||||
|
||||
.que-form p {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.que__img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
right: 144%;
|
||||
background-image: url(../../assets/images/icons/arrow.svg);
|
||||
background-size: cover;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
.arrow__visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
form {
|
||||
padding: 53px;
|
||||
}
|
||||
|
||||
form p:nth-child(2) {
|
||||
margin: 19px 0;
|
||||
line-height: 24.5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.que-form p {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.form-info__title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.form__title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
form p:last-child {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
form input,
|
||||
.form-btn {
|
||||
width: 360px;
|
||||
height: 66.5px;
|
||||
font-size: 21.5px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.que__img {
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1335px) {
|
||||
.arrow__visible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:$laptopWidth) {
|
||||
form div {
|
||||
flex-direction: column;
|
||||
row-gap: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:$tabletWidth) {
|
||||
|
||||
.que-form {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.que-form p {
|
||||
font-size: 1.5em;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.que-form>p span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-info__title {
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.form__title {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:600px) {
|
||||
|
||||
.form__title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.form-info__title {
|
||||
margin: 40px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width:$mobileWidth) {
|
||||
.form-info__title {
|
||||
font-size: 15px;
|
||||
line-height: 31px;
|
||||
}
|
||||
|
||||
.que-form p {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form__title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
form p:nth-child(2) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
form p:last-child {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
48
src/components/Gallery/Gallery.jsx
Normal file
48
src/components/Gallery/Gallery.jsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import 'react-image-gallery/styles/scss/image-gallery.scss';
|
||||
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';
|
||||
|
||||
function Gallery() {
|
||||
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>
|
||||
);
|
||||
}
|
||||
export { Gallery} ;
|
||||
80
src/components/Gallery/Gallery.scss
Normal file
80
src/components/Gallery/Gallery.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
@import '../../styles/vars.scss';
|
||||
|
||||
.image-gallery-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-gallery {
|
||||
align-self: flex-start;
|
||||
|
||||
.image-gallery-image {
|
||||
width: 762px;
|
||||
height: 508px;
|
||||
object-fit: cover;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
width: 862px;
|
||||
height: 608px;
|
||||
}
|
||||
|
||||
@media (max-width:1460px) {
|
||||
width: 962px;
|
||||
height: 708px;
|
||||
}
|
||||
|
||||
@media (max-width:$laptopWidth) {
|
||||
width: 762px;
|
||||
height: 508px;
|
||||
}
|
||||
|
||||
@media (max-width:$tabletWidth) {
|
||||
width: 562px;
|
||||
height: 408px;
|
||||
}
|
||||
|
||||
@media (max-width:630px) {
|
||||
width: 362px;
|
||||
height: 308px;
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-gallery-index {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.image-gallery-thumbnails-container {
|
||||
display: flex;
|
||||
width: 662px;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width:$tabletWidth) {
|
||||
width: 562px;
|
||||
}
|
||||
|
||||
@media (max-width:630px) {
|
||||
width: 362px;
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
.image-gallery-thumbnail {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.image-gallery-thumbnail .image-gallery-thumbnail-image {
|
||||
height: 131px;
|
||||
width: 181px;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
height: 141px;
|
||||
width: 207px;
|
||||
}
|
||||
}
|
||||
86
src/components/Header/Header.jsx
Normal file
86
src/components/Header/Header.jsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import './Header.scss';
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
|
||||
function Header() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleToggle = () => {
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
const location = useLocation();
|
||||
const isGradientBackground = location.pathname === '/apartament';
|
||||
const isHomePage = location.pathname === '/';
|
||||
return (
|
||||
<header className={`header font-inter-bold ${isGradientBackground ? 'header_gradient' : ''}`}>
|
||||
<Link className="header__logo" to="/"></Link>
|
||||
{isHomePage && <div className="header__text"></div>}
|
||||
<div className="burgerMenu">
|
||||
<a href="tel:+73512170074" className="header-info__call">8(351)217-00-74</a>
|
||||
<div className="burger-item">
|
||||
<input id="toggle" type="checkbox" checked={isOpen} onChange={handleToggle}></input>
|
||||
<label for="toggle" className={`hamburger ${isOpen ? 'open' : ''}`}>
|
||||
<div class="top-bun"></div>
|
||||
<div class="meat"></div>
|
||||
<div class="bottom-bun"></div>
|
||||
</label>
|
||||
<div class="nav">
|
||||
<div class="nav-wrapper">
|
||||
<nav className="nav-container">
|
||||
<Link to="/objects" className="header__link">
|
||||
Объекты
|
||||
</Link>
|
||||
<Link to="/services" className="header__link">
|
||||
Услуги
|
||||
</Link>
|
||||
<Link to="/about" className="header__link">
|
||||
О компании
|
||||
</Link>
|
||||
<Link to="/office" className="header__link" href="#">
|
||||
Наш офис
|
||||
</Link>
|
||||
<p>Челябинск</p>
|
||||
<div className="header-socials__links">
|
||||
<a className="header-socials__tg" href="#"></a>
|
||||
<a className="header-socials__inst" href="#"></a>
|
||||
<a className="header-socials__vk" href="#"></a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="header__nav">
|
||||
<Link to="/objects" className="header__link">
|
||||
Объекты
|
||||
</Link>
|
||||
<Link to="/services" className="header__link">
|
||||
Услуги
|
||||
</Link>
|
||||
<Link to="/about" className="header__link">
|
||||
О компании
|
||||
</Link>
|
||||
<Link to="/office" className="header__link" href="#">
|
||||
Наш офис
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="header-info">
|
||||
<a href="tel:+73512170074" className="header-info__call">8(351)217-00-74</a>
|
||||
<button className="header-info__btn" type="button">
|
||||
Обратный звонок
|
||||
</button>
|
||||
</div>
|
||||
<div className="header-socials">
|
||||
<span className="header-socials__location">Челябинск</span>
|
||||
<div className="header-socials__links">
|
||||
<a className="header-socials__tg" href="#"></a>
|
||||
<a className="header-socials__inst" href="#"></a>
|
||||
<a className="header-socials__vk" href="#"></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export { Header };
|
||||
388
src/components/Header/Header.scss
Normal file
388
src/components/Header/Header.scss
Normal file
@@ -0,0 +1,388 @@
|
||||
@import '../../styles/vars.scss';
|
||||
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
padding: 45px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.header_gradient {
|
||||
background: linear-gradient(180deg, #061A25 0%, rgba(18, 114, 170, 0.7) 150%);
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
grid-row: 1/3;
|
||||
background-image: url('../../assets/images/logo/logo-png.png');
|
||||
width: 302px;
|
||||
height: 69px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
column-gap: 47px;
|
||||
font-size: 17px;
|
||||
line-height: 29px;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
grid-column: 3/3;
|
||||
align-items: center;
|
||||
justify-self: end;
|
||||
column-gap: 23.5px;
|
||||
}
|
||||
|
||||
.header-info__btn {
|
||||
height: 38px;
|
||||
width: 150px;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
color: black;
|
||||
background-color: rgb(255, 255, 255, 0.8);
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-info__btn:hover {
|
||||
background-color: rgb(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.header-socials {
|
||||
grid-row: 2/2;
|
||||
grid-column: 3/3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 47px;
|
||||
justify-self: end;
|
||||
margin-right: 29px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.header-socials__links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-socials__tg {
|
||||
background-image: url(../../assets/images/icons/telegram.svg);
|
||||
width: 22.5px;
|
||||
height: 19px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// ширину и высоту увеличили на 1px
|
||||
.header-socials__inst {
|
||||
background-image: url(../../assets/images/icons/inst.svg);
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
// ширину уменьшили на 1px
|
||||
.header-socials__vk {
|
||||
background-image: url(../../assets/images/icons/vk.svg);
|
||||
width: 32.5px;
|
||||
height: 34px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media (min-width:1800px) {
|
||||
.header__logo {
|
||||
width: 372px;
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
.header__nav,
|
||||
.header-info__call,
|
||||
.header-info__btn,
|
||||
.header-socials__location {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.header-info__btn {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.header-socials__tg {
|
||||
width: 28.5px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.header-socials__inst {
|
||||
width: 47px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.header-socials__vk {
|
||||
width: 35.5px;
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1480px) {
|
||||
.header__nav {
|
||||
column-gap: 31px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $desktopWidth) {
|
||||
|
||||
.header {
|
||||
padding: 36px;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
width: 270px;
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
.header-info,
|
||||
.header-info__btn {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-info__btn {
|
||||
height: 35px;
|
||||
width: 137px;
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
column-gap: 17px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-socials {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
.header {
|
||||
grid-template-columns: auto;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
column-gap: 14px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
width: 200px;
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.header-info__btn {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header-socials {
|
||||
margin-top: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
word-spacing: 0.15em;
|
||||
font-size: 3em;
|
||||
line-height: 1.2;
|
||||
transform: translateY(52%);
|
||||
}
|
||||
|
||||
|
||||
#toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
Hamburger
|
||||
**/
|
||||
.hamburger {
|
||||
position: absolute;
|
||||
top: 4em;
|
||||
right: 7%;
|
||||
margin-left: -2em;
|
||||
margin-top: -45px;
|
||||
width: 2em;
|
||||
height: 45px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.open {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.hamburger div {
|
||||
position: relative;
|
||||
width: 3.1em;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background-color: white;
|
||||
margin-top: 8px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/**
|
||||
Nav Styles
|
||||
**/
|
||||
.nav {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #17628C;
|
||||
top: -100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: scale(0);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
margin-left: 25%;
|
||||
margin-top: 15%;
|
||||
}
|
||||
|
||||
.nav-container a,
|
||||
.nav-container p {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
display: inline-block;
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 0;
|
||||
transition: color 0.2s ease-in-out;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-container a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-container .header__link:before {
|
||||
content: '';
|
||||
height: 0;
|
||||
position: absolute;
|
||||
width: 0.25em;
|
||||
background-color: white;
|
||||
left: -0.5em;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-container a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-container a:hover:before {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
Animations
|
||||
**/
|
||||
#toggle:checked+.hamburger .top-bun {
|
||||
transform: rotate(-45deg);
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
#toggle:checked+.hamburger .bottom-bun {
|
||||
opacity: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
#toggle:checked+.hamburger .meat {
|
||||
transform: rotate(45deg);
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
#toggle:checked+.hamburger+.nav {
|
||||
top: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.burgerMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.burgerMenu {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.header-info__call {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
// grid-row: 1/3;
|
||||
background-image: url('../../assets/images/logo/AlvaMid-Logo-Small.svg');
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.header__nav,
|
||||
.header-info,
|
||||
.header-socials {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__text {
|
||||
position: absolute;
|
||||
background-image: url('../../assets/images/logo/textLogo.svg');
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 300px;
|
||||
height: 113px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
16
src/components/Object/Object.jsx
Normal file
16
src/components/Object/Object.jsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import './Object.scss';
|
||||
|
||||
function Object(props) {
|
||||
return (
|
||||
<div className="item">
|
||||
<img className="item__image" src={props.image} alt="квартира" />
|
||||
<div className="item__info font-inter-bold">
|
||||
<p className="item__price">{props.price}</p>
|
||||
<p className="item__desc">{props.desc}</p>
|
||||
<p className="item__address font-inter-regular">{props.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { Object };
|
||||
109
src/components/Object/Object.scss
Normal file
109
src/components/Object/Object.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
@import '../../styles/vars.scss';
|
||||
|
||||
.item__info p {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// width: 381px;
|
||||
// height: 381px;
|
||||
margin: 0 20px;
|
||||
border-radius: 15px;
|
||||
background-color: white;
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
height: 381px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
height: 361px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
height: 341px;
|
||||
}
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
height: 321px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
height: 505px;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
height: 473px;
|
||||
}
|
||||
|
||||
@media (max-width: 690px) {
|
||||
height: 435px;
|
||||
}
|
||||
|
||||
@media (max-width: 635px) {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
@media (max-width: 570px) {
|
||||
height: 361px;
|
||||
}
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
height: 381px;
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
height: 361px;
|
||||
}
|
||||
}
|
||||
|
||||
.item__image:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.item__image {
|
||||
border-top-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
}
|
||||
|
||||
.item__info {
|
||||
margin: 25px 0 13px 25px;
|
||||
}
|
||||
|
||||
.item__price {
|
||||
font-size: 25px;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
@media (min-width: 768.98px) and (max-width: $laptopWidth) {
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.item__desc {
|
||||
font-size: 20px;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 768.98px) and (max-width: $laptopWidth) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.item__address {
|
||||
font-size: 17px;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
@media (min-width: 768.98px) and (max-width: $laptopWidth) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
56
src/components/Sliders/Slider.jsx
Normal file
56
src/components/Sliders/Slider.jsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
import Slider from 'react-slick';
|
||||
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import './Slider.scss';
|
||||
import certificateSber from '../../assets/images/lawyer/sberbank-1.jpg';
|
||||
import certificateSootsvet from '../../assets/images/lawyer/Sertifikat_Sootsvetstvia.jpg';
|
||||
import svidetelstvo from '../../assets/images/lawyer/Svidetelstvo.jpg';
|
||||
import diplom from '../../assets/images/lawyer/Diplom.jpg';
|
||||
|
||||
const NextArrow = ({ onClick }) => {
|
||||
return (
|
||||
<div className="slider__arrow slider__arrow_next" onClick={onClick}></div>
|
||||
);
|
||||
};
|
||||
|
||||
const PrevArrow = ({ onClick }) => {
|
||||
return (
|
||||
<div className="slider__arrow slider__arrow_prev" onClick={onClick}></div>
|
||||
);
|
||||
};
|
||||
|
||||
const SliderComponent = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
nextArrow: <NextArrow />,
|
||||
prevArrow: <PrevArrow />,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="slider">
|
||||
<Slider {...settings}>
|
||||
<div>
|
||||
<img className="slider__certificate" src={certificateSber} alt="сертификат" />
|
||||
</div>
|
||||
<div>
|
||||
<img className="slider__certificate_soot" src={certificateSootsvet} alt="сертификат соответствия" />
|
||||
</div>
|
||||
<div>
|
||||
<img className="slider__svidetelstvo" src={svidetelstvo} alt="свидетельство" />
|
||||
</div>
|
||||
<div>
|
||||
<img className="slider__diplom" src={diplom} alt="диплом" />
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { SliderComponent };
|
||||
180
src/components/Sliders/Slider.scss
Normal file
180
src/components/Sliders/Slider.scss
Normal file
@@ -0,0 +1,180 @@
|
||||
@import '../../styles/vars.scss';
|
||||
|
||||
.slider {
|
||||
padding: 115px 256px;
|
||||
background: linear-gradient(90deg, #17628C 0%, #FFFFFF 147.13%);
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
padding: 57px 128px;
|
||||
}
|
||||
|
||||
@media (max-width: 1110px) {
|
||||
padding: 57px 127px;
|
||||
}
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
padding: 10px 127px;
|
||||
}
|
||||
|
||||
// @media (max-width: $tabletWidth) {
|
||||
// background: linear-gradient(180deg, #17628C -50%, #FFFFFF 160.13%);
|
||||
// }
|
||||
|
||||
@media (max-width: 668px) {
|
||||
padding: 10px 52px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider img {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.slider__certificate {
|
||||
width: 926px;
|
||||
height: 655px;
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// было width: 581px; height: 800px;
|
||||
.slider__certificate_soot {
|
||||
width: 481px;
|
||||
height: 700px;
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
width: 450px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// было width: 800px; height: 560px;
|
||||
.slider__svidetelstvo,
|
||||
.slider__diplom {
|
||||
width: 850px;
|
||||
height: 610px;
|
||||
|
||||
@media (max-width: 1110px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slider__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slider__arrow_next,
|
||||
.slider__arrow_prev {
|
||||
background-image: url(../../assets/images/icons/arrow-right.svg);
|
||||
background-size: cover;
|
||||
width: 51px;
|
||||
height: 51px;
|
||||
right: -8%;
|
||||
|
||||
@media (min-width: 1650px) {
|
||||
right: 1%;
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
right: 7%;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
right: -5%;
|
||||
}
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
right: -10%;
|
||||
}
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
right: -13%;
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
right: -16%;
|
||||
}
|
||||
|
||||
@media (max-width: 668px) {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
right: -8%;
|
||||
}
|
||||
|
||||
@media (max-width: 535px) {
|
||||
right: -10%;
|
||||
}
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
right: -13%;
|
||||
}
|
||||
}
|
||||
|
||||
.slider__arrow_prev {
|
||||
background-image: url(../../assets/images/icons/arrow-left.svg);
|
||||
left: -8%;
|
||||
|
||||
@media (min-width: 1650px) {
|
||||
left: 1%;
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
left: 7%;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
left: -5%;
|
||||
}
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
left: -10%;
|
||||
}
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
left: -13%;
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
left: -16%;
|
||||
}
|
||||
|
||||
@media (max-width: 668px) {
|
||||
left: -8%;
|
||||
}
|
||||
|
||||
@media (max-width: 535px) {
|
||||
left: -10%;
|
||||
}
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
left: -13%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
|
||||
.slider__certificate,
|
||||
.slider__certificate_soot,
|
||||
.slider__svidetelstvo,
|
||||
.slider__diplom {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slider__certificate,
|
||||
.slider__svidetelstvo,
|
||||
.slider__diplom {
|
||||
padding-top: 30%;
|
||||
}
|
||||
}
|
||||
85
src/components/Sliders/SliderObjects.jsx
Normal file
85
src/components/Sliders/SliderObjects.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import React from 'react';
|
||||
import Slider from 'react-slick';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
|
||||
import 'slick-carousel/slick/slick.css';
|
||||
import 'slick-carousel/slick/slick-theme.css';
|
||||
import './SliderObjects.scss';
|
||||
import { Object } from '../Object/Object';
|
||||
|
||||
import objectPicOne from '../../assets/images/apartaments/image-44.jpg';
|
||||
import objectPicTwo from '../../assets/images/apartaments/image-45.jpg';
|
||||
import objectPicThree from '../../assets/images/apartaments/image-46.jpg';
|
||||
|
||||
const NextArrow = ({ onClick }) => {
|
||||
return (
|
||||
<div className="slider-objects__arrow slider-objects__arrow_next" onClick={onClick}></div>
|
||||
);
|
||||
};
|
||||
|
||||
const PrevArrow = ({ onClick }) => {
|
||||
return (
|
||||
<div className="slider-objects__arrow slider-objects__arrow_prev" onClick={onClick}></div>
|
||||
);
|
||||
};
|
||||
|
||||
const SliderComponent = () => {
|
||||
const isMobileResolution = useMediaQuery({ maxWidth: 768 });
|
||||
const settings = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
speed: 500,
|
||||
slidesToShow: isMobileResolution ? 1 : 3,
|
||||
slidesToScroll: isMobileResolution ? 1 : 3,
|
||||
arrows: true,
|
||||
nextArrow: <NextArrow />,
|
||||
prevArrow: <PrevArrow />,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="slider-objects">
|
||||
<Slider {...settings}>
|
||||
<Link className="objects-link" to="/apartament">
|
||||
<Object
|
||||
image={objectPicOne}
|
||||
price="1 234 567 ₽"
|
||||
desc="1-комн. кв. 34 м"
|
||||
address="Ул. Луначарского, Ленинский район"
|
||||
/></Link>
|
||||
<Object
|
||||
image={objectPicTwo}
|
||||
price="1 234 567 ₽"
|
||||
desc="1-комн. кв. 34 м"
|
||||
address="Ул. Зари, Вагонка"
|
||||
/>
|
||||
<Object
|
||||
image={objectPicThree}
|
||||
price="1 234 567 ₽"
|
||||
desc="1-комн. кв. 34 м"
|
||||
address="Ул. Солнечная, Заречный район"
|
||||
/>
|
||||
<Object
|
||||
image={objectPicOne}
|
||||
price="1 234 567 ₽"
|
||||
desc="1-комн. кв. 34 м"
|
||||
address="Ул. Луначарского, Ленинский район"
|
||||
/>
|
||||
<Object
|
||||
image={objectPicTwo}
|
||||
price="1 234 567 ₽"
|
||||
desc="1-комн. кв. 34 м"
|
||||
address="Ул. Зари, Вагонка"
|
||||
/>
|
||||
<Object
|
||||
image={objectPicThree}
|
||||
price="1 234 567 ₽"
|
||||
desc="1-комн. кв. 34 м"
|
||||
address="Ул. Солнечная, Заречный район"
|
||||
/>
|
||||
</Slider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { SliderComponent };
|
||||
90
src/components/Sliders/SliderObjects.scss
Normal file
90
src/components/Sliders/SliderObjects.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
@import '../../styles/vars.scss';
|
||||
|
||||
.slider-objects {
|
||||
margin: 55px 100px 0 100px;
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
margin: 55px 100px 55px 100px;
|
||||
}
|
||||
|
||||
@media (min-width: $tabletWidth) and (max-width: $laptopWidth) {
|
||||
margin: 55px 75px 0 75px;
|
||||
padding-bottom: 75px;
|
||||
}
|
||||
|
||||
@media (min-width: 740px) and (max-width: $tabletWidth) {
|
||||
margin: 25px 100px 0 100px;
|
||||
}
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
margin: 55px 40px 0 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.objects-link {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.slider-objects__arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
// z-index: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slider-objects__arrow_next,
|
||||
.slider-objects__arrow_prev {
|
||||
background-image: url(../../assets/images/icons/arrow-right.svg);
|
||||
background-size: cover;
|
||||
width: 51px;
|
||||
height: 51px;
|
||||
right: -5%;
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
right: -7%;
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
right: -17%;
|
||||
}
|
||||
|
||||
@media (min-width: 740px) and (max-width: $tabletWidth) {
|
||||
right: -14%;
|
||||
}
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
background-image: url(../../assets/images/icons/white-arrow-right.svg);
|
||||
width: 19px;
|
||||
height: 31px;
|
||||
right: -8%;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-objects__arrow_prev {
|
||||
background-image: url(../../assets/images/icons/arrow-left.svg);
|
||||
left: -5%;
|
||||
|
||||
@media (max-width: $laptopWidth) {
|
||||
left: -7%;
|
||||
}
|
||||
|
||||
@media (max-width: $tabletWidth) {
|
||||
left: -17%;
|
||||
}
|
||||
|
||||
@media (min-width: 740px) and (max-width: $tabletWidth) {
|
||||
left: -14%;
|
||||
}
|
||||
|
||||
@media (max-width: $mobileWidth) {
|
||||
background-image: url(../../assets/images/icons/white-arrow-left.svg);
|
||||
width: 19px;
|
||||
height: 31px;
|
||||
left: -8%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user