React Components | functional components | props netflix app part 1
React Components | functional components | props netflix app part 1
used file:(index.js, index,css, App.js, Cards.js)
Source code:-
1.App.js
import './App.css';import index from './index'function App() {return (<><index/></>);}export default App;
2.index.js
import React from 'react';import ReactDOM from 'react-dom';import Cards from './Cards';// import Sdata from './Sdata';ReactDOM.render(<><Cardsimgsrc = "https://picsum.photos/260/251"title = "A Netflix Original Series"sname = "Dark"/><Cardsimgsrc = "https://picsum.photos/260/252"title = "A Netflix Original Series"sname = "Dark"/><Cardsimgsrc = "https://picsum.photos/261/250"title = "A Netflix Original Series"sname = "Dark"/></>,document.getElementById('root'));
3.index.css
*{background-color: rgb(183, 228, 232);}.heading_style {padding: 30px 0;text-align: center;font-family: "Raleway", sans-serif;text-transform: uppercase;font-size: 13px;letter-spacing: 2px;font-weight: 500;color: #868686;background-color: #fff;font-size: 1.5rem;margin-bottom:30px ;}.cards{width: 100%;height: auto;}.card{margin: 6%;transition: all 0.4s cubic-bezier(0.175, 0.885, 0,1);background-color: #fff;width: 21.25;border-radius: 12px;box-shadow: 0px 13px 10px -7px rgba(0,0,0,0.1);float: left;}.card:hover{box-shadow: 0px 30px 18px -8px rgba(0,0,0,0.1);transform: scale(1.05, 1.05);}.card_img{width: 100%;height: 235px;border-top-left-radius: 12px;border-top-right-radius: 12px;}.card_info{background-color: #fff;border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;padding: 16px 24px 24px 24px;background-color: #fff;}.card_category {font-family: "Raleway", sans-serif;text-transform: uppercase;font-size: 13px;letter-spacing: 2px;font-weight: 500;color: #868696;background-color: #fff;}.card_title{margin-top: 5px;margin-bottom: 10px;font-family: "Raleway",sans-serif;background-color: #fff;text-transform: capitalize;}button{padding: 5px 8px;font-family: "Raleway", sans-serif;text-transform: uppercase;font-size: 13px;letter-spacing: 2px;font-weight: 500;color: #868686;background-color: #fff;outline: none;border: 1px solid black;cursor: pointer;}
4.Cards.js
import React from 'react';import './index.css';const Cards = (props) => {return (<><div className="cards"><div className="card"><img src={props.imgsrc} alt="mypic" /><div className="card_info"><span className="card_category">{props.sname}</span><h3 className="card_title">{props.title}</h3><a href="/" target="_blank"><button>Watch Now</button></a></div></div></div></>)}export default Cards;
Post a Comment