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

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

« en: Ayer a las 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

GitHub / [DragonCrack] Cracking FTP and SSH

« en: Octubre 14, 2021, 05:57:25 am »

DragonCrack

SCRIPT: https://github.com/R3LI4NT/DragonCrack

#R3LI4NT

Programación Web / Acordeón con HTML & CSS

« en: Octubre 10, 2021, 09:19:48 pm »

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>Acordeon</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contenido">
        <h1>Tipos de Hackers</h1>
 
        <ul>
            <li><input type="checkbox" checked>
            <span></span>
            <h2 style="color: #fff;">White Hat</h2>
            <p>El término sombrero blanco en Internet se refiere a un hacker ético, o un experto de seguridad informática, quien se especializa en pruebas de penetración y en otras metodologías para detectar vulnerabilidades y mejorar la seguridad de los sistemas de comunicación e información de una organización.​</p>
            </li>
 
            <li><input type="checkbox" checked>
            <span></span>
            <h2 style="color:#5A5A5A;">Grey Hat</h2>
            <p>Un sombrero gris, en la comunidad hacker, hace referencia a un hacker talentoso que actúa ilegalmente, aunque con buenas intenciones. Son un híbrido entre los hackers de sombrero blanco y de sombrero negro.​</p>
            </li>
 
            <li><input type="checkbox" checked>
            <span></span>
            <h2 style="color:#000;">Black Hat</h2>
            <p>Un hacker de sombrero negro es un hacker que viola la seguridad informática para su propio beneficio personal o por malicia.​</p>
            </li>    
        </ul>
    </div>
</body>
</html>
 

Código CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
 
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    display: flex;
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    background: #f5f6fa;
}
 
.contenido {
    max-width: 45rem;
    padding: 0 15px;
    text-align: center;
    margin: auto;
}
 
.contenido h1 {
    color: #0254A4;
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 2px;
    font-size: 35px;
    margin-bottom: 80px;
}
 
.contenido ul {
    text-align: left;
    list-style: none;
}
 
.contenido h2 {
    font-weight: bold;
    text-transform: none;
    display: block;
    letter-spacing: 1px;
    cursor: pointer;
    font-size: 20px;
    text-align: left;
    line-height: 2.1rem;
    padding: 10px 10px;
    transition: 0.2s;
}
 
.contenido p {
    position: relative;
    display: inline-block;
    contain: layout;
    color: #ddd;
    max-height: 15rem;
    will-change: max-height;
    text-align: left;
    font-size: 15px;
    overflow: hidden;
    opacity: 1;
    transform: translate(0,0);
    margin: 6px 0;
    transition: .3s opacity, .4s max-height;
    z-index: 2;
    hyphens: auto;
    padding: 0 10px;
    text-align: justify;
}
 
.contenido ul li {
    position: relative;
    overflow: hidden;
    background: #1e272e;
    box-shadow: 0 0 10px #000;
    border-radius: 5px;
    margin: 25px 0;
}
 
.contenido ul li span {
    position: absolute;
    transform: translate(-6px, 0);
    margin-top: 30px;
    right: 17px;
 
}
 
.contenido ul li span::before, ul li span::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 10px;
    background: #fff;
    transform: translate(-2px, 0) rotate(90deg);
    cursor: pointer;
}
 
.contenido ul li span::before {
    right: -3px;
    transform: translate(-2px, 0) rotate(90deg);
}
.contenido ul li input[type=checkbox]{
    position: absolute;
    z-index: 1;
    cursor: pointer;
    height: 100%;
    width: 100%;
    opacity: 0;
    touch-action: manipulation;
}
 
.contenido ul li input[type=checkbox]:checked ~ p {
    max-height: 0;
    margin: 0;
    transition: 0.3s;
    opacity: 0;
}
 
.contenido ul li input[type=checkbox]:checked ~ span::before {
    background: #fff;
    transform: translate(-2px, 0) rotate(90deg);
}
 
.contenido ul li input[type=checkbox]:checked ~ span::before {
    background: #fff;
    transform: translate(-2px, 0) rotate(0deg);
}
 

#R3LI4NT

Hacking / Re:Cursos de ciberseguridad gratuitos

« en: Octubre 10, 2021, 05:56:32 pm »

La última vez que hice un curso de él fue en platzi cuando está plataforma había liberado todos los cursos en forma gratuita por 24 horas, así que me anoté en el curso de "Ethical Hacking" de Alvaro Chirou el cual se encontraba en la categoría "avanzado". En el momento de me propuse hacer el curso solo explicaba temas básicos y no nada "avanzado" como lo describía, quiero aclarar que me inscribí para repasar lo que ya había aprendido por mi cuenta y ver si había algo nuevo que me faltará comprender. El punto es que me lleve con un fiasco cuando avanzaba de capítulo en capítulo, ya había aprendido todo eso y la prueba del final ni te cuento.

No trato de denigrar su perfil, ni mucho menos que no accedan a sus cursos, pero si en verdad quiere compartir conocimientos no anda pidiendo likes para liberar cursos. Entiendo perfectamente que trabaja de ello y lo necesita para comer, lo que no comparto es la manera que atrae a los usuarios haciéndoles creer que son "CURSOS AVANZADOS" cuando tan solo con un par de búsquedas en google encuentras todo. Uno también tiene que cuidar su dinero que con tanto sacrificio cuesta conseguir.

Recalco nuevamente, si eres principiante y deseas acceder al curso, hazlo, pero recuerda siempre leer la descripción antes de comprarlo (en este caso es gratis por unas horas), visita otras fuentes... no sea el caso que encuentres uno con mayor riqueza de información.

Se agradece el aporte,

#R3LI4NT

Programación Web / Simple Panel Admin [HTML] [CSS]

« en: Octubre 09, 2021, 05:15:10 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>Panel Admin
    </title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/media_query.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <header>
        <div class="header">
            <input type="search" class="icono-placeholder" placeholder="   Buscar">
            <i class='bx bx-bell'></i>
            <img src="img/user.png" alt="">
            <button>
                CUENTA
            </button>
        </div>
    </header>
 
    <nav class="nav-container">
        <div class="publico">
            <a href="#"><i class='bx bxs-dashboard'></i></i><span>Tablero</span></a>
            <a href="#"><i class='bx bxs-archive-in'></i></i><span>Archivos</span></a>
            <a href="#"><i class='bx bxs-heart'></i></i><span>Favoritos</span></a>
            <a href="#"><i class='bx bxs-user'></i></i><span>Equipo</span></a>
            <a href="#"><i class='bx bxs-message'></i></i></i></i><span>Mensajes</span></a>
            <a href="#"><i class='bx bxs-cog'></i><span>Configuración</span></a>
        </div>
        <div class="configuracion">
            <a href="#"><i class='bx bx-lock-alt'></i></i><span>Seguridad</span></a>
            <a href="#"><i class='bx bx-log-out'></i></i><span>Salir</span></a>
        </div>
    </nav>
 
    <section class="contenido">
        <div class="card">
            <div class="numero">
                <h5>60</h5>
            </div>
            <div class="titulo">
                <p>Proyectos</p>
            </div>
            <i class='bx bx-notepad'></i>
        </div>
 
        <div class="card2">
            <div class="numero">
                <h5>36</h5>
            </div>
            <div class="titulo">
                <p>Pedidos</p>
            </div>
            <i class='bx bx-cart'></i>
        </div>
 
        <div class="card3">
            <div class="numero">
                <h5>$7k</h5>
            </div>
            <div class="titulo">
                <p>Saldo</p>
            </div>
            <i class='bx bx-dollar'></i>
        </div>
 
        <div class="visitas-container">
            <div class="semi-circle-visitas" style="--percentage:50;--fill:#006eba;"><p>VISITAS</p></div>
        </div>
 
        <div class="productos-container">
            <div class="semi-circle-productos" style="--percentage:80;--fill:#006eba;"><p>PRODUCTOS</p></div>
        </div>
 
        <div class="ganancias-container">
            <div class="semi-circle-ganancias" style="--percentage:35;--fill:#006eba;"><p>GANANCIAS</p></div>
        </div>
    </section>
</body>
 
</html>
 

Código CSS:

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}
 
body {
    height: 100vh;
    width: 100%;
    background: #ecf0f1;
    display: flex;
    flex-direction: column;
}
 
.nav-container {
    width: 200px;
    height: 100vh;
    border-radius: 0 0px 20px 0;
    background: #11101C;
}
 
.nav-container div {
    margin: 50px 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-flow: column nowrap;
    padding: 10px;
}
 
.publico {
    padding-bottom: 5rem !important;
}
 
.configuracion {
    border-top: 1px solid #23213A;
}
 
.nav-container a {
    position: relative;
    width: 100%;
    height: 3rem;
    border-radius: 10px;
    color: #ddd;
    font-size: 15px;
    cursor: pointer;
    transition: 0.2s;
    line-height: 50px;
}
 
.nav-container i {
    padding-right: 18px;
    padding-left: 10px;
    position: relative;
    font-size: 22px;
    line-height: 40px;
}
 
.nav-container a:hover {
    background: #1A1830;
}
 
.nav-container a:active {
    border:1px solid #ddd;
}
 
header {
    width: 100%;
    display: flex;
    height: 65px;
    position: absolute;
    background: #11101C;
}
 
.icono-placeholder {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
    font-size: 15px;
    padding: 0 5px;
}
 
.header {
    justify-content: center;
    display: flex;
    align-items: center;
    width: 100%;
}
 
input {
    height: 40px;
    background: #2D2B43;
    width: 250px;
    outline: none;
    border-radius: 10px;
    border: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    box-shadow: inset 0 0 5px #000;
    border: 1px solid #23213A;
}
 
.header i {
    color: #ddd;
    font-size: 25px;
    cursor: pointer;
    position: absolute;
    right: 220px;
}
 
.header i:active {
    color: #CF2B2B;
}
 
.header img {
    height: 35px;
    width: 35px;
    position: absolute;
    right: 155px;
    border-radius: 50%;
    background: transparent;
    padding: 3px;
    cursor: pointer;
    border: 1px solid #ccc;
}
 
.header img:active {
    border:1px solid #CF2B2B;
}
 
.header button {
    position: absolute;
    height: 35px;
    width: 90px;
    right: 30px;
    background: #CF2B2B;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 7px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: inset 0 0 4px #000;
    border: 1px solid #A51A1A;
    transition: 0.2s;
}
 
.header button:hover {
    transform: scale(1.1);
}
 
.card {
    position: absolute;
    background: #fff;
    width: 300px;
    height: 150px;
    top: 120px;
    left: 270px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    font-family: 'Poppins', sans-serif;
    transition: 0.2s;
    cursor: pointer;
}
 
.card:hover {
    box-shadow: none;
    transform: scale(1.1);
}
 
.card .numero {
    position: absolute;
}
 
.card .numero h5{
    padding: 35px 30px;
    font-size: 35px;
}
 
.card .titulo {
    position: absolute;
}
 
.card .titulo p {
    padding: 90px 30px;
    color: rgba(0,0,0,.7);
    font-weight: bold;
}
 
.card i {
    position: absolute;
    padding: 50px 200px;
    font-size: 50px;
    color: #CF2B2B;
}
 
.card2 {
    position: absolute;
    background: #fff;
    width: 300px;
    height: 150px;
    top: 120px;
    left: 635px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    font-family: 'Poppins', sans-serif;
    transition: 0.2s;
    cursor: pointer;
}
 
.card2:hover {
    box-shadow: none;
    transform: scale(1.1);
}
 
.card2 .numero {
    position: absolute;
}
 
.card2 .numero h5{
    padding: 35px 30px;
    font-size: 35px;
}
 
.card2 .titulo {
    position: absolute;
}
 
.card2 .titulo p {
    padding: 90px 30px;
    color: rgba(0,0,0,.7);
    font-weight: bold;
}
 
.card2 i {
    position: absolute;
    padding: 50px 200px;
    font-size: 50px;
    color: #CF2B2B;
}
 
 
.card3 {
    position: absolute;
    background: #CF2B2B;
    width: 300px;
    height: 150px;
    top: 120px;
    left: 1000px;
    box-shadow: 0 0 10px rgba(0,0,0,.7);
    font-family: 'Poppins', sans-serif;
    transition: 0.2s;
    cursor: pointer;
}
 
.card3:hover {
    box-shadow: none;
    transform: scale(1.1);
}
 
.card3 .numero {
    position: absolute;
}
 
.card3 .numero h5{
    padding: 35px 30px;
    font-size: 35px;
    color: #fff;
}
 
.card3 .titulo {
    position: absolute;
}
 
.card3 .titulo p {
    padding: 90px 30px;
    color: rgba(255,255,255,.9);
    font-weight: bold;
}
 
.card3 i {
    position: absolute;
    padding: 50px 0;
    margin: 0 200px;
    font-size: 50px;
    color: #fff;
}
 
 
 
.visitas-container {
    margin: 0 35px;
    position: absolute;
    top: 400px;
    left: 270px;
}
 
 
.semi-circle-visitas {
    width: 250px;
    height: 125px;
    --percentage:0;
    --fill:#404040;
    position: relative;
    color: #fff;
    font-weight: bold;
    font-size: 23px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}
 
.semi-circle-visitas::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 250px;
    border: 30px solid;
    box-sizing: border-box;
    border-color: #404040 #404040 #21AF08 #21AF08;
    border-radius: 50%;
    transform: rotate( calc(1deg * ( -45 + var(--percentage) * 1.8 ) ));
    animation: animation-per 2s forwards;
}
 
@keyframes animation-per {
    0% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(135deg);
    }
}
 
.semi-circle-visitas p {
    color: #21AF08;
    font-weight: 600;
}
 
 
.productos-container {
    margin: 0 35px;
    position: absolute;
    top: 400px;
    left: 635px;
}
 
 
.semi-circle-productos {
    width: 250px;
    height: 125px;
    --percentage:0;
    --fill:#404040;
    position: relative;
    color: #fff;
    font-weight: bold;
    font-size: 23px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}
 
.semi-circle-productos::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 250px;
    border: 30px solid;
    box-sizing: border-box;
    border-color: #404040 #404040 #CF2B2B #CF2B2B;
    border-radius: 50%;
    transform: rotate( calc(1deg * ( -45 + var(--percentage) * 1.8 ) ));
    animation: animation-per 2s forwards;
}
 
@keyframes animation-per {
    0% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(135deg);
    }
}
 
.semi-circle-productos p {
    color: #CF2B2B;
    font-weight: 600;
}
 
 
 
.ganancias-container {
    margin: 0 35px;
    position: absolute;
    top: 400px;
    left: 1000px;
}
 
 
.semi-circle-ganancias {
    width: 250px;
    height: 125px;
    --percentage:0;
    --fill:#404040;
    position: relative;
    color: #fff;
    font-weight: bold;
    font-size: 23px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}
 
.semi-circle-ganancias::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 250px;
    border: 30px solid;
    box-sizing: border-box;
    border-color: #404040 #404040 #0468CB #0468CB;
    border-radius: 50%;
    transform: rotate( calc(1deg * ( -45 + var(--percentage) * 1.8 ) ));
    animation: animation-per 2s forwards;
}
 
@keyframes animation-per {
    0% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(135deg);
    }
}
 
.semi-circle-ganancias p {
    color: #0468CB;
    font-weight: 600;
}
 

Código Media Query CSS:

Código: CSS

@media screen and (max-width:700px) {
    .nav-container {
        width: 160px;
        height: 100vh;
    }
    .nav-container a {
        font-size: 13px;
    }
    .nav-container i {
        padding-right: 10px;
        padding-left: 5px;
    }
 
    .card {
        width: 260px;
        height: 150px;
        top: 120px;
        left: 180px;
    }
 
    .card i {
        padding: 50px 180px;
    }
 
    .card2 {
        width: 260px;
        height: 150px;
        top: 320px;
        left: 180px;
    }
 
    .card2 i {
        padding: 50px 180px;
    } 
    
    .card3 {
        width: 260px;
        height: 150px;
        top: 520px;
        left: 180px;
    }
 
    .card3 i {
        padding: 50px 180px;
    }
    
    input {
        position: relative;
        right: 110px;
        width: 230px;
    }
    .header img {
        position: absolute;
        right: 140px;
    }
 
    .header i {
        position: absolute;
        right: 190px;
    }
    .visitas-container {
        visibility: hidden;
    }
    .productos-container {
        visibility: hidden;
    }
    .ganancias-container {
        visibility: hidden;
    }
} 
 

Como habrán notado, he reutilizado el menú de navegación y la skill-bar que había publicado anteriormente en el foro.
Menú: https://github.com/R3LI4NT/navegation-bar
Skill-bar: https://github.com/R3LI4NT/skills-bar

Recuerden especificar la ruta de sus estilos en las siguientes líneas del HTML:

Código: Text

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/media_query.css"> <!-- el "css" es la carpeta --> 
 

#R3LI4NT

Programación Web / Re:Top Menús de Navegación [HTML] [CSS] [JS]

« en: Octubre 05, 2021, 05:11:02 pm »

8- Menú ToolTip

USO LIBRE
CODE: https://github.com/R3LI4NT/navegation-bar

#R3LI4NT

Hacking / CTF - Metasploitable 2 [RESUELTO]

« en: Octubre 04, 2021, 03:22:05 am »

Hi, HxC!
Hace unos meses atrás subí un post donde resolvía un desafío de CTF (Captura la bandera) y como me apetece, volveré a a compartir con ustedes un nuevo reto pero está vez explotando Metasploitable 2.

Objetivo: compartir conocimiento a todo aquél que recién empiece en este mundillo, más que nada comprender como funcionan las herramientas que veremos a continuación.

Plataforma: https://www.root-me.org/

Escogeremos el entorno virtual "Metasploitable 2" y nos devolverá una dirección:

Lo siguiente será realizar un escaneo con nmap para descubrir que puertos están abiertos:

Comándo: nmap -T4 -A -v ctf22.root-me.org
-T4: Establecer plantilla de tiempo (cuanto más alto, más rápido)
-A: Habilitar la detección del sistema operativo, la detección de versiones, el escaneo de scripts y el rastreo de ruta
-v: aumentar el nivel de información (detalles del objetivo), use -vv para un mayor efecto

Una vez que reconozcamos los puertos que existen tenemos que descubrir los servicios que están corriendo en cada uno de ellos y su versión:

Comándo: nmap -p 21,22,23,80 -A ctf22.root-me.org
-p: escanear un determinado rango de puertos

Nuestro objetivo en este caso es el puerto 21, el cual corre el servicio FTP con su respectiva versión (vsftpd 2.3.4). A continuación abrimos una nueva ventana en la terminal y ejecutaremos Metasploit:
Comándo: msfconsole para abrir Metasploit
search: buscar exploit

¡BINGO! existe un exploit para esa versión, solo queda seleccionarlo con "use [num]" o "use [nombre]".
Ej: use exploit/unix/ftp/vsftpd_234_backdoor

Introducimos el RHOSTS de la máquina, para obtenerlo bastaría con hacer un ping a la dirección:

El ping sirve para comprobar el estado de conectividad de un determinado host. Seguimos con lo que estabamos:

options: muestra las opciones que están disponibles para módulo o exploit
set: establece una variable específica del contexto en un valor

Para finalizar, ejecutamos "exploit" o "run":

¡YA ESTAMOS DENTRO!

Solo bastaría encontrar el directorio passwd y dar con la llave:

ls: muestra directorios, archivos

Validamos la contraseña y ya lo tenemos!

KEY: d19c29bb5348b7d675e18ead76f7e110

Y así es como finalmente cumplimos el reto, continuaré trayendo estos retos y compartiéndolos aquí, no solo porque me la paso bien, sino que me parece una buena idea para que aquellos que se topen con este post les incite a aprender.
Por si quieren ver el primer reto: https://hackxcrack.net/foro/hacking/ctf-basic-pentesting-1/

Happy Hacking!

#R3LI4NT

Otros / Interfaz de Login con Python [Tkinter]

« en: Octubre 02, 2021, 11:10:51 pm »

Código Python:

Código: Python

from tkinter import *
from PIL import ImageTk, Image
 
class LoginSys:
    def __init__(self,window):
        self.window=window
        self.window.title("Login System")
        self.window.geometry("1190x600")
        self.window.resizable(False,False)
        self.window.iconbitmap("img/logo.ico")
 
 
        # BACKGROUND IMG
        self.bg=ImageTk.PhotoImage(file="img/background.jpg")
        self.bg_img=Label(self.window,image=self.bg).place(x=0,y=0,relwidth=1,relheight=1)
 
        # IMAGE FRONT ==> por si desean agregar una imagen
        #self.img = ImageTk.PhotoImage(Image.open("ruta"))
        #self.img_label = Label(self.window,image=self.img, bd=0, g)
        #self.img_label.pack()
 
 
        # LOGIN FRAME
        frame_login=Frame(self.window,bg="white")
        frame_login.place(x=150, y=150, height=340, width=500)
 
        title=Label(frame_login, text="Login System", font=("Impact",32,"bold"),bg="white", fg="#089015").place(x=120, y=10)
 
        label_user=Label(frame_login, text="Username", font=("Arial",12,"bold"),bg="white", fg="#A8A8A8").place(x=80, y=100)
        self.user_entry=Entry(frame_login, font=("Times New Roman", 11), bg="lightgray")
        self.user_entry.place(x=80, y=130, width=330, height=32)
 
 
        label_pass=Label(frame_login, text="Password", font=("Arial",12,"bold"),bg="white", fg="#A8A8A8").place(x=80, y=180)
        self.pass_entry=Entry(frame_login, font=("Times New Roman", 11), bg="lightgray")
        self.pass_entry.place(x=80, y=210, width=330, height=32)
 
        pass_btn=Button(frame_login, text="¿Olvidó su contraseña?", bg="white",bd=0, fg="#339B3D", font=("Arial", 9)).place(x=80,y=250) 
        login_btn=Button(self.window, text="INGRESAR", bg="#339B3D", fg="white", font=("Arial", 15, "bold")).place(x=335, y=470)
 
window = Tk()
gui=LoginSys(window)
window.mainloop()
 

En el caso de no tener PIL instalado deberán ir a la terminal (o símbolo de sistema en windows) y ejecutar lo siguiente:

- pip install pillow

Adjunto las imágenes:
- https://www.mediafire.com/folder/57a4jmsh4nwja/Login_System

Manuales y revistas / Re:"Road To Hacking"

« en: Septiembre 25, 2021, 05:19:22 am »

NUEVA ACTUALIZACIÓN

Contenido agregado:

- Metasploit:
[+] Evadir Antivirus
[+] CTF - Capture the Flag

- SETOOLKIT:
[+] Email Spoofing
[+] QR Code Attack (Phishing)

- NetDiscover: Sondeo de redes inalámbricas.

- Anonsurf: Ocultar la dirección IP y cifrar tráfico de red.

- TorGhost: Redirigir todo nuestro tráfico de red bajo la red Tor, evitar DNSLeak y ocultar nuestra IP.

- MacChanger: Cambiar direcciones MACs de interfaces de red.

- Angry IP Scanner: Escanear direcciones IPs y puertos.

- Kismet: Detectar y rastrear intrusiones en una red de wifi inalámbrica. Técnica de WarDriving.

- Bettercap: Realizar ataques MITM contra una red y manipular el tráfico por diferentes protocolos.

- WPScan: Encontrar vulnerabilidades en sitios WordPress.

- THC Hydra: Crackear sistemas de login con fuerza bruta.
[+] Cracking Metasploitable

PESO: 15.4MB
MEDIAFIRE: https://www.mediafire.com/file/kwatxr7w1obh65n/RoadToHacking.pdf/file
MEGA: https://mega.nz/file/yeJHzYBS#WFCp4Hv0LuU6nzZ_JwZah_zXfgJeaVJzlKf29uTb_JQ
GITHUB: https://github.com/R3LI4NT/road-to-hacking

¡EL CONOCIMIENTO ES LIBRE!

#R3LI4NT

Hacking / Re:Cómo saber el exploit necesario para cada vulnerabilidad ?

« en: Septiembre 15, 2021, 04:34:15 pm »

Cita de: xHavkedx en Septiembre 15, 2021, 01:11:12 pm

Otra herramienta que te puede ayudar es sqlmap, para inyecciones, te dice la vulnerabilidad y la explota automaticamente (si existe el exploit).

SQLmap es solo para inyectar código malicioso a una base de datos y que este te devuelva una respuesta. En pocas palabras, la vulnerabilidad que explota es SQLI.

@Pr0xyH4ck desde un principio nombra a nmap y nessus por el cual deduce que quiere explotar un sistema operativo por medio de puertos vulnerables, sqlmap no tiene nada que ver aquí, no mientras no sea una DB.

Programación Web / Botones con efecto ToolTIP [HTML] [CSS]

« en: Septiembre 14, 2021, 05:50:49 am »

Botones con efecto ToolTIP

Los globos son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.

Fuente

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>Botones ToolTIP</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <h1>Botones con efecto ToolTIP</h1>
    <div class="container">
        <div class="icon facebook">
            <div class="tooltip">Facebook</div>
            <span><i class="fab fa-facebook-f"></i></span>
        </div>
        <div class="icon instagram">
            <div class="tooltip">Instagram</div>
            <span><i class="fab fa-instagram"></i></span>
        </div>
        <div class="icon twitter">
            <div class="tooltip">Twitter</div>
            <span><i class="fab fa-twitter"></i></span>
        </div>
        <div class="icon whatsapp">
            <div class="tooltip">WhatsApp</div>
            <span><i class="fab fa-whatsapp"></i></span>
        </div>
    </div>
</body>
</html>
 

Código CSS

Código: CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap');
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
 
body {
    display: flex;
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: #ecf0f1;
}
 
h1 {
    position: absolute;
    top: 120px;
    font-style: italic;
}
 
.container {
    display: inline-flex;
}
 
.container .icon {
    display: flex;
    position: relative;
    margin: 0 30px;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    z-index: 2;
    transition: 0.5s cubic-bezier(0.70, -0.55, 0.30, 1.5);
}
 
.container .icon span {
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    text-shadow: -1px 2px 3px rgba(0,0,0,.30);
    box-shadow: 0 7px 10px rgba(0,0,0,0.2);
    line-height: 50px;
    font-size: 22px;
    position: relative;
    z-index: 2;
    transition: 0.5s cubic-bezier(0.70, -0.55, 0.30, 1.5);
}
 
.container .icon .tooltip {
    position: absolute;
    padding: 7px 15px;
    font-size: 16px;
    border-radius: 15px;
    top: 0;
    z-index: 1;
    background: #fff;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 7px 10px rgba(0,0,0,0.2);
    transition: 0.5s cubic-bezier(0.70, -0.55, 0.30, 1.5);
}
 
.icon .tooltip:before {
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%) rotate(45deg);
    background: #fff;
    transition: 0.5s cubic-bezier(0.70, -0.55, 0.30, 1.5);
}
 
.container .icon:hover .tooltip {
    top: -60px;
    opacity: 1;
    pointer-events: auto;
}
 
.container .icon:hover span {
    color: #fff;
}
 
.container .facebook:hover span,
.container .facebook:hover .tooltip,
.container .facebook:hover .tooltip:before {
    background: #3b5998 ;
}
 
.container .facebook:hover span,
.container .facebook:hover .tooltip {
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.2);
}
 
.container .instagram:hover span,
.container .instagram:hover .tooltip,
.container .instagram:hover .tooltip:before {
    background: #DD2A7B ;
}
 
.container .instagram:hover span,
.container .instagram:hover .tooltip {
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.2);
}
 
.container .twitter:hover span,
.container .twitter:hover .tooltip,
.container .twitter:hover .tooltip:before {
    background: #00ACEE ;
}
 
.container .twitter:hover span,
.container .twitter:hover .tooltip {
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.2);
}
 
.container .whatsapp:hover span,
.container .whatsapp:hover .tooltip,
.container .whatsapp:hover .tooltip:before {
    background: #25D366;
}
 
.container .whatsapp:hover span,
.container .whatsapp:hover .tooltip {
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,0.2);
}
 

#R3LI4NT

Presentaciones / Re:[Presentación] xHavkedx

« en: Septiembre 11, 2021, 08:27:42 pm »

Bienvenido!

Programación Web / Re:Personalizar checkboxes con CSS

« en: Septiembre 09, 2021, 08:37:12 pm »

Cita de: poseidon en Septiembre 09, 2021, 08:05:23 pm

Estan muy chulos, me entran ganas de dormir mirandolos ajaja

Ahí tenés el icono del avión para ponerte en "modo avión" jajaj. Están buenos para hacer un panel de control, quedaría chulo.

Programación Web / Personalizar checkboxes con CSS

« en: Septiembre 08, 2021, 03:06:42 am »

Personalizar checkboxes con CSS

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>Checkboxes</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fa fa-power-off icon"></i>
        </label>
        
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fab fa-bluetooth-b icon"></i>
        </label>
    
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fas fa-plane icon"></i>
        </label>  
    
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fas fa-bell icon"></i>
        </label>
        
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fas fa-battery-full icon"></i>
        </label>
        
        <label>
            <input type="checkbox">
            <span class="btn"></span>
            <i class="fas fa-wifi icon"></i>
        </label>
</body>
</html>
 

Código CSS:

Código: CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-template-columns: repeat(3, 8em);  
    background: #242526;
}
 
label {
    position: relative;
    width: 80px;
    height: 80px;
    cursor: pointer;
    border-radius: 50%;
    margin: 0 20px;
}
 
label .btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
    inset 0 -1px 5px rgba(255, 255, 255,.7) , 0 0 2px 2px #000,
    0 0 2px 0px #0F0F0F;
    border-radius: 50%;
    background: #1A1A1A;
}
 
label input[type='checkbox'] {
    -webkit-appearance: none;
}
 
label input[type='checkbox']:checked ~ .btn
{
    box-shadow: 0 0 0 rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
    inset 1px 1px rgba(255, 255, 255,.1), 0 0 0 2px #000,
    0 0 0 3px #0F0F0F, 0 0 15px 8px #00B9DE;
    font-size: 10px;
}
 
label input[type='checkbox']:checked ~ .fa {
    color: #00B9DE;
    text-shadow: 0 0 13px #00B9DE,
                0 0 25px #00B9DE;
}
 
label input[type='checkbox']:checked ~ .fab {
    color: #00B9DE;
    text-shadow: 0 0 13px #00B9DE,
                0 0 25px #00B9DE;
}
 
label input[type='checkbox']:checked ~ .fas {
    color: #00B9DE;
    text-shadow: 0 0 13px #00B9DE,
                0 0 25px #00B9DE;
}
 
label .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.1em;
}
 
label .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.2em;
}
 
label .fa-plane {
    font-size: 1.9em;
}
 
label .fa-bell {
    font-size: 1.9em;
}
 
label .fa-battery-full {
    font-size: 1.9em;
}
 
label .fa-wifi {
    font-size: 1.9em;
}
 

El pseudo-clase ":checked" representa el radio (checkbox) al momento de ser presionado.

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