Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Mensaje iniciado por: R3LI4NT en Octubre 09, 2021, 05:15:10 am

Título: Simple Panel Admin [HTML] [CSS]
Publicado por: R3LI4NT en Octubre 09, 2021, 05:15:10 am
(https://i.ibb.co/26XFTWp/Captura-de-pantalla-337.png)

(https://i.ibb.co/rF8HTN8/Captura-de-pantalla-338.png)

Código HTML:

Código: Text
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Panel Admin
  9.     </title>
  10.     <link rel="stylesheet" href="css/style.css">
  11.     <link rel="stylesheet" href="css/media_query.css">
  12.     <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  13.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  14. </head>
  15. <body>
  16.     <header>
  17.         <div class="header">
  18.             <input type="search" class="icono-placeholder" placeholder="   Buscar">
  19.             <i class='bx bx-bell'></i>
  20.             <img src="img/user.png" alt="">
  21.             <button>
  22.                 CUENTA
  23.             </button>
  24.         </div>
  25.     </header>
  26.  
  27.     <nav class="nav-container">
  28.         <div class="publico">
  29.             <a href="#"><i class='bx bxs-dashboard'></i></i><span>Tablero</span></a>
  30.             <a href="#"><i class='bx bxs-archive-in'></i></i><span>Archivos</span></a>
  31.             <a href="#"><i class='bx bxs-heart'></i></i><span>Favoritos</span></a>
  32.             <a href="#"><i class='bx bxs-user'></i></i><span>Equipo</span></a>
  33.             <a href="#"><i class='bx bxs-message'></i></i></i></i><span>Mensajes</span></a>
  34.             <a href="#"><i class='bx bxs-cog'></i><span>Configuración</span></a>
  35.         </div>
  36.         <div class="configuracion">
  37.             <a href="#"><i class='bx bx-lock-alt'></i></i><span>Seguridad</span></a>
  38.             <a href="#"><i class='bx bx-log-out'></i></i><span>Salir</span></a>
  39.         </div>
  40.     </nav>
  41.  
  42.     <section class="contenido">
  43.         <div class="card">
  44.             <div class="numero">
  45.                 <h5>60</h5>
  46.             </div>
  47.             <div class="titulo">
  48.                 <p>Proyectos</p>
  49.             </div>
  50.             <i class='bx bx-notepad'></i>
  51.         </div>
  52.  
  53.         <div class="card2">
  54.             <div class="numero">
  55.                 <h5>36</h5>
  56.             </div>
  57.             <div class="titulo">
  58.                 <p>Pedidos</p>
  59.             </div>
  60.             <i class='bx bx-cart'></i>
  61.         </div>
  62.  
  63.         <div class="card3">
  64.             <div class="numero">
  65.                 <h5>$7k</h5>
  66.             </div>
  67.             <div class="titulo">
  68.                 <p>Saldo</p>
  69.             </div>
  70.             <i class='bx bx-dollar'></i>
  71.         </div>
  72.  
  73.         <div class="visitas-container">
  74.             <div class="semi-circle-visitas" style="--percentage:50;--fill:#006eba;"><p>VISITAS</p></div>
  75.         </div>
  76.  
  77.         <div class="productos-container">
  78.             <div class="semi-circle-productos" style="--percentage:80;--fill:#006eba;"><p>PRODUCTOS</p></div>
  79.         </div>
  80.  
  81.         <div class="ganancias-container">
  82.             <div class="semi-circle-ganancias" style="--percentage:35;--fill:#006eba;"><p>GANANCIAS</p></div>
  83.         </div>
  84.     </section>
  85. </body>
  86.  
  87. </html>
  88.  


Código CSS:

Código: CSS
  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
  2. @import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
  3.  
  4. * {
  5.     margin: 0;
  6.     padding: 0;
  7.     box-sizing: border-box;
  8.     list-style: none;
  9.     text-decoration: none;
  10.     font-family: 'Poppins', sans-serif;
  11. }
  12.  
  13. body {
  14.     height: 100vh;
  15.     width: 100%;
  16.     background: #ecf0f1;
  17.     display: flex;
  18.     flex-direction: column;
  19. }
  20.  
  21. .nav-container {
  22.     width: 200px;
  23.     height: 100vh;
  24.     border-radius: 0 0px 20px 0;
  25.     background: #11101C;
  26. }
  27.  
  28. .nav-container div {
  29.     margin: 50px 0;
  30.     display: flex;
  31.     gap: 10px;
  32.     align-items: center;
  33.     justify-content: space-between;
  34.     flex-flow: column nowrap;
  35.     padding: 10px;
  36. }
  37.  
  38. .publico {
  39.     padding-bottom: 5rem !important;
  40. }
  41.  
  42. .configuracion {
  43.     border-top: 1px solid #23213A;
  44. }
  45.  
  46. .nav-container a {
  47.     position: relative;
  48.     width: 100%;
  49.     height: 3rem;
  50.     border-radius: 10px;
  51.     color: #ddd;
  52.     font-size: 15px;
  53.     cursor: pointer;
  54.     transition: 0.2s;
  55.     line-height: 50px;
  56. }
  57.  
  58. .nav-container i {
  59.     padding-right: 18px;
  60.     padding-left: 10px;
  61.     position: relative;
  62.     font-size: 22px;
  63.     line-height: 40px;
  64. }
  65.  
  66. .nav-container a:hover {
  67.     background: #1A1830;
  68. }
  69.  
  70. .nav-container a:active {
  71.     border:1px solid #ddd;
  72. }
  73.  
  74. header {
  75.     width: 100%;
  76.     display: flex;
  77.     height: 65px;
  78.     position: absolute;
  79.     background: #11101C;
  80. }
  81.  
  82. .icono-placeholder {
  83.     font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
  84.     font-size: 15px;
  85.     padding: 0 5px;
  86. }
  87.  
  88. .header {
  89.     justify-content: center;
  90.     display: flex;
  91.     align-items: center;
  92.     width: 100%;
  93. }
  94.  
  95. input {
  96.     height: 40px;
  97.     background: #2D2B43;
  98.     width: 250px;
  99.     outline: none;
  100.     border-radius: 10px;
  101.     border: none;
  102.     color: #fff;
  103.     font-family: 'Poppins', sans-serif;
  104.     box-shadow: inset 0 0 5px #000;
  105.     border: 1px solid #23213A;
  106. }
  107.  
  108. .header i {
  109.     color: #ddd;
  110.     font-size: 25px;
  111.     cursor: pointer;
  112.     position: absolute;
  113.     right: 220px;
  114. }
  115.  
  116. .header i:active {
  117.     color: #CF2B2B;
  118. }
  119.  
  120. .header img {
  121.     height: 35px;
  122.     width: 35px;
  123.     position: absolute;
  124.     right: 155px;
  125.     border-radius: 50%;
  126.     background: transparent;
  127.     padding: 3px;
  128.     cursor: pointer;
  129.     border: 1px solid #ccc;
  130. }
  131.  
  132. .header img:active {
  133.     border:1px solid #CF2B2B;
  134. }
  135.  
  136. .header button {
  137.     position: absolute;
  138.     height: 35px;
  139.     width: 90px;
  140.     right: 30px;
  141.     background: #CF2B2B;
  142.     color: #fff;
  143.     border: none;
  144.     outline: none;
  145.     border-radius: 7px;
  146.     font-weight: bold;
  147.     letter-spacing: 1px;
  148.     cursor: pointer;
  149.     box-shadow: inset 0 0 4px #000;
  150.     border: 1px solid #A51A1A;
  151.     transition: 0.2s;
  152. }
  153.  
  154. .header button:hover {
  155.     transform: scale(1.1);
  156. }
  157.  
  158. .card {
  159.     position: absolute;
  160.     background: #fff;
  161.     width: 300px;
  162.     height: 150px;
  163.     top: 120px;
  164.     left: 270px;
  165.     box-shadow: 0 0 10px rgba(0,0,0,.3);
  166.     font-family: 'Poppins', sans-serif;
  167.     transition: 0.2s;
  168.     cursor: pointer;
  169. }
  170.  
  171. .card:hover {
  172.     box-shadow: none;
  173.     transform: scale(1.1);
  174. }
  175.  
  176. .card .numero {
  177.     position: absolute;
  178. }
  179.  
  180. .card .numero h5{
  181.     padding: 35px 30px;
  182.     font-size: 35px;
  183. }
  184.  
  185. .card .titulo {
  186.     position: absolute;
  187. }
  188.  
  189. .card .titulo p {
  190.     padding: 90px 30px;
  191.     color: rgba(0,0,0,.7);
  192.     font-weight: bold;
  193. }
  194.  
  195. .card i {
  196.     position: absolute;
  197.     padding: 50px 200px;
  198.     font-size: 50px;
  199.     color: #CF2B2B;
  200. }
  201.  
  202. .card2 {
  203.     position: absolute;
  204.     background: #fff;
  205.     width: 300px;
  206.     height: 150px;
  207.     top: 120px;
  208.     left: 635px;
  209.     box-shadow: 0 0 10px rgba(0,0,0,.3);
  210.     font-family: 'Poppins', sans-serif;
  211.     transition: 0.2s;
  212.     cursor: pointer;
  213. }
  214.  
  215. .card2:hover {
  216.     box-shadow: none;
  217.     transform: scale(1.1);
  218. }
  219.  
  220. .card2 .numero {
  221.     position: absolute;
  222. }
  223.  
  224. .card2 .numero h5{
  225.     padding: 35px 30px;
  226.     font-size: 35px;
  227. }
  228.  
  229. .card2 .titulo {
  230.     position: absolute;
  231. }
  232.  
  233. .card2 .titulo p {
  234.     padding: 90px 30px;
  235.     color: rgba(0,0,0,.7);
  236.     font-weight: bold;
  237. }
  238.  
  239. .card2 i {
  240.     position: absolute;
  241.     padding: 50px 200px;
  242.     font-size: 50px;
  243.     color: #CF2B2B;
  244. }
  245.  
  246.  
  247. .card3 {
  248.     position: absolute;
  249.     background: #CF2B2B;
  250.     width: 300px;
  251.     height: 150px;
  252.     top: 120px;
  253.     left: 1000px;
  254.     box-shadow: 0 0 10px rgba(0,0,0,.7);
  255.     font-family: 'Poppins', sans-serif;
  256.     transition: 0.2s;
  257.     cursor: pointer;
  258. }
  259.  
  260. .card3:hover {
  261.     box-shadow: none;
  262.     transform: scale(1.1);
  263. }
  264.  
  265. .card3 .numero {
  266.     position: absolute;
  267. }
  268.  
  269. .card3 .numero h5{
  270.     padding: 35px 30px;
  271.     font-size: 35px;
  272.     color: #fff;
  273. }
  274.  
  275. .card3 .titulo {
  276.     position: absolute;
  277. }
  278.  
  279. .card3 .titulo p {
  280.     padding: 90px 30px;
  281.     color: rgba(255,255,255,.9);
  282.     font-weight: bold;
  283. }
  284.  
  285. .card3 i {
  286.     position: absolute;
  287.     padding: 50px 0;
  288.     margin: 0 200px;
  289.     font-size: 50px;
  290.     color: #fff;
  291. }
  292.  
  293.  
  294.  
  295. .visitas-container {
  296.     margin: 0 35px;
  297.     position: absolute;
  298.     top: 400px;
  299.     left: 270px;
  300. }
  301.  
  302.  
  303. .semi-circle-visitas {
  304.     width: 250px;
  305.     height: 125px;
  306.     --percentage:0;
  307.     --fill:#404040;
  308.     position: relative;
  309.     color: #fff;
  310.     font-weight: bold;
  311.     font-size: 23px;
  312.     display: flex;
  313.     align-items: flex-end;
  314.     justify-content: center;
  315.     box-sizing: border-box;
  316.     overflow: hidden;
  317. }
  318.  
  319. .semi-circle-visitas::after {
  320.     content: '';
  321.     position: absolute;
  322.     left: 0;
  323.     top: 0;
  324.     width: 250px;
  325.     height: 250px;
  326.     border: 30px solid;
  327.     box-sizing: border-box;
  328.     border-color: #404040 #404040 #21AF08 #21AF08;
  329.     border-radius: 50%;
  330.     transform: rotate( calc(1deg * ( -45 + var(--percentage) * 1.8 ) ));
  331.     animation: animation-per 2s forwards;
  332. }
  333.  
  334. @keyframes animation-per {
  335.     0% {
  336.         transform: rotate(-45deg);
  337.     }
  338.     50% {
  339.         transform: rotate(135deg);
  340.     }
  341. }
  342.  
  343. .semi-circle-visitas p {
  344.     color: #21AF08;
  345.     font-weight: 600;
  346. }
  347.  
  348.  
  349. .productos-container {
  350.     margin: 0 35px;
  351.     position: absolute;
  352.     top: 400px;
  353.     left: 635px;
  354. }
  355.  
  356.  
  357. .semi-circle-productos {
  358.     width: 250px;
  359.     height: 125px;
  360.     --percentage:0;
  361.     --fill:#404040;
  362.     position: relative;
  363.     color: #fff;
  364.     font-weight: bold;
  365.     font-size: 23px;
  366.     display: flex;
  367.     align-items: flex-end;
  368.     justify-content: center;
  369.     box-sizing: border-box;
  370.     overflow: hidden;
  371. }
  372.  
  373. .semi-circle-productos::after {
  374.     content: '';
  375.     position: absolute;
  376.     left: 0;
  377.     top: 0;
  378.     width: 250px;
  379.     height: 250px;
  380.     border: 30px solid;
  381.     box-sizing: border-box;
  382.     border-color: #404040 #404040 #CF2B2B #CF2B2B;
  383.     border-radius: 50%;
  384.     transform: rotate( calc(1deg * ( -45 + var(--percentage) * 1.8 ) ));
  385.     animation: animation-per 2s forwards;
  386. }
  387.  
  388. @keyframes animation-per {
  389.     0% {
  390.         transform: rotate(-45deg);
  391.     }
  392.     50% {
  393.         transform: rotate(135deg);
  394.     }
  395. }
  396.  
  397. .semi-circle-productos p {
  398.     color: #CF2B2B;
  399.     font-weight: 600;
  400. }
  401.  
  402.  
  403.  
  404. .ganancias-container {
  405.     margin: 0 35px;
  406.     position: absolute;
  407.     top: 400px;
  408.     left: 1000px;
  409. }
  410.  
  411.  
  412. .semi-circle-ganancias {
  413.     width: 250px;
  414.     height: 125px;
  415.     --percentage:0;
  416.     --fill:#404040;
  417.     position: relative;
  418.     color: #fff;
  419.     font-weight: bold;
  420.     font-size: 23px;
  421.     display: flex;
  422.     align-items: flex-end;
  423.     justify-content: center;
  424.     box-sizing: border-box;
  425.     overflow: hidden;
  426. }
  427.  
  428. .semi-circle-ganancias::after {
  429.     content: '';
  430.     position: absolute;
  431.     left: 0;
  432.     top: 0;
  433.     width: 250px;
  434.     height: 250px;
  435.     border: 30px solid;
  436.     box-sizing: border-box;
  437.     border-color: #404040 #404040 #0468CB #0468CB;
  438.     border-radius: 50%;
  439.     transform: rotate( calc(1deg * ( -45 + var(--percentage) * 1.8 ) ));
  440.     animation: animation-per 2s forwards;
  441. }
  442.  
  443. @keyframes animation-per {
  444.     0% {
  445.         transform: rotate(-45deg);
  446.     }
  447.     50% {
  448.         transform: rotate(135deg);
  449.     }
  450. }
  451.  
  452. .semi-circle-ganancias p {
  453.     color: #0468CB;
  454.     font-weight: 600;
  455. }
  456.  

Código Media Query CSS:

Código: CSS
  1. @media screen and (max-width:700px) {
  2.     .nav-container {
  3.         width: 160px;
  4.         height: 100vh;
  5.     }
  6.     .nav-container a {
  7.         font-size: 13px;
  8.     }
  9.     .nav-container i {
  10.         padding-right: 10px;
  11.         padding-left: 5px;
  12.     }
  13.  
  14.     .card {
  15.         width: 260px;
  16.         height: 150px;
  17.         top: 120px;
  18.         left: 180px;
  19.     }
  20.  
  21.     .card i {
  22.         padding: 50px 180px;
  23.     }
  24.  
  25.     .card2 {
  26.         width: 260px;
  27.         height: 150px;
  28.         top: 320px;
  29.         left: 180px;
  30.     }
  31.  
  32.     .card2 i {
  33.         padding: 50px 180px;
  34.     }
  35.    
  36.     .card3 {
  37.         width: 260px;
  38.         height: 150px;
  39.         top: 520px;
  40.         left: 180px;
  41.     }
  42.  
  43.     .card3 i {
  44.         padding: 50px 180px;
  45.     }
  46.    
  47.     input {
  48.         position: relative;
  49.         right: 110px;
  50.         width: 230px;
  51.     }
  52.     .header img {
  53.         position: absolute;
  54.         right: 140px;
  55.     }
  56.  
  57.     .header i {
  58.         position: absolute;
  59.         right: 190px;
  60.     }
  61.     .visitas-container {
  62.         visibility: hidden;
  63.     }
  64.     .productos-container {
  65.         visibility: hidden;
  66.     }
  67.     .ganancias-container {
  68.         visibility: hidden;
  69.     }
  70. }
  71.  

Como habrán notado, he reutilizado el menú de navegación y la skill-bar que había publicado anteriormente en el foro.
Menú: https://github.com/R3LI4NT/navegation-bar
Skill-bar: https://github.com/R3LI4NT/skills-bar

Recuerden especificar la ruta de sus estilos en las siguientes líneas del HTML:

Código: Text
  1.     <link rel="stylesheet" href="css/style.css">
  2.     <link rel="stylesheet" href="css/media_query.css"> <!-- el "css" es la carpeta -->
  3.  


#R3LI4NT