card

src/components/Home/Home.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Header from '../Header';
+import './style.css'
+import styled from 'styled-components';
+
+const Taged = styled.div({
+    borderRadius: 10,
+    backgroundColor: 'gray',
+    
+})
+
+const Home = () => {
+    return (
+        <div>
+            {/* <Header></Header> */}
+            <div className='event_card'>
+                <div className="event-card__photo"></div>
+                <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>
+    );
+}
+
+export default Home;

src/components/Home/style.css

@@ -0,0 +1,64 @@
+.event_card {
+    width: 342px;
+height: 626px;
+flex-shrink: 0;
+}
+
+: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: 342px;
+height: 340px;
+flex-shrink: 0;
+background: #D9D9D9;
+}
+
+.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: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+border-radius: 10px;
+background: #E7FFD2;
+}
+
+.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;
+}