DEV Community

Cover image for React- Helmet Store
Prince Patel
Prince Patel

Posted on • Edited on

2 2

React- Helmet Store

Here is my first ecommerce frontend webpage
checkout and reply with some more suggestions
like if you like it

Glimpses of my store-

  • Home Page:- img1 >Code Snippet for HomePage.js:
{/* new home */}
      <div className="container-fluid home">
        <div className="row">
          {/* sub_home */}
          <div className="col-xs-12 sub_home">
            <div className="col-lg-5 col-lg-offset-1 sub_home_text">
              <h2>
                Never say never <br /> because limits,like fears,
                <br /> are often just an illusion.
              </h2>
              <div className="home_btn">
                <Link to="/allproduct">
                  <button type="button" className="btn btn-primary btn1">
                    Buy Now
                  </button>
                </Link>
                <button className="btn btn-success btn2 ">Offers</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* level-2 home left */}
      <div className="container-fluid">
        <div className="row">
          <div className="col-xs-12 col-lg-5 home_left col-lg-offset-1">
            <div className="cards">
              <div className="well">
                <div className="card_icon">
                  <EqualizerIcon></EqualizerIcon>
                </div>
                <div className="card_heading">PERFORMANCE</div>
                <div className="card_txt">
                  designed for a secure and comfortable fit for long days in the
                  field.
                </div>
              </div>
              <div className="well">
                <div className="card_icon">
                  <EqualizerIcon></EqualizerIcon>
                </div>
                <div className="card_heading">PERFORMANCE</div>
                <div className="card_txt">
                  designed for a secure and comfortable fit for long days in the
                  field.
                </div>
              </div>
            </div>
          </div>

          {/* home right */}
          <div className="home_right visible-lg">
            <div className="col-lg-4 ">
              <img
                className="home_img"
                src="./images/kohli.png"
                alt="no image"
              />
            </div>
          </div>
        </div>
      </div>
Enter fullscreen mode Exit fullscreen mode

HomePage.css file

.sub_home {
  /* width: 100%; */
  height: 400px;
  background-color: #174280;
  border-radius: 15px;
  margin-bottom: -600px;
  /* padding-top: 50px; */
}
.sub_home_text {
  font-family: "Fraunces", serif;
  color: rgb(255, 255, 255);
  margin-top: 70px;
  /* margin-left: 150px; */
  font-weight: 1000;
}
.home_img {
  height: 600px;
  width: 600px;
  object-fit: contain;
}

.cards {
  display: flex;
  margin-top: 350px;
  /* height: 170px;  */
}
.well {
  background-color: #fe6c16;
  align-items: center;
  padding-left: 10px;
  border-radius: 10px;
  /* margin-right: 10px; */
}
Enter fullscreen mode Exit fullscreen mode

Visit my Git-Hub repository for full code-> princepatel157

  • Store:-
    img2

  • Cart:-
    img3

Packages used:-

react-router-dom
material-ui/icons
react-currency-format

Please rate my work and give some suggestions to improve my UI.

Checkout my Git-repo and do fork for any kind of improvement

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay