React- 헬멧 스토어

여기 내 첫 번째 전자상거래 프런트엔드 웹페이지가 있습니다.
체크 아웃하고 더 많은 제안으로 회신
당신이 그것을 좋아한다면 좋아
  • 또한 내 git repo를 방문하십시오: princepatel157/helmet-store

  • 내 가게의 모습 -


  • 홈페이지:-

    >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>
    

    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; */
    }
    


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


  • 상점:-
  • 장바구니:-

  • 사용된 패키지:-



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



    내 작업을 평가하고 내 UI를 개선하기 위한 몇 가지 제안을 제공하십시오.

    Git-repo를 확인하고 모든 종류의 개선을 위해 분기합니다.

    좋은 웹페이지 즐겨찾기