CyberBloom/OgeetoCaseCyberGarden
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Meets

Browse Source
This commit is contained in:
Sevka
2023-12-23 00:50:00 +03:00
parent 41a8372b96
commit 3bfd4533b8
9 changed files with 346 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Components/Card/index.jsx Normal file
View File

@@ -0,0 +1,24 @@
import './style.module.scss';
const Card = () => {
return (
<>
<div className='event_card'>
<div className="event-card__photo" />
<div className="taggs">
<div className='tagged'>Психология</div>
<div className="feautures">Предстоящее</div>
</div>
<h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
<p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
</div>
</>
)
}
export default Card;

74
src/Components/Card/style.module.scss Normal file
View File

@@ -0,0 +1,74 @@
.event_card {
width: 292px;
height: 626px;
flex-shrink: 0;
margin-top: 100px;
}
.wrapp {
display: flex;
justify-content: flex-start;
/* max-width: 1521px; */
}
:root {
text-align: left;
}
.event-card_date {
color: var(--gray_text, #888);
/* title */
font-family: Montserrat;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.event-card__photo {
width: 292px;
height: 340px;
flex-shrink: 0;
background: #D9D9D9;
margin-bottom: 26px;
}
.event-card_title {
color: #000;
font-family: Montserrat;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.feautures {
display: flex;
justify-content: center;
font-family: Montserrat;
align-items: center;
font-size: 8px;
font-style: normal;
font-weight: 400;
line-height: normal;
border-radius: 10px;
background: #E7FFD2;
height: 15px;
padding: 10px;
}
.tagged {
display: inline-flex;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 10px;
border: 1px solid var(--gray_text, #888);
}
.taggs {
display: flex;
justify-content: space-between;
}

47
src/Components/MeetPage/index.jsx
View File

@@ -2,6 +2,11 @@ import Header from "../Header";
import styles from './style.module.scss';
import clock from '../../img/MeetPage/Clock.png';
import globe from '../../img/MeetPage/Globe.png';
import avatar from '../../img/MeetPage/avatar.png';
import { style } from "@mui/system";
import Card from "../Card";
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
const MeetPage = () => {
@@ -19,6 +24,48 @@ const MeetPage = () => {
<div className={styles.meets__img}></div>
</section>
<div className={styles.meets__otziv_container}>
<div className={styles.meets__otziv}>
<span className={styles.meets__otziv_title}>Отзывы</span>
Оставьте первый отзыв
</div>
</div>
<section className={styles.aboutMeet}>
<div className={styles.aboutMeet__title}>О мероприятии</div>
<div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div>
</section>
<section className={styles.expert}>
<div className={styles.expert__title}>Специалист</div>
<div className={styles.expert__container}>
<div className={styles.expert__img_container}><img className={styles.expert__img} src={avatar} alt="avatar"></img></div>
<div className={styles.expert__descr_container}>
<div className={styles.expert__descr_fullname}>Иванов Иван Иванович</div>
<div className={styles.expert__descr_speciality}>Психолог, таролог</div>
<div className={styles.expert__descr_phone}>+7 (888) 888 - 88 - 88</div>
<a href="#" className={styles.expert__descr_email}>exampl@ya.ru</a>
</div>
</div>
</section>
<section className={styles.someMeetings}>
<div className={styles.someMeetings__title}>Еще мероприятия</div>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid item xs={6} md={4} lg={3} >
<Card></Card>
</Grid>
<Grid item xs={6} md={4} lg={3} >
<Card></Card>
</Grid>
<Grid item xs={6} md={4} lg={3} >
<Card></Card>
</Grid>
<Grid item xs={6} md={4} lg={3} >
<Card></Card>
</Grid>
</Grid>
</Box>
</section>
</>
)

176
src/Components/MeetPage/style.module.scss
View File

@@ -1,12 +1,12 @@
.meets {
margin-top: 150px;
width: 100%;
display: flex;
justify-content: space-between;
&__img {
width: 40%;
height: 400px;
background-color: gray;
width: 44%;
height: 300px;
background-color: #D9D9D9;
}
&__mainInfo {
&_container {
@@ -33,6 +33,12 @@
height: 35px;
justify-content: center;
align-items: center;
color: var(--gray_text, #888);
font-family: Montserrat;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&_status {
margin-top: 40px;
@@ -45,8 +51,170 @@
display: flex;
}
&_status_img {
height: 26px;
width: 30px;
margin-right: 12px;
}
}
&__otziv {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 44%;
border: 1px solid var(--gray_stroke, #D0D2D8);
margin-top: 50px;
color: #000;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
&_title {
color: #000;
font-family: Montserrat;
font-size: 25px;
font-style: normal;
font-weight: 400;
line-height: normal;
position: absolute;
left: 10px;
top: 4px;
}
&_container {
display: flex;
justify-content: flex-end;
}
}
}
.aboutMeet {
display: flex;
flex-direction: column;
&__title {
display: flex;
color: #000;
font-family: Montserrat;
font-size: 56px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&__descr {
margin-top: 60px;
display: flex;
text-align: left;
color: rgba(0, 0, 0, 0.90);
font-family: Inter;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 110%; /* 27.6px */
}
}
.expert {
display: flex;
flex-direction: column;
margin-top: 200px;
&__title {
display: flex;
color: #000;
font-family: Montserrat;
font-size: 56px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&__img {
border-radius: 10000px;
}
}
.expert {
&__container {
margin-top: 60px;
display: flex;
}
&__img {
width: 200px;
height: 200px;
&_container {
margin-right: 50px;
}
}
&__descr {
&_container {
display: flex;
flex-direction: column;
text-align: left;
justify-content: center;
}
&_fullname {
color: #000;
font-family: Montserrat;
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&_speciality {
color: #000;
font-family: Montserrat;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 6px;
}
&_phone {
color: #000;
font-family: Montserrat;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 16px;
}
&_email {
color: #2C41FF;
font-family: Montserrat;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 16px;
}
}
}
.someMeetings {
display: flex;
flex-direction: column;
margin-top: 200px;
&__title {
display: flex;
color: #000;
font-family: Montserrat;
font-size: 56px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}
.cards_container {
display: flex;
}

2
src/Components/css/style.module.css
View File

@@ -1 +1 @@
.meets{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.meets__img{width:40%;height:400px;background-color:gray}.meets__mainInfo_container{width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:start;align-content:start}.meets__mainInfo_descr{color:#000;font-family:Montserrat;font-size:30px;font-style:normal;font-weight:600;line-height:normal;text-align:left}.meets__mainInfo_type{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:25px;border-radius:10px;border:1px solid var(--gray_text, #888);width:110px;height:35px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.meets__mainInfo_status{margin-top:40px;display:-webkit-box;display:-ms-flexbox;display:flex}.meets__mainInfo_time{margin-top:40px;display:-webkit-box;display:-ms-flexbox;display:flex}.meets__mainInfo_status_img{margin-right:12px}/*# sourceMappingURL=style.module.css.map */
.meets{margin-top:150px;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.meets__img{width:44%;height:300px;background-color:#d9d9d9}.meets__mainInfo_container{width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:start;align-content:start}.meets__mainInfo_descr{color:#000;font-family:Montserrat;font-size:30px;font-style:normal;font-weight:600;line-height:normal;text-align:left}.meets__mainInfo_type{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:25px;border-radius:10px;border:1px solid var(--gray_text, #888);width:110px;height:35px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--gray_text, #888);font-family:Montserrat;font-size:15px;font-style:normal;font-weight:400;line-height:normal}.meets__mainInfo_status{margin-top:40px;display:-webkit-box;display:-ms-flexbox;display:flex}.meets__mainInfo_time{margin-top:40px;display:-webkit-box;display:-ms-flexbox;display:flex}.meets__mainInfo_status_img{height:26px;width:30px;margin-right:12px}.meets__otziv{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:300px;width:44%;border:1px solid var(--gray_stroke, #D0D2D8);margin-top:50px;color:#000;font-family:Montserrat;font-size:14px;font-style:normal;font-weight:400;line-height:normal}.meets__otziv_title{color:#000;font-family:Montserrat;font-size:25px;font-style:normal;font-weight:400;line-height:normal;position:absolute;left:10px;top:4px}.meets__otziv_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.aboutMeet{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.aboutMeet__title{display:-webkit-box;display:-ms-flexbox;display:flex;color:#000;font-family:Montserrat;font-size:56px;font-style:normal;font-weight:400;line-height:normal}.aboutMeet__descr{margin-top:60px;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:left;color:rgba(0,0,0,.9);font-family:Inter;font-size:24px;font-style:normal;font-weight:400;line-height:110%}.expert{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:200px}.expert__title{display:-webkit-box;display:-ms-flexbox;display:flex;color:#000;font-family:Montserrat;font-size:56px;font-style:normal;font-weight:400;line-height:normal}.expert__img{border-radius:10000px}.expert__container{margin-top:60px;display:-webkit-box;display:-ms-flexbox;display:flex}.expert__img{width:200px;height:200px}.expert__img_container{margin-right:50px}.expert__descr_container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:left;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.expert__descr_fullname{color:#000;font-family:Montserrat;font-size:36px;font-style:normal;font-weight:400;line-height:normal}.expert__descr_speciality{color:#000;font-family:Montserrat;font-size:32px;font-style:normal;font-weight:400;line-height:normal;margin-top:6px}.expert__descr_phone{color:#000;font-family:Montserrat;font-size:22px;font-style:normal;font-weight:400;line-height:normal;margin-top:16px}.expert__descr_email{color:#2c41ff;font-family:Montserrat;font-size:22px;font-style:normal;font-weight:400;line-height:normal;margin-top:16px}.someMeetings{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:200px}.someMeetings__title{display:-webkit-box;display:-ms-flexbox;display:flex;color:#000;font-family:Montserrat;font-size:56px;font-style:normal;font-weight:400;line-height:normal}.cards_container{display:-webkit-box;display:-ms-flexbox;display:flex}/*# sourceMappingURL=style.module.css.map */

2
src/Components/css/style.module.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["../MeetPage/style.module.scss"],"names":[],"mappings":"AAAA,OAEI,UAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CACA,YACI,SAAA,CACA,YAAA,CACA,qBAAA,CAGA,2BACI,SAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,wBAAA,CAAA,mBAAA,CAEJ,uBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CAEJ,sBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,eAAA,CACA,kBAAA,CACA,uCAAA,CACA,WAAA,CACA,WAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CAEJ,wBACI,eAAA,CAEA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAEJ,sBACI,eAAA,CAEA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAEJ,4BACI,iBAAA","file":"style.module.css"}
{"version":3,"sources":["../MeetPage/style.module.scss"],"names":[],"mappings":"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","file":"style.module.css"}

70
src/components/Home/Home.jsx
View File

@@ -2,54 +2,36 @@ import React from 'react';
// import Header from '../Header';
import './style.css'
import styled from 'styled-components';
import Grid from '@mui/material/Grid';
import Card from '../Card';
import Box from '@mui/material/Box';
const Taged = styled.div({
borderRadius: 10,
backgroundColor: 'gray',
})
const Home = () => {
return (
<div className='wrapp'>
{/* <Header></Header> */}
<div className='event_card'>
<div className="event-card__photo" />
<div className="taggs">
<div className='tagged'>Психология</div>
<div className="feautures">Предстоящее</div>
</div>
<h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
<p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
</div>
<div className='event_card'>
<div className="event-card__photo" />
<div className="taggs">
<div className='tagged'>Психология</div>
<div className="feautures">Предстоящее</div>
</div>
<h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
<p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
</div>
<div className='event_card'>
<div className="event-card__photo" />
<div className="taggs">
<div className='tagged'>Психология</div>
<div className="feautures">Предстоящее</div>
</div>
<h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
<p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
</div>
<div className='event_card'>
<div className="event-card__photo" />
<div className="taggs">
<div className='tagged'>Психология</div>
<div className="feautures">Предстоящее</div>
</div>
<h4 className="event-card__title">Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</h4>
<p className="event-card__date">22 декабря, с 10:00 до 22:00 по Московскому времени</p>
</div>
</div>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid item xs={6} md={4}>
<Card></Card>
</Grid>
<Grid item xs={6} md={4}>
<Card></Card>
</Grid>
<Grid item xs={6} md={4}>
<Card></Card>
</Grid>
<Grid item xs={6} md={4}>
<Card></Card>
</Grid>
<Grid item xs={6} md={4}>
<Card></Card>
</Grid>
<Grid item xs={6} md={4}>
<Card></Card>
</Grid>
</Grid>
</Box>
);
}

2
src/components/Home/style.css
View File

@@ -3,7 +3,7 @@
height: 626px;
flex-shrink: 0;
margin-top: 100px;
margin-right: 31px;
margin-left: 50px;
}
.wrapp {

BIN
src/img/MeetPage/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB