Autor Tema: Diseño de sistema de ventas web [HTML] [CSS] (Leído 4784 veces)

R3LI4NT · « **en:** Diciembre 28, 2021, 06:11:16 am »

Hola comunidad!
Espero que hayan pasado una navidad agradable y quiero desearles un buen próspero Año Nuevo 2022! Nunca se rindan y sigan sus metas.

Esta vez les traigo un diseño de sistema de ventas web para que puedan implementarlo a su gusto, espero que sea de su agrado. Saludos

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Ventas</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div class="sidebar">
        <div class="logo_content">
            <div class="logo">
                <div class="avatar">
                    <img src="img/avatar.png">
                </div>
                <h3>Admin</h3>
            </div> 
        </div>
 
        <ul class="nav">
            <li><a href="#"><i class='bx bxs-shield-alt-2'></i><span>Seguridad</span></a></li>
            <li><a href="#"><i class='bx bxs-box'></i><span>Cajas</span></a></li>
            <li><a href="#"><i class='bx bxl-product-hunt' ></i><span>Productos</span></a></li>
            <li><a href="#"><i class='bx bxs-group'></i><span>Clientes</span></a></li>
            <li><a href="#"><i class='bx bxs-message'></i><span>Solicitudes</span></a></li>
            <li><a href="#"><i class='bx bxs-truck'></i><span>Repartos</span></a></li>
            <li><a href="#"><i class='bx bxs-megaphone'></i><span>Reportes</span></a></li>
            <li><a href="#"><i class='bx bxs-cog' ></i><span>Configuración</span></a></li>
        </ul>
    </div>
 
    <div class="menu_top">
        <h4>Sistema de Ventas</h4>
        <div class="sesion">
            <span>Cerrar sesión<i class='bx bx-power-off' ></i></span>
        </div>
    </div>    
 
    <section class="section_1">
        <div>
            <div class="box1">
                <div class="users">
                    <i class='bx bxs-user' ></i>
                    <span>Usuarios</span>
                    <p class="number">5</p>
                </div>
                <div class="detalles"><a href="">Ver detalles</a></div>
            </div>
        </div>
 
 
        <div class="box2">
            <div>
                <div class="productos">
                    <i class='bx bxl-product-hunt' ></i>
                    <span>Productos</span>
                    <p class="number">37</p>
                </div>
                <div class="detalles"><a href="">Ver detalles</a></div>
            </div>    
        </div>
 
 
        <div class="box3">
            <div>
                <div class="cajas">
                    <i class='bx bxs-box' ></i>
                    <span>Cajas</span>
                    <p class="number">110</p>
                </div>
                <div class="detalles"><a href="">Ver detalles</a></div>
            </div>
        </div>
 
 
        <div class="box4">
            <div>
                <div class="repartos">
                    <i class='bx bxs-truck'></i>
                    <span>Repartos</span>
                    <p class="number">22</p>
                </div>
                <div class="detalles"><a href="">Ver detalles</a></div>
            </div>    
        </div>
    </section>
 
    <section class="section_2">
        <div class="box5">
            <div>
                <div class="grafico">
                    <i class='bx bx-bar-chart-square'></i>
                    <span>Reporte Gráfico</span>
                </div>
                <div class="image">
                    <img src="img/grafico.jpg" alt="">
                </div>
            </div>    
        </div>
 
 
        <div class="box6">
            <div>
                <div class="productos-top">
                    <i class='bx bxs-label'></i>
                    <span>Nuevos Productos</span>
                </div>
                <div class="productos-new">
                    <div class="producto">
                        <img src="img/caja.png" alt="">
                        <p>PC Gamer</p>
                        <button>Añadir</button>
                    </div>
 
                    <div class="producto">
                        <img src="img/caja.png" alt="">
                        <p>iPhone X</p>
                        <button>Añadir</button>
                    </div>
 
                    <div class="producto">
                        <img src="img/caja.png" alt="">
                        <p>Webcam Razer</p>
                        <button>Añadir</button>
                    </div>
 
                    <div class="producto">
                        <img src="img/caja.png" alt="">
                        <p>PlayStation</p>
                        <button>Añadir</button>
                    </div>
                </div>
            </div>    
        </div>
    </section>
</body>
</html>
 

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}
 
body {
    position: relative;
    background-color: #f2f2f2;
}
 
.sidebar {
    width: 220px;
    background-color: #232323;
    height: 100vh;
    position: fixed;
}
 
.sidebar.active {
    width: 240px;
}
 
.logo_content {
    height: 120px;
    background-color: #1A1A1A;
}
 
.logo_content .logo {
    color: #fff;
    display: flex;
    padding: 20px 0;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
}
 
.logo_content .logo h3 {
    position: relative;
    top: 50px;
}
 
.logo_content .logo .avatar {
    display: flex;
    position: absolute;
}
 
.logo_content .logo .avatar img {
    height: 50px;
    background: #fff;
    padding: 4px;
    border-radius: 50%;
}
 
.sidebar ul {
    padding: 20px 10px;
}
 
.sidebar ul li a {
    color:#fff;
    display: flex;
    font-size: 14px;
    align-items: center;
    padding: 15px 10px;
    transition: .3s ease;
}
 
.sidebar ul li a:hover {
    background: #1A1A1A;
    border-radius: 7px;
}
 
.sidebar ul li a i {
    padding-right: 10px;
    font-size: 18px;
}
 
.sidebar ul li a span {
    display: block;
}
 
.menu_top {
    position: relative;
    left: 220px;
    width: calc(100% - 220px);
    padding: 20px;
    background-color: #232323;
    display: flex;
}
 
.menu_top h4 {
    color: #e67e22;
    padding-left: 20px;
}
 
.menu_top .sesion {
    display: flex;
    align-items: center;
    margin-left: auto;
}
 
.menu_top .sesion span {
    color: #fff;
    font-size: 13px;
}
 
.menu_top .sesion span i {
    font-size: 18px;
    padding: 0 10px;
    cursor: pointer;
    transition: .2s ease;
}
 
.menu_top .sesion span i:hover {
    color: #e74c3c;
}
 
/** CONTENIDO */
 
.section_1 {
    position: relative;
    left: 220px;
    width: calc(100% - 220px);
    padding: 20px;
    background-color: #f2f2f2;
    display: flex;
    padding: 50px 40px;
    height: 10%;
    column-gap: 40px;
}
 
/* CAJA 1 */
 
.section_1 .box1 {
    background: #fff;
    height: 105px;
    width: 230px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
 
.section_1 .box1 .users {
    background-color: #E74C3C;
    height: 50px;
    display: flex;
    padding: 13px;
    box-shadow: -2px 2px 0px 2px rgba(231,76,60,.8);
    transition: .4s ease;
}
 
.section_1 .box1 .users:hover {
    box-shadow: 2px 2px 0px 2px rgba(231,76,60,.8);
}
 
.section_1 .box1 .users span {
    color: #fff;
}
 
.section_1 .box1 .users i {
    color: #000;
    font-size: 20px;
    padding: 0 5px;
}
 
.section_1 .box1 .users .number {
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-left: auto;
    font-weight: 700;
    font-size: 20px;
    text-shadow: -1px 1px 1px #000;
}
 
.section_1 .box1 .detalles {
    padding: 20px;
}
 
.section_1 .box1 .detalles a {
    color: #000;
    cursor: pointer;
    font-size: 15px;
}
 
.section_1 .box1 .detalles a:hover {
    text-decoration: underline;
}
 
 
 
 
/* CAJA 2 */
 
.section_1 .box2 {
    background: #fff;
    height: 105px;
    width: 230px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
 
.section_1 .box2 .productos {
    background-color: #4cd137;
    height: 50px;
    display: flex;
    padding: 13px;
    box-shadow: -2px 2px 0px 2px rgba(76,209,55,.6);
    transition: .4s ease;
}
 
.section_1 .box2 .productos:hover {
    box-shadow: 2px 2px 0px 2px rgba(76,209,55,.6);
}
 
.section_1 .box2 .productos span {
    color: #fff;
}
 
.section_1 .box2 .productos i {
    color: #000;
    font-size: 20px;
    padding: 0 5px;
}
 
.section_1 .box2 .productos .number {
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-left: auto;
    font-weight: 700;
    font-size: 20px;
    text-shadow: -1px 1px 1px #000;
}
 
.section_1 .box2 .detalles {
    padding: 20px;
}
 
.section_1 .box2 .detalles a {
    color: #000;
    cursor: pointer;
    font-size: 15px;
}
 
.section_1 .box2 .detalles a:hover {
    text-decoration: underline;
}
 
 
 
/* CAJA 3 */
 
.section_1 .box3 {
    background: #fff;
    height: 105px;
    width: 230px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
 
.section_1 .box3 .cajas {
    background-color: #0099e5;
    height: 50px;
    display: flex;
    padding: 13px;
    box-shadow: -2px 2px 0px 2px rgba(0,153,229,.7);
    transition: .4s ease;
}
 
.section_1 .box3 .cajas:hover {
    box-shadow: 2px 2px 0px 2px rgba(0,153,229,.7);
}
 
.section_1 .box3 .cajas span {
    color: #fff;
}
 
.section_1 .box3 .cajas i {
    color: #000;
    font-size: 20px;
    padding: 0 5px;
}
 
.section_1 .box3 .cajas .number {
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-left: auto;
    font-weight: 700;
    font-size: 20px;
    text-shadow: -1px 1px 1px #000;
}
 
.section_1 .box3 .detalles {
    padding: 20px;
}
 
.section_1 .box3 .detalles a {
    color: #000;
    cursor: pointer;
    font-size: 15px;
}
 
.section_1 .box3 .detalles a:hover {
    text-decoration: underline;
}
 
 
 
/* CAJA 4 */
 
.section_1 .box4 {
    background: #fff;
    height: 105px;
    width: 230px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
 
.section_1 .box4 .repartos {
    background-color: #ff6a00;
    height: 50px;
    display: flex;
    padding: 13px;
    box-shadow: -2px 2px 0px 2px rgba(255,106,0,.7);
    transition: .4s ease;
}
 
.section_1 .box4 .repartos:hover {
    box-shadow: 2px 2px 0px 2px rgba(255,106,0,.7);
}
 
.section_1 .box4 .repartos span {
    color: #fff;
}
 
.section_1 .box4 .repartos i {
    color: #000;
    font-size: 20px;
    padding: 0 5px;
}
 
.section_1 .box4 .repartos .number {
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-left: auto;
    font-weight: 700;
    font-size: 20px;
    text-shadow: -1px 1px 1px #000;
}
 
.section_1 .box4 .detalles {
    padding: 20px;
}
 
.section_1 .box4 .detalles a {
    color: #000;
    cursor: pointer;
    font-size: 15px;
}
 
.section_1 .box4 .detalles a:hover {
    text-decoration: underline;
}
 
 
 
/*SECTION 2 */
 
.section_2 {
    position: relative;
    left: 220px;
    width: calc(100% - 220px);
    padding: 20px;
    background-color: #f2f2f2;
    display: flex;
    padding: 50px 40px;
    height: auto;
    column-gap: 40px;
}
 
/* CAJA 5 */
 
.section_2 .box5 {
    background: #fff;
    height: 335px;
    width: 570px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
 
.section_2 .box5 .grafico {
    background-color: #ffcc00;
    height: 50px;
    display: flex;
    padding: 13px;
    box-shadow: -2px 2px 0px 2px rgba(255,204,0,.5);
    transition: .4s ease;
}
 
.section_2  .box5 .grafico:hover {
    box-shadow: 2px 2px 0px 2px rgba(255,204,0,.5);
}
 
.section_2  .box5 .grafico i {
    color: #000;
    font-size: 20px;
    padding: 0 5px;
}
 
.section_2 .box5 .grafico span {
    color: #fff;
}
 
.section_2 .box5 .image {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    top: 25px;
    position: relative;
}
 
.section_2 .box5 img {
    height: 250px;
}
 
 
/* CAJA 6 */
 
 
.section_2 .box6 {
    background: #fff;
    height: 335px;
    width: 430px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
 
.section_2 .box6 .productos-top {
    background-color: #323b43;
    height: 50px;
    display: flex;
    padding: 13px;
    box-shadow: -2px 2px 0px 2px rgba(50,59,67,.8);
    transition: .4s ease;
}
 
.section_2  .box6 .productos-top:hover {
    box-shadow: 2px 2px 0px 2px rgba(50,59,67,.8);
}
 
.section_2  .box6 .productos-top i {
    color: #000;
    font-size: 20px;
    padding: 0 5px;
}
 
.section_2 .box6 .productos-top span {
    color: #fff;
}
 
.section_2 .box6 .productos-new {
    height: auto;
    display: flex;
    text-align: center;
    padding-left: 20px;
    padding-top: 30px;
    padding-bottom: 30px;
    flex-direction: column;
    gap: 35px;
}
 
.section_2 .box6 .producto {
    display: flex;
    width: 90%;
}
 
.section_2 .box6 .producto img {
    height: 30px;
    padding-right: 30px;
    padding-left: 30px;
}
 
.section_2 .box6 .producto button {
    color: #fff;
    text-transform: uppercase;
    display: flex;
    margin-left: auto;
    background: #00ad45;
    width: 80px;
    height: 34px;
    outline: none;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #037932;
    border-left: 2px solid #037932;
    text-transform: none;
}
 
.section_2 .box6 .producto button:active {
    border: none;
}
 
 

Repositorio: https://github.com/R3LI4NT/sistema-ventas

Miguelzangorano · « **Respuesta #1 en:** Enero 21, 2022, 09:17:03 pm »

Pinta tremenda!! wow

R3LI4NT · « **Respuesta #2 en:** Abril 02, 2022, 10:31:18 pm »

#2

HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Ventas #2</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div class="main">
        <div class="menu">
            <h3 id="logo"><p class="etiqueta">Admin</p>R3LI4NT</h3>
            <a href="#"><i class='bx bxs-home'></i>Inicio</a>
            <a href="#"><i class='bx bxs-group'></i>Clientes</a>
            <a href="#"><i class='bx bxl-product-hunt' ></i>Productos</a>
            <a href="#"><i class='bx bxs-truck'></i>Repartos</a>
            <a href="#"><i class="bx bx-line-chart"></i>Estadísticas</a>
            <a href="#"><i class='bx bxs-cog' ></i>Configuración</a>
        </div>
        <div class="content">
            <h6>Sistema de Venta</h6>
            <div class="card" style="border-bottom: 25px solid #027EF2;">
                <i class='bx bxs-group'></i>
                <p class="clients">Clientes</p>
                <p class="number">5</p>
            </div>
 
            <div class="card" style="border-bottom: 25px solid #14EA78;">
                <i class='bx bxl-product-hunt' ></i>
                <p class="products">Productos</p>
                <p class="number">24</p>
            </div>
 
            <div class="card" style="border-bottom: 25px solid #FB8D72;">
                <i class='bx bxs-truck'></i>
                <p class="repartos">Repartos</p>
                <p class="number">10</p>
            </div>
        </div>
 
        <div class="content2">
            <div class="grafico">
                <p class="product-stock">Productos en stock</p>
                <div class="img">
                    <img src="img/grafico_uno.png" alt="">
                </div>
            </div>
 
            <div class="grafico2">
                <p class="product-stock">Productos más vendidos</p>
                <div class="img">
                    <img src="img/grafico_dos.png" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
 

CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap');
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}
 
body {
    background: #1F1E30;
}
 
.main {
    width: 100%;
    height: 100vh;
    display: flex;
}
 
.main .menu {
    width: 20%;
    margin: auto 12px;
    height: 90%;
    background: -webkit-linear-gradient(to right, #61045F, #AA076B);  
    background: linear-gradient(to right, #61045F, #AA076B);
    border-radius: 12px;
    outline: 3px solid #AA076B;
    outline-offset: 4px;
}
 
#logo {
    color: #fff;
    font-family: 'Londrina Solid', cursive;
    font-size: 30px;
    letter-spacing: 1px;
    padding: 20px 0;
    text-shadow: 2px -1px 2px #000;
    border-bottom: 1px solid  #f2f2f2;
    text-align: center;
}
 
.etiqueta {
    display: flex;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: #000;
    background: #D30000;
    width: 51px;
    height:25px;
    border-radius: 5px;
    border: 2px solid #FF0000;
    text-align: center;
    align-items: center;
    position: absolute;
    margin-left: 30px;
    margin-top: 5px;
    padding: 0 2px;
    letter-spacing: 0;
    text-shadow: none;
}
 
.menu a {
    color: #fff;
    font-size: 16px;
    display: list-item;
    padding: 10px;
    font-family: 'Poppins', sans-serif;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.13);
    border-bottom: 1px solid rgba(0,0,0,0.13);
    cursor: pointer; 
}
 
.menu a:hover {
    background: rgba(0,0,0,0.10);
}
 
.bx {
    font-size: 22px;
    padding: 10px;
    vertical-align: middle;
}
 
.main .content {
    background-color: #1F1E30;
    padding: 20px;
    display: flex;
    position: relative;
}
 
.main .content h6 {
    color: #DEDEDE;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    position: absolute;
}
 
.main .card {
    margin-top: 50px;
    width: 260px;
    height: 140px;
    background-color: #272A3D;
    border-radius: 6px;
    margin: 60px 32px;
    cursor: pointer;
    transition: .4s ease;
}
 
.main .card .bx {
    color: #fff;
    font-size: 35px;
}
 
.main .card .clients {
    font-family: 'Poppins', sans-serif;
    color: #027EF2;
    margin-left: 10px;
    margin-top: -10px;
}
 
.main .card .number {
    color: #EDEDED;
    float: right;
    font-size: 30px;
    margin-right: 15px;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}
 
.card .products {
    font-family: 'Poppins', sans-serif;
    color: #14EA78;
    margin-left: 10px;
    margin-top: -10px;
}
 
.card .repartos {
    font-family: 'Poppins', sans-serif;
    color: #FB8D72;
    margin-left: 10px;
    margin-top: -10px;
}
 
.content2 .grafico {
    position: absolute;
    left: 317px;
    top: 220px;
    display: flex;
    width: 420px;
    height: 350px;
    background-color: #272A3D;
    border-radius: 6px;
    margin: 60px 20px;
}
 
.content2 .product-stock {
    color: #DEDEDE;
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    padding: 10px 15px;
}
 
.content2 .img {
    position: absolute;
    top: 60px;
    left: 70px;
}
 
.content2 img {
    height: 270px;
    width: auto;
    cursor: pointer;
    transition: .4s ease;
}
 
.content2 img:hover {
    transform: scale(1.1);
}
 
 
.content2 .grafico2 {
    position: absolute;
    left: 817px;
    top: 220px;
    display: flex;
    width: 420px;
    height: 350px;
    background-color: #272A3D;
    border-radius: 6px;
    margin: 60px 20px;
}
 
.card:hover {
    transform: scale(1.1);
}
 

USO LIBRE: https://github.com/R3LI4NT/sistema-ventas

Vuelve a España Google News después de 8 años y trae todas estas novedades

Autor Tema: Diseño de sistema de ventas web [HTML] [CSS] (Leído 4784 veces)

R3LI4NT

Diseño de sistema de ventas web [HTML] [CSS]

Miguelzangorano

Re:Diseño de sistema de ventas web [HTML] [CSS]

R3LI4NT

Re:Diseño de sistema de ventas web [HTML] [CSS]