body {
}
.card {
width: 320px;
margin: 20px auto;
.trailer_link_disp{
//overflow: hidden;
margin: 20px auto;
height: 270px;
width: 270px;
border-radius: 5px;
background: url('https://image.tmdb.org/t/p/w300_and_h450_bestv2/gaHepzSTMkGwsSKAqiBgroSCf07.jpg');
background-position: center;
box-shadow: 0 30px 70px 0 rgba(0, 0, 0, .19), 0 17px 50px 0 rgba(0, 0, 0, .19);
display: flex;
justify-content: center;
align-items: center;
}
.trailer_link_disp:hover{
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://image.tmdb.org/t/p/w300_and_h450_bestv2/gaHepzSTMkGwsSKAqiBgroSCf07.jpg');
background-position: center;
.wrapper {
transform: scale(1.2);
}
}
.details {
font-size: 12px;
.img_container {
overflow: hidden;
height: 60px;
width: 55px;
margin-left: 24px;
border-radius: 3px;
display: inline-block;
img {
position: relative;
width: 85px;
top: -20px;
left: -15px;
}
}
.middle {
display: inline-block;
padding: 5px 15px;
vertical-align: top;
span {
display: block;
}
}
.right {
display: inline-block;
padding: 5px 15px;
vertical-align: top;
span {
display: block;
}
}
}
.btn {
border-radius: 100px;
}
.tab-container{
margin: auto;
.tab-block {
margin-left: 40px;
a {
width: 70px;
margin: 15px;
}
span {
display: block;
width: 20px;
height: 2px;
margin-top: 10px !important;
background: #5764c6;
margin: auto;
}
}
}
}
View Compiled
const tabs = [
{
name: 'Overview'
},
{
name: 'Cast'
},
{
name: 'Related'
}
]
const PlayIcon = () => {
return (
<div>
<svg width="55px" height="55px" viewBox="0 0 24 24">
<path fill="#ffffff" d="M10,16.5V7.5L16,12M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
</div>
)
}
class MovieCard extends React.Component {
constructor(){
super()
this.state = {
tabSelected: '2'
}
}
handleClassAtr (e) {
this.setState({ tabSelected: e.target.name })
}
render (){
return(
<div className="card">
<div className="trailer_link_disp">
<div className="wrapper"><PlayIcon/></div>
</div>
<div className="details">
<div className="img_container">
<img src="https://image.tmdb.org/t/p/w300_and_h450_bestv2/gaHepzSTMkGwsSKAqiBgroSCf07.jpg"/>
</div>
<div className="middle">
<span>Gaurdian's of The Galaxy</span>
<span>131 min</span>
</div>
<div className="right">
<span>Score</span>
<span>8.4</span>
</div>
</div>
<div className="tab-container">
<ul className="tab tab-block">
{
tabs.map( ( tab , index) => {
let activeClass = index.toString() === this.state.tabSelected ? 'active' : ''
return(
<div>
<li className={ 'custom_tab' + ' ' + activeClass }
index={ index }
onClick={ this.handleClassAtr.bind(this) }>
<a href={ '#' + tab.name } name={ index }>{ tab.name }</a>
<span></span>
</li>
</div>
)})
}
</ul>
</div>
<div className="card-footer">
<button className="btn col-9 centered">Add to Watchlist</button>
</div>
</div>
)
}
}
ReactDOM.render(<MovieCard />, document.getElementById('app'))
View Compiled