Jump to content

Software Engineer


Mountaga
 Share

Recommended Posts

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;
    padding20px;
    background: #f1f1f1;
}
 
/* Header/Blog Title */
.header {
    padding30px;
    font-size40px;
    text-align: center;
    background: white;
}
 
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
    float: left;
    width75%;
}
 
/* Right column */
.rightcolumn {
    float: left;
    width25%;
    padding-left20px;
    height100px;
}
 
/* Fake image */
.fakeimg {
    background-color: #aaa;
    width100%;
    padding20px;
    height200px;
}
/* Add a card effect for articles */
.card {
    background-color: white;
    padding20px;
    margin-top20px;
}
 
/* Clear floats after the columns */
.row:after {
    content"";
    display: table;
    clear: both;
}
 
/* Footer */
.footer {
    padding20px;
    text-align: center;
    background: #ddd;
    margin-top20px;
}
 
/* 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-width800px) {
    .leftcolumn.rightcolumn {
      width100%;
      padding0;
    }
}
 
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...