import React from 'react';


class Articulos extends React.Component {


    constructor() {
        super();

        this.state = {
        }

    }



    render() {
        return (
            <React.Fragment>
                <div className="container">
                    <div className="row">
                        <div className="col-md-12">
                            <div className="back2">
                                <div className="row">
                                    <div className="col-lg-6 col-md-12">
                                        <div className="back4">
                                            <h3>Artículos Activos vrs Artículos Comprados</h3>
                                        </div>
                                    </div>
                                    <div className="col-lg-3 col-md-12">
                                        <div className="back4">
                                            <h3>Cantidad de Artículos</h3>
                                            <p className="tiempo">Calificados</p>
                                            <p className="variable">180</p>
                                        </div>
                                    </div>
                                    <div className="col-lg-3 col-md-12">
                                        <div className="back4">
                                            <h3 className="marginx">Promedio de Calificación</h3>
                                            <ul className="stars3">
                                                <li><i className="fas fa-star"></i></li>
                                                <li><i className="fas fa-star"></i></li>
                                                <li><i className="fas fa-star"></i></li>
                                                <li><i className="fas fa-star"></i></li>
                                                <li><i className="fas fa-star"></i></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-lg-9 col-md-12">
                            <div className="back2">
                                <div className="row">
                                    <div className="col">
                                        <div className="titles-art">
                                            <div className="row no-gutters">
                                                <div className="col-auto">
                                                    <p className="variable">10</p>
                                                </div>
                                                <div className="col">
                                                    <h3>TOP ARTÍCULOS <span>MEJOR CALIFICADOS</span></h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="back5">
                                            <div className="row">
                                                <div className="col">
                                                    <div className="prevista-articulo">
                                                        <div className="row">
                                                            <div className="col-lg-3 col-md-12">
                                                                <p className="variable text-left">1</p>
                                                                <h4>Sony WF-XB700</h4>
                                                                <p className="cod">Código: 3684</p>
                                                                <p className="tiempo">345 pedidos</p>
                                                                <ul className="stars1">
                                                                    <li><i className="fas fa-star"></i></li>
                                                                    <li><i className="fas fa-star"></i></li>
                                                                    <li><i className="fas fa-star"></i></li>
                                                                    <li><i className="fas fa-star"></i></li>
                                                                    <li><i className="fas fa-star"></i></li>
                                                                </ul>
                                                            </div>
                                                            <div className="col-lg-4 col-md-12">
                                                                <img className="image-product-preview" src="../images/Layer 0.png" />
                                                            </div>
                                                            <div className="col-5">
                                                                <h4>Comentarios</h4>
                                                                <div className="contenedor-comments">
                                                                    <div className="detalle-comment">
                                                                        <p className="name">Daniel Guerra</p>
                                                                        <ul className="stars1">
                                                                            <li><i className="fas fa-star"></i></li>
                                                                            <li><i className="fas fa-star"></i></li>
                                                                            <li><i className="fas fa-star"></i></li>
                                                                            <li><i className="fas fa-star"></i></li>
                                                                            <li><i className="fas fa-star"></i></li>
                                                                        </ul>
                                                                        <p className="text">Muy cómodos y prácticos para llevar a todos lados. </p>
                                                                    </div>
                                                                    <div className="detalle-comment">
                                                                        <p className="name">Daniel Guerra</p>
                                                                        <ul className="stars1">
                                                                            <li><i className="fas fa-star"></i></li>
                                                                            <li><i className="fas fa-star"></i></li>
                                                                            <li><i className="fas fa-star"></i></li>
                                                                            <li><i className="fas fa-star"></i></li>
                                                                            <li><i className="fas fa-star"></i></li>
                                                                        </ul>
                                                                        <p className="text">Muy cómodos y prácticos para llevar a todos lados. </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="row">
                                                <div className="col">
                                                    <ul className="lista-articulos">
                                                        <li className="item">
                                                            <ul className="stars2">
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                            </ul>
                                                            <p className="number">2</p>
                                                            <img className="imagen-peq" src="../images/Layer1.png" />
                                                            <p className="nombre">Marley Vibration 2</p>
                                                        </li>
                                                        <li className="item">
                                                            <ul className="stars2">
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                            </ul>
                                                            <p className="number">3</p>
                                                            <img className="imagen-peq" src="../images/Layer1.png" />
                                                            <p className="nombre">Marley Vibration 2</p>
                                                        </li>
                                                        <li className="item">
                                                            <ul className="stars2">
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                            </ul>
                                                            <p className="number">4</p>
                                                            <img className="imagen-peq" src="../images/Layer1.png" />
                                                            <p className="nombre">Marley Vibration 2 Marley Vibration 2</p>
                                                        </li>
                                                        <li className="item">
                                                            <ul className="stars2">
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                            </ul>
                                                            <p className="number">5</p>
                                                            <img className="imagen-peq" src="../images/Layer1.png" />
                                                            <p className="nombre">Marley Vibration 2</p>
                                                        </li>
                                                        <li className="item">
                                                            <ul className="stars2">
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                            </ul>
                                                            <p className="number">6</p>
                                                            <img className="imagen-peq" src="../images/Layer1.png" />
                                                            <p className="nombre">Marley Vibration 2</p>
                                                        </li>
                                                        <li className="item">
                                                            <ul className="stars2">
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                            </ul>
                                                            <p className="number">7</p>
                                                            <img className="imagen-peq" src="../images/Layer1.png" />
                                                            <p className="nombre">Marley Vibration 2</p>
                                                        </li>
                                                        <li className="item">
                                                            <ul className="stars2">
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                            </ul>
                                                            <p className="number">8</p>
                                                            <img className="imagen-peq" src="../images/Layer1.png" />
                                                            <p className="nombre">Marley Vibration 2</p>
                                                        </li>
                                                        <li className="item">
                                                            <ul className="stars2">
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                            </ul>
                                                            <p className="number">9</p>
                                                            <img className="imagen-peq" src="../images/Layer1.png" />
                                                            <p className="nombre">Marley Vibration 2</p>
                                                        </li>
                                                        <li className="item">
                                                            <ul className="stars2">
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                                <li><i className="fas fa-star"></i></li>
                                                            </ul>
                                                            <p className="number">10</p>
                                                            <img className="imagen-peq" src="../images/Layer1.png" />
                                                            <p className="nombre">Marley Vibration 2</p>
                                                        </li>
                                                    </ul>
                                                </div>

                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-3 col-md-12">
                            <div className="back2 scroll">
                                <div className="titles-art">
                                    <div className="row no-gutters">
                                        <div className="col-auto">
                                            <p className="variable">10</p>
                                        </div>
                                        <div className="col">
                                            <h3>TOP ARTÍCULOS <span>Abandonados</span></h3>
                                        </div>
                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col">
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">1</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">2</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">3</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">4</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">5</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">6</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">7</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">8</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">9</p>
                                                <h3 className="art-name">Samsung A51</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>

                                        </div>
                                        <div className="back7">
                                            <a className="lista-botones" href="#">
                                                <p className="posicion">10</p>
                                                <h3 className="art-name">Cargador Eco</h3>
                                                <p className="codigo">cod: 2345</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </React.Fragment>
        )
    }
};
export default Articulos;