fix #5 create a Random Location, Topic static content

This commit is contained in:
Ahmed-Ayman 2018-12-06 00:34:48 +02:00
parent da380dff81
commit 396005c9fc
5 changed files with 75 additions and 15 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -1,9 +1,26 @@
import React from 'react';
import VideoItem from "./VideoItem";
import Grid from 'react-css-grid'
class RandomLocation extends React.Component {
render() {
const Location =()=>{
return 'Location Name';
}
return (
'hello Random Location!'
<section>
<Location/>
<Grid
width={320}
gap={24}>
<VideoItem/>
<VideoItem/>
<VideoItem/>
<VideoItem/>
</Grid>
</section>
)
}
}
export default (RandomLocation);

View File

@ -1,9 +1,21 @@
import Grid from 'react-css-grid'
import React from 'react';
import VideoItem from "./VideoItem";
class RandomTopic extends React.Component {
render() {
return (
'hello Random Topic!'
<Grid
width={320}
gap={24}>
<VideoItem/>
<VideoItem/>
<VideoItem/>
<VideoItem/>
</Grid>
)
}
}
export default (RandomTopic);

View File

@ -0,0 +1,12 @@
import React from 'react';
class VideoItem extends React.Component{
render(){
return(
<section className="video-item">
<img className="video-thumbnail" src={require('../assets/images/img1.png')} alt=""/>
<h3 className="video-title">Titleeeee #1</h3>
</section>
)
}
}
export default (VideoItem);

View File

@ -61,5 +61,24 @@ header {
top: 0;
padding: 2em;
}
/* search */
/* search */
.search-button {
background: white;
}
.search-button img {
max-width: 50px;
}
.search-box {
padding: 1em;
background: var(--858-light-gray-color);
}
.search-box::placeholder {
color: black;
}
.video-thumbnail{
max-width: 300px;
}