registration adaptive
This commit is contained in:
Victor Batischev
parent
93c1dd3945
commit
522a67bf6b
@ -125,6 +125,10 @@
|
||||
margin: 50px 0 0;
|
||||
text-transform: capitalize;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 560px) {
|
||||
@media (max-width: 760px) {
|
||||
flex-direction: column;
|
||||
row-gap: 15px;
|
||||
}
|
||||
@ -21,20 +21,13 @@
|
||||
&-info {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 685px) {
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
@media (max-width: 760px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calendar__hours {
|
||||
margin: 0 10px;
|
||||
margin: 0 5px;
|
||||
line-height: 0;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
@ -45,18 +38,14 @@
|
||||
&-switcher {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 590px) {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
@media (max-width: 760px) {
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.5em;
|
||||
font-size: 2.2em;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
|
||||
@ -104,11 +104,11 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
};
|
||||
return (
|
||||
<ModalLayout active={active} setActive={closeModal} styles={"registration"}>
|
||||
<div className="registration-body__left">
|
||||
<div className="registration-body__main">
|
||||
<h2>
|
||||
Подключайтесь к <p>itguild.</p>
|
||||
Подключайтесь к <p>ITguild</p>
|
||||
</h2>
|
||||
<p className="registration-body__left-desc">
|
||||
<p className="registration-body__main-desc">
|
||||
Зарегистрируйтесь и начните работу уже сегодня
|
||||
</p>
|
||||
|
||||
@ -158,8 +158,6 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
</div>
|
||||
|
||||
<div className="input-body__box">
|
||||
{/*<h5>Название компании</h5>*/}
|
||||
{/*<input></input>*/}
|
||||
<div className="inputContainer">
|
||||
<h5>Пароль</h5>
|
||||
<input
|
||||
@ -181,8 +179,30 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
/>
|
||||
{inputsError.password && <span>Минимум 6 символов</span>}
|
||||
</div>
|
||||
<div className="inputContainer">
|
||||
<h5>Повторите пароль</h5>
|
||||
<input
|
||||
className={inputsError.password ? "error" : ""}
|
||||
type="password"
|
||||
onChange={(e) => {
|
||||
setInputsError({
|
||||
name: false,
|
||||
email: false,
|
||||
password: false,
|
||||
});
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
password: e.target.value,
|
||||
}));
|
||||
}}
|
||||
value={inputsValue.password}
|
||||
placeholder="Пароль"
|
||||
/>
|
||||
{inputsError.password && <span>Минимум 6 символов</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="button-box">
|
||||
{loader ? (
|
||||
<Loader style={"green"} />
|
||||
@ -202,9 +222,9 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
{/*</h5>*/}
|
||||
</div>
|
||||
</div>
|
||||
<div className="registration-body__right">
|
||||
<div className="registration-body__about">
|
||||
<h4>Отказ от специалиста в любой момент</h4>
|
||||
<div className="registration-body__right-text">
|
||||
<div className="registration-body__about-text">
|
||||
<img src={anyMoment}></img>
|
||||
<p>
|
||||
Поменяйте, откажитесь или возьмите еще специалиста в любой момент
|
||||
@ -212,7 +232,7 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
</p>
|
||||
</div>
|
||||
<h4>100% постоплата</h4>
|
||||
<div className="registration-body__right-text">
|
||||
<div className="registration-body__about-text">
|
||||
<img src={doc}></img>
|
||||
<p>
|
||||
Договор не подразумевает какую‑либо оплату до того, как вы
|
||||
@ -220,7 +240,7 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
</p>
|
||||
</div>
|
||||
<h4>Есть вопросы?</h4>
|
||||
<div className="registration-body__right-text">
|
||||
<div className="registration-body__about-text">
|
||||
<img src={telegramLogo}></img>
|
||||
<p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
|
||||
</div>
|
||||
|
||||
@ -6,12 +6,10 @@
|
||||
justify-content: space-between;
|
||||
border: 1px solid #dde2e4;
|
||||
border-radius: 8px;
|
||||
width: 1088px;
|
||||
height: 515px;
|
||||
|
||||
&-body {
|
||||
&__left {
|
||||
padding: 33px 0 30px 77px;
|
||||
&__main {
|
||||
padding-left: 30px;
|
||||
|
||||
h2 {
|
||||
font-weight: 500;
|
||||
@ -51,6 +49,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -112,9 +111,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
&__about {
|
||||
border-left: 1px solid #f1f1f1;
|
||||
padding: 30px 32px 46px 25px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -127,7 +127,7 @@ export const ModalResetPassword = ({ active, setActive }) => {
|
||||
<h3 className="resetPassword__title">Восстановление пароля</h3>
|
||||
{!step ? (
|
||||
<div className="resetPassword__email">
|
||||
<h5>Введите e-mail:</h5>
|
||||
<h5>Введите ваш e-mail:</h5>
|
||||
<input
|
||||
type="email"
|
||||
onChange={(e) => {
|
||||
@ -145,9 +145,6 @@ export const ModalResetPassword = ({ active, setActive }) => {
|
||||
value={inputsValue.email}
|
||||
className={inputsError.email ? "error" : ""}
|
||||
/>
|
||||
{inputsError.email && (
|
||||
<span className="warningText">Введите корректный e-mail</span>
|
||||
)}
|
||||
{loader ? (
|
||||
<Loader style={"green"} />
|
||||
) : (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.resetPassword {
|
||||
width: 370px;
|
||||
width: 280px;
|
||||
position: relative;
|
||||
|
||||
&__close {
|
||||
@ -13,7 +13,7 @@
|
||||
&__title {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&__email {
|
||||
display: flex;
|
||||
@ -24,6 +24,7 @@
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
input {
|
||||
@ -54,11 +55,9 @@
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
letter-spacing: normal;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
border: 2px solid #6aaf5c;
|
||||
transition: 0.3s;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
||||
@ -742,7 +742,7 @@
|
||||
.exit {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.notification {
|
||||
border-radius: 40px;
|
||||
background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%);
|
||||
padding: 20px 82px 17px 27px;
|
||||
padding: 15px 60px 15px 15px;
|
||||
position: fixed;
|
||||
bottom: 25px;
|
||||
right: 25px;
|
||||
@ -13,7 +13,7 @@
|
||||
align-items: center;
|
||||
|
||||
h2 {
|
||||
max-width: 194px;
|
||||
max-width: 210px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
margin-bottom: 0;
|
||||
@ -27,8 +27,8 @@
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 25px;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.profile {
|
||||
background: #F1F1F1;
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
@ -14,7 +14,7 @@
|
||||
p {
|
||||
color: black;
|
||||
}
|
||||
color: #52B709;
|
||||
color: #52b709;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
&__info {
|
||||
min-height: 128px;
|
||||
min-height: 110px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin-top: 30px;
|
||||
|
||||
@ -17,7 +17,7 @@ export const RegistrationForCandidate = () => {
|
||||
<div className="container">
|
||||
<div className="registrationCandidate__start">
|
||||
<h2 className="auth-candidate__start__title">
|
||||
Хочу в команду <span>Айти специалистов</span>
|
||||
Хочу в команду <span>IT-специалистов</span>
|
||||
</h2>
|
||||
<div className="change-mode__arrow">
|
||||
<img src={arrowBtn}></img>
|
||||
|
||||
@ -1,17 +1,8 @@
|
||||
.summary {
|
||||
background: #F1F1F1;
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
font-family: 'LabGrotesque', sans-serif;
|
||||
//
|
||||
//&__container {
|
||||
// max-width: 1160px;
|
||||
// padding: 0 10px;
|
||||
// margin: 20px auto;
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
//}
|
||||
font-family: "LabGrotesque", sans-serif;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
@ -25,7 +16,7 @@
|
||||
margin-bottom: 0;
|
||||
|
||||
span {
|
||||
color: #52B709;
|
||||
color: #52b709;
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,10 +36,10 @@
|
||||
}
|
||||
|
||||
&__info {
|
||||
min-height: 128px;
|
||||
min-height: 110px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin-top: 30px;
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 25px 0 45px;
|
||||
@ -129,9 +120,9 @@
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #52B709;
|
||||
background: #52b709;
|
||||
border-radius: 12px;
|
||||
width: 70%;
|
||||
height: 8px;
|
||||
@ -150,7 +141,14 @@
|
||||
color: white;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
|
||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
|
||||
linear-gradient(
|
||||
36deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.16) 47%,
|
||||
rgba(255, 255, 255, 0.17) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
|
||||
@ -169,7 +167,7 @@
|
||||
}
|
||||
|
||||
&__skills {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
@ -177,7 +175,7 @@
|
||||
&__sections__head {
|
||||
display: flex;
|
||||
min-height: 69px;
|
||||
background: #E1FCCF;
|
||||
background: #e1fccf;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
align-items: center;
|
||||
padding: 0 35px 0 50px;
|
||||
@ -191,6 +189,7 @@
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
margin: 0;
|
||||
|
||||
@media (max-width: 660px) {
|
||||
line-height: 20px;
|
||||
@ -198,7 +197,7 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 44px;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
@ -228,7 +227,7 @@
|
||||
padding: 25px 35px 25px 50px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
padding: 15px 15px 20px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@ -260,7 +259,7 @@
|
||||
|
||||
.experience {
|
||||
&__block {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@ -316,9 +315,9 @@
|
||||
.noGitItems {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 35px 30px 30px 45px;
|
||||
padding: 10px;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -328,9 +327,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 35px 30px 30px 45px;
|
||||
padding: 10px;
|
||||
transition: all 0.3s ease;
|
||||
color: #000000;
|
||||
|
||||
@ -375,29 +374,11 @@
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 890px) {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
@media (max-width: 825px) {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
@media (max-width: 470px) {
|
||||
max-width: 200px;
|
||||
}
|
||||
@ -405,7 +386,6 @@
|
||||
}
|
||||
|
||||
&__specification {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
@ -416,7 +396,7 @@
|
||||
}
|
||||
|
||||
span {
|
||||
background: #D4F123;
|
||||
background: #d4f123;
|
||||
border-radius: 12px;
|
||||
max-width: 260px;
|
||||
width: 100%;
|
||||
@ -434,7 +414,7 @@
|
||||
|
||||
&__link {
|
||||
border-radius: 50%;
|
||||
background: #DDEEC6;
|
||||
background: #ddeec6;
|
||||
min-width: 48px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
@ -447,7 +427,7 @@
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 70px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user