-
Notifications
You must be signed in to change notification settings - Fork 1
/
Home.js
52 lines (50 loc) · 2.12 KB
/
Home.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, { Component } from "react";
const data = {
cardText:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunts eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna",
heading: "welcome to multiple render ",
};
export default class Board extends Component {
render() {
return (
<div>
<div className="row bg-light ">
<div className="col-md-8 text-left m-5">
<h2 className="font-weight-bold">{data.heading}</h2>
<p>{data.cardText}</p>
<div className="d-flex justify-content-start">
<button className="btn btn-dark m-1">
read more
</button>
<button className="btn btn-dark m-1">
comments
</button>
</div>
</div>
</div>
<div className="d-flex pt-3">
{this.renderCard("MAECENAS LUCTUS LECTUS")}
{this.renderCard("MAECENAS LUCTUS LECTUS")}
{this.renderCard("MAECENAS LUCTUS LECTUS")}
</div>
{this.renderFooter()}
</div>
);
}
renderCard = (heading) => {
return (
<div className="col bg-dark">
<div className=" m-5 text-left">
<h3 className="text-white col-md">{heading}</h3>
</div>
</div>
);
};
renderFooter = () => {
return (
<div className="d-flex flex-row justify-content-center bg-warning font-weight-bold p-5">
@ UNTITLED, ALL RGHTS RESERVED | DESIGN BY VENKATESH.R
</div>
);
};
}