"Admin Panel"
Bootstrap 4.1.1 Snippet by saikrishna99666

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!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,maximum-scale=1"> <title>Admin</title> <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <input type="checkbox" id="nav-toggle"> <div class="sidebar"> <div class="sidebar-brand"> <h2><span class="las la-clinic-medical"></span> <span>Hospital</span></h2> </div> <!--Secciones-del-tablero--> <div class="sidebar-menu"> <ul> <li> <a href="" class="active"><span class="las la-home"></span> <span>Tablero</span></a> </li> <li> <a href=""><span class="las la-stethoscope"></span> <span>Doctores</span></a> </li> <li> <a href=""><span class="las la-user"></span> <span>Usuarios</span></a> </li> <li> <a href=""><span class="las la-user-injured"></span> <span>Pacientes</span></a> </li> <li> <a href=""><span class="las la-history"></span> <span>Historial de citas</span></a> </li> <li> <a href=""><span class="las la-search"></span> <span>Busqueda de pacientes</span></a> </li> <li> <a href=""><span class="las la-book-medical"></span> <span>Informes</span></a> </li> </ul> </div> </div> <div class="main-content"> <header> <h2> <label for="nav-toggle"> <span class="las la-bars"></span> </label> Tablero </h2> <div class="search-wrapper"> <span class="las la-search"></span> <input type="search" placeholder="Buscar aquí" /> </div> <div class="user-wrapper"> <img src="img/Avatar.png" width="40px" height="40px" alt=""> <div> <h4>Administrador</h4> <small>Super Admin</small> </div> </div> </header> <main> <div class="cards"> <div class="card-single"> <div> <h1>5</h1> <span>Menejo de usuarios</span> </div> <div> <span class="las la-users"></span> </div> </div> <div class="card-single"> <div> <h1>12</h1> <span>Menejo de doctores</span> </div> <div> <span class="las la-stethoscope"></span> </div> </div> <div class="card-single"> <div> <h1>25</h1> <span>Manejo de pacientes</span> </div> <div> <span class="las la-wheelchair"></span> </div> </div> <div class="card-single"> <div> <h1>2</h1> <span>Nuevas consultas</span> </div> <div> <span class="lab la-wpforms"></span> </div> </div> </div> <!--Tabla--> <div class="recent-grid"> <div class="projects"> <div class="card"> <div class="card-header"> <h3>Pacientes recientes</h3> <button>Mostrar todo <span class="las la-arrow-right"> </span></button> </div> <div class="card-body"> <div class="table-responsive"> <table width="100%"> <thead> <tr> <td>Nombre</td> <td>Apellido</td> <td>Estado</td> </tr> </thead> <tbody> <tr> <td>Jhon Deiby</td> <td>Salazar Rayo</td> <td> <span class="status green"></span> Bueno </td> </tr> <tr> <td>Victor Manuel</td> <td>Ciro Ledesma</td> <td> <span class="status red"></span> Malo </td> </tr> <tr> <td>Julian Andres</td> <td>Quesada Carmona</td> <td> <span class="status yellow"></span> Intermedio </td> </tr> <tr> <td>Andres</td> <td>Hernandez</td> <td> <span class="status green"></span> Bueno </td> </tr> <tr> <td>Manuel</td> <td>Chicangana</td> <td> <span class="status red"></span> Malo </td> </tr> <tr> <td>Julieta</td> <td>Quesad</td> <td> <span class="status yellow"></span> Intermedio </td> </tr> <tr> <td>Marleny</td> <td>Salazar Orozco</td> <td> <span class="status yellow"></span> Intermedio </td> </tr> <tr> <td>Kelly</td> <td>Gil Ortiz</td> <td> <span class="status green"></span> Bueno </td> </tr> <tr> <td>Bilma</td> <td>Ortiz Bermudez</td> <td> <span class="status red"></span> Malo </td> </tr> <tr> <td>Julian Andres</td> <td>Salazar Rayo</td> <td> <span class="status yellow"></span> Intermedio </td> </tr> <tr> <td>Jhonatan</td> <td>Velazco</td> <td> <span class="status yellow"></span> Intermdio </td> </tr> <tr> <td>Samir</td> <td>Vidal Carmona</td> <td> <span class="status green"></span> Bueno </td> </tr> <tr> <td>Karen</td> <td>Orozco Sanches</td> <td> <span class="status red"></span> Malo </td> </tr> <tr> <td>Emiliano</td> <td>Chicaganda</td> <td> <span class="status yellow"></span> Intermedio </td> </tr> <tr> <td>Jhon Jairo</td> <td>Salazar Gallego</td> <td> <span class="status yellow"></span> Intermedio </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="customers"> <div class="card"> <div class="card-header"> <h3>Nuevos pacientes</h3> <button>Mostrar todo <span class="las la-arrow-right"> </span></button> </div> <div class="card-body"> <div class="customer"> <div class="info"> <img src="avatars/1.png" width="40px" height="40px" alt=""> <div> <h4>Ana Maria Acosta</h4> <small>Diarrea</small> </div> </div> <div class="contact"> <span class="las la-user-circle"></span> <span class="lab la-whatsapp"></span> <span class="las la-phone"></span> </div> </div> <div class="customer"> <div class="info"> <img src="avatars/2.png" 40px " height="40px " alt=" "> <div> <h4>Karen Orozco</h4> <small>Gripa</small> </div> </div> <div class="contact "> <span class="las la-user-circle "></span> <span class="lab la-whatsapp "></span> <span class="las la-phone "></span> </div> </div> <div class="customer "> <div class="info "> <img src="avatars/3.png " width="40px " height="40px " alt=" "> <div> <h4>Kelly Ortiz</h4> <small>Intoxicación</small> </div> </div> <div class="contact "> <span class="las la-user-circle "></span> <span class="lab la-whatsapp "></span> <span class="las la-phone "></span> </div> </div> <div class="customer "> <div class="info "> <img src="avatars/4.png " width="40px " height="40px " alt=" "> <div> <h4>Julian Quesada</h4> <small>Malestar general</small> </div> </div> <div class="contact "> <span class="las la-user-circle "></span> <span class="lab la-whatsapp "></span> <span class="las la-phone "></span> </div> </div> <div class="customer "> <div class="info "> <img src="avatars/5.png " width="40px " height="40px " alt=" "> <div> <h4>Nelson Stiven</h4> <small>Bartolinitis</small> </div> </div> <div class="contact "> <span class="las la-user-circle "></span> <span class="lab la-whatsapp "></span> <span class="las la-phone "></span> </div> </div> <div class="customer "> <div class="info "> <img src="avatars/6.png " width="40px " height="40px " alt=" "> <div> <h4>Sara Cortez</h4> <small>Acné</small> </div> </div> <div class="contact "> <span class="las la-user-circle "></span> <span class="lab la-whatsapp "></span> <span class="las la-phone "></span> </div> </div> <div class="customer "> <div class="info "> <img src="avatars/7.png " width="40px " height="40px " alt=" "> <div> <h4>Mario Ortiz</h4> <small>Demencia</small> </div> </div> <div class="contact "> <span class="las la-user-circle "></span> <span class="lab la-whatsapp "></span> <span class="las la-phone "></span> </div> </div> <div class="customer "> <div class="info "> <img src="avatars/8.png " width="40px " height="40px " alt=" "> <div> <h4>Leopoldo Sas</h4> <small>Eccema</small> </div> </div> <div class="contact "> <span class="las la-user-circle "></span> <span class="lab la-whatsapp "></span> <span class="las la-phone "></span> </div> </div> <div class="customer "> <div class="info "> <img src="avatars/9.png " width="40px " height="40px " alt=" "> <div> <h4>Stiven Alrboleda</h4> <small>Encefalitis</small> </div> </div> <div class="contact "> <span class="las la-user-circle "></span> <span class="lab la-whatsapp "></span> <span class="las la-phone "></span> </div> </div> <div class="customer "> <div class="info "> <img src="avatars/10.png " width="40px " height="40px " alt=" "> <div> <h4>Brandon Carnadona</h4> <small>Faringitis</small> </div> </div> <div class="contact "> <span class="las la-user-circle "></span> <span class="lab la-whatsapp "></span> <span class="las la-phone "></span> </div> </div> </div> </div> </div> </div> </main> </div> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); :root { --main-color: #1f8fc3; --color-dark: #1D2231; --text-grey: #8390A2; } * { padding: 0; margin: 0; box-sizing: border-box; list-style-type: none; text-decoration: none; font-family: 'Poppins', sans-serif; } .sidebar { width: 345px; position: fixed; left: 0; top: 0; height: 100%; background: var(--main-color); z-index: 100; transition: width 300ms; } .sidebar-brand { height: 90px; padding: 1rem 0rem 1rem 2rem; color: #fff; } .sidebar-brand span { display: inline-block; padding-right: 1rem; } .sidebar-menu { margin-top: 1rem; } .sidebar-menu li { width: 100%; margin-bottom: 1.7rem; padding-left: 1rem; } .sidebar-menu a { padding-left: 1rem; display: block; color: #fff; font-size: 1.1rem; } .sidebar-menu a.active { background: #fff; padding-top: 1rem; padding-bottom: 1rem; color: var(--main-color); border-radius: 30px 0px 0px 30px; } .sidebar-menu a span:first-child { font-size: 1.5rem; padding-right: 1rem; } #nav-toggle:checked+.sidebar { width: 70px; } #nav-toggle:checked+.sidebar .sidebar-brand, #nav-toggle:checked+.sidebar li { padding-left: 1rem; text-align: center; } #nav-toggle:checked+.sidebar li a { padding-left: 0rem; } #nav-toggle:checked+.sidebar .sidebar-brand h2 span:last-child, #nav-toggle:checked+.sidebar li a span:last-child { display: none; } #nav-toggle:checked~.main-content { margin-left: 70px; } #nav-toggle:checked~.main-content header { width: calc(100% - 70px); left: 70px; } .main-content { transition: margin-left 300ms; margin-left: 345px; } header { background: #fff; display: flex; justify-content: space-between; padding: 1rem 1.5rem; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); position: fixed; left: 345px; width: calc(100% - 345px); top: 0; z-index: 100; transition: left 300ms; } #nav-toggle { display: none; } header h2 { color: #222; } header label span { font-size: 1.7rem; padding-right: 1rem; } .search-wrapper { border: 1px solid #ccc; border-radius: 30px; height: 50px; display: flex; align-items: center; overflow-x: hidden; } .search-wrapper span { display: inline-block; padding: 0rem 1rem; font-size: 1.5rem; } .search-wrapper input { height: 100%; padding: .5rem; border: none; outline: none; } .user-wrapper { display: flex; align-items: center; } .user-wrapper img { border-radius: 50%; margin-right: 1rem; } .user-wrapper small { display: inline-block; color: var(--text-grey); } main { margin-top: 85px; padding: 2rem 1.5rem; background: #f1f5f9; min-height: calc(100vh - 90px); } .cards { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2rem; margin-bottom: 1rem; } .card-single { display: flex; justify-content: space-between; background: #fff; padding: 2rem; border-radius: 2px; } .card-single div:last-child span { font-size: 3rem; color: var(--main-color); } .card-single div:first-child span { color: var(--text-grey); } .card-single:last-child { background: var(--main-color); } .card-single:last-child h1, .card-single:last-child div:first-child span, .card-single:last-child div:last-child span { color: #fff; } .recent-grid { margin-top: 3.5rem; display: grid; grid-gap: 2rem; grid-template-columns: 65% auto; } .card { background: #fff; } .card-header { padding: 1rem; } .card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; } .card-header button { background: var(--main-color); border-radius: 10px; color: #fff; font-size: .8rem; padding: .5rem 1rem; border: 1px solid var(--main-color); } table { border-collapse: collapse; } thead tr { border-top: 1px solid #f0f0f0; border-bottom: 2px solid #f0f0f0; } thead td { font-weight: 700; } td { padding: .5rem 1rem; font-size: .9rem; color: #222; } td .status { display: inline-block; height: 10px; width: 10px; border-radius: 50%; margin-right: 1rem; } tr td:last-child { display: flex; align-items: center; } .status.green { background: rgb(6, 192, 6); } .status.yellow { background: yellow; } .status.red { background: red; } .table-responsive { width: 100%; overflow-x: auto; } .customer { display: flex; justify-content: space-between; align-items: center; padding: .5rem .7rem; } .info { display: flex; align-items: center; } .info img { border-radius: 50%; margin-right: 1rem; } .info h4 { font-size: .8rem; font-weight: 700; color: #222; } .info small { font-weight: 600; color: var(--text-grey); } .contact span { font-size: 1.2rem; display: inline-block; margin-left: .5rem; color: var(--main-color); } @media only screen and (max-width: 1200px) { .sidebar { width: 70px; } .sidebar .sidebar-brand, .sidebar li { padding-left: 1rem; text-align: center; } .sidebar li a { padding-left: 0rem; } .sidebar .sidebar-brand h2 span:last-child, .sidebar li a span:last-child { display: none; } .main-content { margin-left: 70px; } .main-content header { width: calc(100% - 70px); left: 70px; } } @media only screen and (max-width: 960px) { .cards { grid-template-columns: repeat(3, 1fr); } .recent-grid { grid-template-columns: 60% 40%; } } @media only screen and (max-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr); } .recent-grid { grid-template-columns: 100%; } .search-wrapper { display: none; } .sidebar { left: -100% !important; } header h2 { display: flex; align-items: center; } header h2 label { display: inline-block; text-align: center; background: var(--main-color); padding-right: 0rem; margin-right: 1rem; height: 40px; width: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center !important; } header h2 span { text-align: center; padding-right: 0rem; } header h2 { font-size: 1.1rem; } .main-content { width: 100%; margin-left: 0rem; } header { width: 100% !important; left: 0 !important; } #nav-toggle:checked+.sidebar { left: 0 !important; z-index: 100; width: 345px; } #nav-toggle:checked+.sidebar:hover { width: 345px; z-index: 200; } #nav-goggle:checked+.sidebar .sidebar-brand, #nav-toggle:checked+.sidebar:hover li { padding-left: 2rem; text-align: left; } #nav-goggle:checked+.sidebar li a { padding-left: 1rem; } #nav-goggle:checked+.sidebar .sidebar-brand h2 span:last-child, #nav-goggle:checked+.sidebar li a span:last-child { display: inline; } } @media only screen and (max-width: 560px) { .cards { grid-template-columns: 100%; } }

Related: See More

Rotating CSS Card
animated sinin and signup panel. animated login and registeration page, popup,
Register form, html bootstrap4 registration form card panel
Filter elements, sidebar filter panel bootstrap 4

Questions / Comments: