#app
View Compiled
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700')
$font-family:  'Raleway', sans-serif
$font-size-light: 400
$font-size-bold: 700

body
  overflow-x: hidden
  background: #fff
  height: 1000px
  font-family: $font-family
 
  


.nav
  position: absolute
  display: flex
  flex-direction: row
  font-size: 20px
  color: #fff
  justify-content: center
  align-items: center
  z-index: 3
  list-style: none
  background: #000
  padding: 30px 
  width: 100%
  font-weight: bold
  left: 50%
  margin-top: 2%
  transform: translate(-50%, -40%)
  @media screen and (max-width: 300px)
    font-size: 10px
  
  li
    margin-left: 70px
    margin-right: 70px
    &:hover
      cursor: pointer
      color: yellow
   
  @media screen and (max-width: 600px)
    li
      margin-left: 30px
      margin-right: 30px
      font-size: 10px
      
      
  
      

    
  
  
  

  
  
.video
  width: 100vw
  height: 80%
  border: 2px solid #000
  
 
  
.overlay
  background: rgba(0,0,0,0.5)
  position: relative
  width: 100%
  height: 100%
  overflow: hidden
  
  
  
.text
  position: absolute
  font-weight: $font-size-bold
  color: #fff
  text-align: center
  font-size: 7em
  top: 60%
  text-shadow: 0px 0px 2px #000, 0px 0px 4px #000
  z-index: 3
  left: 50%
  transform: translate(-50%, -50%)
  font-style: bold
  
  @media screen and (max-width: 700px)
    display: none
  
  
 
  
 
.message
  position: relative
  z-index: 7
  font-size: 20px
  color: yellow
  @media screen and (max-width: 376px)
    font-size: 13px
View Compiled
const Video = (props) => {
  return (
    <video className="video" autoPlay muted loop>
      <source src={props.videoUrl}  type={props.type} />
    </video>
   );
} 


const  Message = (props) => {
    return (
        <p> {props.message }</p>
    )
}


const Menu = (props) => {
   
  return (
      
    <ul className="nav">
      <li>Home</li>
      <li>Blog</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  
  )
        
}
 
 const Title = (props) => {
   return (
     <h1 className="text">{props.title}</h1>
   )
 };


class App extends React.Component {
  constructor(props){
    super(props);
    this.state ={
      videoUrl: "http://thenewcode.com/assets/videos/fashion.mp4",
      type: "video/mp4"
    }
  }
  
  render(){
    return (
      <div>
        <Menu />
         <Title title="Women & Men Collection" />
            <Video className="video" videoUrl = {this.state.videoUrl} type =   {this.state.type}/>
        <div className="container">
          <div className="row" style={{marginTop :"60px"}}>
            <div className="col-md-6">
              <p className="text-center text-muted">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quae earum inventore quo unde, tempora a laudantium assumenda quis minus praesentium rerum eaque itaque recusandae natus dicta iusto non aperiam.
              </p>
            </div>
            <div className="col-md-6">
              <p className="text-center text-muted">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quae earum inventore quo unde, tempora a laudantium assumenda quis minus praesentium rerum eaque itaque recusandae natus dicta iusto non aperiam.
              </p>
            </div>
          </div>
        </div>
      </div>
     
     )
  }
}


ReactDOM.render(<App />, document.getElementById("app"));

 
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js