diff --git a/App.jsx b/App.jsx
new file mode 100644
index 0000000..44c6c15
--- /dev/null
+++ b/App.jsx
@@ -0,0 +1,372 @@
+import React from 'react';
+var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
+
+class App extends React.Component {
+   render() {
+      return (
+         <div>
+            <Headertop/>
+            <Headercenter/>
+            <Headerbootam/>
+         </div>
+      );
+   }
+}
+
+class Headertop extends React.Component {
+
+   render() {
+      return (
+      
+         
+         <section className="header">
+
+                  
+                          <nav className="navbar navbar-top">
+                       <div className="container">
+                         <div className="navbar-header">
+                            
+                         </div>
+                         <ul className="nav navbar-nav">
+                             
+                        <li><a href="#"   title="Facebook"><i className="facebook"></i></a></li>
+                        <li><a href="#"   title="Twitter"><i className="twitter"></i></a></li>
+                        
+                        <li><a href="#"   title="Linkedin"><i className="linkedin"></i></a></li>
+                        <li><a href="#"   title="youtube +"><i className="youtube" aria-hidden="true"></i></a></li>
+                         </ul>
+                          
+                       </div>
+                     </nav>
+
+
+
+                     <nav className="navbar navbar-midel">
+                       <div className="container">
+                         <div className="navbar-header">
+                            
+                         </div>
+                         <ul className="nav navbar-nav navbar-right">
+                           <li ><a href="#">Aboutus</a></li>
+                           <li><a href="#">Membership Beniefit</a></li>
+                           <li><a href="#">Resources</a></li>
+                           <li><a className="active" href="#">Blog</a></li>
+                           <li><a href="#">Contact</a></li>
+                         
+                         <li><button className="btn btn-claim  navbar-btn">Claim Free Report</button></li>
+                         <li><button className="btn btn-iogin navbar-btn">Login</button> </li>
+                         </ul>
+                       </div>
+
+                       </nav>
+
+
+                        <nav className="navbar navbar-bottam">
+                       <div className="container">
+                         <div className="navbar-header">
+                            
+                         </div>
+                         <ul className="nav navbar-nav">
+                           <li className="active"><a href="#">All</a></li>
+                           <li><a href="#">Investment</a></li>
+                           <li><a href="#">Finane</a></li>
+                           <li><a href="#">Credit</a></li>
+                           <li><a href="#">Other</a></li>
+                            <li><a href="#">More</a></li>
+                          <li><a href="#">Family</a></li>
+                          <li><a href="#">Rupee</a></li>
+                        </ul>
+                          
+                       </div>
+                       </nav>
+       
+</section>   
+      );
+   }
+}
+ 
+class Headercenter extends React.Component {
+
+   render() {
+      return (
+         
+        <section className="mainbody">
+        <div className="container">
+                    <div className="smallnav">
+                       
+                        
+                        <span> <a href="">Home /</a></span> <span className="text-muted">Blog</span>
+                         
+                      
+                       
+                      </div>
+            <div className="row">
+               
+               <div className="col-md-9">
+
+                 <div className="bolgs">
+
+                     <h2>Customer can refuse to pay <b>"Service Charges"</b> at Restorant - Govt</h2>
+                      <ul>
+                      <li>
+                        
+                        <span className="text-muted">Posted  By</span> <span> Swapnil Patil</span>
+                        <span className="text-muted"> on </span> <span>Mar 11,2017 10:32 AM</span> 
+                      </li>
+                      <li>
+                        <span className="text-muted">Comments</span> <span> (1)</span>  
+                      </li>
+                      </ul>
+
+                      <img src={"imgs/Blog_pic.jpg"} alt={"logo"}/>
+
+                      <p>
+                        In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and 
+                        change your components without affecting the rest of the page. In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and change your components without affecting the rest of the page.
+                        change your components without affecting the rest of the page. In this tutorial we will 
+                        show you how to combine components to make the app easier to maintain. This approach will
+                        allow you to update and change your components without affecting the rest of the page....
+                        <span className="redmore"><a href=""> ReadMore </a></span>
+
+                      </p> 
+        
+                  </div>
+
+                  <div className="bolgs">
+
+                     <h1>customer can refuse to pay <span>"service Charges"</span> at Restorant - Gov</h1>
+                      <ul >
+                     <li>
+                        
+                        <span className="text-muted">Posted  By</span> <span> Swapnil Patil</span>
+                        <span className="text-muted"> on </span> <span>Mar 11,2017 10:32 AM</span> 
+                      </li>
+                      <li>
+                        <span className="text-muted">Comments</span> <span> (1)</span>  
+                      </li>
+                      </ul>
+
+                      <img src={"imgs/Blog_pic1.jpg"} alt={"logo"}/>
+
+                      <p>
+                        In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and 
+                        change your components without affecting the rest of the page. In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and change your components without affecting the rest of the page.
+                        change your components without affecting the rest of the page. 
+                        In this tutorial we will show you how to combine components to make the app easier to
+                         maintain. This approach will allow you to update and change your components without 
+                         affecting the rest of the page.......
+                        <span className="redmore"><a href=""> ReadMore </a></span>
+
+                      </p> 
+        
+                  </div>
+
+
+                  <div className="bolgs">
+
+                     <h1>customer can refuse to pay <span>"service Charges"</span> at Restorant - Gov</h1>
+                      <ul >
+                      <li>
+                        
+                        <span className="text-muted">Posted  By</span> <span> Swapnil Patil</span>
+                        <span className="text-muted"> on </span> <span>Mar 11,2017 10:32 AM</span> 
+                      </li>
+                      <li>
+                        <span className="text-muted">Comments</span> <span> (1)</span>  
+                      </li>
+                      </ul>
+
+                      <img src={"imgs/Blog_pic2.jpg"} alt={"logo"}/>
+
+                      <p>
+                        In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and 
+                        change your components without affecting the rest of the page. In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and change your components without affecting the rest of the page.
+                        change your components without affecting the rest of the page. In this tutorial we will show
+                         you how to combine components to make the app easier to maintain.
+                         This approach will allow you to update and change your components without affecting the rest of the page......
+                        <span className="redmore"><a href=""> ReadMore </a></span>
+
+                      </p> 
+        
+                  </div>
+
+                  <div className="bolgs">
+
+                     <h1>customer can refuse to pay <span>"service Charges"</span> at Restorant - Gov</h1>
+                      <ul >
+                      <li>
+                        
+                        <span className="text-muted">Posted  By</span> <span> Swapnil Patil</span>
+                        <span className="text-muted"> on </span> <span>Mar 11,2017 10:32 AM</span> 
+                      </li>
+                      <li>
+                        <span className="text-muted">Comments</span> <span> (1)</span>  
+                      </li>
+                      </ul>
+
+                      <img src={"imgs/Blog_pic3.jpg"} alt={"logo"}/>
+
+                      <p>
+                        In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and 
+                        change your components without affecting the rest of the page. In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and change your components without affecting the rest of the page.
+                        change your components without affecting the rest of the page. In this tutorial we will show you how to combine components to make the app easier to maintain. This approach will allow you to update and change your components without affecting the rest of the page.
+                        <span className="redmore"><a href=""> ReadMore </a></span>
+
+                      </p> 
+        
+                  </div>
+
+               </div> 
+               <div className="col-md-3">
+                  <div className="Blog-post">
+                   
+                         <div className="title"><h2> Popular Posts</h2></div>
+                               <div className="blogscont">
+                               <img src={"imgs/Blog_img.jpg"} alt={"logo"}/>
+
+                               <h5> <a href="#">What peopel consider themeselev</a></h5>
+                               <p>70$ investor are "asest pooer" - what about you  </p>
+                               </div>
+                     
+ 
+                   <div className="blogscont">
+                         <img src={"imgs/Blog_img1.jpg"} alt={"logo"}/>
+
+                         <h5><a href="#"> What peopel consider themeselev</a></h5>
+                         <p>70$ investor are "asest pooer" what about you  </p>
+                   </div>
+                 
+
+                   
+                         <div className="blogscont">
+                               <img src={"imgs/Blog_img2.jpg"} alt={"logo"}/>
+
+                               <h5> <a href="#">What peopel consider themeselev</a></h5>
+                               <p>70$ investor are "asest pooer" what about you  </p>
+                         </div>
+                 
+
+                   
+                         <div className="blogscont">
+                            <img src={"imgs/Blog_img3.jpg"} alt={"logo"}/>
+
+                            <h5> <a href="#"> What peopel consider themeselev </a></h5>
+                            <p>70$ investor are "asest pooer" what about you  </p>
+                         </div>
+                  </div>
+
+                <div className="tolkit">
+                <h2 className="text-muted"> Task</h2>
+                      <ul>
+
+                       <li> <a href="#"> Investment</a> </li>
+                       <li> <a href="#"> Finance</a> </li>
+                       <li> <a href="#"> Treading</a> </li>
+                       <li> <a href="#">insurance </a> </li>
+                       <li> <a href="#">webinars </a> </li>
+                       <li> <a href="#">Fainceal Plannig </a> </li>
+                       <li> <a href="#"> Mutual Founds</a> </li>
+                       <li> <a href="#"> eBook</a> </li>
+                       <li> <a href="#"> Memberships</a> </li>
+
+                      </ul>
+   
+                          
+
+
+                         
+               </div>
+ 
+
+               </div>
+            </div>
+
+         </div>
+
+         
+ 
+        </section>     
+      );
+   }
+}
+class Headerbootam extends React.Component {
+
+   render() {
+      return (
+         
+         
+         <section className="footar">
+         <hr></hr>
+         <div className="container">
+            <div className="row">
+
+            <div className="col-md-3">
+
+
+            <div className="map"> <img src={"imgs/Blog_Map.jpg"} alt={"map"}/></div>
+            <div className="follows"> <h4 className="text-muted"> Follow us</h4>
+ 
+              
+            <span><a href="#"> <i className="fa fa-facebook color-facebook"></i> </a></span>
+            <span><a href="#"> <i className="fa fa-twitter color-twitter"></i> </a></span>
+            
+            <span><a href="#"> <i className="fa fa-linkedin color-linkedin"></i> </a></span>
+            <span><a href="#"> <i className="fa fa-youtube-play" aria-hidden="true"></i> </a></span>
+             
+
+            </div>
+             </div>  
+               <div className="col-md-1"></div>
+
+            <div className="col-md-3"> 
+            <h3> Quick Links</h3>
+
+          <ul className="list">
+          <li className="listitem">Exiting Members? Login</li>
+          <li className="listitem">Dapibus ac facilisis in</li>
+          <li className="listitem">Morbi leo risus</li>
+          <li className="listitem">Porta ac consectetur ac</li>
+          <li className="listitem">Vestibulum at eros</li>
+        </ul>
+            </div>
+
+            <div className="col-md-1"></div>
+
+            <div className="col-md-4"> 
+            <h3> Download Free Ebook</h3>
+
+              <form> 
+                
+              <div className="input-group">
+                  <span className="input-group-addon" id="basic-addon1"><i className="fa fa-user" aria-hidden="true"></i></span>
+                  <input type="text" className="form-control" placeholder="Username" aria-describedby="basic-addon1" />
+                </div>
+
+              <div className="input-group">
+                <span className="input-group-addon" id="sizing-addon2">@</span>
+                <input type="text" className="form-control" placeholder="Username" aria-describedby="sizing-addon2" />
+              </div>
+
+                <input type="submit" value="Download Book"  className="btn btn-warning"/>
+              </form>
+            
+
+            </div> 
+ 
+           
+
+            
+
+         </div>
+
+            <hr></hr>
+<p className="text-center"> 2017 © All Rights Reserved </p>
+</div>
+
+         </section>
+ 
+              
+      );
+   }
+}
+export default App;
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..11a3b2c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang = "en">
+
+   <head>
+      <meta charset = "UTF-8">
+      <title>React App</title>
+      <link rel="stylesheet" href="style.css">
+
+   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
+<!-- jQuery library -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+
+<!-- Latest compiled JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+ 
+
+   </head>
+
+   <body>
+      <div id = "app"></div>
+      <script src = "index.js"></script>
+   </body>
+
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..fad0270
--- /dev/null
+++ b/main.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.jsx';
+
+
+
+ReactDOM.render(<App/>, document.getElementById('app'));
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e3928e1
--- /dev/null
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --hot"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "babel-preset-react": "^6.23.0",
+    "bootstrap": "^3.3.7",
+    "react": "^15.4.2",
+    "react-bootstrap": "^0.30.7",
+    "react-dom": "^15.4.2",
+    "react-router-bootstrap": "file:react-bootstrap",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-loader": "^6.3.2",
+    "babel-preset-es2015": "^6.22.0",
+    "css-loader": "^0.26.2",
+    "file-loader": "^0.10.1",
+    "style-loader": "^0.13.2",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.2.1"
+  }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1ee2522
--- /dev/null
+++ b/style.css
@@ -0,0 +1,193 @@
+body{ font-family: Open Sans ;
+font-size: 14px;
+color: #000;}
+img{ width: 100%;}
+
+/*.container {
+    width: 80% !important ;
+}*/
+.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
+    
+    padding-right: 30px !important;
+    padding-left: 15px !important;
+}
+
+.header nav.navbar.navbar-top {
+    background: #18446b;
+    border-radius: 0px;
+    min-height: 34px;
+}
+.navbar-top .nav>li>a {
+    position: relative;
+    display: block;
+    padding: 3px 11px;
+    
+}
+
+.navbar-top .nav>li>a>.facebook{
+	  background-image: url(imgs/facebook_icon.png);
+    background-repeat: no-repeat;
+    padding: 1px 14px; }
+
+    .navbar-top .nav>li>a>.twitter{background: url(imgs/Twitter_icon.png);
+    background-repeat: no-repeat;
+    padding: 1px 14px;  }
+
+    .navbar-top .nav>li>a>.linkedin{background: url(imgs/Linkedin_icon.png); 
+    background-repeat: no-repeat;
+    padding: 1px 14px;  }
+
+    .navbar-top .nav>li>a>.youtube{background: url(imgs/Youtube_icon.png);
+    background-repeat: no-repeat;
+    padding: 1px 14px;  }
+
+
+    .navbar-midel .navbar-nav>li>a {
+     
+    font-size: 15px;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: #4f7faa;
+  } 
+   .navbar-midel .navbar-nav>li a:hover, .navbar-midel .navbar-nav> .active { color: #f1bc30; background-color: #fff;}
+ .active { color: #f1bc30 !important; background-color: #fff;}
+  .navbar-midel .navbar-btn{ background:#f1bc30; border-radius:0px; border: 0px; text-transform: uppercase;} 
+.navbar-midel .btn-claim { background:#f1bc30;} 
+.navbar-midel .btn-iogin { background:#18446b; color: #FFF;} 
+
+
+nav.navbar.navbar-bottam {
+    background: #4f7faa;
+    padding: 40px;
+    border-radius: 0px;
+}
+.navbar-bottam .navbar-nav>li {
+    float: left;
+    border: 1px solid #ccc;
+        text-transform: uppercase;
+    border: 1px solid #9c9b9b;
+    border-left:0px; 
+    padding-left: 30px;
+     padding-right: 30px;
+
+}
+.navbar-bottam .navbar-nav>li>a{  color: #FFF;
+    font-size: 16px;
+    padding: 10px;
+}
+    .navbar-bottam .navbar-nav> .active , .navbar-bottam .navbar-nav>li:hover{ background-color: #f1bc30;
+     border: 1px solid #f1bc30; }
+
+   .navbar-bottam .navbar-nav>li>a:hover {
+    background: transparent;
+}
+
+.smallnav {
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 600;
+}
+.bolgs{ padding: 0px;
+margin-bottom: 40px;}
+.bolgs ul {
+    padding: 0px;
+    list-style-type: none;
+    margin-bottom: 20px;
+}
+.bolgs ul >li {
+    
+    display: inline-block;
+    margin-right: 15px;
+    text-transform: uppercase;
+    font-size: 12px;
+}
+
+  .bolgs img {
+    margin-bottom: 20px;
+    
+}
+.bolgs p {
+    line-height: 26px;
+    font-size: 14px;
+}
+.bolgs .redmore {
+    font-size: 15px;
+    font-weight: 600;
+    display: block;
+    margin-top: 15px;
+}
+
+.Blog-post .title { margin-bottom: 30px;}
+ .title h2{ color: #23527c; font-weight: 600;}
+
+.blogscont { margin-bottom: 25px;}
+   .blogscont h5{font-size: 15px; font-weight: 600;}
+   .blogscont p { color: #6a8094;}
+
+   .tolkit ul {
+    list-style-type: none;
+    padding: 0px;
+}
+.tolkit ul> li {
+    border: 1px solid #337ab7;
+    display: inline-block;
+    margin: 3px;
+    padding: 5px 15px;
+    font-size: 15px;
+}
+
+.footar .container {
+    margin-top: 65px;
+}
+.footar .map {
+    margin-bottom: 20px;
+    margin-top: 50px;
+}
+.footar .follows {
+    font-size: 18px;
+}
+
+.footar .follows span {
+    border: 1px solid #337ab7;
+    padding: 9px;
+    margin: 3px;
+    font-size: 15px;
+    border-radius: 50%;
+ }
+
+     .footar .follows h4 {
+    display: inline-block;
+    font-size: 13px;
+    font-weight: 600;
+    float: left;
+    margin-right: 17px;
+    text-transform: uppercase;
+}
+.footar .follows span a {
+    color: #000;
+}
+.footar h3 {
+    margin-top: 0px;
+    font-size: 18px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+.footar ul {
+    list-style-type: none;
+    padding: 0px;
+}
+.footar ul .listitem {
+    line-height: 32px;
+}
+.footar .btn.btn-warning {
+    margin: 14px 0;
+    border-radius: 0px;
+    padding: 10px 39px;
+    background: #f1bc30;
+    color: #000;
+    font-weight: 600;
+    border: 1px solid #f1bc30;
+}
+.footar .input-group-addon{ color: #286090; background-color: #cadae8;
+/* border: 1px solid #286090;*/}
+.footar .form-control{/*border: 1px solid #286090;*/ border-radius: 0px;}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..0384f77
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,78 @@
+var config = {
+   entry: './main.js',
+	
+   output: {
+      path: __dirname + "/dist/js", // or path: path.join(__dirname, "dist/js"),
+      filename: 'index.js',
+   },
+	
+   devServer: {
+      inline: true,
+      port: 7777
+   },
+	
+   module: {
+      loaders: [
+         {
+            test: /\.jsx?$/,
+            exclude: /node_modules/,
+            loader: 'babel-loader',
+				
+            query: {
+               presets: ['es2015', 'react']
+            }
+         }
+      ]
+   }
+}
+
+module.exports = config;
+
+/*
+var path = require('/dist/js');
+var webpack = require('webpack');
+ 
+module.exports = {
+  entry: './main.js',
+  output: { path: __dirname, filename: 'index.js' },
+  module: {
+    loaders: [
+      {
+        test: /.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        query: {
+          presets: ['es2015', 'react']
+        }
+      },
+      { 
+        test: /\.css$/, 
+        loader: "style-loader!css-loader" 
+      },
+      { 
+        test: /\.png$/, 
+        loader: "url-loader?limit=100000" S
+      },
+      { 
+        test: /\.jpg$/, 
+        loader: "file-loader" 
+      },
+      {
+        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
+        loader: 'url?limit=10000&mimetype=application/font-woff'
+      },
+      {
+        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
+        loader: 'url?limit=10000&mimetype=application/octet-stream'
+      },
+      {
+        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
+        loader: 'file'
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
+        loader: 'url?limit=10000&mimetype=image/svg+xml'
+      }
+    ]
+  },
+};*/
\ No newline at end of file