refactor styles in questions
This commit is contained in:
parent
925b5b855a
commit
415b41ff2a
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue