Fixed auth page and adaptation freeDev

This commit is contained in:
MaxOvs19 2023-04-10 18:08:41 +03:00
parent 943bc1abea
commit ae3416c4b2
8 changed files with 213 additions and 40 deletions

View File

@ -5,6 +5,13 @@ import userIcon from "../../images/userIcon.png";
import "./authHeader.scss"; import "./authHeader.scss";
export const AuthHeader = ({}) => { export const AuthHeader = ({}) => {
function scrollToForm() {
window.scrollTo({
top: 850,
behavior: "smooth",
});
}
return ( return (
<div className="auth-header"> <div className="auth-header">
<div className="auth-header__logo"> <div className="auth-header__logo">
@ -27,7 +34,12 @@ export const AuthHeader = ({}) => {
</li> </li>
</ul> </ul>
<a href="#"> <a
onClick={(e) => {
e.preventDefault();
scrollToForm();
}}
>
<img src={userIcon}></img> <img src={userIcon}></img>
</a> </a>
</div> </div>

View File

@ -51,6 +51,10 @@
} }
} }
} }
img {
cursor: pointer;
}
} }
} }
} }
@ -61,7 +65,7 @@
} }
} }
@media (max-width: 1024px) { @media (max-width: 1375px) {
.auth-header { .auth-header {
display: none; display: none;
} }

View File

@ -1,6 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import arrow from "../../images/sideBarArrow.svg"; import arrow from "../../images/sideBarArrow.svg";
import LogoITguild from "../../images/LogoITguild.svg";
import "./sidebar.scss"; import "./sidebar.scss";
@ -41,9 +42,7 @@ export const SideBar = () => {
<div className={active ? "auth-body active" : "auth-body"}> <div className={active ? "auth-body active" : "auth-body"}>
<div className="auth-body__title"> <div className="auth-body__title">
<h3>IT</h3> <img src={LogoITguild}></img>
<p>guild</p>
<span>Аутстафинговая компания</span>
</div> </div>
<ul className="auth-body__navigation"> <ul className="auth-body__navigation">
<li> <li>

View File

@ -7,7 +7,7 @@
height: 100%; height: 100%;
background: #e1fccf; background: #e1fccf;
@media (max-width: 1024px) { @media (max-width: 1375px) {
position: fixed; position: fixed;
width: 100% !important; width: 100% !important;
height: 80px; height: 80px;
@ -75,7 +75,7 @@
} }
} }
@media (max-width: 1024px) { @media (max-width: 1375px) {
flex-direction: row; flex-direction: row;
height: 100%; height: 100%;
@ -121,25 +121,7 @@
&__title { &__title {
display: flex; display: flex;
flex-wrap: wrap; margin-top: 24px;
h3 {
color: #52b709;
font-size: 35px;
line-height: 32px;
margin-right: 10px;
}
p {
width: 70%;
font-size: 30px;
line-height: 32px;
color: #000000;
}
span {
font-size: 12px;
margin-left: 0px;
}
} }
&__navigation { &__navigation {
@ -175,7 +157,7 @@
} }
} }
@media (max-width: 1024px) { @media (max-width: 1375px) {
&__title { &__title {
margin-top: 35px; margin-top: 35px;
} }
@ -199,7 +181,7 @@
left: 79px; left: 79px;
} }
@media (max-width: 1024px) { @media (max-width: 1375px) {
left: 0; left: 0;
width: 100%; width: 100%;
height: 535px; height: 535px;

View File

@ -125,7 +125,13 @@
} }
} }
@media (max-width: 1375px) {
margin-top: 50px;
}
@media (max-width: 1024px) { @media (max-width: 1024px) {
margin-top: 0;
&__title { &__title {
flex-direction: column; flex-direction: column;
padding: 120px 0 56px 0; padding: 120px 0 56px 0;

View File

@ -40,7 +40,7 @@ export const FreeDevelopers = ({}) => {
<div></div> <div></div>
</div> </div>
</div> </div>
<button>Код разработчика</button> <button className="button-green">Код разработчика</button>
</div> </div>
<div className="free-dev__body"> <div className="free-dev__body">
@ -66,6 +66,25 @@ export const FreeDevelopers = ({}) => {
</li> </li>
</ul> </ul>
<p>Время разработки: 2 года.</p> <p>Время разработки: 2 года.</p>
<div className="free-dev__body-text-bottom">
<h5>
Godesigner - сервис для фриланс дизайнеров, копирайтеров и их
заказчиков
</h5>
<p>Стек PHP (li3), HTML, CSS, JavaScript, MYSQL, Nginx.</p>
<ul>
<li> Расширение функционала старых модулей проекта</li>
<li>создание и проектирование новых модулей сайта</li>
</ul>
</div>
</div>
<div className="logIn">
<h3>Для просмотра полного резюме разработчика авторизуйтесь</h3>
<Link to={"/auth"} className="button-green">
Войти
</Link>
</div> </div>
</div> </div>

View File

@ -60,23 +60,35 @@
} }
} }
button { @media (max-width: 720px) {
background: #52b709; flex-direction: column;
border-radius: 44px; }
width: 202px;
height: 50px; @media (max-width: 450px) {
font-weight: 500; flex-direction: column;
font-size: 16px;
line-height: 32px; &-box {
color: #ffffff; flex-direction: column;
border: none; align-items: center;
img {
width: 50%;
}
}
&-name {
margin: 10px 0 10px 0;
text-align: center;
align-items: center;
}
} }
} }
&__body { &__body {
position: relative;
background: #ffffff; background: #ffffff;
border-radius: 12px; border-radius: 12px;
margin-bottom: 100px; margin-bottom: 160px;
&-title { &-title {
background: #e1fccf; background: #e1fccf;
@ -99,6 +111,136 @@
font-size: 16px; font-size: 16px;
margin-bottom: 30px; margin-bottom: 30px;
} }
&-bottom {
margin-top: 50px;
opacity: 0.25;
}
}
.logIn {
position: absolute;
bottom: 75px;
border: 3px solid #52b709;
border-radius: 12px;
background: rgba(255, 255, 255, 0.76);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 97px;
cursor: pointer;
h3 {
font-weight: 500;
font-size: 22px;
line-height: 18px;
color: #000000;
margin-right: 50px;
}
a {
width: 140px;
height: 50px;
color: white;
text-decoration: none;
}
@media (max-width: 920px) {
flex-direction: column;
padding: 15px;
height: 20%;
h3 {
margin: 0 0 0 0;
text-align: center;
}
a {
margin-top: 15px;
height: 25px;
height: 40px;
}
}
}
}
@media (max-width: 1333px) {
.auth-menu {
position: fixed;
width: 100% !important;
height: 80px;
margin-bottom: 50px;
.auth-body.active {
left: 0;
width: 100%;
height: 535px;
}
.auth-body {
&__title,
&__politic {
margin-top: 35px;
}
&__contacts {
margin: 50px 0 25px 0;
}
}
}
.free-dev_page {
margin-top: 110px;
}
.auth-header {
display: none;
}
.auth-title {
flex-direction: row;
height: 100%;
.text {
margin: 0;
flex-direction: row;
.burger {
margin-bottom: 5px;
}
h3 {
display: none;
}
}
.outstaffing {
margin: 0;
width: 150px;
font-size: 12px;
transform: none;
img {
margin-right: 5px;
width: 15px;
}
}
} }
} }
} }
.button-green {
align-items: center;
justify-content: center;
display: flex;
background: #52b709;
border-radius: 44px;
width: 202px;
height: 50px;
font-weight: 500;
font-size: 16px;
line-height: 32px;
color: #ffffff;
border: none;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 10 KiB