Skip to content

Commit f80d59f

Browse files
elangosundarelangosundar
committed
Styles Changed..!
1 parent 83745f5 commit f80d59f

File tree

3 files changed

+79
-12
lines changed

3 files changed

+79
-12
lines changed

‎src/Components/Main.js‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,71 @@ class Main extends React.Component {
55
render() {
66
return (
77
<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.
8+
<div className="container content-main">
9+
<div className="row">
10+
<div className="col-12">
11+
<h3>An introduction : </h3>
1212
</div>
1313
</div>
14-
<div className="row"></div>
1514
<div className="row">
1615
<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
16+
<ul>
17+
<li><a href="#">Introduction Of ReactJs</a></li>
18+
<li><a href="#">Introduction Of ReactJs</a></li>
19+
<li><a href="#">Introduction Of ReactJs</a></li>
20+
<li><a href="#">Introduction Of ReactJs</a></li>
21+
</ul>
1822
</div>
1923
<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
24+
<ul>
25+
<li><a href="#">Code Editors</a></li>
26+
<li><a href="#">Code Editors</a></li>
27+
<li><a href="#">Code Editors</a></li>
28+
<li><a href="#">Code Editors</a></li>
29+
</ul>
2130
</div>
2231
<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
32+
<ul>
33+
<li><a href="#">Developer console</a></li>
34+
<li><a href="#">Developer console</a></li>
35+
<li><a href="#">Developer console</a></li>
36+
<li><a href="#">Developer console</a></li>
37+
</ul>
38+
</div>
39+
</div>
40+
41+
<div className="row">
42+
<div className="col-12">
43+
<h3>ReactJs Fundamentals : </h3>
2444
</div>
2545
</div>
46+
<div className="row">
47+
<div className="col-sm">
48+
<ul>
49+
<li><a href="#">Introduction Of ReactJs</a></li>
50+
<li><a href="#">Introduction Of ReactJs</a></li>
51+
<li><a href="#">Introduction Of ReactJs</a></li>
52+
<li><a href="#">Introduction Of ReactJs</a></li>
53+
</ul>
54+
</div>
55+
<div className="col-sm">
56+
<ul>
57+
<li><a href="#">Code Editors</a></li>
58+
<li><a href="#">Code Editors</a></li>
59+
<li><a href="#">Code Editors</a></li>
60+
<li><a href="#">Code Editors</a></li>
61+
</ul>
62+
</div>
63+
<div className="col-sm">
64+
<ul>
65+
<li><a href="#">Developer console</a></li>
66+
<li><a href="#">Developer console</a></li>
67+
<li><a href="#">Developer console</a></li>
68+
<li><a href="#">Developer console</a></li>
69+
</ul>
70+
</div>
71+
</div>
72+
2673
</div>
2774
</div>
2875
)

‎src/Components/Navigation.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,21 @@ class Navigation extends React.Component {
77
<div className="main thememain-header">
88
<div className="container">
99
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
10-
<a className="navbar-brand" href="#">Navbar</a>
10+
<a className="navbar-brand" href="#" title="10secondsofcode" >10secondsofcode</a>
1111
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
1212
<span className="navbar-toggler-icon"></span>
1313
</button>
1414

1515
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
1616
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
1717
<li className="nav-item active">
18-
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
18+
<a className="nav-link" href="#" title="10secondsofcode">Home <span className="sr-only">(current)</span></a>
1919
</li>
2020
<li className="nav-item">
21-
<a className="nav-link" href="#">Link</a>
21+
<a className="nav-link" href="#" title="ReactJs Tutorial">ReactJs</a>
2222
</li>
2323
<li className="nav-item">
24-
<a className="nav-link disabled" href="#">Disabled</a>
24+
<a className="nav-link disabled" href="#" title="Javascript Tutorial" >Javascript</a>
2525
</li>
2626
</ul>
2727
<form className="form-inline my-2 my-lg-0">

‎src/style.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,4 +43,24 @@
4343
.theme-search-btn{
4444
width: 14% !important;
4545
margin-top: 10px !important;
46+
}
47+
48+
.content-main{
49+
width:980px;
50+
}
51+
52+
.content-main h3{
53+
font-size: 20px;
54+
margin-top: 15px;
55+
padding-bottom: 15px;
56+
margin-left: 41px;
57+
border-bottom: 1px solid #ebebeb;
58+
}
59+
60+
.content-main ul{
61+
list-style : none;
62+
}
63+
64+
.content-main li{
65+
padding-bottom: 5px;
4666
}

0 commit comments

Comments
 (0)