refactor styles in questions

This commit is contained in:
b1ek 2023-05-08 15:02:43 +10:00
parent 925b5b855a
commit 415b41ff2a
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 55 additions and 8 deletions

View File

@ -1,23 +1,70 @@
import React from 'react';
import styled from 'styled-components';
import './styles/Questions.css';
const MainSection = styled.section`
display: flex;
justify-content: space-between;
margin-top: 55px;
`;
const Button = styled.button`
width: 323px;
height: fit-content;
padding: 2% 5% 2% 3%;
border-radius: 12px;
text-align: left;
& h3 {
font-size: 18px;
color: #fff;
}
& p {
margin-top: 16px;
font-size: 16px;
line-height: 19px;
color: #fff;
}
`;
const OrangeButton = styled(Button)`
background: linear-gradient(180deg, #F76D09 0%, #FFA800 100%);
&:active {
background: linear-gradient(180deg, #FFA800 0%, #F76D09 100%);
}
`;
const GreenButton = styled(Button)`
background: linear-gradient(180deg, #107A34 0%, #51A633 100%);
&:active {
background: linear-gradient(180deg, #51A633 0%, #107A34 100%);
}
`;
const BlueButton = styled(Button)`
background: linear-gradient(180deg, #2E50A7 0%, #0993F7 100%);
&:active {
background: linear-gradient(180deg, #0993F7 0%, #2E50A7 100%);
}
`;
const Questions = function () {
return (
<section className="questionBtnSection">
<button className="questionBtn orangeBtn">
<MainSection>
<OrangeButton>
<h3>Рестик или кафешка?</h3>
<p>Какой общепит предпочтительнее для вас возле жилища?</p>
</button>
<button className="questionBtn greenBtn">
</OrangeButton>
<GreenButton>
<h3>Двушка или однушка?</h3>
<p>Как выбрать квартиру под себя, чтобы не переплачивать?</p>
</button>
<button className="questionBtn blueBtn">
</GreenButton>
<BlueButton>
<h3>Совмещенный или отдельно?</h3>
<p>Какой санузел будет для вас лучшим вариантом?</p>
</button>
</section>
</BlueButton>
</MainSection>
);
}