Software Engineer

[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;

    }

}