30
React- Helmet Store
Here is my first ecommerce frontend webpage
checkout and reply with some more suggestions
like if you like it
checkout and reply with some more suggestions
like if you like it
{/* 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
Please rate my work and give some suggestions to improve my UI.
Checkout my Git-repo and do fork for any kind of improvement
30