wydarzenia responsywnosc css
This commit is contained in:
devid2971
parent
91c50508ad
commit
2cb95c60c3
Binary file not shown.
|
Before Width: | Height: | Size: 914 KiB |
BIN
highneed_react/public/images/img-1.png
Normal file
BIN
highneed_react/public/images/img-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 419 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
BIN
highneed_react/public/images/img-2.png
Normal file
BIN
highneed_react/public/images/img-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
@ -17,19 +17,19 @@ function EventItem(props) {
|
||||
|
||||
</Link>
|
||||
<div className='events__item__info'>
|
||||
<h5 className='events__item__data'>{props.data}</h5>
|
||||
<h5 className='content events__item__data'>{props.data}</h5>
|
||||
|
||||
<Link className='events__item__link' to={props.path}>
|
||||
<h4 className='events__item__title'>{props.title}</h4>
|
||||
<h4 className='content events__item__title'>{props.title}</h4>
|
||||
</Link>
|
||||
<h5 className='events__item__category'>{props.category}</h5>
|
||||
<h5 className='events__item__age'>{props.age}</h5>
|
||||
<h5 className='events__item__address'>{props.address}</h5>
|
||||
<p className='events__item__description'>{props.description}</p>
|
||||
<h5 className='events__item__organizer'>{props.organizer}</h5>
|
||||
<h5 className='events__item__online'>{props.online}</h5>
|
||||
<h5 className='events__item__place'>{props.place}</h5>
|
||||
<h5 className='events__item__price'>{props.price}</h5>
|
||||
<h5 className='content events__item__category'>{props.category}</h5>
|
||||
<h5 className='content events__item__age'>{props.age}</h5>
|
||||
<h5 className='content events__item__address'>{props.address}</h5>
|
||||
<h5 className='content events__item__organizer'>{props.organizer}</h5>
|
||||
<h5 className='content events__item__online'>{props.online}</h5>
|
||||
<h5 className='content events__item__place'>{props.place}</h5>
|
||||
<h5 className='content events__item__price'>{props.price}</h5>
|
||||
<p className='content events__item__description'>{props.description}</p>
|
||||
<div className='button-container'>
|
||||
<Link className='events__item__link' to={props.path}>
|
||||
<button className='button button-details'>Szczegóły</button>
|
||||
@ -37,9 +37,12 @@ function EventItem(props) {
|
||||
<Link className='events__item__link' to={props.path}>
|
||||
<button className='button button-add'>Dodaj do listy</button>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<div className='event_line'></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
.events__container
|
||||
{
|
||||
width: 85%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -13,13 +13,26 @@
|
||||
.events__items
|
||||
{
|
||||
display: block;
|
||||
margin: 3%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.content
|
||||
{
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.events__item__img
|
||||
{
|
||||
width:500px;
|
||||
height:500px;
|
||||
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
height:auto;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -55,10 +68,31 @@ a
|
||||
font-size: 16px;
|
||||
border-radius: 40px;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
|
||||
.button:hover {background-color: #347945}
|
||||
|
||||
.event_line {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: #347945;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 701px) {
|
||||
.button{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.events__item
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*.events {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import './Events.css';
|
||||
import EventItem from './EventItem';
|
||||
|
||||
function Events() {
|
||||
return (
|
||||
<div className='events'>
|
||||
<div className='events__container'>
|
||||
<ul className='events__items'>
|
||||
<EventItem
|
||||
src='images/img-1.jpg'
|
||||
data='29.07.2020 Piątek, 18:00 - 20:00'
|
||||
title='Współne zabawy na placu zabaw'
|
||||
category='Zabawa'
|
||||
age = '5-7 lat'
|
||||
address = 'Hetmańska 48, Poznań'
|
||||
path='/'
|
||||
/>
|
||||
<EventItem
|
||||
src='images/img-2.jpg'
|
||||
data='29.07.2020 Piątek, 18:00 - 20:00'
|
||||
title='Współne zabawy na placu zabaw'
|
||||
category='Zabawa'
|
||||
age = '5-7 lat'
|
||||
address = 'Hetmańska 48, Poznań'
|
||||
path='/'
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Events;
|
||||
@ -1,12 +1,16 @@
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
padding: 1% 1%;
|
||||
background-color: #64BE7B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #64BE7B;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.line {
|
||||
@ -16,48 +20,55 @@
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 45px;
|
||||
display: flex;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
right:50%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-h1 {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logo-h2 {
|
||||
font-weight:normal;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
||||
.icon-container {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-icon-list {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.menu-icon-cross {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
|
||||
@ -87,63 +98,27 @@ a {
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 1% 1%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
border-radius: 40px;
|
||||
background-color: #F0FAF3;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction:row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
border-bottom: #347945 2px solid;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
border-right: 1px solid #347945;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
padding: 0.5%;
|
||||
display:flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5%;
|
||||
justify-content: center;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 416px) {
|
||||
.logo-h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.logo-h2{
|
||||
font-size:12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 801px) {
|
||||
.logo-h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logo-h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
@ -45,7 +45,7 @@ const Stock = ({ startDate, name, description, organizer, online, prize, categor
|
||||
<div className='events__container'>
|
||||
<ul className='events__items'>
|
||||
<EventItem
|
||||
src='images/img-1.jpg'
|
||||
src='images/img-1.png'
|
||||
data={startDate}
|
||||
title={name}
|
||||
category={category}
|
||||
@ -67,10 +67,6 @@ function Stocks() {
|
||||
<Stock
|
||||
startDate={data.startDate}
|
||||
name={data.name}
|
||||
description={data.description}
|
||||
organizer={data.organizer}
|
||||
online={data.online}
|
||||
prize={data.prize}
|
||||
category={data.category}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -45,7 +45,7 @@ const Stock2 = ({ startDate, name, description, organizer, online, prize, catego
|
||||
<div className='events__container'>
|
||||
<ul className='events__items'>
|
||||
<EventItem
|
||||
src='images/img-2.jpg'
|
||||
src='images/img-2.png'
|
||||
data={startDate}
|
||||
title={name}
|
||||
category={category}
|
||||
|
||||
@ -53,7 +53,7 @@ const Stock = ({ startDate, name, description, organizer, online, price, categor
|
||||
<div className='events__container'>
|
||||
<ul className='events__items'>
|
||||
<EventItem
|
||||
src='images/img-1.jpg'
|
||||
src='images/img-1.png'
|
||||
data={startDate}
|
||||
title={name}
|
||||
category={category}
|
||||
|
||||
@ -46,7 +46,7 @@ const Stock = ({ startDate, name, description, organizer, online, price, categor
|
||||
<div className='events__container'>
|
||||
<ul className='events__items'>
|
||||
<EventItem
|
||||
src='images/img-2.jpg'
|
||||
src='images/img-2.png'
|
||||
data={startDate}
|
||||
title={name}
|
||||
category={category}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user