Skip to content

Commit f637714

Browse files
elangosundarelangosundar
committed
added
1 parent 95d24b7 commit f637714

File tree

5 files changed

+88
-73
lines changed

5 files changed

+88
-73
lines changed

‎src/App.js‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Button } from 'reactstrap';
33

44
import Navigation from './Components/Navigation';
55
import Main from './Components/Main';
6+
import Herocontent from './Components/Herocontent';
67

78
class App extends React.Component {
89
constructor(props){
@@ -27,43 +28,11 @@ class App extends React.Component {
2728
}
2829

2930
render() {
30-
return (
31-
<div className="container thememain">
32-
<Navigation />
33-
<div className="container main">
34-
<Main />
35-
</div>
36-
</div>
37-
);
38-
}
39-
}
40-
41-
class Header extends React.Component{
42-
render(){
43-
return (
44-
<div>
45-
<h1>Header sectionsr</h1>
46-
47-
</div>
48-
);
49-
}
50-
}
51-
52-
class Content extends React.Component{
53-
render(){
54-
return (
55-
<div>
56-
<h1>Content Sections</h1>
57-
</div>
58-
);
59-
}
60-
}
61-
62-
class Footer extends React.Component{
63-
render(){
6431
return (
6532
<div>
66-
<h1>Footer Content</h1>
33+
<Navigation />
34+
<Herocontent />
35+
<Main />
6736
</div>
6837
);
6938
}

‎src/Components/Herocontent.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
import React from 'react';
3+
4+
class Herocontent extends React.Component {
5+
render() {
6+
return (
7+
<div className="main thememain-white">
8+
<div className="container main">
9+
<div className="row">
10+
<div className="col-sm-12">
11+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
12+
</div>
13+
</div>
14+
<div className="row"></div>
15+
<div className="row">
16+
<div className="col-sm">
17+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
18+
</div>
19+
<div className="col-sm">
20+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
21+
</div>
22+
<div className="col-sm">
23+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
)
29+
}
30+
}
31+
32+
export default Herocontent;

‎src/Components/Main.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,24 @@ import React from 'react';
44
class Main extends React.Component {
55
render() {
66
return (
7-
<div>
8-
<div className="row jumbotron thememain" >
9-
<div className="col-sm-12">
10-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
7+
<div className="main thememain">
8+
<div className="container main thememain">
9+
<div className="row thememain" >
10+
<div className="col-sm-12">
11+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
12+
</div>
1113
</div>
12-
</div>
13-
<div className="row"></div>
14-
<div className="row">
15-
<div className="col-sm">
16-
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
17-
</div>
18-
<div className="col-sm">
19-
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
20-
</div>
21-
<div className="col-sm">
22-
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
14+
<div className="row"></div>
15+
<div className="row">
16+
<div className="col-sm">
17+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
18+
</div>
19+
<div className="col-sm">
20+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
21+
</div>
22+
<div className="col-sm">
23+
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. I
24+
</div>
2325
</div>
2426
</div>
2527
</div>

‎src/Components/Navigation.js‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,34 @@ import React from 'react';
44
class Navigation extends React.Component {
55
render() {
66
return (
7-
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain">
8-
<a className="navbar-brand" href="#">Navbar</a>
9-
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
10-
<span className="navbar-toggler-icon"></span>
11-
</button>
7+
<div className="main thememain">
8+
<div className="container">
9+
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain">
10+
<a className="navbar-brand" href="#">Navbar</a>
11+
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
12+
<span className="navbar-toggler-icon"></span>
13+
</button>
1214

13-
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
14-
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
15-
<li className="nav-item active">
16-
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
17-
</li>
18-
<li className="nav-item">
19-
<a className="nav-link" href="#">Link</a>
20-
</li>
21-
<li className="nav-item">
22-
<a className="nav-link disabled" href="#">Disabled</a>
23-
</li>
24-
</ul>
25-
<form className="form-inline my-2 my-lg-0">
26-
<input className="form-control mr-sm-2" type="search" placeholder="Search"></input>
27-
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
28-
</form>
29-
</div>
30-
</nav>
15+
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
16+
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
17+
<li className="nav-item active">
18+
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
19+
</li>
20+
<li className="nav-item">
21+
<a className="nav-link" href="#">Link</a>
22+
</li>
23+
<li className="nav-item">
24+
<a className="nav-link disabled" href="#">Disabled</a>
25+
</li>
26+
</ul>
27+
<form className="form-inline my-2 my-lg-0">
28+
<input className="form-control mr-sm-2" type="search" placeholder="Search"></input>
29+
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
30+
</form>
31+
</div>
32+
</nav>
33+
</div>
34+
</div>
3135
)
3236
}
3337
}

‎src/style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
.thememain{
22
background: linear-gradient(165deg,#6e60cc,#484389);
3+
}
4+
5+
.herecontent{
6+
background: white;
7+
}
8+
9+
.thememain-white{
10+
background: white;
311
}

0 commit comments

Comments
 (0)