carosol pro
Thu Jun 01 2023 18:54:11 GMT+0000 (Coordinated Universal Time)
Saved by @2018331055
<div className="landing__container"> <div className="landing__header__container"> <div className="landing__header"> <h3 className="landing__header__discount">UP TO 15% DISCOUNT</h3> <h1 className="landing__header__main">Checkout The Best Fashion Style</h1> <Link to="/shop"> <Button variant='outlined' sx={[ {width: '190px', height: '50px', borderRadius: '20px' , fontWeight: '700', backgroundColor: 'none', borderColor: 'black', color: 'black' }, {'&:hover': { backgroundColor: "black" , color: "#FFE26E", borderColor: 'black'}}]}>SHOP NOW</Button> </Link> </div> </div> <div className="landing__image__container"> <img className="landing__image" src={land} alt=""/> </div> </div> .landing__container { width: 100%; min-height: 420px; height: auto; display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: wrap-reverse; background-color: #ffe26e; position: relative; } .landing__header a { text-decoration: none; color: #000; } .landing__header__container { width: 40%; height: auto; min-height: 450px; min-width: 300px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .landing__header { height: 100%; width: 90%; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; } .landing__header__main { font-size: 4.0rem; font-weight: 800; } .landing__header__discount { font-size: 1.2rem; } .landing__button { width: 60%; cursor: pointer; transition: .3s; } .landing__image__container { width: 50%; height:100% ; display: flex; justify-content: center; align-items: center; } .landing__image { height: auto; width: auto; top: 0%; z-index: 10; } @media screen and (max-width: 850px) { .landing__image__container{ display: none; } }
Comments