<?xml version="1.0" encoding="UTF-8"?> <!-- Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/XHtml.xhtml to edit this template --> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/> <h:outputStylesheet name="./css/default.css"/> <h:outputStylesheet name="./css/cssLayout.css"/> <title>TODO supply a title</title> <style> #top { height: 65px; background-color: #353535; /* Color de fondo para el top */ text-align: center; color: #B0B0B0; /* Texto blanco */ } body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #ffffff; /* Fondo blanco */ color: #000000; /* Texto negro */ font-size: 16px; /* Tamaño de fuente deseado */ } #top-container { align-content:center; justify-content: center; align-items: center; /* Esta propiedad centra el contenido verticalmente */ } #main-container { display: flex; font-size: 60px; /* Tamaño de fuente deseado */ flex: 1; /* Ocupa todo el espacio restante después del top */ /* Utiliza todo el ancho disponible */ } #left { background-color: #F4F4F4; width: 270px; /* Ancho fijo para el menú lateral */ flex-shrink: 0; /* No permitir que el menú lateral se encoja */ } #content { width: 100%; flex-grow: 1; /* Permite que el contenido crezca para ocupar el espacio disponible */ overflow-y: auto; /* Permite desplazamiento si el contenido es más grande que el contenedor */ padding: 20px; /* Espacio interno */ font-size: 60px; /* Tamaño de fuente deseado */ } .card { width: 100%; background-color: #F9F9F9; /* Color de fondo para el contenido */ padding: 20px; /* Espaciado interno */ border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Sombra */ } .left_content { padding: 20px; /* Espaciado interno */ color: #000000; /* Texto negro */ } </style> </head> <body> <div id="top" class="top"> <div class="top-container"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <a class="navbar-brand" href="#">INVENTARIO</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Iniciar sesión</a></li> <li><a href="#"> </a></li> </ul> </nav> </div> <form><p:commandButton value="AAAAAAAAAAAAAAS"></p:commandButton></form> </div> </body> </html>