menu 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Darkmode con Javascript</title>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<div class="contenedor">
<nav>
<a class="logotipo" href="http://action_profile"><span><i class="fas fa-users"></i></span></a>
<div class="enlaces">
<a href="http://action_profile"><span><i class="fas fa-user"></i></span></a>
<a href="http://action_notifications"><span><i class="fas fa-bell"></i></span></a>
<a href="http://action_share"><span><i class="fas fa-share-alt"></i></span></a>
<button class="switch" id="switch">
<span><i class="fas fa-sun"></i></span>
<span><i class="fas fa-moon"></i></span>
</button>
</div>
</nav>
</div>
</body>
<style>
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #F1F1F1;
font-family: 'Roboto', sans-serif;
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
body.dark {
background: #111111;
}
a {
color: #222222;
text-decoration: none;
font-weight: 500;
}
.contenedor {
max-width: 1000px;
width: 100%;
margin: auto;
padding: 0px 0;
position: fixed;
}
nav {
background: #FEFEFE;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 5px 10px;
-webkit-transition: .3s ease all;
transition: .3s ease all;
-webkit-box-shadow: 10px 10px 20px rgba(170, 170, 170, 0.16);
box-shadow: 10px 10px 20px rgba(170, 170, 170, 0.16);
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
body.dark nav {
background: #222222;
-webkit-box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.16);
}
body.dark nav a {
color: #C8C8C8;
}
body.dark nav a:hover {
color: #FEFEFE;
}
nav .enlaces {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
nav .enlaces a {
margin-right: 10px;
}
nav .enlaces a:hover {
color: #707070;
}
.switch {
background: #343D5B;
border-radius: 1000px;
border: none;
position: relative;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
outline: none;
}
.switch::after {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
background: #F1F1F1;
top: 0;
left: 0;
right: unset;
border-radius: 100px;
-webkit-transition: .3s ease all;
transition: .3s ease all;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
}
.switch.active {
background: orange;
color: #000;
}
.switch.active::after {
right: 0;
left: unset;
}
.switch span {
width: 30px;
height: 30px;
line-height: 30px;
display: block;
background: none;
color: #fff;
}
</style>
<script>
const btnSwitch = document.querySelector('#switch');
btnSwitch.addEventListener('click', () => {
document.body.classList.toggle('dark');
btnSwitch.classList.toggle('active');
// Guardamos el modo en localstorage.
if(document.body.classList.contains('dark')){
localStorage.setItem('dark-mode', 'true');
} else {
localStorage.setItem('dark-mode', 'false');
}
});
// Obtenemos el modo actual.
if(localStorage.getItem('dark-mode') === 'true'){
document.body.classList.add('dark');
btnSwitch.classList.add('active');
} else {
document.body.classList.remove('dark');
btnSwitch.classList.remove('active');
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="Amardeep Kesharwani">
<title>Story Book</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<!-- Amardeep Kesharwani -->
</div>
<section class="wish-list" >
</section>
</div>
<div class="fragment home show">
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_8mwuxvbd.json" background="transparent" speed="1" style="width: 100%; height: 300px;" loop autoplay></lottie-player>
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title></head>
<div id="myskills">
<div id="mm1">
<div id="m1">¡Bienvenido al CHAT!<br/>Este grupo esta realizado para programadores con el objetivo de compartir información e interactuar con nuevas ideas! sobre el desarrollo móvil y ayudarnos a resolver dudas del mismo.</div>
<style>
#myskills{
height:100%;
width:100%;
position:relative ;
color:white;
display:flex;
flex-direction:column;
text-align:center;
}
#mm1{
height:100;
width:100%;
display:grid;
place-items:center;
margin-top:1px;
}
#m1{
height:100%;
width:90%;
color:#000;
font-size:18px;
font-family: 'Texturina', serif;
background: #c5c4fb;
border-radius: 10px;
box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),
inset 3px 15px 45px rgba(255,255,255,0.1),
inset -1px -1px 2px rgba(0,0,0,0.5),
inset -3px -15px 45px rgba(0,0,0,0.2),
1px 5px 30px -4px rgba(0,0,0,1);
font-family: sans-serif;
}
</style>
</div>
<section class="wish-list" >
</section>
<button id="neonShadow"><span>UNIRSE AL CHAT</span></button>
</section>
</section>
<style>
*{
padding:0px;
margin:auto;
box-sizing:border-box;
outline:none;
font-weight: 400;
align-items:center;
justify-content:center;
}
#neonShadow{
height:50px;
width:200px;
background:#ffbacc;
border-radius:50px;
display:flex;
align-items:center;
justify-content:center;
}
</style>
<!DOCTYPE html>
</div>
<!-- FOLLOW -->
</div>
<div class="fragment bookmark" >
<h2 class="list-title" >¿Qué es AppCreator24?</h2>
<section>
<img class="size-full wp-image-422252 aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKTJZcCX7gO7roj6ew0rrZ_5bfroLpxvxZCkRFO5g9n52IhD3g-i1qrA82o_tb4di3fjJ4kodoYzhzVmWTyJ2XVai4jZHPDJOkzxcqjDG_BgGj0Ha8Z81WCkVQ-aQ6B-ehic4l5qqIC8t7/s16000/image.png" alt="" width="100%" height="100%">
<p>AppCreator24 es una plataforma web totalmente gratuita, sin membresías ni costes ocultos, para crear apps Android sin tener que escribir ni una sola línea de código.<br/><br/>
Las aplicaciones creadas con AppCreator24 están listas para ser publicadas en Google Play y el resto de mercados de aplicaciones alternativos para Android.<br/><br/>
Nos da la posibilidad de monetizar nuestras aplicaciones, podemos incluir anuncios en nuestras apps de forma muy sencilla o simplemente vender nuestras apps en los mercados de aplicaciones.<br/><br/>
Con AppCreator24 cualquiera, no necesita tener ningún tipo de conocimientos en programación, puede crear espectaculares aplicaciones Android.<br/><br/>
Su uso es tan sencillo, además ofrece explicaciones detalladas y ejemplos diversos, que si sabes escribir con el teclado ya puedes crear aplicaciones y juegos para Android.<br/><br/>
Estas aplicaciones se adaptan perfectamente a las diferentes resoluciones de teléfonos inteligentes y tablets con Android.<br/>
<h2 class="list-title" >Características de AppCreator24</h2>
<p>Vamos a conocer las principales características de AppCreator24, antes conocido como Android Creator, la plataforma online completamente gratuita para crear apps Android sin tener que programar.<br/><br/>
✫Página completamente gratuita para crear aplicaciones para Android.<br/><br/>
✫No se necesitan conocimientos de programación y crear apps es realmente sencillo.<br/><br/>
✫Permite crear la app de tu blog, sitio web, tienda online, emisora de radio, comercio, empresa, etc.<br/><br/>
✫Puedes crear la app de un restaurante, hotel, peluquería, taller, emisora, etc.<br/><br/>
✫Perfecta para crear apps de tipo chat y red social.<br/><br/>
✫Podemos usarla para crear todo tipo de aplicaciones, solo hace falta un poco de imaginación y creatividad.<br/><br/>
✫También es posible la creación de juegos de tipo Quiz.<br/><br/>
✫Incluso puedes crear una comunidad de juegos clásicos y arcade, con ranking de puntuaciones para los usuarios.<br/><br/>
✫Otra de sus posibilidades es la creación de apps de stickers para WhatsApp.<br/><br/>
✫Posibilidad de monetizar nuestras apps con diferentes tipos de anuncios (banner, intersticial, nativo, vídeo bonificado): AdMob, Appnext, Facebook, StartApp y más.<br/><br/>
✫Envío de notificaciones push sin ninguna limitación de número o mensajes.
Personaliza completamente tus apps: estilo, tema, menús, iconos, fuentes de texto, etc.<br/><br/>
✫Las aplicaciones creadas con esta plataforma están listas para ser publicadas en Google Play y otros mercados de aplicaciones.<br/><br/>
<h3 class="list-title" >A la hora de exportar nuestra app para publicarla en Google Play, o cualquier otro market Android, es posible exportarla como un archivo apk o aab.</h3>
</p>
<p>
<hr>
<p><p>
<hr>
<p><p>
<hr>
<p>
</section>
</div>
<div class="fragment about">
<section>
<h2 class="list-title" >Definición de CSS - ¿Qué son las hojas de estilo o cascading style sheets?</h2>
<img class="size-full wp-image-422252 aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWK3-6otFYqilpTZT7mJOeLDe8SyJMyRgbVJE0sSmSGMhB0XdT9SWDyb4n9sCCsp6UCl9SRY1SVThkaAmHrswoVpWsvc9cRxI0VrSqXxDqybRA4ppgJI9dEup8Ko5XjLzKul3uYhX-Euwk/s320/img_1.png" alt="" width="100%" height="100%">
<p>CSS es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro contenido HTML, por ejemplo, establecer colores de fondo y tipos de letra, y distribuir nuestro contenido en múltiples columnas.<br/>
<h2 class="list-title" >¿Para que sirve?</h2>
<p>CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.<br>
<h2 class="list-title" >¿Cómo funciona?</h2>
<p>El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.<br/>
<p>Selector
Ejemplo:<br/>
h2 {color: green;}<br/>
h2 ---> es el selector<br/>
{color: green;} ---> es la declaración<br/>
color ---> es la propiedad o atributo<br/>
green ---> es el valor<br/><br/>
Selector<br/>
El Selector especifica que elementos HTML van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo.<br/><br/>
Declaración<br/>
La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.<br/><br/>
Propiedad o Atributo y Valor<br/>
Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento asignándosele un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño..., es decir, especifican qué aspecto del selector se va a cambiar.<br>
<h3 class="list-title" >Tres tipos de estilos</h3>
<h2 class="list-title" >Hoja de Estilo Externa</h2>
<p>La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el código HTML al cal estar vinculado a través del elemento link, que debe ir situado en la sección head. Es la manera de programar ms eficiente, ya que separa completamente las reglas de formato para la página HTML de la estructura básica de la página.<br/>
<h2 class="list-title" >Hoja de Estilo Interna</h2>
<p>La Hoja de Estilo Interna est incorporada a un documento HTML, a través del elemento style dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML.<br/>
<h2 class="list-title" >Estilo en Línea</h2>
<p>El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro de la sección body con el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido de la presentación.<br/>
<h3 class="list-title" >TIP: Se puede escribir CSS y JavaScript dentro de HTML, los profesionales normalmente escriben esto por separado.</h3>
</p>
<p>
<hr>
<p><p>
<hr>
<p><p>
<hr>
<p>
</section>
</div>
<div class="fragment pide" >
<h2 class="list-title" >¿Qué es js?</h2>
<section>
<img class="size-full wp-image-422252 aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3sZDl4J6_TE4eL_HMm5YkDcCHH61L_Ou9IWtfF07O5onyRD7tlTFxZ0dpsza6vCHPXWxAfMJBqMXdHvc3nG8Le_n7lH-hHdAsTy3g6nzKAoyaEePRCLxR4Z5roDZRG2I48t9PNdykYJsd/s320/img_0.png" alt="" width="100%" height="100%">
<p>JavaScript es un lenguaje de secuencias de comandos que te permite crear contenido de actualización dinámica, controlar multimedia, animar imágenes y prácticamente todo lo demás. (Está bien, no todo, pero es sorprendente lo que puedes lograr con unas pocas líneas de código JavaScript).<br/>
<h3 class="list-title" >TIP: Se puede escribir CSS y JavaScript dentro de HTML, los profesionales normalmente escriben esto por separado.</h3>
</p>
<p>
<hr>
<p><p>
<hr>
<p><p>
<hr>
<p>
</section>
</div>
</body>
</html>
</div>
</div>
<footer class="footer" >
<button class="home-btn" >
<span> <i class="fas fa-comments"></i></span>
<h4>chat</h4>
</button>
<button class="bookmark-btn">
<span> <i class="fas fa-info-circle"></i></span>
<h4>Info</h4>
</button>
<button class="about-btn">
<span> <i class="fab fa-css3-alt"></i></span>
<h4>css</h4>
</button>
<button class="pide-btn">
<span> <i class="fab fa-js"></i></span>
<h4>js</h4>
</button>
</footer>
</main>
<!-- Amardeep Kesharwani -->
</div>
</div>
<div class="toast" ></div>
<!-- script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const stories = [
];
let index = 1;
let story = {};
let ath, dn;
$(document).ready(function (){
$(".home-btn").click(function(){
$(".bookmark, .about, .pide").hide();
$(".home").fadeIn()
});
$(".bookmark-btn").click(function(){
$(".home, .about, .pide").hide();
$(".bookmark").fadeIn();
setBookMark();
});
$(".about-btn").click(function(){
$(".home,.bookmark, .pide").hide();
$(".about").fadeIn()
});
$(".pide-btn").click(function(){
$(".home,.bookmark, .about").hide();
$(".pide").fadeIn()
});
});
function setBook() {
stories.forEach(book => addBook(book));
}
function addBook(book) {
const div = `
<div class="book" data-id="${book.id}">
<div class="book__thumbnail" >
<img src="${book.thumbnail}" alt="">
</div>
<p>${book.title}</p>
</div>
`;
$(".wish").click(function() {
index = $(this).attr("data-id");
story = stories.find(s => s.id == index);
openStory();
})
}
function makeToast(msg) {
$('.toast').fadeIn();
$('.toast').text(msg);
setTimeout(() => $('.toast').fadeOut(),2500);
}
setBook()
</script>
</body>
<style>
:root {
--primary:#14b5ff;
--white:#ffffff;
--dark:#333333;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight:300;
line-height:1.4;
font-size:16px;
}
a,a:hover {
text-decoration:none;
}
main {
max-width:100%;
margin:auto;
}
button {
border:none;
outline:none;
background:#fff;
}
.header {
position:fixed;
height:50px;
width:100%;
background:#666;
background: linear-gradient(180deg,#3da1ff00,60%, #3da1ff);
background-size:cover;
background-position:center 90%;
transform:rotate(180deg);
display:flex;
align-items:flex-end;
justify-content:flex-end;
}
.header-content {
transform:rotate(-180deg);
padding:0px;
color:#000;
line-height:1.2;
font-size:14px;
}
.footer {
position:fixed;
bottom:0;
left:50%;
width:100%;
max-width:100%;
height:60px;
transform:translateX(-50%);
background:#054563;
display:flex;
justify-content: space-between;
align-items: center;
padding:0 15px;
z-index:6;
border-top-right-radius:30px;
border-top-left-radius:30px;
}
.footer button {
background:transparent;
width:30%;
color:#fff;
cursor:pointer;
}
}
.list-title {
padding:0px;
}
.book-list, .wish-list {
padding:20px;
display:grid;
grid-template-columns:1fr 1fr;
grid-gap:15px;
margin-bottom:0px;
}
.book {
position:relative;
height:190px;
border-radius:15px;
overflow:hidden;
text-align:center;
background: linear-gradient(45deg,#14b5ff,#0088ff);
color:#fff;
padding:15px;
box-shadow: 2px 7px 5px rgb(0 0 0 / 30%), 0px -4px 10px rgb(225 225 225 / 30%);
}
.about img {
margin-bottom: 20px;
}
.action {
margin-top:0px;
transform:translateY(20px);
}
.action span {
display:inline-block;
height:50px;
width:50px;
background:#3da1ff;
border-radius:50%;
color:#fff;
font-size:30px;
padding:10px;
margin:0 15px;
box-shadow:2px 2px 5px rgba(0,0,0,0.2);
transition:all 0.3s ease;
}
.action span.red {
color:#f33447;
background:#fff;
animation: zoomIn 1s ease;
}
@keyframes zoomIn{
0% ,100% {
transform:scale(1);
}
50%{
transform:scale(1.4);
}
.btn {
padding:10px 20px;
border-radius:20px;
background: linear-gradient(45deg,#14b5ff,#0088ff);
color:#fff;
margin:5px;
box-shadow: 2px 7px 5px rgb(0 0 0 / 30%), 0px -4px 10px rgb(225 225 225 / 30%);
}
}
.title {
font-size:30px;
}
.content {
margin:15px 25px;
color:#555;
}
.content h2 {
margin:10px 0 20px;
color:#333;
}
.content p {
margin-bottom:20px;
box-shadow: 2px 7px 5px rgb(0 0 0 / 30%), 0px -4px 10px rgb(225 225 225 / 30%);
}
.content br {
margin-bottom:20px;
}
.content a {
display:inline-block;
color:#fff;
background:#f33447;
padding:5px 12px;
border-radius:2px;
}
.content img{
margin-bottom:20px;
}
.content div {
margin-bottom:20px;
}
.content span {
display:block;
margin-bottom:5px;
}
.fragment {
display:none;
}
.fragment.show {
display:block;
}
.hide {
display:none;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 10px;
margin-inline-end: 10px;
box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),
inset 3px 15px 45px rgba(255,255,255,0.1),
inset -1px -1px 2px rgba(0,0,0,0.5),
inset -3px -15px 45px rgba(0,0,0,0.2),
1px 5px 30px -4px rgba(0,0,0,1);
background:#c5c4fb;
text-align:justify;
border-radius: 10px;
}
h2 {
display: block;
font-size: 1.4em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 5px;
margin-inline-end: 5px;
font-weight: bold;
box-shadow: 2px 7px 5px rgb(0 0 0 / 30%), 0px -4px 10px rgb(225 225 225 / 30%);
background:#ff929d;
border-radius: 50px;
text-align:center;
}
h3 {
display: block;
font-size: 1.4em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 5px;
margin-inline-end: 5px;
font-weight: bold;
box-shadow: 2px 7px 5px rgb(0 0 0 / 30%), 0px -4px 10px rgb(225 225 225 / 30%);
background:#ffac41;
border-radius: 5px;
text-align:justify;
}
/*
Amardeep Kesharwani
*/
.fa-user{
font-size: 30px;
color: #f50057
}
.fa-users{
font-size: 30px;
color: #f50057
}
.fa-bell{
font-size: 30px;
color: #ffea00
}
.fa-share-alt{
font-size: 30px;
color: #00e676
}
.fa-info-circle{
font-size: 35px;
color: #ff9100
}
.fa-comments{
font-size: 35px;
}
.fa-css3-alt{
font-size: 35px;
color: #0078d7
}
.fa-js{
font-size: 35px;
color: #ffd600
}
</style>
</html>