diff --git a/highneed_react/public/images/img-1.jpg b/highneed_react/public/images/img-1.jpg
new file mode 100644
index 0000000..3d10038
Binary files /dev/null and b/highneed_react/public/images/img-1.jpg differ
diff --git a/highneed_react/public/images/img-2.jpg b/highneed_react/public/images/img-2.jpg
new file mode 100644
index 0000000..3a79046
Binary files /dev/null and b/highneed_react/public/images/img-2.jpg differ
diff --git a/highneed_react/src/App.css b/highneed_react/src/App.css
index 25cde58..5cacdb3 100644
--- a/highneed_react/src/App.css
+++ b/highneed_react/src/App.css
@@ -1,3 +1,9 @@
+body
+{
+ height: 100%;
+ width: 100%;
+}
+
* {
box-sizing: border-box;
margin: 0;
diff --git a/highneed_react/src/App.js b/highneed_react/src/App.js
index 52457a0..c401c36 100644
--- a/highneed_react/src/App.js
+++ b/highneed_react/src/App.js
@@ -2,6 +2,8 @@ import React from 'react';
import './App.css';
import NavBar from './components/NavBar';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
+import SearchEvent from './components/Pages/SearchEvent';
+import Home from './components/Pages/Home';
function App() {
return (
@@ -9,7 +11,8 @@ function App() {
-
+
+
>
diff --git a/highneed_react/src/components/EventItem.js b/highneed_react/src/components/EventItem.js
new file mode 100644
index 0000000..8837440
--- /dev/null
+++ b/highneed_react/src/components/EventItem.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+
+function EventItem(props) {
+ return (
+ <>
+
+
+
+
+
+
{props.data}
+
+ {props.title}
+
+ {props.category}
+ {props.age}
+ {props.address}
+
+
+
+
+
+
+ >
+ );
+}
+
+export default EventItem;
diff --git a/highneed_react/src/components/Events.css b/highneed_react/src/components/Events.css
new file mode 100644
index 0000000..1f66bbc
--- /dev/null
+++ b/highneed_react/src/components/Events.css
@@ -0,0 +1,157 @@
+.events
+{
+ width: 100%;
+}
+
+ .events__container
+ {
+ width: 85%;
+ margin: 0 auto;
+ }
+
+
+.events__items
+{
+ display: block;
+
+}
+
+.events__item__img
+{
+ max-width: 100%;
+ height: auto;
+}
+
+
+.events__item__info
+{
+ padding: 20px 30px 30px;
+ width: 80%;
+ text-align: left;
+ }
+
+.events__item__img__link
+{
+
+}
+
+a
+{
+ color: black;
+}
+
+.button
+{
+ background-color: #64BE7B; /* Green */
+ border: none;
+ color: white;
+ padding: 8px 16px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 2px;
+ border-radius: 15px;
+ cursor: pointer;
+}
+
+.button:hover {background-color: #347945}
+
+/*.events {
+ background: #fff;
+ }
+
+ .events__container {
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ max-width: 2120px;
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ .events__wrapper {
+ width: 100%;
+ position: relative;
+ margin: 50px 0 45px;
+ }
+
+ .events__items {
+ margin-bottom: 24px;
+ }
+
+ .events__item {
+ display: flex;
+ flex: 1;
+ margin: 0 1rem;
+ border-radius: 10px;
+ }
+
+ .events__item__link {
+ display: flex;
+ width: 100%;
+ box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
+ -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
+ filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
+ border-radius: 10px;
+ overflow: hidden;
+ text-decoration: none;
+ }
+
+ .events__item__pic-wrap {
+ position: relative;
+ width: 50%;
+ padding-top: 27%; wysokość karty
+ overflow: hidden;
+ }
+
+ .fade-img {
+ animation-name: fade-img;
+ animation-duration: 2s;
+ }
+
+ .events__item__pic-wrap::after {
+ content: attr(data-category);
+ position: absolute;
+ bottom: 0;
+ margin-left: 10px;
+ padding: 6px 8px;
+ max-width: calc((100%) - 60px);
+ font-size: 12px;
+ font-weight: 700;
+ color: #fff;
+ background-color: #1f98f4;
+ box-sizing: border-box;
+ }
+
+ .events__item__img {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+ width: 90%;
+ max-width: 100%;
+ height: 100%;
+ max-height: 100%;
+ object-fit: cover;
+ transition: all 0.2s linear;
+ }
+
+ .events__item__img:hover {
+ transform: scale(1.1);
+ }
+
+ .events__item__info {
+ padding: 20px 30px 30px;
+ width: 50%;
+ }
+
+ .events__item__text {
+ color: #252e48;
+ font-size: 18px;
+ line-height: 24px;
+ }
+
+ */
\ No newline at end of file
diff --git a/highneed_react/src/components/Events.js b/highneed_react/src/components/Events.js
new file mode 100644
index 0000000..51c9afc
--- /dev/null
+++ b/highneed_react/src/components/Events.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import './Events.css';
+import EventItem from './EventItem';
+
+function Events() {
+ return (
+
+ );
+}
+
+export default Events;
diff --git a/highneed_react/src/components/NavBar.css b/highneed_react/src/components/NavBar.css
index e8a94b5..2789793 100644
--- a/highneed_react/src/components/NavBar.css
+++ b/highneed_react/src/components/NavBar.css
@@ -1,3 +1,4 @@
+
.navbar
{
background-color: #64BE7B;
@@ -12,9 +13,11 @@
align-items: center;
justify-content: space-between;
width: 100%;
+ margin: auto;
height: 45px;
}
+
.line
{
height: 5px;
@@ -67,9 +70,80 @@ li
}
+.menu-icon-list
+{
+ position: relative;
+ width: 24px;
+ height: 24px;
+}
+.menu-icon-cross
+{
+ position: relative;
+ width: 30px;
+ height: 30px;
+}
+
+
+.icon-list, .icon-cross
+{
+ position: absolute;
+
+
+}
.sidebar.disable
+{
+ display: none;
+}
+
+.menu-icon-cross .icon-cross
{
visibility: hidden;
-}
\ No newline at end of file
+}
+
+.menu-icon-list .icon-list
+{
+ visibility: hidden;
+}
+
+a
+{
+ text-decoration: none;
+}
+.nav-links
+{
+ color: black;
+ text-decoration: none;
+
+}
+
+ul
+{
+ padding: 5px;
+}
+
+.sidebar
+{
+ width: 250px;
+ height: 100%;
+ border-right: black 1px solid;
+ position: fixed;
+ z-index: 1;
+ background-color: white;
+}
+
+.sidebar-icon
+{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.sidebar-text
+{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-left:10px ;
+}
diff --git a/highneed_react/src/components/NavBar.js b/highneed_react/src/components/NavBar.js
index cbb3748..7d9afa4 100644
--- a/highneed_react/src/components/NavBar.js
+++ b/highneed_react/src/components/NavBar.js
@@ -15,15 +15,21 @@ function NavBar() {
-
-
HighNeed.pl
Poznań
+
+
HighNeed.pl
Poznań
@@ -43,7 +49,7 @@ function NavBar() {
-