Barras Panel Acordeon Botones Menus Menus logo Menu desplegable Menu adaptable Notificaciones Busqueda Ventana Modal Loguin Bloques Subir Etiquetas Formulario Sidebar Alertas Flotante cookies

BaseCss CDN

<!--Colocar entre <head> y </head> -->
<link rel="stylesheet" href="https://www.datoweb.com/basecss/css/base.css">

<!--Colocar antes del cierre body </body> -->
<script src="https://www.datoweb.com/basecss/js/base.js"></script>

Barras de progreso

50%

70%

90%

<div class="barra">
			<div class="barra-progreso barra-progreso-azul" style="width:50%">50%</div>
		</div>
		<div class="barra">
			<div class="barra-progreso barra-progreso-verde" style="width:70%">70%</div>
		</div>
		<div class="barra">
			<div class="barra-progreso barra-progreso-rojo" style="width:90%">90%</div>
</div>

Panel

Encabezado

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.

<div class="panel">
	<div class="panel-encabezado">Encabezado</div>
	<div class="panel-contenido">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.
	</div>
</div>

Acordeon

Encabezado 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.

Encabezado 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.

<div class="panel panel-acordeon">
	<div class="panel-encabezado">Encabezado 1</div>
	<div class="panel-contenido" style="display:block">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.
	</div>
</div>

<div class="panel panel-acordeon">
	<div class="panel-encabezado">Encabezado 2</div>
	<div class="panel-contenido">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.
	</div>
</div>

Botones

Grande Mediano Pequeño

<a href="#" class="boton boton-azul boton-grande">Grande</a>
<a href="#" class="boton boton-verde">Mediano</a>
<a href="#" class="boton boton-rojo boton-pequenio">Pequeño</a>

Menus

<nav class="menu">
	<ul>
		<li class="menu-activo"><a href="#">Item1</a></li>
		<li><a href="#">Item2</a></li>
		<li><a href="#">Item3</a></li>
		
		
	</ul>
</nav>

<nav class="menu menu-negro">
	<ul>
		<li class="menu-activo"><a href="#">Item1</a></li>
		<li><a href="#">Item2</a></li>
		<li><a href="#">Item3</a></li>
		
		
	</ul>
</nav>

Menu logo

<header>
	<nav class="menu">
		<a href="#" class="menu-logo">Logo</a>
		<ul>
			<li class="menu-activo"><a href="">Item1</a></li>
			<li><a href="">Item2</a></li>
			<li><a href="">Item3</a></li>
		</ul>
	</nav>
</header>

<header>
	<nav class="menu menu-negro">
		<a href="#" class="menu-logo">Logo</a>
		<ul>
			<li class="menu-activo"><a href="">Item1</a></li>
			<li><a href="">Item2</a></li>
			<li><a href="">Item3</a></li>
		</ul>
	</nav>
</header>

Menu desplegable

<nav class="menu">
	<div class="contenedor no-hidden">
		
		<ul>
			<li class="menu-activo"><a href="#">Item1</a></li>
			<li><a href="#">Item2</a></li>
			<li>
			
			<a onclick="menumas('menu-mas1');">Desplegar</a>
			<ul class="menu-mas" id="menu-mas1">
				<li><a href="">Subitem1</a></li>
				<li><a href="">Subitem2</a></li>
			</ul>
			</li>
		</ul>


	</div>
</nav>

Menu adaptable

<nav class="menu">
	<div class="menu-boton" id="menu1"></div>
	<div class="menu-lista" id="menu1">
		
	<ul>
		<li><a>Item1</a></li>
		<li><a>Item2</a></li>
		<li><a>Item3</a></li>
		<li><a>Item4</a></li>
	</ul>
	</div>

</nav>

Notificaciones

10 Mensajes

<a class="boton boton-verde"><span class="notificacion">10</span> Mensajes</a>

Buscador

<form class="buscador">
	<input type="text" class="buscador-campo" placeholder="Buscar..">
	<input type="submit" class="buscador-boton" value="">		
</form>

Ventana modal

Modal 1

<a onclick="modal('modal1');" class="boton boton-azul">Modal 1</a>

<div class="modal" id="modal1">
	<div class="flotante" id="modal1">
		<div class="flotante-encabezado">
		<span class="flotante-cerrar" id="modal1">&times;</span>
		<h4>Modal 1</h4>
		</div>
				<div class="flotante-contenido">
				Lorem ipsum dolor sit amet.
				</div>
		<div class="flotante-pie">
		<a class="boton boton-rojo" onclick="modal('modal1');">Cerrar</a>
		</div>
	</div>
<div class="flotante-fondo" id="modal1"></div>
</div>

Loguin

<form class="formulario">
	<div class="formulario-grupo">
		<label for="usuario">Usuario</label>
		<input type="text" name="usuario" id="usuario" placeholder="Usuario...">
	</div>

	<div class="formulario-grupo">
		<label for="password">Password</label>
		<input type="password" name="password" id="password" placeholder="Password...">
	</div>

	<div class="formulario-grupo">
		<div class="recordarme">
			<input type="checkbox" id="recordar" name="recordar"> <label for="recordar">Recordarme</label>
		</div>
	</div>

	<div class="formulario-grupo">
		<input type="submit" value="Iniciar" class="boton boton-verde derecha">
	</div>
</form>

Bloques

<div class="columna columna-m-6 columna-g-3">
	<img src="img/1.png" alt="imagen1">
</div>
<div class="columna columna-m-6 columna-g-3">
	<img src="img/2.png" alt="imagen2">
</div>
<div class="columna columna-m-6 columna-g-3">
	<img src="img/3.png" alt="imagen3">
</div>
<div class="columna columna-m-6 columna-g-3">
	<img src="img/4.png" alt="imagen4">
</div>

Subir top

<div class="subir"></div>
<div class="subir subir-negro"></div>

Etiquetas

Grande Normal Pequeño

<span class="etiqueta etiqueta-grande etiqueta-azul">Grande</span>
<span class="etiqueta etiqueta-verde">Normal</span>
<span class="etiqueta etiqueta-pequenia etiqueta-rojo">Peque&ntilde;o</span>

Formulario

<form class="formulario">
	
	<div class="formulario-grupo">
		<label for="campo1">Campo1</label>
		<input type="text" name="campo1" id="campo1" placeholder="Campo1...">
	</div>

	<div class="formulario-grupo">
		<label for="campo2">Campo2</label>
		<input type="text" name="campo2" id="campo2" placeholder="Campo2...">
	</div>

	<div class="formulario-grupo">
		<label for="campo3">Campo3</label>
		<input type="text" name="campo3" id="campo3" placeholder="Campo3...">
	</div>

	<div class="formulario-grupo">
		<label for="mensaje">Mensaje</label>
		<textarea name="mensaje" id="mensaje" placeholder="Mensaje..."></textarea>
	</div>

	<div class="formulario-grupo">
		<input type="button" class="boton boton-azul derecha" value="Enviar formulario">
	</div>

</form>

Sidebar

Categorias

<div class="categorias">
  <h3>Categorias</h3>
  <ul>
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>

Alertas

Verde

Pequeña

Roja

<div class="alerta alerta-verde">Verde</div>
<div class="alerta alerta-pequenia">Pequeña</div>
<div class="alerta alerta-rojo">Roja</div>

Cookies

<div class="cookies">
	<span>Utilizamos cookies propias y de terceros!</span>
	<a href="#" class="boton boton-pequenio boton-verde derecha">Aceptar</a>
</div>