
import React from 'react';
import {Outlet,Link} from 'react-router-dom';
import { Helmet } from 'react-helmet';

function Frontend() {
  return (
    <div>
        <Helmet>
          <title>Cricket Fantasy</title>
          <link rel="stylesheet" href="/front/css/bootstrap.min.css"/>
          <link rel="stylesheet" href="/front/css/fontawesome.min.css"/>
          <link rel="stylesheet" href="/front/fonts/flaticon.css"/>
          <link rel="stylesheet" href="/front/css/animate.css"/>
          <link rel="stylesheet" href="/front/css/owl.carousel.min.css"/>
          <link rel="stylesheet" href="/front/css/magnific-popup.css"/>
          <link rel="stylesheet" href="/front/css/odometer.min.css"/>
          <link rel="stylesheet" href="/front/css/style.css"/>
          <link rel="stylesheet" href="/front/css/responsive.css"/>
          
          <link rel="stylesheet" href="/front/css/schedule-page-responsive.css"></link>
          <script src="/front/js/jquery-3.4.1.min.js"></script>
          <script src="/front/js/bootstrap.min.js"></script>
          <script src="/front/js/owl.carousel.js"></script>
          <script src="/front/js/jquery.magnific-popup.js"></script>
          <script src="/front/js/jquery.filterizr.min.js"></script>
          <script src="/front/js/wow.min.js"></script>
          <script src="/front/js/clock.min.js"></script>
          <script src="/front/js/jquery.appear.min.js"></script>
          <script src="/front/js/odometer.min.js"></script>
          <script src="/front/js/oddometer-active.js"></script>
          <script src="/front/js/main.js"></script>
        </Helmet>
        <div className="bet-modal-bg">
            <div className="bet-modal">
                <div className="bet-header">
                    <span className="title">Predict a game</span>
                    <button className="cls-btn"><i className="fas fa-times"></i></button>
                </div>
                <div className="bet-body">
                    <div className="place-of-bet">
                        <span className="place-of-bet-title">real madrid</span>
                        <input className="place-of-bet-number" type="number" value="1" readonly/>
                    </div>
                    <div className="bet-descr">
                        <span className="team-name team-name-1st">america</span>
                        <span className="img-ic"><img src="/front/img/vs-icon.png" alt=""/></span>
                        <span className="team-name team-name-2nd">iran</span>
                        <div className="team-score">[<span className="team-first-score">1</span>:<span className="team-second-score">1</span>] 1X2 Live Prediction</div>
                    </div>
                    <div className="ctrl-buttons">
                        <div className="butto-shadow">
                            <button className="ctrl-button-for-number minus-number">-</button>
                            <input type="number" value="1" max="99" min="1" className="number-of-stake" placeholder="stake"/>
                            <button className="ctrl-button-for-number plus-number">+</button>
                        </div>
                    </div>
                    <div className="bet-total">
                        <ul>
                            <li>
                                <span className="number-of-stake-title">stake :</span>
                                <input className="number-of-stake-count" type="number" value="1" readonly/>
                            </li>
                            <li>
                                <span className="number-of-bet">Total Est. Returns :</span>
                                <span className="number-of-bet-count">82</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div className="bet-footer">
                    <button>Predict Now</button>
                </div>
            </div>
        </div>
        <div className="header">
            <div className="header-top">
                <div className="container">
                    <div className="row">
                        <div className="col-xl-6 col-lg-6 col-sm-6">
                            <div className="left-area">
                                <ul>
                                    <li>
                                        <span className="icon">
                                            <i className="far fa-calendar-alt"></i>
                                        </span>
                                        <span className="text">
                                            <span id="date"></span>
                                            <span id="month"></span>
                                            <span id="year"></span>
                                        </span>
                                    </li>
                                    <li>
                                        <span className="icon">
                                            <i className="far fa-clock"></i>
                                        </span>
                                        <span className="text clocks">
                                            <span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className="col-xl-6 col-lg-6 col-sm-6">
                            <div className="right-area">
                                <ul>
                                    <li>
                                        <select>
                                            <option>EN</option>
                                            <option>FR</option>
                                            <option>ES</option>
                                        </select>
                                    </li>
                                    <li>
                                        <a className="link" href="bet-slip.html">
                                            <svg aria-hidden="true" focusable="false" 
                                            data-prefix="fal" data-icon="dolly" role="img" xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 576 512" className="svg-inline--fa fa-dolly fa-w-18 fa-fw fa-2x"><path fill="currentColor" d="M575.6 309.8l-5.1-15.2c-1.4-4.2-5.9-6.5-10.1-5.1L526 301.1 451.5 77.9c-2.7-8.1-8.4-14.7-16-18.5-7.7-3.8-16.3-4.4-24.4-1.7L176.3 136l-18-50.7C146.9 53.3 116.7 32 82.8 32H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h74.8c20.3 0 38.4 12.8 45.2 31.9l96.7 271.9c-23.3 17.2-37.2 46.5-31.4 78.9 5.6 31.3 30.4 57 61.5 63.5 51.7 10.7 97.2-28.4 97.2-78.2 0-13.1-3.4-25.2-9-36.1l227.5-76c4.2-1.4 6.5-5.9 5.1-10.1zM187 166.1l106.4-35.5 25 74.9c1.4 4.2 5.9 6.5 10.1 5.1l15.2-5.1c4.2-1.4 6.5-5.9 5.1-10.1l-25-74.9L421.2 88l74.5 223.3-174.4 58.1C307.6 358.7 290.7 352 272 352c-6.3 0-12.3.9-18.1 2.3L187 166.1zM272 480c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" className=""></path></svg>
                                            Prediction Slip
                                        </a>
                                    </li>
                                    <li>
                                        <Link className="link" to='/dashboard'>
                                            <svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="user-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" className="svg-inline--fa fa-user-circle fa-w-16 fa-fw fa-2x"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm128 421.6c-35.9 26.5-80.1 42.4-128 42.4s-92.1-15.9-128-42.4V416c0-35.3 28.7-64 64-64 11.1 0 27.5 11.4 64 11.4 36.6 0 52.8-11.4 64-11.4 35.3 0 64 28.7 64 64v13.6zm30.6-27.5c-6.8-46.4-46.3-82.1-94.6-82.1-20.5 0-30.4 11.4-64 11.4S204.6 320 184 320c-48.3 0-87.8 35.7-94.6 82.1C53.9 363.6 32 312.4 32 256c0-119.1 96.9-216 216-216s216 96.9 216 216c0 56.4-21.9 107.6-57.4 146.1zM248 120c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 144c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z" className=""></path></svg>
                                            Hi, John Doe
                                        </Link>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="navbar" className="header-bottom">
                <div className="container">
                    <div className="row">
                        <div className="col-xl-3 col-lg-3 d-xl-flex d-lg-flex d-block align-items-center">
                            <div className="row">
                                <div className="col-xl-12 col-lg-12 col-6 d-xl-block d-lg-block d-flex align-items-center">
                                    <div className="logo">
                                        <a href="index-2.html">
                                            <img src="/front/img/logo.png" alt="logo"/>
                                        </a>
                                    </div>
                                </div>
                                <div className="col-6 d-xl-none d-lg-none d-block">
                                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <i className="fas fa-bars"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div className="col-xl-9 col-lg-9">
                            <div className="mainmenu">
                                <nav className="navbar navbar-expand-lg">
                                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                                        <ul className="navbar-nav ml-auto">
                                            
                                            <li className="nav-item">
                                                <Link className="nav-link" to="/">Home</Link>
                                            </li>
                                            <li className="nav-item">
                                                <a className="nav-link" href="about.html">About</a>
                                            </li>
                                            <li className="nav-item">
                                                <a className="nav-link" href="statics.html">Statics</a>
                                            </li>
                                            <li className="nav-item">
                                                <a className="nav-link" href="promotions.html">Promotions</a>
                                            </li>
                                            <li className="nav-item dropdown">
                                                <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                  Blog
                                                </a>
                                                <div className="dropdown-menu" aria-labelledby="navbarDropdown2">
                                                    <a className="dropdown-item" href="blog.html">Blog Post</a>
                                                    <a className="dropdown-item" href="blog-details.html">Blog Details</a>
                                                </div>
                                            </li>
                                            <li className="nav-item dropdown">
                                                <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                  Pages
                                                </a>
                                                <div className="dropdown-menu" aria-labelledby="navbarDropdown3">
                                                    <a className="dropdown-item" href="result.html">Result</a>
                                                    <a className="dropdown-item" href="latest-result.html">Latest Result</a>
                                                    <a className="dropdown-item" href="standing.html">Standing</a>
                                                    <a className="dropdown-item" href="schedule.html">Schedule</a>
                                                    <a className="dropdown-item" href="bet-slip.html">Bet Slip</a>
                                                    <a className="dropdown-item" href="login.html">Login</a>
                                                    <a className="dropdown-item" href="register.html">Register</a>
                                                    <a className="dropdown-item" href="error.html">Error 404</a>
                                                </div>
                                            </li>
                                            <li className="nav-item">
                                                <a className="nav-link" href="contact.html">Contact US</a>
                                            </li>
                                        </ul>
                                    </div>
                                  </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Outlet/>

        <div className="footer" id="contact">
            <div className="container">
                <div className="row justify-content-between">
                    <div className="col-xl-4 col-lg-5 col-md-10">
                        <div className="about-widget">
                            <a className="logo" href="index-2.html">
                                <img src="/front/img/logo.png" alt=""/>
                            </a>
                            <p>PerediOn offers you all the best online prediction from every corner of the planet with thousands of online prediction markets.</p>
                            <div className="social">
                                <ul>
                                    <li>
                                        <a href="#" className="social-icon">
                                            <i className="fab fa-facebook-f"></i>
                                        </a>
                                        <a href="#" className="social-icon">
                                            <i className="fab fa-twitter"></i>
                                        </a>
                                        <a href="#" className="social-icon">
                                            <i className="fab fa-instagram"></i>
                                        </a>
                                        <a href="#" className="social-icon">
                                            <i className="fab fa-pinterest-p"></i>
                                        </a>
                                        <a href="#" className="social-icon">
                                            <i className="fab fa-facebook-f"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div className="support">
                                <ul>
                                    <li>
                                        <span className="icon">
                                            <img src="/front/img/svg/email.svg" alt=""/>
                                        </span>
                                        <span className="text">
                                            <span className="title">Mail Us</span>
                                            <span className="descr">don't@reply.com</span>
                                        </span>
                                    </li>
                                    <li>
                                        <span className="icon">
                                            <img src="/front/img/svg/phone-call.svg" alt=""/>
                                        </span>
                                        <span className="text">
                                            <span className="title">Get In Touch</span>
                                            <span className="descr">+88 015 00 00 00</span>
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="col-xl-2 col-lg-2 col-md-3">
                        <div className="useful-links">
                            <h3>Useful links</h3>
                            <ul>
                                <li>
                                    <a href="#">IN-PLAY</a>
                                </li>
                                <li>
                                    <a href="#">PROMOTIONS</a>
                                </li>
                                <li>
                                    <a href="#">STATICS</a>
                                </li>
                                <li>
                                    <a href="#">RESULTS</a>
                                </li>
                                <li>
                                    <a href="#">Predict now</a>
                                </li>
                                <li>
                                    <a href="#">GAME RESULTS</a>
                                </li>
                                <li>
                                    <a href="#">STANDINGS</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className="col-xl-2 col-lg-3 col-md-3">
                        <div className="useful-links">
                            <h3>Connect With Us</h3>
                            <ul>
                                <li>
                                    <a href="#">About Us</a>
                                </li>
                                <li>
                                    <a href="#">Blog</a>
                                </li>
                                <li>
                                    <a href="#">Blog Details</a>
                                </li>
                                <li>
                                    <a href="#">Service</a>
                                </li>
                                <li>
                                    <a href="#">Contact us</a>
                                </li>
                                <li>
                                    <a href="#">TEAM OVERVIEW</a>
                                </li>
                                <li>
                                    <a href="#">SCHEDULE</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className="col-xl-2 col-lg-2 col-md-3">
                        <div className="useful-links">
                            <h3>All Sports</h3>
                            <ul>
                                <li>
                                    <a href="#">FOOTBALL</a>
                                </li>
                                <li>
                                    <a href="#">TENNIS</a>
                                </li>
                                <li>
                                    <a href="#">BASKETBALL</a>
                                </li>
                                <li>
                                    <a href="#">ICE HOCKEY</a>
                                </li>
                                <li>
                                    <a href="#">VOLLEYBALL</a>
                                </li>
                                <li>
                                    <a href="#">BADMINTON</a>
                                </li>
                                <li>
                                    <a href="#">BASEBALL</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="container">
                        <div className="row">
                            <div className="col-xl-12 col-lg-12">
                                <div className="payment-method">
                                    <h6 className="payment-method-title">
                                        Payment methods are We accept 
                                    </h6>
                                    <div className="all-method">
                                        <div className="single-method">
                                            <img src="/front/img/brand-1.png" alt=""/>
                                        </div>
                                        <div className="single-method">
                                            <img src="/front/img/brand-2.png" alt=""/>
                                        </div>
                                        <div className="single-method">
                                            <img src="/front/img/brand-3.png" alt=""/>
                                        </div>
                                        <div className="single-method">
                                            <img src="/front/img/brand-4.png" alt=""/>
                                        </div>
                                        <div className="single-method">
                                            <img src="/front/img/brand-5.png" alt=""/>
                                        </div>
                                        
                                        <div className="single-method">
                                            <img src="/front/img/brand-5.png" alt=""/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div className="notes">
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-xl-10 col-lg-10">
                        PerediOn is a sports prediction html template, published by autworks throgh envato marketplace. You can use this template on any kind of sports prediction in the world. as like football, baseball, soccer, cricket etc. all rights reserved by autworks © 2020.
                    </div>
                </div>
            </div>
        </div>
        <div className="copyright-footer">
            <div className="container">
                <div className="row justify-content-between">
                    <div className="col-xl-5 col-md-6 col-lg-6 d-lg-flex d-lg-flex d-block align-items-center">
                        <p className="copyright-text">
                            <a href="#">PerediOn</a> © 2020. PRIVACY POLICY
                        </p>
                    </div>
                    <div className="text-right col-md-6 col-xl-4 col-lg-6 d-xl-flex d-lg-flex d-block align-items-center">
                        <p className="copyright-text">
                            Powerd By <a href="https://themeforest.net/user/autworks/portfolio">Autworks ( Envato Author )</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  );
}

export default Frontend;
