index.html

<!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Pablo Rodríguez Tapia</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />-->
    <link rel="stylesheet" href="assets/css/estilos.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="assets/img/logo.png" class="img-fluid">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 fs-5">
                    <li class="nav-item">
                        <a class="nav-link" href="#Acerca-de-mi">Acerca de mi</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Los-Grafitis">Ruta Urbana</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Contacto">Contacto</a>
                    </li>

                </ul>

            </div>
        </div>
    </nav>

    <header id="Hero-Section" class="text-light text-end py-0 mt-0">
        <div class="container">
            <div class="ms-auto col-12 col-md-7 ">
                <h1 class="display-1 fw-bold my-5">
                    Arte Callejero: Donde las Calles Cobran Vida
                </h1>
                <p class="my-5">
                    Cada mural es un portal: a una historia, a un universo de color que lo representa, a una realidad que nos toca, a una identidad que se afirma y a ideales que inspiran. Sobre esos muros, los artistas se atreven a soñar y a expresarse con una voz única y poderosa. Los murales que vas a conocer son un reflejo de esta pasión. Con justa razón, Santiago y Valparaíso son reconocidas internacionalmente como las capitales chilenas del arte callejero. Te invitamos a explorar algunos de los murales más impresionantes de Chile, listos para robarse una foto y, quizás, un trocito de tu alma.
                </p>
            </div>
        </div>
    </header>


    <section id="Acerca-de-mi" class="container text-center my-5">


        <h2 class="display-3 fw-bold my-4">Acerca de mi</h2>

        <p class="my-4">
            Soy la mente inquieta detrás de este Blog, y me he propuesto ser un referente clave para quien quiera entender el panorama del grafiti y el arte callejero aquí en Chile. Con una mirada aguda y un profundo respeto por esta expresión urbana que tanto me apasiona, mi blog se ha convertido en una vitrina esencial. Desde mi base, busco descubrir y compartir desde las intervenciones más audaces en todo Santiago hasta los murales más poéticos de Valparaíso, siempre con el objetivo de destacar el increíble talento y la narrativa de sus creadores.
        </p>


        <div class="row">
            <div class="col-12 col-md-4">
                <i class="fa fa-camera-retro fa-3x my-3"></i>
                <h3 class="my-3 fw-bold">Fotógrafo de Grafitis</h3>
                <p class="my-3">Fotografiar arte callejero es sentir el pulso de la ciudad a través del lente. Busco ese encuadre que transmita la energía, el mensaje crudo o la belleza inesperada. Cada imagen que guardo es un fragmento de la identidad urbana, un pequeño legado de la creatividad que florece en nuestros rincones.
                </p>
            </div>
            <div class="col-12 col-md-4">
                <i class="fa-solid fa-circle-info fa-3x my-3"></i>
                <h3 class="my-3 fw-bold">Grafitis en la Cultura</h3>
                <p class="my-3">el grafiti en el hip-hop es el arte de escribir tu nombre con estilo y carácter, una herramienta de autoafirmación y un pilar visual que cuenta historias de la calle, la identidad y la lucha por el reconocimiento.
                </p>
            </div>
            <div class="col-12 col-md-4"> 
               <i class="fa fa-street-view fa-3x my-3"></i>
                <h3 class="my-3 fw-bold">Grafitis en Chile</h3>
                <p class="my-3">Si bien Valparaíso y Santiago concentran la mayor fama y cantidad, es importante mencionar que el arte callejero es una manifestación viva que puede surgir en diversas ciudades y pueblos a lo largo de Chile, a menudo ligado a festivales locales o iniciativas comunitarias. Sin embargo, para una experiencia concentrada y de renombre, Valparaíso y Santiago son los destinos clave.
                </p>
            </div>
        </div>
    </section>


    <section id="Los-Grafitis" class="my-5 p-5 bg-success">

        <h2 class="display-4 fw-bold text-center text-light mb-3">Grafitis</h2>

        <div class="row">
        <div class="col-12 col-sm-4 py-2">
            <div class="card">
                <div class="image-top" style="background-image: url(assets/img/grin1.png)"></div>
                <div class="card-body">
                    <h5 class="card-title fw-bold">grin</h5>
                    <p class="card-text">
                        Sta. Isabel, fines de 1 999, autor: Grin: pieza que muestra los inicios de un proceso en que las letras del nombre se convierten en edificios, o en que sus edificios son parte de un mundo personal, como su propio nombre.
                    </p>
                    <a href="assets/img/grin_1-1.png" 
                       target="_blank" 
                       class="btn btn-outline-info">
                        Ver Completa
                    </a>
                </div>
            </div>
        </div>
            <div class="col-12 col-sm-4 py-2">
                <div class="card">
                    <div class="image-top" style="background-image: url(assets/img/zekis_1.png)"></div>
                    <div class="card-body">
                        <h5 class="card-title fw-bold">Zekis</h5>
                        <p class="card-text">Plaza Italia, 1998, autor: Zekis: pieza graffitera muy conocida y que identifica a su creador, además de evidenciar su dominio del spray
                        </p>
                        <a href="assets/img/zekis_1-1.png" 
                       target="_blank" 
                       class="btn btn-outline-info">
                        Ver Completa
                    </a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-4 py-2">
                <div class="card">
                    <div class="image-top" style="background-image: url(assets/img/alme_1.png)"></div>
                    <div class="card-body">
                        <h5 class="card-title fw-bold">Alme, Horate y CN6</h5>
                        <p class="card-text">Centro de Alumnos Ingeniería UCHILE, Baucheff, 2002, Autores: Alme, Horate y CN6: master piece pintada por creadores pertenecientes a diversas crew, los que logran un discurso visual colectivo, en el que destacan las identidades estilísticas personales.
                        </p>
                        <a href="assets/img/alme_1-1.png" target="_blank" class="btn btn-outline-info">Ver Completa</a>
                    </div>
                </div>
            </div>
        </div>

    </section>



    <section id="Contacto" class="container my-5">

        <h2 class="display-4 fw-bold text-center my-4">Contáctame</h2>

        <p class="text-center my-4 d-none d-md-block">¡Exploradores urbanos de Chile! ¿Vieron un grafiti o mural que los deslumbró? ¡Quiero saberlo! Envíenme la ubicación por el formulario. Así, juntos, no nos perderemos ninguna joya del arte callejero. ¡Espero sus datos!</p>

        <form>
            <div class="form-group mb-4">
                <i class="fa fa-user-circle fa-2x my-3"></i>
                <input class="form-control" placeholder="Nombre">
            </div>

            <div class="form-group mb-4">
                <i class="fa fa-envelope fa-2x my-3"></i>
                <input class="form-control" placeholder="Correo electrónico" />
            </div>

              <div class="form-group">
                <i class="fa fa-location-arrow fa-2x my-3"></i>
                <input class="form-control" placeholder="Como puedo llegar?" />
            </div>

            <div class="form-group">
                <i class="fa fa-commenting fa-2x my-3"></i>
                <textarea class="form-control" placeholder="Escribe aquí tu mensaje"></textarea>
            </div>

            <div class="my-3 text-end">
                <button class="btn btn-info text-light">Enviar</button>
            </div>
        </form>
    </section>



    <footer class="bg-dark text-center text-light p-4">
        <p class="mb-0">¿Disfrutas de esta galería callejera virtual? ¡Este explorador funciona con cafeína! <br>Si quieres cooperar para mantener mis ojos bien abiertos (y mi teclado activo) en la búsqueda del próximo tesoro urbano en Chile, <br> <a href="https://coff.ee/TheSpamLocPRT" target="_parent">aquí puedes invitarme un cafecito</a> y serás mi mecenas favorito. ¡Salud! ☕</p>
    </footer>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
</body>

</html>