nicocedron · November 30, 2019 02:51
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="es">
 <head>
 	<meta charset="UTF-8">
 	<title>JQuery a JS</title>
 	<style>
 		*,*:before,*:after{
 			box-sizing: border-box;
 			margin: 0;
 			padding: 0;
 		}

 		body{
 			font-family: system-ui;
 		}

 		.container{
 			max-width: 1200px;
 			padding-left: 15px;
 			padding-right: 15px;
 		}

 		header{
 			background: #008dff;
 		}

 		header nav{
 			display: flex;
 		}

 		header nav a{
 			padding: 20px;
 			text-decoration: none;
 			color: #fff;
 		}

 		header .menu-mobile, header .close-menu{
 			display: none;
 		}

 		@media screen and (max-width: 768px){
 			header .menu-mobile, header .close-menu{
 				display: block;
 			}

 			header{
 				display: flex;
 				justify-content: flex-end;
 			}

 			header .menu-mobile{
 				padding: 20px;
 				color: white;
 			}

 			header .close-menu{
 				align-self: flex-end;
 				border-bottom: none;
 			}

 			header nav{
 				position: fixed;
 				height: 100vh;
 				width: 100%;
 				left: -100%;
 				top: 0;
 				z-index: 10;
 				background: white;
 				flex-direction: column;
 				transition: all 0.5s ease-out;
 			}

 			header nav.show{
 				left: 0;
 			}

 			header nav a{
 				color: #333;
 				border-bottom: 1px solid #dadada;
 			}
 		}
 	</style>

 </head>
 <body>

 	<header>
 		<div class="container">
 			<nav>
 				<a href="#" class="close-menu">[X]</a>
 				<a href="#">Inicio</a>
 				<a href="#">Nosotros</a>
 				<a href="#">Preguntas Frecuentes</a>
 				<a href="#">Contacto</a>
 			</nav>

 			<div class="menu-mobile">Menu</div>
 		</div>
 	</header>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<title>JQuery a JS</title>
	<style>
	,:before,*:after{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	body{
	font-family: system-ui;
	}

	.container{
	max-width: 1200px;
	padding-left: 15px;
	padding-right: 15px;
	}

	header{
	background: #008dff;
	}

	header nav{
	display: flex;
	}

	header nav a{
	padding: 20px;
	text-decoration: none;
	color: #fff;
	}

	header .menu-mobile, header .close-menu{
	display: none;
	}

	@media screen and (max-width: 768px){
	header .menu-mobile, header .close-menu{
	display: block;
	}

	header{
	display: flex;
	justify-content: flex-end;
	}

	header .menu-mobile{
	padding: 20px;
	color: white;
	}

	header .close-menu{
	align-self: flex-end;
	border-bottom: none;
	}

	header nav{
	position: fixed;
	height: 100vh;
	width: 100%;
	left: -100%;
	top: 0;
	z-index: 10;
	background: white;
	flex-direction: column;
	transition: all 0.5s ease-out;
	}

	header nav.show{
	left: 0;
	}

	header nav a{
	color: #333;
	border-bottom: 1px solid #dadada;
	}
	}
	</style>

	</head>
	<body>

	<header>
	<div class="container">
	<nav>
	<a href="#" class="close-menu">[X]</a>
	<a href="#">Inicio</a>
	<a href="#">Nosotros</a>
	<a href="#">Preguntas Frecuentes</a>
	<a href="#">Contacto</a>
	</nav>

	<div class="menu-mobile">Menu</div>
	</div>
	</header>

	</body>
	</html>