"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

Material Dashboard Pro Angular
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: