text: import React, { Component } from 'react';
  import {
      Typography,
      Grid,
      Card,
      Button,
    } from "@material-ui/core";
  import { Translate } from '@material-ui/icons';
  
  class MovingPics extends Component {
      render() {
          return (
              <div className="HomeSliderArea">
                <div className="HomeMainSlider OwlCarousel OwlLoaded OwlDrag">
                    <div className="OwlStageOuter">
                        <div className="OwlStage" style={{transform: Translate3d(-2526px, 0px, 0px); transition: all 0s ease 0s; width: 8843px;}}>
                            <div className="OwlItem Cloned" style="width:1263.2px;">
                                <div className="item">
                                    ::before
                                    <img src="" alt=""/>
                                    <div className="SliderContent">
                                        <div className="Container">
                                            <h2>A heart doesn't have to stop beating to be dead.</h2>
                                            <p>It's hard to wait around for something you know might never happen, but it's even harder to give up when it's everything you want.</p>
                                            <a className="mainBtn" href="#">
                                                ::before
                                                "Read More "
                                                <strong className="icon">
                                                    <i className="fa fa-repeat" aria-hidden="true">
                                                        ::before
                                                    </i>
                                                </strong>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="OwlItem Cloned" style={{width:1263.2px;}}>
                                <div className="Item">
                                    ::before
                                    <img src="" alt=""/>
                                    <div className="SliderContent">
                                        <div className="Container">
                                            <h2>You don't die from a broken heart, you only wish you did.</h2>
                                            <p>You can close your eyes to the things you don't want to see, but you can't close your heart to the things you don't want to feel.</p>
                                            <a className="MainBtn" href="">
                                                ::before
                                                "Read More"
                                                <strong className="Icon">
                                                    <i className="fa fa-repeat" aria-hidden="true">
                                                        ::before
                                                    </i>
                                                </strong>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="OwlItem Active" style={{width:1263.2px}}>
                                <div className="Item">
                                    ::before
                                    <img src="" alt=""/>
                                    <div className="SliderContent">
                                        <div className="Container">
                                            <h2>Don't cling to a mistake because you spent a lot of time making it.</h2>
                                            <p>The worst feeling in the world is not knowing whether to give up or wait.</p>
                                            <a className="MainBtn" href="#">
                                                ::before
                                                "Read More"
                                                <strong className="Icon">
                                                    <i className="fa fa-repeat" aria-hidden="true">
                                                        ::before
                                                    </i>
                                                </strong>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="OwlItem" style="width: 1263.2px">
                                <div className="Item">
                                    ::before
                                    <img src="" alt=""/>
                                    <div className="SliderContent">
                                        <div className="Container">
                                            <h2>I don't remember what it's like not to feel broken</h2>
                                            <p>No matter how you try to fix a broken heart, the pieces never like they did before.</p>
                                            <a className="MainBtn" href="#">
                                                ::before
                                                "Read More"
                                                <strong className="Icon">
                                                    <i className="fa fa-repeat" aria-hidden="true">
                                                        ::before
                                                    </i>
                                                </strong>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="OwlItem" style="width: 1263.2px">
                                <div className="Item">
                                    ::before
                                    <img src="" alt=""/>
                                    <div className="SliderContent">
                                        <div className="Container">
                                            <h2>You can't buy love, but you can pay heavily for it.</h2>
                                            <p>You know you really love someone when you can't hate them for breaking your heart</p>
                                            <a className="MainBtn" href="#">
                                                ::before
                                                "Read More"
                                                <strong className="Icon">
                                                    <i className="fa fa-repeat" aria-hidden="true">
                                                        ::before
                                                    </i>
                                                </strong>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="OwlItem Cloned" style={{width:1263.2px;}}>
                                <div className="Item">
                                    ::before
                                    <img src="" alt=""/>
                                    <div className="SliderConent">
                                        <div className="Container">
                                           <h2>You flew off with the wings of my heart and left me flightless.</h2>
                                           <p>I didn't know what love felt like until I met you, but now I know what a broken heart feels like too.</p> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="OwlItem Cloned" style={{width:1263.2px;}}>
                                <div className="Item"></div>
                            </div>
                        </div>
                      </div>
                  </div>
                  
              </div>
          )
      }
  }
  
  export default MovingPics;
  