HTML - Slider 2

Segundo Slider con un diseño agradable con css

HTML

<ul class="slides">

      <input type="radio" name="radio-btn" id="img-1" checked />

      <li class="slide-container">

      <div class="slide">

        <img src="https://images.unsplash.com/photo-149995136044

7-b19be8fe80f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfH

x8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />

          </div>

      <div class="nav">

        <label for="img-6" class="prev">‹</label>

        <label for="img-2" class="next">›</label>

      </div>

      </li>

 

      <input type="radio" name="radio-btn" id="img-2" />

      <li class="slide-container">

          <div class="slide">

            <img src="https://images.unsplash.com/photo-1

525547719571-a2d4ac8945e2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxw

aG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" />

          </div>

      <div class="nav">

        <label for="img-1" class="prev">‹</label>

        <label for="img-3" class="next">›</label>

      </div>

      </li>

 

      <input type="radio" name="radio-btn" id="img-3" />

      <li class="slide-container">

          <div class="slide">

            <img src="https://images.unsplash.com/photo-

1515378960530-7c0da6231fb1?ixlib=rb-4.0.3

&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto

=format&fit=crop&w=870&q=80" />

          </div>

      <div class="nav">

        <label for="img-2" class="prev">‹</label>

        <label for="img-4" class="next">›</label>

      </div>

      </li>

 

   

      <li class="nav-dots">

        <label for="img-1" class="nav-dot" id="img-dot-1"></label>

        <label for="img-2" class="nav-dot" id="img-dot-2"></label>

        <label for="img-3" class="nav-dot" id="img-dot-3"></label>

     

      </li>

  </ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); }

.slides {

    padding: 0;

    width: 609px;

    height: 420px;

    display: block;

    margin: 0 auto;

    position: relative;

}

.slides * {

    user-select: none;

    -ms-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

    -webkit-user-select: none;

    -webkit-touch-callout: none;

}

.slides input { display: none; }

.slide-container { display: block; }

.slide {

    top: 0;

    opacity: 0;

    width: 609px;

    height: 420px;

    display: block;

    position: absolute;

    transform: scale(0);

    -moz-transform: scale(0);

    -webkit-transform: scale(0);

    transition: all .7s ease-in-out;

    -moz-transition: all .7s ease-in-out;

    -webkit-transition: all .7s ease-in-out;

}

.slide img {

    width: 100%;

    height: 100%;

}

.nav label {

    width: 200px;

    height: 100%;

    display: none;

    position: absolute;

    opacity: 0;

    z-index: 9;

    cursor: pointer;

    transition: opacity .2s;

    -moz-transition: opacity .2s;

    -webkit-transition: opacity .2s;

    color: #FFF;

    font-size: 156pt;

    text-align: center;

    line-height: 380px;

    font-family: "Varela Round", sans-serif;

    background-color: rgba(255, 255, 255, .3);

    text-shadow: 0px 0px 15px rgb(119, 119, 119);

}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {

    opacity: 1;

    transform: scale(1);

    -moz-transform: scale(1);

    -webkit-transform: scale(1);

    transition: opacity 1s ease-in-out;

    -moz-transition: opacity 1s ease-in-out;

    -webkit-transition: opacity 1s ease-in-out;

}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {

  width: 100%;

  bottom: 9px;

  height: 11px;

  display: block;

  position: absolute;

  text-align: center;

}

.nav-dots .nav-dot {

  top: -5px;

  width: 11px;

  height: 11px;

  margin: 0 4px;

  position: relative;

  border-radius: 100%;

  display: inline-block;

  background-color: rgba(0, 0, 0, 0.6);

}

.nav-dots .nav-dot:hover {

  cursor: pointer;

  background-color: rgba(0, 0, 0, 0.8);

}

input#img-1:checked ~ .nav-dots label#img-dot-1,

input#img-2:checked ~ .nav-dots label#img-dot-2,

input#img-3:checked ~ .nav-dots label#img-dot-3,

input#img-4:checked ~ .nav-dots label#img-dot-4,

input#img-5:checked ~ .nav-dots label#img-dot-5,

input#img-6:checked ~ .nav-dots label#img-dot-6 {

  background: rgba(0, 0, 0, 0.8);

}

HTML - Slider

 Crea un slider con boton para cambiar imagen con HTML5 y CSS

He acá el código.

HTML

 <section>

      <h1>GATOS</h1>

      <div class="slider">

        <input type="radio" id="btn-1" name="toggle" checked />

        <input type="radio" id="btn-2" name="toggle" />

        <input type="radio" id="btn-3" name="toggle" />

        <div class="slider-controls">

          <label for="btn-1"></label>

          <label for="btn-2"></label>

          <label for="btn-3"></label>

        </div>

        <div class="slider-inner">

          <div class="slider-slides">

            <img

              src="https://htmlacademy.ru/assets/courses/76/keks-1-small.jpg"

              alt="Кекс смотрит на еду"

            />

            <img

              src="https://htmlacademy.ru/assets/courses/76/keks-2-small.jpg"

              alt="Кекс смотрит на тебя"

            />

            <img

              src="https://htmlacademy.ru/assets/courses/76/keks-3-small.jpg"

              alt="Кекс не хочет никуда смотреть"

            />

          </div>

        </div>

      </div>

    </section> CSS

section {

  margin: 40px auto;

  width: 450px;

  background-color: white;

  box-shadow: 0 0 3px #cccccc;

}

h1 {

  margin: 0;

  padding: 10px 0;

  text-align: center;

  font-weight: normal;

  font-size: 28px;

}

.slider {

  position: relative;

}

.slider input[type="radio"] {

  display: none;

}

.slider-inner {

  overflow: hidden;

}

.slider-slides {

  width: 300%;

  transition: transform 0.8s ease;

}

.slider-slides img {

  float: left;

  width: 450px;

  height: 320px;

}

.slider-controls {

  margin-bottom: 10px;

  text-align: center;

}

.slider-controls label {

  display: inline-block;

  margin: 0 3px;

  width: 10px;

  height: 10px;

  border: 4px solid white;

  border-radius: 50%;

  background-color: #cccccc;

  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);

  cursor: pointer;

  transition: background-color 0.2s;

}

#btn-1:checked ~ .slider-controls label[for="btn-1"],

#btn-2:checked ~ .slider-controls label[for="btn-2"],

#btn-3:checked ~ .slider-controls label[for="btn-3"] {

  background-color: #666666;

}

#btn-1:checked ~ .slider-inner .slider-slides {

  transform: translate(0);

}

#btn-2:checked ~ .slider-inner .slider-slides {

  transform: translate(-450px);

}

#btn-3:checked ~ .slider-inner .slider-slides {

  transform: translate(-900px);

}

HTML - Hidden sidebar html

Código para esconder el menú que tienes en tu sitio web

Esto lo encontramos con IA de BlackBox
Este sitio web esta super genial. Saquen provecho de ella.

HTML

<input type="checkbox" id="check">

    <label for="check">

      <i class="fas fa-bars" id="btn"></i>

      <i class="fas fa-times" id="cancel"></i>

    </label>

    <div class="sidebar">

    <header>My App</header>

  <ul>

<li><a href="#"><i class="fas fa-qrcode"></i>Dashboard</a></li>

<li><a href="#"><i class="fas fa-link"></i>Shortcuts</a></li>

<li><a href="#"><i class="fas fa-stream"></i>Overview</a></li>

<li><a href="#"><i class="fas fa-calendar-week"></i>Events</a></li>

<li><a href="#"><i class="far fa-question-circle"></i>About</a></li>

<li><a href="#"><i class="fas fa-sliders-h"></i>Services</a></li>

<li><a href="#"><i class="far fa-envelope"></i>Contact</a></li>

</ul>

</div>

<section></section>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');

*{

  padding: 0;

  margin: 0;

  list-style: none;

  text-decoration: none;

}

body {

  font-family: 'Roboto', sans-serif;

}

.sidebar {

  position: fixed;

  left: -250px;

  width: 250px;

  height: 100%;

  background: #042331;

  transition: all .5s ease;

}

.sidebar header {

  font-size: 22px;

  color: white;

  line-height: 70px;

  text-align: center;

  background: #063146;

  user-select: none;

}

.sidebar ul a{

  display: block;

  height: 100%;

  width: 100%;

  line-height: 65px;

  font-size: 20px;

  color: white;

  padding-left: 40px;

  box-sizing: border-box;

  border-bottom: 1px solid black;

  border-top: 1px solid rgba(255,255,255,.1);

  transition: .4s;

}

ul li:hover a{

  padding-left: 50px;

}

.sidebar ul a i{

  margin-right: 16px;

}

#check{

  display: none;

}

label #btn,label #cancel{

  position: absolute;

  background: #042331;

  border-radius: 3px;

  cursor: pointer;

}

label #btn{

  left: 40px;

  top: 25px;

  font-size: 35px;

  color: white;

  padding: 6px 12px;

  transition: all .5s;

}

label #cancel{

  z-index: 1111;

  left: -195px;

  top: 17px;

  font-size: 30px;

  color: #0a5275;

  padding: 4px 9px;

  transition: all .5s ease;

}

#check:checked ~ .sidebar{

  left: 0;

}

#check:checked ~ label #btn{

  left: 250px;

  opacity: 0;

  pointer-events: none;

}

#check:checked ~ label #cancel{

  left: 195px;

}

#check:checked ~ section{

  margin-left: 250px;

}

section{

  background: url(bg.jpeg) no-repeat;

  background-position: center;

  background-size: cover;

  height: 100vh;

  transition: all .5s;

}

CSS - Maquina de escribir

 Código para crear efecto de maquina de escribir en el texto

CÓDIGO

HTML

 <h3 class="maquina-escribir">FIRE TV STICKk</h3>

CSS

.maquina-escribir{

    position: relative;

}

.maquina-escribir::after{

    content: "";

    border-left: 4px solid;

    background: white;

    right: 0;

    height: 100%;

    position: absolute;

    animation: maquinaescribir 2s infinite backwards steps(15);

}

CSS - Ajustar imágen

 Centrar un texto al lado de una imágen con CSS

Cuando mas se batalla y con códigos tan simples...

Kali Linux - Acceso a carpeta

 Como acceder a carpeta de Kali Linux en Windows

Aunque hay varias formas de acceder, estas fueron las que me ayudaron.

Acceder con PowerShell para ver los distribuidores Linux que se tienen instaladas en Windows

Correr el comando: wsl --list --running

Este es mas profesional, se utiliza en empresas que trabajan en red... Con este código entramos a las redes que se tienen en la PC: \\wsl$ [sencilla pero poderoso código]

Acceso atraves de la web: file://wsl.localhost/kali-linux/

O desde donde esta el paquete instalado de Kali: ...home\tu_usuario\

Javascript - Suma de dos numeros

Código Javascript para sumar dos números en tu sitio web

Acá el código que la verdad tarde apróx 2 hrs en encontrarlo mas modificarlo para que saliera en orden en el sitio web... Nadie más lo tiene simple y sencillo.

HTML

        <form id="sumar">

            <input type="text" id="sum1" value="0" onchange="sumar();">

          + <input type="text" id="sum2" value="0" onchange="sumar();">

          = <input type="text" id="res_sum">

        </form>

JS

function sumar(){

    s1 = parseInt(document.getElementById("sum1").value);

    s2 = parseInt(document.getElementById("sum2").value);

    m = s1+s2;

    document.getElementById("res_sum").value = m;

}

Hay que tener todo a la mano para ir practicando e identificar como corregir.

HTML - Código para crear formulario

 Crea tu propio formulario HTML,  dejo un breve código.

HTML

<form action="#" target="" method="get" name="formDatosPersonales">

        <label for="nombre">Nombre</label>

        <input type="text" name="nombre" id="nombre"

        placeholder="Escribe tu nombre"/>

   

        <label for="apellidos">Apellidos</label>

        <input type="text" name="apellidos" id="apellidos"

        placeholder="1r Apellido"/>

   

        <label for="email" />Email</label>

        <input type="email" name="email" id="email"

        placeholder="email" required />

   

        <label for="asunto">Asunto</label>

        <input type ="text" name="asunto" id="asunto"

        placeholder="titular de la consulta"/>

   

        <label for="mensaje">Mensaje</label>

        <textarea name="mensaje" for="mensaje"

        placeholder="describe brevemente en menos de 300 carácteres"

        maxlength="300"></textarea>

       

        <input type="submit" name="enviar" value="enviar datos"/>

    </form>

CSS

form{

    display: flex;

    flex-flow: column;

    line-height: 30px;

}

input:focus {

    background-color: rgb(78, 255, 187);

    transition: .4s all linear;

  }

Javascript - Interacción con sitio web

 Javascript - Saludarte por la mañana con JS, ejercicio "onclick" en "alert"

HTML

<p onclick="saludar()" id="hola">Saludate, escribe tu nombre</p>

JAVASCRIPT

function saludar(){

    let saludar = prompt("Hola, Como te llamas?");

    let nombre = saludar;

    document.getElementById("hola").innerHTML = 'Hola ' + nombre + ',

que tengas un excelente día';

}

Javascript - Cambiar texto sin interactuar

Cambia texto sin interactuar con Javascript

HTML

<p onclick="cambioTxt()"  id="cha_stat">Cambiar el texto al dar clic aquí</p>

JAVASCRIPT

function cambioTxt(){

document.getElementById("cha_stat").innerHTML = "Aquí se cambio";

}

Javascript - Onclick

Ejercicio "onclick" de Javascript

HTML

<p onclick="alert('Here I am')">Aquí irá onclick</p>

Tan simple como eso.