Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.

Mensajes - R3LI4NT

Páginas: [1] 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

GitHub / NET-Scanner [Script]

« en: Hoy a las 03:42:42 am »

NET-Scanner es un simple script que permite escanear puertos abiertos, direcciones IP's y MAC's dentro de su red.

Capturas:

Tiene la posibilidad de escanear un puerto en específico o todos (random).

Repositorio: https://github.com/R3LI4NT/NET-Scanner

Dudas Generales / Re:Buenas a todos

« en: Ayer a las 05:44:17 pm »

Varios usuarios ya han preguntado lo mismo, voy hacer un copy/paste de una respuesta que comente hace un tiempo atrás:

Citar

Hi,
tu duda ya fue respondida en varias ocasiones en el foro.

Cheat Engine solo cambia los valores desde el lado del cliente y no por el servidor, como si cambiaras un valor de una web con inspeccionar elemento, lo mismo, reinicias y vuelve todo igual.
Mi consejo es que aprendas lenguajes de programación para crear un "hack" y burlar el sistema de seguridad del juego (si es que tiene), te tomará años aprender y posiblemente lo aprovecharas para otra cosa en mente, de ser así, empieza con la lógica de la programación.

Edit: Acabo de entrar al video y si te fijas en los comentarios hay un usuario que dice lo mismo que te acabo de explicar:

Citar

"Eso lo único que hace es cambiar el número en el momento que lo haces ,pero recordar que los servidores son bases de datos y ese programa no puede cambiar la base de datos , no sirve ese hack"

Y otro también:

Citar

"Tu " hack de oro" es visual nadamas. Estas modificando el cliente y nadamas. No logras modificar realmente la cantidad de oro que tenes. Es lo mas basico que puede hacer el cheat engine, modificar un valor numerico."

GitHub / [File-Cracker] Crack password ZIP, RAR and PDF with dictionary.

« en: Noviembre 25, 2021, 02:37:00 am »

Ejemplo:

Install:

Código: Text

• git clone https://github.com/R3LI4NT/File-Cracker
• cd File-Cracker
• pip3 install -r requirements.txt
• python3 file_cracker.py
 

Requirements:

Código: Text

zipfile
rarfile
pikepdf
tqdm
 

#R3LI4NT

Hacking / CTF - Mr.Robot 1 [RESUELTO]

« en: Noviembre 18, 2021, 04:51:35 am »

Hola people de Hack x Crack!
Quiero compartir la 3ra entrega de Captura la Bandera, esta vez resolviendo la máquina Mr. Robot 1 un poco más avanzada que las anteriores que solucioné.

Comenzaré seleccionando el entorno:

Según la sala, la dirección seria la siguiente: ctf14.root-me.org, a está le agregamos /license.txt y copiaremos los caracteres que se encuentran al final.

Proseguimos decodificar el texto con base64. Podemos hacerlo de dos maneras, creando un pequeño script importando el módulo de base64 o utilizar un decode online.

User: elliot
Password: ER28-0652

Web: https://www.base64decode.org/

Accedemos al panel de administración de WordPress, generalmente se agrega /wp-admin.php o /wp-login.php

Plugins > instalar plugins

Agregar nuevo plugin > Subir plugin

Llego la hora de crear nuestro backdoor con weevely. Primero indicamos la contraseña y luego el nombre:

Código: Text

weevely generate pass123 backdoor.php
 

Lo subimos y lo instalamos como un "plugin" más...

En el apartado de Media tenemos archivos e imágenes, el que nos interesa es el backdoor.php que acabamos de subir. Doble clic sobre él y copiamos la URL que esta en Description.

Luego pegamos el link e ingresamos la contraseña para acceder a la puerta trasera.

Código: Text

weevely http://ctf14.root-me.org/wp-content/uploads/2021/11/backdoor.php pass123
 

Entramos al direcorio /home > robot > mostramos el contenido del archivo password.raw-md5.

Ya de por sí sabemos que se trata de un hash MD6 por su extensión al final, pero si dudamos podemos hacer uso de la herramienta hash-identifier:

Existen muchos scripts para romper este cifrado (Hashcat, John the Ripper, Hydra, Findmyhash), y también online que contenga la clave en su base de datos.

Accedemos al servidor SSH remotamente, la contraseña es el hash descifrado (abcdefghijklmnopqrstuvwxyz).

Código: Text

ssh [email protected] 
 

Entramos al direcorio /usr/local/bin e interactuamos con nmap. Este directorio sirve para meter programas.

Y finalmente obtendríamos la llave para validar la bandera.

#R3LI4NT

Dudas Generales / Re:Guardar todas las imágenes de una página web

« en: Noviembre 17, 2021, 09:43:44 pm »

WebCopy: https://www.cyotek.com/cyotek-webcopy

HTTrack: https://www.httrack.com/page/2/en/index.html

SiteSucker: https://ricks-apps.com/osx/sitesucker/index.html

Hacking / Explotar vulnerabilidad File Upload con Weevely + Burp Suite

« en: Noviembre 11, 2021, 06:52:56 am »

Vulnerabilidad File Upload

Esta vulnerabilidad ocurre en aplicaciones web donde existe la posibilidad de subir un archivo sin que sea comprobado por un sistema de seguridad que frene peligros potenciales. Le permite a un atacante subir archivos con código (scripts tales como . php o . aspx) y ejecutarlos en el mismo servidor.

Weevely
Weevely es una herramienta de administración de webshell escrita en python, sirve para crear backdoors en .PHP y contiene más de 30 módulos para testear tareas administrativas; mantener acceso, elevar privilegios y difundirse en la red. Cabe recalcar que un black hat podría utilizar esta vulnerbailidad para obtener acceso de administrador y desconfigurar la web, ya sea borrar la base de datos como un defacement.

En caso de que quieran instalarla en otra distro distinta a Kali:

Código: Text

sudo apt-get install weevely
 

Haré uso de la máquina Metasploitable2 que ya viene con vulnerabilidades incorporadas para explotar (más que nada para hacerlo legal).

Descargar: https://sourceforge.net/projects/metasploitable/

Al introducir la dirección IP en el navegador podremos acceder a metasploitable desde él. El que nos interesa se llama DVWA.

Debajo se encuentran las credenciales.
Usuario = admin
Contraseña = password

Si nos dirigimos a seguridad de DVWA podemos establecer el nivel del mismo, escogeré el nivel bajo para obtener acceso solamente usando weevely.

Es momento de pasar a la consola y crear el backdoor:

Código: Text

weevely generate *contraseña_de_nuestro_backdoor* *ruta + extensión*
 

Regresamos a la aplicación web e iremos a donde dice "Upload" y subiremos nuestro backdoor generado.

Como lo verán, nos devuelve una ruta el cual debemos copiar y juntarla con la URL, quedaría de esta forma: http://192.168.58.129/dvwa/hackable/uploads/backdoor.php

Nuevamente nos dirigimos a la consola y escribiremos el siguiente comando:

Código: Text

weevely *URL* *contraseña_del_backdoor*
 

Y así es como obtenemos acceso remoto a la página web e instalar un backdoor (seguridad baja).

Burp Suite

Burp Suite es una herramienta escrita en Java que permite realizar pruebas de seguridad de aplicaciones web, cuenta con una versión gratuita y de paga. Su función básica se encuentra el servidor proxy que permite interceptar el tráfico entre el navegador y aplicación destino, el cual posibilita inspeccionarlo y modificarlo. El usuario/cliente hace un request al servidor pidiendo cierto contenido u archivo (recuerda que el servidor es la IP corriendo), la respuesta del servidor se envía como un response mostrando la petición que pidió el cliente. Para "hackear" un sitio lo que hacemos es ponernos en el medio del request y así poder interceptar o modificar este. Hay dos tipos de request, el request GET es cuando pedimos información y el request POST es cuando subimos un archivo o nos logeamos al sitio.

Esta vez subiré la seguridad a medio. Abrimos Burp Suite y vamos a Proxy > Intercep (debe estar en ON) > luego a Options y nos fijamos en que puerto esta corriendo (8080).

En el navegador tenemos que ir a configuración/preferencias y a opciones avanzadas (debajo del todo), configuramos nuestro proxy de acuerdo al puerto dicho anteriormente.

Volvemos a Burp > Intercep > y en Forward para poder recargar la página. Si volvemos a subir el mismo backdoor nos tirará un error porque al aumentar la seguridad solo nos permite subir un archivo con extensión .jpg.

Al backdoor.php lo renombramos a .jpg (tan solo con click derecho sin necesidad de crearlo por consola), volvemos a subirlo.

La línea importante que debemos modificar es "filename=", renombrar backdoor.jpg a backdoor.php.

Dáremos en "Forward" y como verán nuestro archivo se subió exitosamente.

Seguidamente, repetimos los pasos en nuestra shell.

Para finalizar con el post, aumenté la seguridad a alta y lo único que tengo que hacer es renombrar el backdoor.jpg a backdoor.php.jpg

Al presionar nuevamente a "Forward" el archivo se subió exitosamente, por lo cual podemos repetir los mismos pasos anteriores para obtener el acceso solo que la url va hasta .php y no .jpg

Es una vulnerabilidad muy peligrosa que permite a un atacante apropiarse de una página web por medio de un reverse shell o puerta trasera. Como seguridad recomiendo que nunca permitan que los usuarios puedan subir arhivos ejecutables (.php, .exe, .bat, etc), analizar el archivo y la extensión.

#R3LI4NT

Otros / Interfaz de login para moviles con Kivy [Python]

« en: Noviembre 07, 2021, 07:19:11 pm »

¿Qué es Kivy?

Kivy es una biblioteca de Python gratuita y de código abierto para desarrollar aplicaciones móviles y otro software de aplicación multitáctil con una interfaz de usuario natural. Se distribuye según los términos de la licencia MIT y se puede ejecutar en Android, iOS, Linux, macOS y Windows.

Al ingresar:

¿Cómo funciona?
Primero descargamos la biblioteca desde la terminal o símbolo de sistema:
pip install kivymd

Creamos un nuevo archivo con la extensión .py e importamos los siguientes módulos de la librería:

Código: Python

from kivy.lang import Builder
from kivymd.uix.button import MDFlatButton
from kivymd.uix.dialog import MDDialog
from kivymd.app import MDApp
from kivy.core.window import Window
 

Luego hay que darle un tamaño a la ventana, parecido a Tkinter:
Window.size=(X,X)
Ej: Window.size=(400,600)

Aquí es donde viene lo bueno, las siguientes opciones nos permite modificar diferentes elementos que se encuentran dentro de la ventana creada, esto incluye el icono, los buttons, los "inputs" llamados MDTextFieldRound, entre otras.

Código: Python

KV = '''
Screen:
 
    MDCard:
        size_hint: None, None
        size: 300,450
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        elevation: 10
        padding: 67
        spacing: 36
        orientation: 'vertical'
        border_radius: 20
        radius: [15]
        md_bg_color: [30/255,30/255,30/255,1]
        MDIcon:
            icon: 'account'
            icon_color: 2, 2, 2, 2
            haling: 'center'
            font_size: 170
        MDTextFieldRound:
            id: user
            icon_right: "account-check"
            hint_text: "Usuario"
            helper_text_mode: "on_focus"
            foreground_color: 1, 1, 1, 1
            size_hint_x: None
            width: 220
            font_size: 20
            pos_hint: {"center_x": 0.5}
            color_active: [1,1,1,1]
        MDTextFieldRound:
            id: password
            password: True
            icon_right: "lock"
            hint_text: "Contraseña"
            helper_text_mode: "on_focus"
            foreground_color: 1, 1, 1, 1
            size_hint_x: None
            width: 220
            font_size: 20
            pos_hint: {"center_x": 0.5}
            color_active: [1,1,1,1]
        MDFillRoundFlatButton:
            text: "LOGIN"
            font_size: 18
            pos_hint: {"center_x": 0.5}
            on_press: app.login()
 
 
'''
 

Creamos una clase y está va a heredar de MDApp, el método o función build define los colores que va a tener nuestra pantalla:

Código: Python

class MainApp(MDApp):
    dialog = None
 
    def build(self):
        self.theme_cls.theme_style = 'Dark'
        self.theme_cls.primary_palette = 'Green'
        self.theme_cls.accent_palette = "Blue"
 
        return Builder.load_string(KV)
 

Voy a crear una función llamada "login" en donde voy a darle un usuario y contraseña para entrar a X cosa, más que nada para probar que todo funciona.

Código: Python

def login(self):
        if self.root.ids.user.text == 'Reliant' and self.root.ids.password.text == '1234':
            if not self.dialog:
                #En caso de tener éxito...
                self.dialog = MDDialog(
                    title = 'Login',
                    text = f"¡Bienvenido {self.root.ids.user.text}!",
                    buttons = [
                        MDFlatButton(
                            text = "ACEPTAR",
                            text_color = self.theme_cls.accent_color,
                            on_release = self.close
                        ),
                    ],
                )
                self.dialog.open()
 

En caso de tener éxito con el user y password se mostrará una pequeña ventana de bienvenida.

Por último, creamos una función de "close" para cerrar el button, y llamamos a la clase:

Código: Python

def close(self):
        self.dialog.dismiss()                    
 
MainApp().run()
 

Código completo:

Código: Python

from kivy.lang import Builder
from kivymd.uix.button import MDFlatButton
from kivymd.uix.dialog import MDDialog
from kivymd.app import MDApp
from kivy.core.window import Window
 
Window.size=(400,600)
 
KV = '''
Screen:
 
    MDCard:
        size_hint: None, None
        size: 300,450
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        elevation: 10
        padding: 67
        spacing: 36
        orientation: 'vertical'
        border_radius: 20
        radius: [15]
        md_bg_color: [30/255,30/255,30/255,1]
        MDIcon:
            icon: 'account'
            icon_color: 2, 2, 2, 2
            haling: 'center'
            font_size: 170
        MDTextFieldRound:
            id: user
            icon_right: "account-check"
            hint_text: "Usuario"
            helper_text_mode: "on_focus"
            foreground_color: 1, 1, 1, 1
            size_hint_x: None
            width: 220
            font_size: 20
            pos_hint: {"center_x": 0.5}
            color_active: [1,1,1,1]
        MDTextFieldRound:
            id: password
            password: True
            icon_right: "lock"
            hint_text: "Contraseña"
            helper_text_mode: "on_focus"
            foreground_color: 1, 1, 1, 1
            size_hint_x: None
            width: 220
            font_size: 20
            pos_hint: {"center_x": 0.5}
            color_active: [1,1,1,1]
        MDFillRoundFlatButton:
            text: "LOGIN"
            font_size: 18
            pos_hint: {"center_x": 0.5}
            on_press: app.login()
 
 
'''
 
class MainApp(MDApp):
    dialog = None
 
    def build(self):
        self.theme_cls.theme_style = 'Dark'
        self.theme_cls.primary_palette = 'Green'
        self.theme_cls.accent_palette = "Blue"
 
        return Builder.load_string(KV)
 
    def login(self):
        if self.root.ids.user.text == 'Reliant' and self.root.ids.password.text == '1234':
            if not self.dialog:
                #En caso de tener éxito...
                self.dialog = MDDialog(
                    title = 'Login',
                    text = f"¡Bienvenido {self.root.ids.user.text}!",
                    buttons = [
                        MDFlatButton(
                            text = "ACEPTAR",
                            text_color = self.theme_cls.accent_color,
                            on_release = self.close
                        ),
                    ],
                )
                self.dialog.open()
 
    def close(self):
        self.dialog.dismiss()                    
 
MainApp().run()
 

Link de iconos: https://materialdesignicons.com/

#R3LI4NT

Programación Web / Interfaz de tienda online [HTML] [CSS]

« en: Noviembre 02, 2021, 10:50:15 pm »

Hi comunidad HxC!
Vengo a compartir con ustedes una pequeña y sencilla interfaz de una tienda online que estuve desarrollando, eso sí, no es responsive (no tenía mucho tiempo que digamos, mes de parciales).

El footer ya lo había subido al foro y supuse que reutilizarlo no estaría mal...

HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenCart</title>
    <link rel="stylesheet" href="style/tienda.css">
    <link rel="icon" type="image/png" href="img/favicon.png" sizes="16x16">
 
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div class="container">
        <a href="https://api.whatsapp.com/send?phone=+12222222222" class="wsp-btn" target="_blank">
            <i class='bx bxl-whatsapp'></i>
        </a>
 
        <div class="telefono">
            <p>Venta telefónica: <i class='bx bxs-phone'>1111-2222</i></p>
        </div>
 
        <div class="header">
            <div class="logo">
                <img src="img/logo.png" alt="">
            </div>
            <div class="search">
                <input type="search" class="icono-placeholder" placeholder="Buscar productos...">
                <i class='bx bxs-cart'></i>
            </div>
        </div>
 
        <div class="menu">
            <a href="#">Computación</a>
            <a href="#">Celulares</a>
            <a href="#">Electrodomesticos</a>
            <a href="#">Bicicletas y Motos</a>
            <a href="#">Smart TV</a>
            <a href="#">Colchones</a>
            <a href="#">Belleza</a>
            <a href="#" class="oferta-btn" style="color: #fff;font-weight: bold;">Ofertas</a>
        </div>
 
        <div class="slider-container middle">
            <div class="slides">
                <input type="radio" name="rad" id="rad-1" checked>
                <input type="radio" name="rad" id="rad-2">
                <input type="radio" name="rad" id="rad-3">
 
                <div class="slide s1">
                    <img src="img/1.png" alt="">
                </div>
 
                <div class="slide s2">
                    <img src="img/2.png" alt="">
                </div>
 
                <div class="slide s3">
                    <img src="img/3.png" alt="">
                </div>
                
                <div class="navegation">
                    <label for="rad-1" class="bar"></label>
                    <label for="rad-2" class="bar"></label>
                    <label for="rad-3" class="bar"></label>
                </div>
            </div>
        </div>
 
        <div class="credito">
            <h3>¡Pagá hasta en 24 cuotas sin interés!</h3>
            <div class="tarjetas">
                <img src="img/paypal.png" alt="">
                <img src="img/visa.png" alt="">
                <img src="img/mastercard.png" alt="">
                <img src="img/discover.jpg" alt="">
                <img src="img/american-express.png" alt="">
            </div>
        </div>
 
        <div class="vendidos">
            
            <div class="card">
                <div class="image">
                    <img src="img-ventas/acer.png" alt="">
                    <div class="contenido">
                        <h4>Acer Aspire A315-51</h4>
                        <p>Precio Web: <span>USD587</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/heladera.png" alt="">
                    <div class="contenido">
                        <h4>Heladera James</h4>
                        <p>Precio Web: <span>USD999</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/moto-vital.png" alt="">
                    <div class="contenido">
                        <h4>Moto Vital Twist 125</h4>
                        <p>Precio Web: <span>USD1.349</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/iphone-11.png" alt="">
                    <div class="contenido">
                        <h4>Iphone 11</h4>
                        <p>Precio Web: <span>USD865</span></p>
                        <p class="precio-antes" style="color: #212121;text-decoration:line-through;">Antes: USD799</p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/ropero-8.png" alt="">
                    <div class="contenido">
                        <h4>Ropero 8 puertas</h4>
                        <p>Precio Web: <span>USD374</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/tinta.png" alt="">
                    <div class="contenido">
                        <h4>Tinta Nutrisse</h4>
                        <p>Precio Web: <span>USD16</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/telefunken.jpg" alt="">
                    <div class="contenido">
                        <h4>TV Telefunken 32"</h4>
                        <p>Precio Web: <span>USD265</span></p>
                        <p class="precio-antes" style="color: #212121;text-decoration:line-through;">Antes: USD319</p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="card">
                <div class="image">
                    <img src="img-ventas/sommier.jpg" alt="">
                    <div class="contenido">
                        <h4>Sommier 1 plaza</h4>
                        <p>Precio Web: <span>USD1.349</span></p>
                        <div class="añadir-btn">
                            <button class="comprar-btn"><a href="">Añadir <i class='bx bxs-cart'></i></a></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="categorias-btn">
                <div class="categorias-border-bottom">
                    <button><a href="#">Ver todas las categorías</a></button>
                </div>
            </div>
        </div>
 
        <footer>
            <div class="columna-1">
                <div class="logo">Open<span style="font-weight: 600; color: #FF3030;">cart</span></div>
                <div class="social-icons">
                    <i class='bx bxl-facebook icons'></i>
                    <i class='bx bxl-instagram icons' ></i>
                    <i class='bx bxl-twitter icons' ></i>
                    <i class='bx bxl-whatsapp bx-wsp icons'></i>
                </div>
            </div>
            <div class="columna-2">
                <div class="sub-item">Empresa</div>
                <ul>
                    <li class="info">Contacto</li>
                    <li class="info">Soporte</li>
                    <li class="info">Productos</li>
                    <li class="info">Privacidad</li>
                    <li class="info">Cookies</li>
                </ul>
            </div>
            <div class="columna-3">
                <div class="sub-item">Links</div>
                <ul>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #1</a></li>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #1</a></li>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #3</a></li>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #4</a></li>
                    <li><i class='bx bx-chevron-right'></i><a href="#" class="link">Link #5</a></li>
                </ul>
            </div>
            <div class="columna-4">
                <div class="sub-item">
                    <i class='bx bx-envelope' ></i>
                    <div class="info-inbox">Envíanos un comentario!</div>
                </div>
                <div class="formulario formulario-responsive">
                    <input type="text" placeholder="Your Email">
                    <textarea placeholder="Escribe aquí tus comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea>
                    <button class="btn-enviar"><a href="#">Enviar</a></button>
                </div>
            </div>
            <div class="copyright">
                <span class="text">Opencart &copy;2021, Todos los derechos reservados.</span>
            </div>
        </footer>
    </div>
</body>
</html>
 

CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:[email protected]&display=swap');
 
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
 
body {
    height: 100vh;
    width: 100%;
    background: #fff;
}
 
.wsp-btn{
    position:fixed;
    color:#fff;
    border-radius:50px;
    text-align:center;
    font-size:35px;
    width:60px;
    height:60px;
    line-height: 63px;
    bottom:25px;
    right:25px;
    background:#25d366;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    transition: all 300ms ease;
    border: 2px solid #fff;
}
.wsp-btn:hover{
    background: #20ba5a;
}
 
.telefono {
    height: 40px;
    width: 100%;
    background-color: #F5F5F5;
    justify-content: end;
    display: flex;
    line-height: 40px;
    border-bottom: 2px solid #F1F1F1;
}
 
.telefono p {
    color: rgb(0,0,0,.7);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    padding-right: 50px;
    font-size: 400;
}
 
.telefono i {
    color: #000;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 400;
    padding-left: 3px;
}
 
.header {
    width: 100%;
    background: #fff;
    display: flex;
}
 
.header .logo {
    padding: 30px;
}
 
.header img {
    height: 40px;
    width: auto;
}
 
.header .search {
    padding: 30px;
    width: 100%;
    display: flex;
    justify-content: end;
}
 
.header .search input {
    height: 40px;
    width: 60%;
    outline: none;
    border: 1px solid #D8D8D8;
    padding: 10px;
}
 
.header .search input:focus {
    border: 1px solid #C7C7C7;
}
 
.header .search i {
    font-size: 35px;
    line-height: 40px;
    padding: 0 20px;
    transition: 0.3s;
    cursor: pointer;
    color: rgb(0,0,0,.8);
}
 
.header .search i:hover {
    color: #BF0303;
}
 
.menu {
    background-color: #F5F5F5;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0px 15px 5px -15px #111; 
}
 
.menu a {
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: rgb(0,0,0,.8);
    padding: 20px;
    font-size: 15px;
    transition: 0.5s;
    cursor: pointer;
    letter-spacing: .4px;
}
 
.menu a:hover {
    color: #EA0000;
}
 
.oferta-btn {
    background: #A30101;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}    
 
.credito {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 5px 0;
}
 
.credito h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: bold;
    color: rgb(0,0,0,.8);
    padding-top: 30px;
}
 
.credito .tarjetas {
    padding: 45px 25px;
    border-bottom: 1px solid #E5E5E5;
    width: 92%;
}
 
.credito .tarjetas img{
    height: 30px;
    width: auto;
    padding: 0 30px;
    transition: 0.3s;
    cursor: pointer;
}
 
.credito .tarjetas img:hover {
    transform: scale(1.1);
}
 
.vendidos {
    width: 100%;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
}    
 
.vendidos h2 {
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    color: rgb(0,0,0,.9);
    letter-spacing: 1px;
    padding: 30px 0;
    font-size: 27px;
}
 
.vendidos .card {
    width: 300px;
    height: 385px;
    background: #FDFDFD;
    border: 1px solid #E1E1E1;
    font-family: 'Poppins', sans-serif;
    transition: 0.6s;
    margin: 10px 20px;
    flex: 1 0 21%;
}
 
.vendidos .card:hover {
    transform: scale(1.1);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
 
.vendidos .card img {
    height: 180px;
    width: auto;
    transition: 0.5s;
    padding-top: 20px;
    cursor: pointer;
}
 
.vendidos .card img:hover {
    transform: scale(1.1);
}
 
.vendidos .card .image {
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
 
.vendidos .contenido {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}
 
.vendidos h4 {
    color: rgb(0,0,0,.6);
    font-weight: 300;
    padding-top: 15px;
}
 
.vendidos p {
    color: #EA0000;
    font-weight: bold;
    padding-top: 20px;
}
 
.vendidos p span {
    color: rgb(0,0,0,.8);
}
 
.vendidos .añadir-btn {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
 
.vendidos .comprar-btn {
    background: #EA0000;
    outline: none;
    border: none;
    height: 35px;
    width: 90px;
    margin-top: 15px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    line-height: 35px;
    transition: 0.3s;
}
 
.vendidos .comprar-btn a {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    padding: 0 10px;
    font-size: 14px;
}
 
.vendidos .comprar-btn i {
    font-size: 18px;
}
 
.vendidos .comprar-btn:hover {
    opacity: 0.6;
}
 
.precio-antes {
    font-size: 14px;
}
 
.slider-container {
    width: 100%;
    height: 330px;
    overflow: hidden;
}
 
.middle {
    position: relative;
}
 
.navegation {
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    display: flex;
}
 
.bar {
    width: 15px;
    height: 15px;
    border: 2px solid #BF0303;
    border-radius: 50%;
    margin:0 10px;
    transition: 0.3s;
    cursor: pointer;
}
 
.bar:hover {
    background: #A30101;
    border: 2px solid #BF0303;
}
 
input[name="rad"] {
    position: absolute;
    visibility: hidden;
}
 
.slides {
    width: 500%;
    height: 100%;
    display: flex;
}
 
.slide {
    width: 20%;
    transition: 0.6s;
}
 
.slide img {
    width: 100%;
    height: 100%;
}
 
#rad-1:checked ~ .s1 {
    margin-left: 0;
}
 
#rad-2:checked ~ .s1 {
    margin-left: -20%;
}
 
#rad-3:checked ~ .s1 {
    margin-left: -40%;
}
 
.categorias-btn {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 25px 0;
}
 
.categorias-btn button {
    background: #EA0000;
    outline: none;
    border: none;
    height: 50px;
    width: 280px;
    cursor: pointer;
    transition: 0.4s;
}
 
.categorias-btn button:hover {
    transform: translateY(-10px);
    opacity: 0.7;
}
 
.categorias-btn button a {
    color: #fff;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
 
.categorias-border-bottom {
    width: 96%;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 20px;
}
 
/* FOOTER */
 
footer {
    bottom: 0;
    left: 0;
    width: 100%;
    background: #161515;
    color: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 3.55rem 1.35rem;
    padding-bottom: 6rem;
    font-family: 'Poppins', sans-serif;
}
 
footer .logo {
    color: #fff;
    font-size: 30px;
    text-shadow: 0px 3px 5px #000;
}
 
.social-icons {
    font-size: 20px;
    display: flex;
    gap: 10px;
    margin: 20px 0;
}
 
.bxl-facebook {
    border-radius: 50%;
    background: #3b5998;
    color: #fff;
    padding: 5px;
}
 
.bxl-instagram {
    border-radius: 50%;
    background: #DD2A7B;
    color: #fff;
    padding: 5px;
}
 
.bxl-twitter {
    border-radius: 50%;
    background: #00ACEE;
    color: #fff;
    padding: 5px;
}
 
.bx-wsp{
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    padding: 5px;
}
 
.icons {
    cursor: pointer;
}
.icons:hover {
    opacity: 0.5;
}
 
.sub-item {
    display: flex;
    font-size: 19px;
    margin: 12px 0;
    color: #F6392F;
    text-transform: uppercase;
    align-items: center;
    gap: 10px;
}
 
li {
    padding: 6px 0;
    font-size: 15px;
}
 
li .link {
    color: #fff;
    opacity: 0.7;
}
 
li .link:hover {
    color: #fff;
    cursor: pointer;
    opacity: 1;
}
 
.bx-chevron-right {
    font-size: 18px;
}
 
.info {
    opacity: 0.7;
    transition: 0.2s;
    cursor: pointer;
}
 
.info:hover {
    opacity: 1;
}
 
.info-inbox {
 
    text-transform: none;
    font-size: 16px;
}
 
.bx-envelope {
    color: #fff;
    font-size: 23px;
}
 
input {
    border: none;
    outline: none;
    height: 35px;
    width: 250px;
    padding: 0 10px;
    background: none;
    border-radius: 6px;
    border: 2px solid #F6392F;
    color: #fff;
    transition: 0.4s;
    font-weight: 400;
}
 
input:focus {
    transition: 0.4s;
    background: #110413;
    font-weight: 200;
}
 
.formulario {
    display: flex;
    flex-direction: column;
}
 
.btn-enviar {
    margin: 5px 0;
    width: 120px;
    height: 35px;
    background: #F6392F;
    border-radius: 6px;
    outline: none;
    border: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 0 10px #000;
    transition: 0.3s;
    font-weight: bold;
    letter-spacing: 1px;
}
 
.btn-enviar:hover {
    box-shadow: none;
    transform: translateY(-5px);
}
 
.btn-enviar a {
    color: #fff;
}
 
textarea {
    width: 77%;
    margin: 10px 0;
    height: 100px;
    outline: none;
    border-radius: 6px;
    border: 2px solid #F6392F;
    background: none;
    color: #fff;
    font-weight: 200;
    padding: 5px 5px;
    opacity: 0.7;
}
 
textarea:focus {
    transition: 0.4s;
    background: #110413;
    font-weight: 200;
    opacity: 1;
}
 
.columa-4{
    width: 30%;
    display: flex;
    flex-direction: column;
}
 
.copyright {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 50px;
    background: #f2f2f2;
    color: #000;
    align-items: center;
    display: flex;
}
 
.copyright .text {
    padding: 0 20px;
}
 

DESCARGAR PROYECTO
Mediafire: https://www.mediafire.com/folder/x2cesbgl7344l/Tienda_Online
MEGA: https://mega.nz/folder/yOgyAKhA#A4YIgDenU16ZkLPQq2mb7Q

Programación Web / Crear efecto Parallax, muy fácil [HTML] [CSS]

« en: Noviembre 01, 2021, 03:34:13 pm »

¿Qué es el Parallax?

El parallax es una técnica de diseño web en la que el fondo se mueve a un ritmo distinto del contenido. El resultado es una ilusión en 3D cuando hacemos scroll, creando un efecto de profundidad que ayuda al usuario a sumergirse en el contenido.

En archivo de HTML voy a crear 3 secciones, en cada una de ellas le voy agregar 2 clases (parallax y sec-X) y dentro un h2 para mostrar un texto en las imágenes.

HTML

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Efecto Parallax</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="parallax sec-1">
        <h2>SECTION 1</h2>
    </section>
 
    <section class="parallax sec-2">
        <h2>SECTION 2</h2>
    </section>
 
    <section class="parallax sec-3">
        <h2>SECTION 3</h2>
    </section>
</body>
</html>
 

Y aquí es donde viene lo divertido. La clase .parallax le he dado un display grid , place-items, un width y height para centrar el h2, un background no repeat, background-size para que las imágenes no se repitan y tomen forma. En el h2 le he dicho que ocupe un 100% del ancho de la página, junto con un padding de 15px en cada lado. En cada sección deben agregar una imágen con la propiedad background-image y en la "url" especifican la ruta.

CSS

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
 
::-webkit-scrollbar {
    width: 12px;
    background: #147065;
}
 
::-webkit-scrollbar-thumb {
    background: #02D38C;
}
 
.parallax {
    display: grid;
    width: 100%;
    height: 100vh;
    place-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
 
h2 {
    width: 100%;
    text-align: center;
    padding: 15px;
    background-color: #fff;
    border: 2px solid #0a0a0a;
    color: #0A0A0A;
}
 
.sec-1 {
    background-image: url(img/1.jpg);
}
 
.sec-2 {
    background-image: url(img/2.jpg);
}
 
.sec-3 {
    background-image: url(img/3.jpg);
}
 

¿Dónde ocurre la magia? bueno, si se fijan en la clase .parallax podrán ver que utilicé la propiedad background-attachment con el valor de fixed y al scrollear muestra el efecto. Es muy utilizado en las páginas web y por ello quería compartirlo con ustedes. Un saludo!

Créditos por las imágenes: https://fondosmil.com/1920x1080

#R3LI4NT

Programación Web / Galería de imágenes con efecto Lightbox [HTML [CSS] [JS]

« en: Octubre 25, 2021, 05:42:15 am »

HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeria</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="lightbox/lightbox.min.css">
</head>
<body>
    <div class="contenido">
        <h1>Galería de Imágenes</h1>
    </div>
    <div class="galeria">
        <a href="images/1.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/1.jpg" alt=""></a>
        <a href="images/2.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/2.jpg" alt=""></a>
        <a href="images/3.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/3.jpg" alt=""></a>
        <a href="images/4.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/4.jpg" alt=""></a>
        <a href="images/5.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/5.jpg" alt=""></a>
        <a href="images/6.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/6.jpg" alt=""></a>
        <a href="images/7.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/7.jpg" alt=""></a>
        <a href="images/8.jpg" data-lightbox="mygallery" data-title="Wallpaper"><img src="images/8.jpg" alt=""></a>
    </div>
 
    <script src="lightbox/lightbox-plus-jquery.min.js"></script>
</body>
</html>
 

CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
 
body {
    background: #0B0D11;
    height: 100vh;
    width: 100%;
}
 
.contenido { 
    width: 100%;
    text-align: center;
}
 
.contenido h1 {
    color: #f2f2f2;
    margin-top: 50px;
    letter-spacing: 1px;
}
 
.galeria {
    position: relative;
    top: 10%;
    width: 80%;
    margin: 50px auto 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 20px;
}
 
img {
    transition: all 0.2s ease-in-out;
    width: 250px;
    border-radius: 5px;
    border: 1px solid #2A2F37;
    border-radius: 100px / 10px;
    -webkit-box-shadow: 0 10px 6px -6px #000;
           -moz-box-shadow: 0 10px 6px -6px #000;
                box-shadow: 0 10px 6px -6px #000;
}
 
img:hover {
    opacity: .6;
    transform: scale(1.1);
    box-shadow: none;
}
 
 

Es importante que descarguen los archivos para aplicar el efecto Lightbox, dentro se encuentra el código JavaScript y los iconos de close, next, loading, prev.

Archivos: https://www.mediafire.com/folder/8hr92enx1itmy/Galeria

Programación Web / Crear ventana modal con HTML & CSS

« en: Octubre 24, 2021, 03:39:39 am »

Un ventana modal es una capa que se muestra por encima del contenido visual de una página web generalmente activado por una acción como un click o temporizador. Muestra un contenido con una o varias opciones a elegir por el usuario.

1-

HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ventana Modal</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div class="container-modal">
        <div class="modal-btn">
            <button><a href="#mostrar-modal">Mostrar Ventana</a></button>
        </div>
    </div>
 
    <div id="mostrar-modal" class="ventana-modal">
        <div>
            <a href="#" class="cerrar"><i class='bx bx-x-circle'></i></a>
            <h1>My name is...</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque, fugiat facere soluta itaque voluptates nam! A voluptas repellendus adipisci cupiditate</p>
            <button class="info-btn"><a href="#">Más info</a></button>
        </div>
    </div>
</body>
</html>
 

CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Sansita:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];400&display=swap');
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    background-color: #fff;
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
}
 
.container-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
button {
    background: #121212;
    padding: 10px 17px;
    border: 2px solid #00AEF0;
    outline: none;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.6);
}
 
button a {
    text-decoration: none;
    color: #fff;
    font-family: 'Sansita', sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
 
.ventana-modal {
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s;
}
 
.ventana-modal:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
 
.ventana-modal > div {
    width: 500px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 2rem;
    background: #121212;
    color: #f2f2f2;
    border-radius: 2rem;
    box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
 
.ventana-modal h1 {
    font-size: 2em;
    margin: 0 0 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}
 
.ventana-modal p {
    font-family: 'Poppins', sans-serif;
    font-weight: 3000;
    font-size: 13px;
    text-align: justify;
}
 
.cerrar {
    color: #ccc;
    line-height: 50px;
    font-size: 80%;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    cursor: pointer;
    transition: 0.2s;
}
 
i {
    font-size: 20px;
    margin-left: 20px;
    margin-top: 20px;
}
 
.cerrar:hover {
    color: #E32525;
}
 
.info-btn {
    margin: 30px 0;
    border-radius: 20px;
}
 
.info-btn a {
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #EFEFEF;
    transition: 0.2s;
}
 
.info-btn a:hover {
    color: #00AEF0;
}
 

HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ventana Modal</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div class="container-modal">
        <div class="modal-btn">
            <button><a href="#mostrar-modal">Mostrar Ventana</a></button>
        </div>
    </div>
 
    <div id="mostrar-modal" class="ventana-modal">
        <div>
            <a href="#" class="cerrar"><i class='bx bx-x'></i></a>
            <i class='bx bx-envelope'></i><h1>Recibe todas las novedades por mail</h1>
            <input type="text" placeholder="Email..." class="email-input">
            <textarea placeholder="Escribe aquí tus comentarios" id="" cols="40" rows="4"></textarea>
            <button class="sub-btn"><a href="#">Suscribirse</a></button>
        </div>
    </div>
</body>
</html>
 

CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Sansita:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];400&display=swap');
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    background-color: #fff;
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
}
 
.container-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
.modal-btn button {
    background: #121212;
    padding: 10px 17px;
    border: 2px solid #00AEF0;
    outline: none;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.6);
}
 
button a {
    text-decoration: none;
    color: #fff;
    font-family: 'Sansita', sans-serif;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
 
.ventana-modal {
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s;
}
 
.ventana-modal:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
 
.ventana-modal > div {
    width: 500px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 10px;
    background: #0984e3;
    color: #f2f2f2;
    border-radius: 8px;
    border: 3px solid rgba(54,54,54);
    box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
 
.ventana-modal h1 {
    font-size: 1.6rem;
    margin: 15px 60px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    padding: 0 10px;
    color: #f2f2f2;
}
 
.bx-envelope {
    font-size: 40px;
    position: absolute;
    color: #fff;
    margin-left: 10px;
    top: 20px;
}
 
.cerrar {
    color: #ccc;
    line-height: 50px;
    font-size: 80%;
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    cursor: pointer;
    transition: 0.2s;
}
 
.bx-x {
    left: 30px;
    bottom: -15px;
    position: absolute;
    font-size: 40px;
    margin-left: 20px;
    margin-top: 20px;
    background: #D74C6B;
    border-radius: 50%;
    color: #fff;
    border: 2px solid rgba(54,54,54);
}
 
.email-input {
    position: relative;
    top: 20px;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 45px;
    outline: none;
    height: 30px;
    padding: 0 6px;
    font-family: 'Poppins', sans-serif;
    border: 1px solid rgba(0,0,0,.8);
}
 
textarea {
    position: relative;
    top: 30px;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 45px;
    outline: none;
    padding: 0 6px;
    font-family: 'Poppins', sans-serif;
    border: 1px solid rgba(0,0,0,.8);
}
 
 
.sub-btn {
    margin: 60px 163px;
    border-radius: none;
    background: #0668B3;
    border: 2px solid rgba(0,0,0,.8);
    padding: 10px 20px;
}
 
.sub-btn a {
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #EFEFEF;
    transition: 0.2s;
}
 

#R3LI4NT

Seguridad / Re:Enrutar todo el tráfico bajo la red TOR [TorGhost]

« en: Octubre 22, 2021, 04:51:30 pm »

Cita de: carloshack en Octubre 22, 2021, 11:51:49 am

Por que no me deja entrar a la red tor a www.seocordoba.com ?

No se puede o que ?

Es que quiero entrar en oculto en dicha web.

¿No te deja entrar a dicha web desde el navegador tor? ¿qué tipo de error te sale? ¿instalaste las dependencias?
Cuando intentas acceder a una web desde una ubicación desconocida Google bloquea la solicitud/consulta como medida de seguridad contra bots, así que prueba solicitando un nuevo nodo de salida (-r). Otro script similar a este es kali-anonsurf: https://github.com/Und3rf10w/kali-anonsurf, o prueba con proxychains.

Necesitaría una explicación más detallada a tu problema para poder brindarte más información.

Dudas Generales / Re:seguridas criica de gmail.com

« en: Octubre 21, 2021, 04:06:51 am »

Hi, @zury

Por favor, antes de redactar un nuevo post asegúrate de revisar la ortografía, recuerda que para los lectores nos resulta incomodo leer y entender tu problema.

Normativa HxC:

Citar

"Hay que tener un mínimo de cura en el contenido de los posts, esto es referente a la ortografia. Una cosa puede ser el hecho de accentos y parecidos, lo otro ya son faltas que hacen mas da;o visualmente (s en lugar de c, 'h' que no estan, etc....)"

Otro dato a tener en cuenta es la utilidad del botón "Previsualizar", esta pegado al de "Publicar" y sirve para visualizar el post antes de ser publicado y corregir en caso de ser necesario. Yo también cometo faltas (todos lo hacemos) pero trato de que sean lo más mínimas posibles.

Siguiendo con tu problema, posiblemente se deba a una mala gestión de seguridad por parte del usuario. Esto conlleva varios motivos:
a) alguien ha intentado entrar a tu cuenta (o ya lo hizo)
b) estas intentado acceder a tu cuenta desde un lugar desconocido
c) correos de spam, direcciones fraudalentas

Yo optaría por la b, así como Google, Facebook o Twitter, poseen un sistema de detección de intrusos capaz que reconocer desde que dispositivo y dirección IP se ha intentado entrar a la cuenta, por lo tanto se notifica al propietario de una posible "violación" de datos, suele bloquearse la cuenta.

Como posible solución te dejo una guía para aumentar la seguridad en tu cuenta: https://support.google.com/accounts/answer/46526?hl=es-419

Cualquier problema lo comentas aquí debajo, saludos.

#R3LI4NT

Programación Web / Sliders para tu sitio web [HTML] & [CSS]

« en: Octubre 19, 2021, 05:30:31 am »

Disculpen por la calidad, dado que es un GIF :/

1-

Código HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1- Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="img-section">
            <img src="img/1.jpg" alt="">
        </div>
 
        <div class="img-section">
            <img src="img/2.jpg" alt="">
        </div>
 
        <div class="img-section">
            <img src="img/3.jpg" alt="">
        </div>
 
        <div class="img-section">
            <img src="img/4.jpg" alt="">
        </div>
 
        <div class="img-section">
            <img src="img/5.jpg" alt="">
        </div>
 
        <div class="img-section">
            <img src="img/6.jpg" alt="">
        </div>
    </div>
</body>
</html>
 

Código CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    background: #fff;
    min-height: 100vh;
    font-family: 'Oswald', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 100px;
    overflow: hidden;
    transform: skew(7deg) scale(1.1);
    border-radius: 20px;
}
 
.img-section {
    flex: 1;
    transition: all 1s ease-in-out;
    height: 450px;
    position: relative;
}
 
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s ease-in-out;
}
 
.img-section:hover {
    flex-grow: 10;
    -ms-filter:grayscale(0);
}
 

Código HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2- Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slider-container">
        <div class="images">
            <input type="radio" name="slide" id="img1" checked>
            <input type="radio" name="slide" id="img2">
            <input type="radio" name="slide" id="img3">
 
            <img src="img/1.jpg" class="im1" alt="img1">
            <img src="img/2.jpg" class="im2" alt="img2">
            <img src="img/3.jpg" class="im3" alt="img3">
        </div>
 
        <div class="circles">
            <label for="img1"></label>
            <label for="img2"></label>
            <label for="img3"></label>
        </div>
    </div>
</body>
</html>
 

Código CSS:

Código: CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    display: flex;
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #070916;
}
 
.slider-container {
    position: relative;
    width: 51%;
    overflow: hidden;
}
 
.images {
    display: flex;
    width: 100%;
    box-shadow: 0 0 10px #000;
}
 
.images img {
    height: 25rem;
    width: 100%;
    transition: all 0.20s ease-in-out;
}
 
.images input {
    display: none;
}
 
.circles {
    display: flex;
    justify-content: center;
    margin: 5px;
}
 
.circles label {
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    border: solid 2px #fff;
    cursor: pointer;
    transition: all 0.20s ease-in-out;
    margin: 7px;
}
 
.circles label:hover {
    background: #bdc3c7;
}
 
#img1:checked ~ .im1 {
    margin-left: 0;
}
 
#img2:checked ~ .im2 {
    margin-left: -100%;
}
 
#img3:checked ~ .im3 {
    margin-left: -200%;
}
 

Carpeta completa con las imágenes incluidas: https://www.mediafire.com/folder/x7752pyy326ak/Sliders

#R3LI4NT

Programación Web / Diseño de Reproductor MP3 [HTML] [CSS]

« en: Octubre 18, 2021, 12:19:37 am »

Código HTML:

Código: Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diseño de Reproductor MP3</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <article class="container">
        <div class="img">
            <img src="img/eminem.jpg" alt="">
        </div>
 
        <div class="search">
            <i class='bx bx-search' ></i>
        </div>
 
        <div class="footer">
            <div class="info">
                <h3>WITHOUT ME</h3>
                <h4>Eminem</h4>
            </div>
    
            <div class="play">
                <span><i class="fas fa-backward"></i></span>
                <span><i class="fas fa-play"></i></span>
                <span><i class="fas fa-forward"></i></span>
            </div>
    
            <div class="options">
                <span><i class='bx bx-heart' ></i></span>
                <span><i class='bx bx-shuffle'></i></span>
                <span><i class='bx bx-revision'></i></span>
                <span><i class='bx bx-cut'></i></span>
            </div>
        </div>
    </article>
</body>
</html>
 

Código CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
 
.img {
    position: relative;
    bottom: 50px;
}
 
img {
    height: 360px;
    width: 280px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 0 8px rgba(0,0,0,.9);
}
 
.search {
    position: absolute;
    top: 120px;
    margin-left: 247px;
}
 
.search i {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    transition: 0.2s;
    cursor: pointer;
}
 
.search i:hover{
    color: #8e44ad;
}
 
.footer {
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,.9);
    height: 160px;
    width: 280px;
    position: absolute;
    bottom: 65px;
    border-radius: 15px;
}
 
.footer .info {
    padding: 15px 0;
}
 
.footer .info h3 {
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #1a1a1a;
    font-size: 16px;
}
 
.footer .info h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #1a1a1a;
}
 
.play .fas {
    font-size: 20px;
    padding: 0 20px;
    position: relative;
    transition: 0.2s;
    cursor: pointer;
    bottom: -5px;
}
 
.play .fas:hover {
    color: #8e44ad;
}
 
.play .fa-play {
    font-size: 17px;
}
 
.options {
    position: relative;
    top: 40px;
}
 
.options .bx {
    padding: 0 20px;
    cursor: pointer;
    transition: 0.2s;
}
 
.options .bx:hover {
    color: #8e44ad;
}
 

Fotografía usada: https://img.lemde.fr/2020/01/19/0/0/2817/3712/664/0/75/0/4a72002_VD1kbFU7T-G_dBhVCYy8BY7W.jpg

#R3LI4NT

Páginas: [1] 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17