VISUAL STUDIO CODE
AJUSTE DE LÍNEA QUE NO SE MUESTRE EL CÓDIGO DE LA CAJA
Descarga Visual Studio Code.
Solo hay que ir al menú en VSC desde view, apariencia y sticky scroll.
Quitamos la palomita y listo.
Quitamos la palomita y listo.
domingo, 15 de septiembre de 2024
viernes, 12 de julio de 2024
Error - Aplicaciones de Inicio
No podemos ver carpeta de aplicaciones de inicio, ni tampoco desde administrador de tareas...
LO QUE TENEMOS QUE HACER ES SOLO AGREGAR LA CARPETA CON EL NOMBRE DE "Startup" EN ESTA DIRECCIÓN:
C:\Users\"TU USUARIO DONDE ESTAS"\AppData\Roaming\Microsoft\Windows\Start Menu\Programs
C:\Users\"TU USUARIO DONDE ESTAS"\AppData\Roaming\Microsoft\Windows\Start Menu\Programs
Y después de eso deberas poder acceder normal a tus aplicaciones de inicio y ver la información dentro del administrador de tareas.
Comenta si te funciono.
jueves, 13 de junio de 2024
JS - Audio en tu sitio con boton onclick
IMAGEN FIJA EN WEBSITE CON FUNCION ONCLICKplay and stop
Código para copiar y pegar
<img src="img/pedro_pe.png" alt="Capibara" title="Capibara Song" style="height: 45px; position: fixed; right: 2%; top: 44%; cursor: pointer; border-radius: 50%;" onclick="playSound('sound2')" >
<audio id="sound2" src="media/pedro-pe.mp3"></audio>
function playSound(sound2) {
var song1 = document.getElementById(sound2);
song1.volume = .25; // setting the volume to 25% because the sound is loud
if (song1.paused) { // if song1 is paused
song1.play();
} else {
song1.pause();
}
}
martes, 21 de mayo de 2024
CSS3 - Slider infinito
CSS3 - Slider infinito
HTML5
<!------------- LOGOS SLIDE ------------->
<div class="logos">
<div class="logos-slide">
<a href="https://xviewplus.com/" target="_blank"><img src="img/xview logo.jpg" /></a>
<a href="https://www.paramountplus.com/home/" target="_blank"><img src="img/paramountplus logo.jpg" /></a>
<a href="https://www.netflix.com/browse" target="_blank"><img src="img/netflix logo.jpg" /></a>
<a href="https://play.max.com/home" target="_blank"><img src="img/hbo max logo.jpg" /></a>
<a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>
<a href="p/dinosaurios.html"><img src="img/jurassic park logo.jpg" /></a>
<a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>
<a href="https://www.youtube.com/" target="_blank"><img src="img/btn_youtube.jpg" /></a>
</div>
<div class="logos-slide">
<a href="https://xviewplus.com/" target="_blank"><img src="img/xview logo.jpg" /></a>
<a href="https://www.paramountplus.com/home/" target="_blank"><img src="img/paramountplus logo.jpg" /></a>
<a href="https://www.netflix.com/browse" target="_blank"><img src="img/netflix logo.jpg" /></a>
<a href="https://play.max.com/home" target="_blank"><img src="img/hbo max logo.jpg" /></a>
<a href="p/soccer.html"><img src="img/soccer logo.jpg" /></a>
<a href="p/dinosaurios.html"><img src="img/jurassic park logo.jpg" /></a>
<a href="p/zoo.html"><img src="img/zoo logo mk.jpg" /></a>
<a href="https://www.youtube.com/" target="_blank"><img src="img/btn_youtube.jpg" /></a>
</div>
</div>
CSS3
/************ CARRUSEL ************/
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100.25%);
}
}
.logos {
overflow: hidden;
padding: 60px 0;
background: white;
white-space: nowrap;
position: relative;
}
.logos:before,
.logos:after {
position: absolute;
top: 0;
width: 250px;
height: 100%;
content: "";
z-index: 2;
}
.logos:before {
left: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}
.logos:after {
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}
.logos:hover .logos-slide {
animation-play-state: paused;
}
.logos-slide {
display: inline-block;
animation: 22s slide infinite linear;
}
.logos-slide img {
height: 200px;
margin: 0 40px;
cursor: pointer;
}
lunes, 13 de mayo de 2024
CSS 3 - Botón flecha con movimiento
CSS 3 - Botón flecha con movimiento
Código para copiar y pegar...
HTML:
<div id="container">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<a href="https://mike-salinas.blogspot.com/"
target="_blank" style="width: 100%; height: 100%;">
<span class="button-text">Learn More</span></a>
</button>
</div>
CSS
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
&.learn-more {
width: 12rem;
height: auto;
.circle {
transition: all 0.45s cubic-bezier(0.65,0,.076,1);
position: relative;
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: black;
border-radius: 1.625rem;
.icon {
transition: all 0.45s cubic-bezier(0.65,0,.076,1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: white;
&.arrow {
transition: all 0.45s cubic-bezier(0.65,0,.076,1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
&::before {
position: absolute;
content: '';
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #fff;
border-right: 0.125rem solid #fff;
transform: rotate(45deg);
}
}
}
}
.button-text {
transition: all 0.45s cubic-bezier(0.65,0,.076,1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: black;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
}
&:hover {
.circle {
width: 100%;
.icon {
&.arrow {
background: white;
transform: translate(1rem, 0);
}
}
}
.button-text {
color: white;
}
}
}
Suscribirse a:
Entradas (Atom)