Jump to content

Mountaga

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by Mountaga

    Software Engineer

    in JavaScript

    Posted

    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;
        }
    }
     
×
×
  • Create New...