Добавлен cover для начальной страницы

This commit is contained in:
Pavel Gnedov 2023-03-12 00:58:25 +07:00
parent 1b322e1984
commit d98a8df5c9
5 changed files with 102 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View file

@ -1,13 +1,18 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Cover from './start-page/cover';
import TopBar from './start-page/top-bar';
export const AppData = {
contact: 'https://t.me/pavelgnedov',
bot: 'https://t.me/eltex_event_emitter_bot'
};
function App() {
return (
<>
<TopBar contact='https://t.me/pavelgnedov'>
</TopBar>
<TopBar contact={AppData.contact} />
<Cover telegramBotUrl={AppData.bot} />
</>
);
}

View file

@ -0,0 +1,70 @@
.cover {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 900px;
left: 0px;
top: 0px;
background: #001826;
border: 0;
}
h1 {
left: 0%;
right: 0%;
top: 18.22%;
bottom: 24.7%;
font-family: 'Source Code Pro', monospace;
font-weight: 600;
font-size: 94px;
line-height: 94px;
text-transform: uppercase;
}
h3 {
color: #F5B14E;
font-family: 'Source Code Pro';
letter-spacing: 0.12em;
font-style: normal;
font-weight: 700;
font-size: 22px;
line-height: 34px;
}
h4 {
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 60px;
letter-spacing: -0.01em;
text-transform: uppercase;
font-feature-settings: 'pnum' on, 'lnum' on;
}
h4:hover {
text-decoration: underline;
color: #F5B14E;
}
.character {
position: absolute;
width: 375px;
height: 672px;
left: 130px;
top: 181px;
}
.info {
font-family: 'Source Code Pro';
color: #fff;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
position: absolute;
max-width: 800px;
max-height: 494px;
left: 635px;
top: 251px;
}

View file

@ -0,0 +1,23 @@
import React from 'react';
import CoverCss from './cover.module.css';
export type CoverProps = {
telegramBotUrl: string;
};
export const Cover = (props: CoverProps) => {
return (
<div className={CoverCss.cover}>
<img src="/images/Сharacter_01.png" alt="Сharacter" className={CoverCss.character} />
<div className={CoverCss.info}>
<h3>Redmine Issue Event Emitter</h3>
<h1>ОБРАБОТКА И АНАЛИЗ ЗАДАЧ ИЗ "REDMINE"</h1>
<h4>
<a href={props.telegramBotUrl}> ссылка на телеграмм бота</a>
</h4>
</div>
</div>
);
};
export default Cover;

View file

@ -4,7 +4,7 @@ import LogoImg from './event_emitter_eltex_loc-32px.png';
export type TopBarProps = {
contact: string;
children: any;
children?: any;
};
const TopBar = (props: TopBarProps): ReactElement => {