Mountaga

Good morning everyone please I want to create a ReactJs blog but my coode do not have any error however all the layout is superpose, please I need help and also if you have any resource how to create a blog app use ReactJs with login and Registering pages please help me. here is my code ReactJs import React from 'react'; //import LoginApp from './Login'; //import SingUp from './SignUp'; const HomeBlog = () => { return ( <div> <div className="header"> <h2>Blog Name</h2> </div> <div className="row"> <div className="leftcolumn"> <div className="card"> <h2>TITLE HEADING</h2> <h5>Title description, Dec 7, 2017</h5> <div className="fakeimg" >Image</div> {/* style="height:200px;" this was inline but given error*/} <p>Some text..</p> </div> <div className="card"> <h2>TITLE HEADING</h2> <h5>Title description, Sep 2, 2017</h5> <div className="fakeimg" >Image</div> {/* style="height:200px;" this was inline but given error*/} <p>Some text..</p> </div> </div> <div className="rightcolumn"> <div className="card"> <h2>About Me</h2> <div className="fakeimg">Image</div> {/* style="height:200px;" this was inline but given error*/} <p>Some text about me in culpa qui officia deserunt mollit anim..</p> </div> <div className="card"> <h3>Popular Post</h3> <div className="fakeImg">Image</div><br/> <div className="fakeImg">Image</div><br/> <div className="fakeImg">Image</div><br/> </div> <div className="card"> <h3>Follow Me</h3> <p>Some text..</p> </div> </div> </div> <div className="footer"> <h2>Footer</h2> </div> </div> ); } export default HomeBlog; CSS body { font-family: Arial; padding: 20px; background: #f1f1f1; } /* Header/Blog Title */ .header { padding: 30px; font-size: 40px; text-align: center; background: white; } /* Create two unequal columns that floats next to each other */ /* Left column */ .leftcolumn { float: left; width: 75%; } /* Right column */ .rightcolumn { float: left; width: 25%; padding-left: 20px; height: 100px; } /* Fake image */ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; height: 200px; } /* Add a card effect for articles */ .card { background-color: white; padding: 20px; margin-top: 20px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Footer */ .footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px; } /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } }