HOME COMPONENTS (PART-3)

 WE START WITH THE HERO COMPONENT. IT CONTAINS FOUR MAJOR ELEMENTS, IMG, H1,P, BUTTON.

FOR THE IMG WE HAVE DOWNLOADED ALL THE REQUIRED RESOURCES AND PLACED IT IN PUBLIC/MEDIA/HOMEHERO.PNG

AS IT IS IN THE PUBLIC FOLDER WE DONOT NEED TO IMPORT IT, WE CAN DIRECTLY USE IT.

FOR THE STRUCTURING WE USE CONTAINER CLASS,row AND col . IN EACH row WE HAVE 12col BY DEFAULT.

WE HAVE TO DIVIDE THE ELEMENTS ACCORDINGLY WHERE TOTAL COLUMNS WOULD BE EQUAL TO 12 COLUMNS.

WE CAN MAKE WEBPAGES RESPONSIVE BY USING IT,

 <div className="col-sm-6 col-lg-4">

HERO.JS

import React from "react";

function Hero() {

  return (

    <>

P-PADDING

      <div className="container p-5">

ALIGNS THE TEXT TO CENTER

        <div className="row text-center ">

MARGIN BOTTOM

          <img src="media/images/homeHero.png" className="mb-4"/>

MARGIN TOP

          <h1 className="mt-5">Invest in everything</h1>

m-MARGIN, fs-FONT SIZE

          <p className="m-4 fs-5">Online platform to invest in stocks, derivatives, mutual funds, ETFs, bonds, and more.</p>

BOOTSTRAP BUTTON         

<button className="btn btn-primary fs-5" style={{width:"18%",margin:"0 auto"}}>Signup now </button>

        </div>

      </div>

    </>

  );

}

export default Hero;

AWARDS.JS

HERE, WE HAVE TWO MAJOR ELEMENTS, AN IMAGE ON THE LEFT SIDE AND A h1 TAG , P TAG AND AN UN-ORDERED LIST ON THE RIGHT ,AND AN IMAGE ON THE BOTTOM .

TWO DIVIDE THEM IN EQUAL PORTIONS, WE USE rows AND cols PROPERTIES.

WE DIVIDE EACH OF THEM IN col=6 SO THAT THEY WOULD SUM UPTO 12.

SIMILARLY , FOR THE UNORDERED LIST, WE DIVIDE THE LIST IN EQUAL PORTIONS.

WE ADJUST THE STYLING ACCORDINGLY.

import React from "react";

function Awards() {

  return (

    <>

      <div className="container mt-5">

        <div className="row">

          <div className="col-6 mt-5">

            <img src="media/images/largestBroker.svg" />

          </div>

          <div className="col-6 p-5">

            <h1>Largest Broker in India!</h1>

            <p>

              2+ million zerodha clients contribute to over 15% of all retail

              order volumes in India daily by trading and investing in:

            </p>

            <div className="row ">

              <div className="col-6">

                <ul>

                  <li className="mb-3">Futures and Options</li>

                  <li className="mb-3">Commodity and derivatives</li>

                  <li className="mb-3">Currency derivatives</li>

                </ul>

              </div>

              <div className="col-6">

                <ul>

                  <li className="mb-3">stocks & IPO's</li>

                  <li className="mb-3">Direct mutual funds</li>

                  <li className="mb-3">Bonds & GOVT.securities</li>

                </ul>

              </div>

            </div>

            <img src="media/images/pressLogos.png" style={{width:"90%"}} className="mt-3"/>

          </div>

        </div>

      </div>

    </>

  );

}

export default Awards;