diff --git a/src/Components/Card/index.jsx b/src/Components/Card/index.jsx new file mode 100644 index 0000000..eb46431 --- /dev/null +++ b/src/Components/Card/index.jsx @@ -0,0 +1,24 @@ +import './style.module.scss'; + + + + +const Card = () => { + + + + return ( + <> +
+
+
+
Психология
+
Предстоящее
+
+

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

+

22 декабря, с 10:00 до 22:00 по Московскому времени

+
+ + ) +} +export default Card; \ No newline at end of file diff --git a/src/Components/Card/style.module.scss b/src/Components/Card/style.module.scss new file mode 100644 index 0000000..78e51ed --- /dev/null +++ b/src/Components/Card/style.module.scss @@ -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; +} \ No newline at end of file diff --git a/src/Components/MeetPage/index.jsx b/src/Components/MeetPage/index.jsx index 08a37b4..8d9ee36 100644 --- a/src/Components/MeetPage/index.jsx +++ b/src/Components/MeetPage/index.jsx @@ -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 = () => {
+
+
+ Отзывы + Оставьте первый отзыв +
+
+
+
О мероприятии
+
Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.
+
+
+
Специалист
+
+
avatar
+
+
Иванов Иван Иванович
+
Психолог, таролог
+
+7 (888) 888 - 88 - 88
+ exampl@ya.ru +
+
+
+
+
Еще мероприятия
+ + + + + + + + + + + + + + + + + +
) diff --git a/src/Components/MeetPage/style.module.scss b/src/Components/MeetPage/style.module.scss index 8ec6ddd..bc1a9bf 100644 --- a/src/Components/MeetPage/style.module.scss +++ b/src/Components/MeetPage/style.module.scss @@ -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; } \ No newline at end of file diff --git a/src/Components/css/style.module.css b/src/Components/css/style.module.css index 6de163b..a62fc6c 100644 --- a/src/Components/css/style.module.css +++ b/src/Components/css/style.module.css @@ -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 */ \ No newline at end of file +.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 */ \ No newline at end of file diff --git a/src/Components/css/style.module.css.map b/src/Components/css/style.module.css.map index 8890c5e..8b91c79 100644 --- a/src/Components/css/style.module.css.map +++ b/src/Components/css/style.module.css.map @@ -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"} \ No newline at end of file +{"version":3,"sources":["../MeetPage/style.module.scss"],"names":[],"mappings":"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","file":"style.module.css"} \ No newline at end of file diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx index 625456b..c1a6797 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.jsx @@ -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 ( -
- {/*
*/} -
-
-
-
Психология
-
Предстоящее
-
-

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

-

22 декабря, с 10:00 до 22:00 по Московскому времени

-
-
-
-
-
Психология
-
Предстоящее
-
-

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

-

22 декабря, с 10:00 до 22:00 по Московскому времени

-
-
-
-
-
Психология
-
Предстоящее
-
-

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

-

22 декабря, с 10:00 до 22:00 по Московскому времени

-
-
-
-
-
Психология
-
Предстоящее
-
-

Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»

-

22 декабря, с 10:00 до 22:00 по Московскому времени

-
-
+ + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/components/Home/style.css b/src/components/Home/style.css index abe2b11..dcc6912 100644 --- a/src/components/Home/style.css +++ b/src/components/Home/style.css @@ -3,7 +3,7 @@ height: 626px; flex-shrink: 0; margin-top: 100px; - margin-right: 31px; + margin-left: 50px; } .wrapp { diff --git a/src/img/MeetPage/avatar.png b/src/img/MeetPage/avatar.png new file mode 100644 index 0000000..ee01eb9 Binary files /dev/null and b/src/img/MeetPage/avatar.png differ