React- Helmet Store
Published: 2021-07-05 12:40:20

Here is my first ecommerce frontend webpage
checkout and reply with some more suggestions
like if you like it
* Also visit my git repo: [princepatel157/helmet-store](https://github.com/princepatel157/helmet-store)

### Glimpses of my store-
* Home Page:-
![img1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwdh3eqr9sy9455s6x3v.JPG)
>Code Snippet for HomePage.js:
```javascript
{/* 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>
```
> HomePage.css file
```css
.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; */
}
```

> Visit my Git-Hub repository for full code-> [princepatel157](https://github.com/princepatel157/helmet-store)

* Store:-
![img2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0816axxw6z4oq911r3ly.JPG)

* Cart:-
![img3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj3ch3w7jlr1i8hk26xv.JPG)

## 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](https://github.com/princepatel157/helmet-store) and do fork for any kind of improvement*