css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html lang="es">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <title> Portfolio de Mia Salazar, maquetadora web </title>
  <meta name="description" content="Mia Salazar portoflio">
  <meta name="keywords" content="portfolio, mia salazar, maquetacion, diseño web">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="container-fluid">
    <div class="wrap">
      <header class="row">
        <!--HEADER-->
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 fadeInLeft">
          <h2 class="presentacion">
            ¡Hola! Soy
          </h2>
          <h1 id="mia-logo">
            Mia Salazar
          </h1>
          <h2 class="presentacion">
            Diseñadora y maquetadora web <em> junior </em>
          </h2>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 xs-center">
          <!--Menu-->
          <nav class="navbar navbar-expand-lg menu-principal fadeInTop navbar-toggleable-sm navbar-dark navbar-right d-flex" role="navigation">
            <button class="navbar-toggler navbar-toggler-right ml-auto toggle-center " type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
              <ul class="navbar-nav no-list">
                <li class="nav-item list-inline">
                  <a class="nav-link nav-menu" href="#quien-soy"><span class="linea1">¿Quién</span><span class="linea2"> soy?</span> </a> </li>
                <!--dropdown-->
                <li class="nav-item dropdown list-inline">
                  <a class="nav-link dropdown-toggle nav-menu" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="linea1">¿Qué</span><span class="linea2"> hago?</span> </a>
                  <div id="filter" class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item li-filter"  data-title="Premios">Premios</a>
                    <a class="dropdown-item li-filter" data-title="Maquetación">Maquetación</a>
                    <a class="dropdown-item li-filter" data-title="Diseño Gráfico" >Diseño Gráfico</a>
                    <a class="dropdown-item li-filter" data-title="Publicaciones">Publicaciones</a>
                    <a class="dropdown-item" data-title="Presumiendo">Todo</a>
                  </div>
                </li>
                <!--dropdown final-->
                <li class="nav-item list-inline">
                  <a class="nav-link nav-menu" href="#de-donde-vengo"><span class="linea1">¿De dónde</span><span class="linea2"> vengo?</span> </a> </li>
                <li class="nav-item list-inline ">
                  <a class="nav-link nav-menu nav-menu-last" href="#contacta-mia"><span class="linea1">Contacta</span><span class="linea2"> Mia</span> </a> </li>
              </ul>
            </div>
          </nav>
        </div>
      </header>
      <main class="">
                <!--barra subir-->
        <span class="ir-arriba fa fa-angle-up"></span>
        <section class="portfolio row">
          <div class="images-center containerimg" id="Presumiendo">
            <h2 class="presumiendo h2-texto">Presumiendo </h2>
            <div class="separator"></div>
            <ul class="gallery" id="portfolio">
                            
              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo maquetación">
                <article class="li-image">
                  <figure>
                    <a href="https://codepen.io/MiaSalazar/full/JLgZPa" target="_blank"> <img src="https://i.ibb.co/2ZQt1Rb/goat-1456762-01.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Landing de Bling Goat"/> </a>
                  </figure>
                </article>
              </li>
              
                            <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo maquetación">
                <article class="li-image">
                  <figure>
                    <a href="https://codepen.io/MiaSalazar/full/KrQKve" target="_blank"> <img src="https://i.ibb.co/xmC2vtY/Captura-de-pantalla-2018-11-27-a-las-16-19-11.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Página tributo a Taylor Swift"/> </a>
                  </figure>
                </article>
              </li>
              
              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 diseño-gráfico todo">
                <article class="li-image ">
                  <figure> <a data-title="Voz-paralela" data-toggle="modal" data-target="#logo-voz-paralela"> <img src="https://66.media.tumblr.com/76daee51fa9475a990c82386789763b2/tumblr_pi3a3o75fT1v1odbho1_500.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Logo de voz paralela"> </a></figure>
                </article>
                <div class="overlay-image-portfolio">
                  <div class="text-image-portfolio"></div>
                </div>
              </li>
              <!--Modal-->
              <article class="modal fade" id="logo-voz-paralela" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://66.media.tumblr.com/76daee51fa9475a990c82386789763b2/tumblr_pi3a3o75fT1v1odbho1_500.png" class="images-portfolio img-fluid" alt="Logo de voz paralela">
                </figure>
              </article>
              <!--Modal fin-->
              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 diseño-gráfico todo">
                <article class="li-image ">
                  <figure>
                  <a data-title="Taquigrafo" data-toggle="modal" data-target="#taquigrafo"> <img src="https://78.media.tumblr.com/5bb0bb0a3c7485cb296ada25d069d66e/tumblr_pdtr9jm3HA1v1odbho1_500.jpg" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Imagen del programa El Taquigrafo"> </a>
                  </figure>
                </article>
                <div class="overlay-image-portfolio">
                  <div class="text-image-portfolio"></div>
                </div>
              </li>
              <!--Modal-->
              <article class="modal fade" id="taquigrafo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/634f632fca9ca38717b4909cdff83ca2/tumblr_p3d4y8XAO91v1odbho2_540.jpg" class="images-portfolio img-fluid" alt="Imagen del programa El Taquigrafo">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="Logo-Taquigrafo" data-toggle="modal" data-target="#logo-taquigrafo"> <img src="https://66.media.tumblr.com/9139c8240a8b50f33545d74df1d3b0eb/tumblr_pi3ad3nW7r1v1odbho1_500.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Logotipo Taquigrafo"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="logo-taquigrafo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://66.media.tumblr.com/9139c8240a8b50f33545d74df1d3b0eb/tumblr_pi3ad3nW7r1v1odbho1_500.png" class="images-portfolio img-fluid" alt="Logotipo Taquigrafo">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="Ejemplo 1" data-toggle="modal" data-target="#animayo2018"> <img src="https://78.media.tumblr.com/22f334f1eeb524baff4643b59b970d9c/tumblr_pdttookS5u1v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Cartel para Animayo 2018"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="animayo2018" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/5c47870d1626551faff3f7333067a21e/tumblr_pdttookS5u1v1odbho1_540.jpg" class="images-portfolio img-fluid" alt="Cartel para Animayo 2018">
                </figure>
              </article>


              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo maquetación">
                <article class="li-image">
                  <figure>
                    <a href="https://leadershipandmanagementschool.com/landingnew/lms-generica/" target="_blank"> <img src="https://78.media.tumblr.com/6ebcab65ca50d3c5c4a9b457054b9ce8/tumblr_p3brvyBp591v1odbho2_r1_540.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Landing genérica de LMS"> </a>
                  </figure>
                </article>
              </li>

              <!--Modal fin-->
              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo maquetación diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a href="https://maurociveraroblog.wordpress.com/" target="_blank"> <img src="https://78.media.tumblr.com/9d4ed7b19b07c2be13f09c39747283ca/tumblr_pdtse9hLlw1v1odbho1_1280.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Portfolio de Mauro Civera Ro"/> </a>
                  </figure>
                </article>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="RecogidaJSM" data-toggle="modal" data-target="#nadie-sin-comida"> <img src="https://78.media.tumblr.com/c7cb710226429a08d841014d1cb4dd49/tumblr_p1xsxqElgw1v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round" alt="Cartel de recogida de alimentos Juventudes Socialistas"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="nadie-sin-comida" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://66.media.tumblr.com/bddcf77e04021a1d669896e97a15e8e2/tumblr_p1xsxqElgw1v1odbho1_1280.jpg" class="images-portfolio img-fluid" alt="Cartel de recogida de alimentos de las Juventudes Socialistas">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico maquetación">
                <article class="li-image">
                  <figure>
                    <a data-target="_blank " data-target="#mailing-lms-1"> <img src="https://78.media.tumblr.com/a4d1653f2ea5c7a9a665f04070664da7/tumblr_p3dd1sC5xl1v1odbho2_r2_500.png" class="images-portfolio img-responsive images-portfolio-round" alt="Imagen de un mailing"> </a>
                  </figure>
                </article>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="Aquae" data-toggle="modal" data-target="#Revolucion-ideas"> <img src="https://78.media.tumblr.com/9c8adfea6acc8415bae13fd601004ab3/tumblr_ogde50DR0d1v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Cartel concurso carteles Aquae"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="Revolucion-ideas" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://66.media.tumblr.com/2057642eadef3d6715aaa4520603cb4d/tumblr_pi4iluhP4e1v1odbho9_500.jpg" class="images-portfolio img-fluid" alt="Cartel concurso carteles Aquae">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="Huercasa" data-toggle="modal" data-target="#Huercasa"> <img src="https://78.media.tumblr.com/dbb64f0e005eca8f3fad65c971e22e98/tumblr_okrf404bLI1v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Cartel para el concurso de Huercasa"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="Huercasa" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/a6d845146569b36b354c5a661ee797ea/tumblr_okrf404bLI1v1odbho1_1280.jpg" class="images-portfolio img-fluid" alt="Cartel para el concurso de Huercasa">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico todo">
                <article  class="li-image">
                  <figure>
                    <a href="https://leadershipandmanagementschool.com/Descargables/Whitepaper_PeopleAnalytics.pdf" data-title="Ejemplo 1" TARGET="_blank"> <img src="https://78.media.tumblr.com/b8210bbacd532ea58686d4869d39f4ff/tumblr_p3bs79VAk81v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Portada del Whitepaper de PeopleAnalytics"> </a>
                  </figure>
                </article >
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article  class="li-image">
                  <figure>
                    <a data-title="Animayo17" data-toggle="modal" data-target="#animayo2017"> <img src="https://66.media.tumblr.com/7da9610096855cfaf0424bb3a85cabc1/tumblr_pi4iluhP4e1v1odbho8_400.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Cartel para el concurso de carteles de Animayo 2017"> </a>
                  </figure>
                </article >
              </li>
              <!--Modal-->
              <article class="modal fade" id="animayo2017" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://66.media.tumblr.com/390ce84826e186202e54cdf88e93f6a2/tumblr_pi4iluhP4e1v1odbho7_500.jpg" class="images-portfolio img-fluid" alt="Cartel para el concurso de carteles de Animayo 2017">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo maquetación">
                <article class="li-image">
                  <figure>
                    <a href="https://leadershipandmanagementschool.com/landingnew/whitepaper-people-analytics/" data-title="Ejemplo 1" target="_blank"> <img src="https://78.media.tumblr.com/9ccff7ecc9668f8a138032f38ed6c881/tumblr_p3bs1d2Hqw1v1odbho2_r1_540.png" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Imagen para el whitepaper de People Analytics"> </a>
                  </figure>
                </article>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image ">
                  <figure>
                    <a href="#" data-title="Ejemplo 1" data-toggle="modal" data-target="#JSM3X3"> <img src="https://66.media.tumblr.com/d6e6c74780e02adebf98ec25f0c6f5c5/tumblr_pi4iluhP4e1v1odbho5_400.jpg" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Cartel del torneo 3x3 para las Juventudes Socialistas"> </a>
                  </figure>
                </article>
                <div class="overlay-image-portfolio">
                  <div class="text-image-portfolio"></div>
                </div>
              </li>
              <!--Modal-->
              <article class="modal fade" id="JSM3X3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/f4d48be3f1360a5b303af3389865891f/tumblr_pdx526sQ6a1v1odbho1_540.jpg" class="images-portfolio img-fluid" alt="Cartel del torneo 3x3 para las Juventudes Socialistas">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo maquetación">
                <article class="li-image">
                  <figure>
                    <a href="https://leadershipandmanagementschool.com/mailing/Convocatoria_2018/index.html" target="_blank" data-target="#mailing-lms-2"> <img src="https://78.media.tumblr.com/105b452b5a477ae9f8247b26c17ae877/tumblr_p3dcmomxhX1v1odbho2_r1_540.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Mailing para LMS"> </a>
                  </figure>
                </article>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="COP21" data-toggle="modal" data-target="#COP21"> <img src="https://66.media.tumblr.com/fb1b19def9974f4a77fbd614f9344a9e/tumblr_pi4i7n5rQv1v1odbho3_400.jpg" class="images-portfolio img-responsive images-portfolio-round img-fluid" alt="Logo COP21"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="COP21" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <img src="https://66.media.tumblr.com/eddb86a0dbc68a911b5be9da9abf46ec/tumblr_pi4i7n5rQv1v1odbho2_500.jpg" class="images-portfolio img-responsive img-fluid" alt="Logo COP21">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>Para el partido Equo realicé el logotipo para el COP21 y el cartel prototipo para ser usado durante el congreso</p>
                    </div>
                  </div>
                </div>
              </article>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="CineAlicante" data-toggle="modal" data-target="#festival-alicante"> <img src="https://66.media.tumblr.com/d74f92edd008fe6394b4aab713b91204/tumblr_pi4iluhP4e1v1odbho3_400.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Cartel para el concurso de carteles del festival de cine de Alicante"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="festival-alicante" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://66.media.tumblr.com/7d4fc74e5ce07178dd04b1d32835cb40/tumblr_pi4i7n5rQv1v1odbho10_500.jpg" class="images-portfolio img-fluid" alt="Cartel para el concurso de carteles del festival de cine de Alicante">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo maquetación">
                <article class="li-image">
                  <figure>
                    <a href="https://leadershipandmanagementschool.com/landingnew/ipq-innovacion/" data-target="_blank " data-target="#landing-creatividad"> <img src="https://78.media.tumblr.com/68f39cbbe662b5b83dd8574156104e26/tumblr_p3bsybXA8f1v1odbho4_r1_400.png" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Imagen de un mailing"> </a>
                  </figure>
                </article>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="JSM-Recogida-plato" data-toggle="modal" data-target="#JSM-Recogida-plato"> <img src="https://78.media.tumblr.com/aa831080d09f0d840dadc214197c98f7/tumblr_p1xssk0zA91v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Cartel para la recogida de alimentos"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="JSM-Recogida-plato" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/6db8f4a25a96f1ae476d7ab56ae8701b/tumblr_p1xssk0zA91v1odbho1_540.jpg" class="images-portfolio img-fluid" alt="Cartel para la recogida de alimentos">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="Ejemplo 1" data-toggle="modal" data-target="#Becquercon"> <img src="https://66.media.tumblr.com/48be9b066ffca5224dd8a4fc5b4125b9/tumblr_pi4i7n5rQv1v1odbho4_400.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Cartel para la Becquercon"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="Becquercon" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://66.media.tumblr.com/ac0222197013cc7bd9d7fa96104cc3cf/tumblr_pi4i7n5rQv1v1odbho8_500.jpg" class="images-portfolio img-fluid" alt="Cartel para la Becquercon">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="Ejemplo 1" data-toggle="modal" data-target="#rebeldes"> <img src="https://78.media.tumblr.com/c21c6a2131f5d3efb252a335fc91a92f/tumblr_onl9vkNKEZ1v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Cartel para el concurso de carteles de Comercio Justo"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="rebeldes" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/d345c9a1830b14367a0521444e9b5abb/tumblr_onl9vkNKEZ1v1odbho1_r1_540.jpg" class="images-portfolio img-fluid" alt="Cartel para el concurso de carteles de Comercio Justo">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="Ejemplo 1" data-toggle="modal" data-target="#equo"> <img src="https://78.media.tumblr.com/4d45e3627500a13051bd0870afb7fc5a/tumblr_nzd0g1DL5r1v1odbho1_r1_400.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Logo EQUO"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="equo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <img src="https://78.media.tumblr.com/4d45e3627500a13051bd0870afb7fc5a/tumblr_nzd0g1DL5r1v1odbho1_r1_400.png" class="images-portfolio img-responsive img-fluid" alt="Logo EQUO">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>
                        Renovarse o morir es lo que dicen. Y siguiendo este refrán Equo actuó.</p>

                      <p>Con las Elecciones Municipales a la vuelta de la esquina, Equo decidió abrir diversas sedes de su partido en 5 pueblos de Sevilla, por lo que, obviamente, necesitaron una adaptación del manual de estilo para esos 5 pueblos, y para
                        Andalucía, ya que también pensaban presentarse a las Elecciones Autonómicas.</p>
                    </div>
                  </div>
                </div>
              </article>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo maquetación">
                <article class="li-image">
                  <figure>
                    <a href="https://leadershipandmanagementschool.com/landingnew/ipq-digital-leadership/" target="_blank" data-target="#landing-4"> <img src="https://78.media.tumblr.com/8581b66ed1e18d2b6a7df849471fd138/tumblr_p3bsybXA8f1v1odbho5_r1_540.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Lading para LMS"> </a>
                  </figure>
                </article>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="piramide-natural" data-toggle="modal" data-target="#piramide-natural"> <img src="https://66.media.tumblr.com/5599e52d2689b7f17c4dcb8bc6ed1ac1/tumblr_pi4i7n5rQv1v1odbho1_400.png" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Logotipo de piramide natural"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="piramide-natural" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/ad447ca139b2d44cf672be355ffcb99a/tumblr_ogdfziHJCW1v1odbho2_r1_540.jpg" class="images-portfolio img-fluid" alt="Logotipo de piramide natural">
                </figure>
              </article>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="ONU" data-toggle="modal" data-target="#ONU"> <img src="https://66.media.tumblr.com/6a614fdebd859e18ac9237d7e6d7ee3a/tumblr_pi4i7n5rQv1v1odbho5_400.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Cartel para el concurso de carteles de la ONU"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="ONU" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://66.media.tumblr.com/cc5f8abf3c7ff6871cb538848d2b841d/tumblr_pi4i7n5rQv1v1odbho9_500.jpg" class="images-portfolio img-fluid" alt="Cartel para el concurso de carteles de la ONU">
                </figure>
              </article>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="amnistia-international" data-toggle="modal" data-target="#amnistia-international"> <img src="https://78.media.tumblr.com/8419a950c3d1b28299bb324da793d42f/tumblr_ojokqqYVbA1v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Cartel para amnistia internacional"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="amnistia-international" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/784aac2fd62ae7e63484fb18bbe307b2/tumblr_ojokqqYVbA1v1odbho1_540.jpg" class="images-portfolio img-fluid" alt="Cartel para amnistia internacional">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="Ejemplo 1" data-toggle="modal" data-target="#animayo2016"> <img src="https://66.media.tumblr.com/18e7cde7a0f7edae54570386ae7acd71/tumblr_pi4i7n5rQv1v1odbho7_400.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Cartel realizado para Animayo para el concurso de carteles"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="animayo2016" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://66.media.tumblr.com/1d9869a7b558d923feeae9482703b0f6/tumblr_pi4i7n5rQv1v1odbho6_500.jpg" class="images-portfolio img-fluid" alt="Cartel realizado para Animayo para el concurso de carteles">
                </figure>
              </article>
              <!--Modal fin-->

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo publicaciones">
                <article class="li-image">
                  <figure>
                    <a href="http://www.revistacomunicacion.org/pdf/n14/Articulos/A5_Salazar-Garcia-Rosales-Analisis-de-los-elementos-estetico-expresivos-en-la-propaganda-de-Corea-del-Sur-y-Corea-del-Norte.pdf" target="_blank" > <img src="https://66.media.tumblr.com/a1913f32cfd5c09ed996b5a803da9e46/tumblr_pi4iluhP4e1v1odbho2_400.png" class="images-portfolio img-responsive images-portfolio-round img-fluid" alt="Página web de la Revista Internacional de Comunicación"> </a>
                  </figure>
                  </article>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo publicaciones">
                <article class="li-image">
                  <figure>
                    <a href="http://www.rrhhdigital.com/secciones/talento/124284/Como-transforman-las-tecnicas-de-People-Analytics-la-gestion-del-talento" target="_blank"> <img src="https://78.media.tumblr.com/105ebf9062523c754867e4a88bee910c/tumblr_p3btpeZUJ81v1odbho2_r1_540.png" class="images-portfolio img-responsive images-portfolio-round img-fluid" alt="Artículo de RRHHDigital"> </a>
                  </figure>
                </article>
              </li>


              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo publicaciones">
                <article class="li-image">
                  <figure>
                    <a href="http://www.rrhhdigital.com/secciones/talento/127191/Como-ayudan-las-nuevas-tecnologias-a-la-Gestion-del-Talento" target="_blank"> <img src="https://78.media.tumblr.com/d5944a69668ac0e0138e9b384027186f/tumblr_p3btviHX8J1v1odbho2_r1_540.png" class="images-portfolio img-responsive images-portfolio-round img-fluid" alt="Artículo de RRHHDigital"> </a>
                  </figure>
                </article>
              </li>


              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo publicaciones">
                <article class="li-image">
                  <figure>
                    <a href="https://sevilla.abc.es/pasionensevilla/actualidad/noticias/a-la-macarena-de-miami-le-cantan-hasta-saetas-85816-1448531812.html" target="_blank"> <img src="https://66.media.tumblr.com/79174c003d48aca11af9906e7177d13d/tumblr_pi4iluhP4e1v1odbho6_400.png" class="images-portfolio img-responsive images-portfolio-round img-fluid" alt="Artículo de ABC"> </a>
                  </figure>
                </article>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo publicaciones">
                <article class="li-image">
                  <figure>
                    <a href="http://www.europapress.es/andalucia/sevilla-00357/noticia-ayuntamiento-mairena-alcor-constructora-prior-acuerdan-contratacion-empleados-locales-20150430191502.html" target="_blank"> <img src="https://78.media.tumblr.com/f7cbb964918d4e7b7f49c85814d46b54/tumblr_nz70ex4tOt1v1odbho4_r1_500.jpg" class="images-portfolio img-responsive images-portfolio-round img-fluid" alt="Artículo de Europapress"> </a>
                  </figure>
                </article>
              </li>


              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo publicaciones">
                <article class="li-image">
                  <figure>
                    <a href="https://www.20minutos.es/noticia/2447623/0/ayuntamiento-mairena-alcor-constructora-prior-acuerdan-contratacion-empleados-locales/" target="_blank"> <img src="https://78.media.tumblr.com/ce02a599cea8fb04f4f60b5a29e58b00/tumblr_nz70ex4tOt1v1odbho5_r1_500.jpg" class="images-portfolio img-responsive images-portfolio-round" alt="ejempli 1"> </a>
                  </figure>
                </article>
              </li>


              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo diseño-gráfico">
                <article class="li-image">
                  <figure>
                    <a data-title="Ejemplo 1" data-toggle="modal" data-target="#sp-rrhh"> <img src="https://78.media.tumblr.com/9a193ae252751deba9dd7440a59ebfef/tumblr_p1l9e3ZXOY1v1odbho1_r2_1280.jpg" class="images-portfolio img-responsive images-portfolio-round lazy" alt="Logotipo realizado para una super recursos humanos"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="sp-rrhh" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                <figure class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/9a193ae252751deba9dd7440a59ebfef/tumblr_p1l9e3ZXOY1v1odbho1_r2_1280.jpg" class="images-portfolio img-fluid" alt="Logotipo realizado para una super recursos humanos">
                </figure>
              </article>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo premios">
                <article class="li-image ">
                  <figure>
                    <a href="https://twitter.com/chochomona/status/656454187773992961" target="_blank"> <img src="https://78.media.tumblr.com/d984e1fd12eae242a39cc71371a4148f/tumblr_nzphgmErRA1v1odbho3_r1_500.jpg" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Artículo hablando del primer premio de escritura de Naurenia Juvenil"> </a>
                  </figure>
                </article>
                <div class="overlay-image-portfolio">
                  <div class="text-image-portfolio"></div>
                </div>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo premios">
                <article class="li-image">
                  <figure>
                    <a data-title="Ejemplo 1" data-toggle="modal" data-target="#sos-racismo"> <img src="https://66.media.tumblr.com/85d0878e2bf397760932c952deb10a4c/tumblr_pi4iluhP4e1v1odbho1_400.png" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Finalistas del concurso de SOS Racismo"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="sos-racismo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLongTitle">El anciano de la 35</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>La casa del final de la calle se decía que estaba encantada. Desde hacía algunos años la puerta siempre estaba cerrada y las ventanas nunca descorrían sus cortinas, sin embargo, una sombra flotaba por las estancias, a veces asomándose
                        por la mirilla, o levantando la portezuela del buzón. Pero nunca salía.</p>

                      <p>En todo el barrio se contaban las mayores historias jamás escritas, algunas dignas de guiones de Hollywood, y otras más cercanas a cuentos para asustar a los niños y obligarlos a ser buenos. Lo único que sí era cierto, era que nadie
                        se atrevía a acercarse a comprobar cuál de todas las habladurías era la verdadera. </p>

                      <p>Algunos vecinos habían tenido el valor de preguntarle al repartidor, que cada miércoles a las 12:15, siempre a la misma hora, se detenía con su furgón en la puerta con unas cajas de provisiones, subía los tres escalones del porche,
                        llamaba al timbre y levantaba el felpudo, donde hallaba un sobre con el importe a pagar más una generosa propina. El repartidor simplemente decía que vivía en la casa un anciano, que todas las leyendas no podían ser más que fruto
                        del aburrimiento de los lugareños, pero el hecho de que nadie hubiese visto cuándo se recogían las cajas, o en qué momento se colocaban los sombres en ese lugar, no hacía más que aumentar las supersticiones.</p>

                      <p> -¿Y cómo se llama? –le habían preguntado algunos curiosos.</p>

                      <p>-No puedo decirlo, es información confidencial de la empresa. </p>

                      <p>Aunque en realidad el empleado no tenía tanto interés en seguir las políticas de privacidad de su empresa, sino que más bien disfrutaba aumentando la leyenda del Anciano de la Casa 35, como había sido bautizado. </p>

                      <p>No obstante, pese a todo el misticismo que rodeaba a aquella casa y a los extendidos pensamientos de que se trataba de un alma condenada o un fantasma maligno, los niños y adolescentes medían su valor a través de aquella edificación.
                        De momento el récord de coraje lo ostentaba Johan, el joven hijo de la casa 23 que había logrado subir el primer escalón de la casa, antes de salir corriendo cuando observó unos ojos asomando por la esquina de la ventana.</p>

                      <p>Sin embargo, ese hito histórico en el barrio estaba por cambiar de manos. </p>

                      <p>-¿Estás segura, Asalah? –preguntaron los demás niños. </p>

                      <p>-¡Completamente! –asintió la chica, colocándose bien su pañuelo y remangándose -, ¡voy a entrar en la casa del Anciano de la 35! </p>

                      <p>-¡Oooooooh! –corearon todos los jóvenes por su determinación.</p>

                      <p>-¡Sed testigos! </p>

                      <p>Y de esta forma la joven chica echó a andar hacia tierras desconocidas, caminando con brío hacia el final de la calle ¡Ya estaba bien! Estaba harta de todas las historias y supersticiones, ella quería verlo con sus propios ojos.</p>

                      <p>El crujido de la puerta trasera provocó que unos cansados y rojos ojos se abrieran tras unas gafas. El dueño de aquellos grises iris se encogió sobre sí mismo al oír los primeros pasos, y algo cohibido arrastró sus pies con cautela,
                        giró la cabeza y… </p>

                      <p>-¡Aaaaaaaah!-gritó la chica sorprendida al encontrarse de frente al hombre. </p>

                      <p>El hombre, confundido por el grito, y observando a la joven adolescente que llevaba un pañuelo sobre su cabeza, lanzó un chillido y echó a correr todo lo rápido que sus débiles piernas le permitieron, tropezando por el camino y ocultándose
                        finalmente bajo la cama. </p>

                      <p>La chica parpadeó varias veces tras observar al pobre anciano agazapado. No era ni un extraterrestre, ni un fantasma, ni un demonio, ni un asesino en serie, solo una persona de avanzada edad a la que había dado un susto de muerte.
                      </p>

                      <p>-¿Está bien? –preguntó ella tras recuperarse del susto aproximándose.</p>

                      <p>-¡No te acerques! –rogó el hombre. </p>

                      <p>-¿Por qué se oculta ahí? </p>

                      <p>-¡Ahhhhhh! –gritó el hombre una vez más al ver la cercanía de la chica -, ¡no me hagas daño! </p>

                      <p>-No voy a hacerle daño –contestó preocupada mientras se agachaba para mirar -¡Oh, está sangrando! </p>

                      <p>-¡No me toques! </p>

                      <p>-No voy a hacerle daño, mire, salga de ahí, le está sangrando la pierna ¡Déjeme que le ayude! –pidió la muchacha.</p>

                      <p>El anciano permaneció varios segundos más oculto y muy desconcertado, mientras la chica trataba de ayudarlo. No podía salir, estaba en peligro. </p>

                      <p>-¿Qué cree que le voy a hacer? –preguntó la chica ya algo molesta. </p>

                      <p>La chica resopló, agotándose su paciencia metió los brazos bajo la cama y, pese al pataleo del hombre, lo sacó de allí, lo obligó a sentarse en un sofá y fue a la cocina a rebuscar entre los cajones para encontrar algo con lo que
                        sanarle. </p>

                      <p>Conforme él había ido envejeciendo todos sus conocidos del barrio habían comenzado a fallecer, siendo sustituidos por nuevas familias de inmigrantes que, seducidos por los bajos precios de aquellas viviendas, empezaron a establecerse
                        rejuveneciendo el barrio con jóvenes de todas las religiones y nacionalidades. </p>

                      <p>Sin embargo, todos estos cambios no habían hecho más que desconcertar y asustar al octogenario. Eran gente rara, que vestía diferente, cuyas pieles eran de otro color y cuyas creencias no entendía. Extraños que habían ido a sus tierras
                        con motivos que él desconocía. </p>

                      <p>-¿Ya está más tranquilo? –le sonrió ella mientras le limpiaba la herida.</p>

                      <p>Por ese motivo, y observando como cada día los niños se acercaban más a su casa, se encerró en ella para siempre y jamás volvió a salir. </p>

                      <p>-¿Cómo se llama? </p>

                      <p>-Eusebio. </p>

                      <p>-Yo soy Asalah –dijo extendiéndole la mano. </p>

                      <p>El hombre se la estrechó con suavidad, observando a aquella niña sonriente de ojos grandes y oscuros y piel aceitunada.</p>

                      <p>-¿De qué tenía miedo? –le preguntó ella. </p>

                      <p>Sí, ¿de qué había tenido miedo todo este tiempo? </p>
                      <p class="sos-racismo-link">Con este relato fui <a href="http://www.sosracismomadrid.es/web/jornadas/2016/04/07/ganadores-del-concurso-de-cuentos/">Finalista del Concurso de Cuentos de SOS Racismo Madrid</a></p>
                    </div>
                    <div class="modal-footer">

                    </div>
                  </div>
                </div>
              </article>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo premios">
                <article class="li-image">
                  <figure>
                    <a href="https://www.fundacionaquae.org/sites/default/files/finalistas_premio_disena_aquae_2015_0.pdf" target="_blank"> <img src="https://78.media.tumblr.com/da272a309cb383accb5a008731225619/tumblr_nzgwh0I74W1v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Cartel finalista del concurso de carteles de la Fundación Aquae"> </a>
                  </figure>
                </article>
              </li>

              <li class="col-lg-3 col-md-4 col-sm-4 col-xs-12 todo premios">
                <article class="li-image">
                  <figure>
                    <a data-title="Ejemplo 1" data-toggle="modal" data-target="#la-gotica"> <img src="https://78.media.tumblr.com/711b8c1facf2137ee2b57b9124c4b857/tumblr_inline_pdwspiMcEQ1til9gc_500.jpg" class="images-portfolio img-responsive images-portfolio-round img-fluid lazy" alt="Listado de ganadores y finalistas"> </a>
                  </figure>
                </article>
              </li>
              <!--Modal-->
              <article class="modal fade" id="la-gotica" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalLongTitle">La gotica</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>Camino por las desérticas calles de mi barrio, del lugar en el que he crecido, donde tantas lágrimas derramé y tantas veces me caí. Solomis pasos rompen el silencio de la noche.</p>

                      <p>Me repito sin cesar, una y otra vez, que no tengo miedo. No estoy asustada.</p>

                      <p>Parece tan extraño que tenga que ir con precaución por aquí, por mi barrio, a unas calles de donde vivo… Pero así están las cosas. Desde que se puso de moda sacar navajas y ser un delincuente juvenil, tienes que ir con pies de plomo.</p>

                      <p>¿Mi nombre? Hace mucho que dejó de importarle a la gente. Hace mucho que se perdió en el olvido. Pero si quieren llamarme de algún modo, los de mi barrio suelen llamarme “la Gótica”, “la Satánica”… Y mis amigos, los pocos que tengo
                        y a quienes apenas veo, me llaman Caos, con lo cual mi nombre real es un misterio.</p>

                      <p>Ahora acabo de venir del centro de la ciudad, en donde he estado todo el día con mis amigos, los que no me miran raro ni me desprecian pro mi ideología o mi forma de vestir.</p>

                      <p>Aunque lo cierto es que no me quejo. Cuando elegí ser así, cuando elegí no dedicarme a robar o a intimidar a la gente, supe que esto pasaría y ya no me importa. Cada comentario que hacen… es como si hubiesen desaparecido para mí.</p>

                      <p>-¡Eh! ¡Tú! -me llama uno -. ¿No tienes dinero para comprarte otra cosa? ¿Eres pobre?</p>

                      <p>Comentarios como esos ya me traen indiferente pero otra cosa es cuando piensan que les tienes miedo, cuando confunden que pasas de ellos con que estás asustada. Si piensan eso, se dedican a perseguirte, amenazándote, intentando conseguir
                        que acabes temblando y suplicando a Dios para que les aleje de ti, y cuando ya no puedes más, echas a correr.</p>

                      <p>Pero es peor.</p>

                      <p>Y en el instituto… A veces simplemente quieres desaparecer. Cuando te toca una clase infestada de ellos, sólo puedes darle al botón de tu cerebro que permite que tus oídos no oigan sus palabras. Hay que ignorarlos y seguir adelante,
                        nunca dejando que te dañen.</p>

                      <p>Pero lo que más molesta no son sus insultos. Lo que más duele es tener que ignorar a la clase entera, a todo el instituto. Aunque son pocos, hay algunos compañeros que son buena gente y a los que realmente no les importa demasiado
                        mi estética. Pero es difícil confiar en alguien, después de todo lo que me han hecho. Es realmente triste tener que meter en el mismo saco a todo el mundo.</p>

                      <p>-¡Oh, vamos! -exclama el de antes -. ¡Sólo queremos hablar contigo! -dice en tono burlón.</p>

                      <p>¡Lo que me faltaba! ¡Ahora me siguen! A veces me dan tanta penita… Malgastan su vida haciendo estupideces y, cuando crecen, cuando se estampan violentamente contra la realidad, sin estudios ni dinero, porque no les queda nadie a
                        quien acudir, porque han dañado a tantas personas que están solos, solo les queda pedir ayuda. Exigen que se les ayude. ¡Sí, claro! No es mi culpa si fuiste tan imbécil como para tirar tu vida por la borda, apechuga y búscate la
                        vida.
                      </p>

                      <p>Siento ser tan cruel, siento tener que ser así, pero es el mundo en el que vivimos el que me ha hecho as; es este mundo loco, en eñ que se castiga al destacar; el que premia que todos seamos fotocopias en color, el que me ha hecho
                        ser tan despiadada.</p>

                      <p>-¡Vamos, maldita hija de…!</p>

                      <p>De los que también me compadezco es de mis padres. ¡Pobres! Quizás hubiesen querido que fuese normal, así no me perseguiría la gente para burlarse de mí.</p>

                      <p>O puede que prefiriesen que yo no saliese de casa, que fuese como me diese la gana, pero que me quedase exiliada en mi habitación para que nadie me sacase ninguna navaja. Pero como una vez dijo una persona, “prefiero morir de pie
                        que vivir toda una vida de rodillas”. Esa es la frase por la que está regida mi vida. Voy voy a vivir con miedo, no dejaré que se regocijen con mi miedo, no les dejaré atormentar mi alma.</p>

                      <p>-¡Solo queremos pasar un buen rato! -un escalofrío me recorre el cuerpo.</p>

                      <p>Acelero el paso ¡Maldita sea! Por su tono de voz se han pasado tomando copas. Eso sí que es algo preocupante. Cuanto están sobrios, saben qué cosas no se debe hacer para evitar acabar entre rejas. Asustan a la gente sin llegar a
                        más, pero cuando están borrados… Es algo potencialmente peligroso.</p>

                      <p>Un gato se cruza en mi camino. Me sobresalto y me detengo, pero cuando recuerdo lo que está sucediendo e intento volver a emprender la marcha, ya es demasiado tarde. El chaval ebrio me coge del brazo y en un torpe, pero rápido movimiento,
                        me estampa contra la pared que está a mi derecha.</p>

                      <p>-¡Serás…! -grita enfadado -. Me he pinchado.</p>

                      <p>-¡Suéltame! -le chillo con autoridad.</p>

                      <p>Saca un objeto afilado de su bolsillo. Intento mantener la sangre fría. Le devuelvo la mirada, desafiante. No le mostraré el miedo. Intento soltarme como puedo, sin dejar de mirarle, manteniendo la firmeza. No estoy asustada, no
                        estoy asustada.</p>

                      <p>-¡Qué me sueltes! - vuelvo a rugir.</p>

                      <p>-¡Deja de gritar! ¡Deberías suplicarme por tu vida!-me sugirió con malicia.</p>

                      <p>-¡Qué te jodan! -lo dejé claro. Por encima la dignidad.</p>

                      <p>De repente siento algo frío atravesarme l estómago. Aquel confuso chico se aparta de mí, llevando consigo, en sus ensangrentadas manos, el objeto con el que me ha asestado una puñalada.</p>

                      <p>Segundos más tarde, cuando miro sus manos llenas de sangre, empiezo a sentir un punzante dolor que se comienza a extender.</p>

                      <p>-¡Tío! ¿Qué has hecho?</p>

                      <p>-¡Larguémonos!</p>

                      <p>Uno de ellos coge su móvil y oigo como llama a urgencias. No son tan malos como pensaba. Cuelga y echan a correr despavoridos. La navaja cae de la mano del que me ha apuñalado. Me deslizo por la pared, hasta quedar sentada, jadeando
                        por el dolor.</p>

                      <p>Los minutos pasan con una velocidad de vértigo. Oigo la sirena de una ambulancia muy cerca, todo empieza a nublarse. Escucho pasos de hombres que hablas pero no llego a entender qué dicen.</p>

                      <p>Todo se torna negro.</p>

                      <p>No tengo miedo, no tengo miedo, no tengo miedo.</p>

                      <p class="la-gotica-link">Con tan solo 15 años en el año 2008, gané mi primer concurso, el Concurso Literario de la Tertulia Literaria José Saramago. El relato ganador, así como los finalistas, quedaron recogidos en un libro con el título de “Cruce de miradas”</p>
                    </div>
                    <div class="modal-footer">

                    </div>
                  </div>
                </div>
              </article>

            </ul>
                       <a href="#" id="loadMore" class="boton-cv">Sigue bicheando</a>
          </div>

        </section>
        <div class="images-center containerimg" id="quien-soy">
          <h2 class="h2-texto">¿Quién soy? </h2>
          <div class="separator"></div>

          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 quien-soy">
            <p>¡Uy, hola! ¿Ya estás aquí? y yo con estas pintas...</p>
            <p>Creo que lo más duro de hacer esta web es resumir en pocas palabras lo <em> maravillosa </em> que soy <strike> flores a mí.</strike></p>
            <p>Creo que podría definirme como un culo inquieto. Oups... ¿se supone que puedo decir <em>culo</em> en mi portfolio? Bueno, lo hecho hecho está.</p>
            <p>Soy una creativa de publicidad especializada en propaganda en Corea del Norte (no es <a href="http://www.revistacomunicacion.org/pdf/n14/Articulos/A5_Salazar-Garcia-Rosales-Analisis-de-los-elementos-estetico-expresivos-en-la-propaganda-de-Corea-del-Sur-y-Corea-del-Norte.pdf"
                class="korea" target="_blank"> broma</a>) que siempre ha sido una apasionada de las tecnologías, de los ordenadores y de las webs.</p>
            <p>¡Ah! ¿que cómo acabé en maquetación? Pues como muchas cosas que pasan en la vida y citando a Freddie Mercury, siguiendo donde soplaba el viento. Un día me encontré a mí misma queriendo construir un portfolio chulo para demostrar lo que sabía
              hacer... Y ahí lo vi.</p>
            <p>Ey, qué guay esto de montarme la web...</p>
            <p> ¿Y por qué lo de Mia? Eso te lo cuento con un café.</p>
            <p> ¡Ah! ¿Estás pensando en contratarme? ¡Haberlo dicho antes! </p>
            <p><a href="#de-donde-vengo" id="boton-cv"class="btn boton-cv" >Échale un ojo a mi CV</a></p>
            <p class="visitame"> O visita mi perfil de <a href="https://www.linkedin.com/in/miasalazar/" class="rrss-linkedin"> Linkedin</a> </p>
          </div>
          <!--Modal-->

          <!--Modal fin-->

        </div>

                <div class="images-center containerimg" id="de-donde-vengo">
          <h2 class="h2-texto">¿De dónde vengo?</h2>
                  <div class="separator"></div>
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 quien-soy">
            
            <p>Un gran poder conlleva una gran responsabilidad... Uy, no, que eso no iba aquí.</p>
            
            <p>Ya he contado un poco de dónde viene mi pasión por la maquetación, pero... ¿de dónde vengo realmente? ¿he estudiado algo o he sido una floja? ¿a qué huelen las nubes?</p>
            
            <p>¡Echa un vistazo!</p>
            
 

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" >
                        
                        Recorrido profesional <i class="more-less fas fa-chevron-down"></i>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                  
                  <div class="flex-parent">
	<div class="input-flex-container">
		<div class="input">
			<span data-year="Equo" data-info="Diseño gráfico"></span>
		</div>
		<div class="input">
			<span data-year="PP" data-info="Diseño gráfico/Web"></span>
		</div>
		<div class="input ">
			<span data-year="GSK" data-info="Diseño gráfico & Diseño web"></span>
		</div>
		<div class="input">
			<span data-year="LMS" data-info="Diseño gráfico/Web & Maquetación"></span>
		</div>
		<div class="input active">
			<span data-year="OpenSistemas" data-info="Maquetación & Diseño gráfico/Web"></span>
		</div>
	</div>
	<div class="description-flex-container">
		<p>Oct.2014 - Abr.2015<br> Diseño de cartelería, logotipos, adaptaciones del manual corporativo y asistencia en redes.<br>Photoshop, Illustrator</p>
		<p>Ene.2015 - Jun.2015 <br> Diseño web en Wordpress, edición de plantillas, HTML5, CSS3. Gestión de varias páginas web.
Diseño gráfico, Community Manager, redacción de contenidos, estrategia en redes, SEO, contenido web, diseño web y apoyo en la realización de eventos.
<br>
Photoshop, InDesign, SocialBro, Hootsuite, Wordpress, Facebook, Twitter, Google+</p>
		<p>Abr.2016 - Abr.2017 <br>Diseño web, gestión de intranet, ceatividad, diseño Gráfico, copywriting, gestión de newsletter, redacción de notas de prensa.
<br>
Photoshop, Illustrator, Sharepoint, Outlook, Intranet, Power Point, Excel, Control Show servidor, Global Viewer, Active Standard, CrownPeak</p>
		<p>Abr.2017 - Feb.2018 <br> Diseño web, UX & UI. Maquetación de websites y mailings, Wordpress, diseño gráfico, creatividad: Copywriting, conceptos creativos, creatividades, estrategia de comunicación digital, fotografía corporativa, redacción & Copywriting.
      <br>
Photoshop, Illustrator, Indesign, Wordpress, HTML5, CSS3,PowerPoint, Excel, Premiere</p>
		<p class="active">Feb.2018 - Actualidad <br> Diseño web, UX & UI, diseño responsive, Maquetación web: HTML5, CSS3 y Bootstrap 4, responsive design, HTML Semántico, metodología ágil, mobile first, diseño gráfico.
<br>
Bootstrap 4, sass,  flexbox, git, github, responsive design, mobile first, codepen, CSS Media Queries, CSS grid layout, Sketch, Javascript básico, jQuery, Zeplin, slick, nunjucks básico,  scrum, taiga, gira</p>
	</div>
</div>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" id="headingTwoAccordion45">
                        
                        Educación <i class=" more-less fas fa-chevron-down"></i>
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                  <ul>
                  <section id="conference-timeline">
    <div class="timeline-start">Ahora</div>
    <div class="conference-center-line"></div>
    <div class="conference-timeline-content">
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container">
          <div class="content-left">
            <p><span class="institution">Udacity</span>Curso en Web Accesibility<span class="article-number">Nov</span></p>
          </div>
        </div>
        <div class="content-right-container">
          <div class="content-right">
            <p><span class="institution">Udacity</span>Curso en Responsive Web Design Fundamentals <span class="article-number">Oct</span></p>
          </div>
        </div>
        <div class="meta-date">
<span class="month">2018</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container hideme">
          <div class="content-left">
            <p><span class="institution">Udacity</span>Curso en UX Design for <br> Mobile Developers <span class="article-number">Oct</span></p>
          </div>
        </div>
        <div class="content-right-container hideme">
          <div class="content-right">
            <p><span class="institution">Universitat d'Alacant </span>Curso de Desarrollo Web (2/2) <span class="article-number">Sep</span></p>
          </div>
        </div>
        <div class="meta-date">
<span class="month">2018</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container hideme">
          <div class="content-left">
            <p><span class="institution">Universidad Complutense de Madrid </span>Curso introductorio de Desarrollo de <br>Apps Móviles <span class="article-number">Sep</span></p>
          </div>
        </div>
        <div class="meta-date">
<span class="month">2018</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container hideme">
          <div class="content-right">
            <p><span class="institution">Universitat d'Alacant </span>Universitat d'Alacant </span>Curso de Desarrollo Web (1/2) <span class="article-number">Dic</span></p>
          </div>
        </div>
        <div class="content-right-container hideme">
          <div class="content-right">
            <p><span class="institution">Madrid School of Marketing </span>Programa Superior en E-commerce & Digital Skills <span class="article-number">Oct</span></p>
          </div>
        </div>
        <div class="meta-date">
<span class="month">2017</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container hideme">
          <div class="content-left">
            <p><span class="institution">University of Cambridge </span>CAE. Certificate in Advanced English. C1 <span class="article-number">Jul</span></p>
          </div>
        </div>
        <div class="content-right-container hideme">
          <div class="content-right">
            <p><span class="institution">Universidad Autónoma de Madrid </span>Posgrado: Iniciación Profesional en la Empresa para Titulados Universitarios (CITIUS) <span class="article-number">Abr</span></p>
          </div>
        </div>
        <div class="meta-date">
<span class="month">2017</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container hideme">
          <div class="content-left">
            <p><span class="institution">Florida International University </span>Intercambio Máster Global Communications y Máster Periodismo en Español. Estancia de investigación<span class="article-number">Nov</span></p>
          </div>
        </div>
        <div class="content-right-container hideme">
          <div class="content-right">
            <p><span class="institution">Universidad de Sevilla </span>Matrícula de honor: Trabajo de Fin de Master. La nueva Extrema Derecha en Europa: Alemania, Grecia y Reino Unido<span class="article-number">Jul</span></p>
          </div>
        </div>
        <div class="meta-date">
<span class="month">2015</span>
        </div>
      </div>
      <!-- // Article -->
                    
                          <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container hideme">
          <div class="content-left">
                        <p><span class="institution">Universidad de Sevilla </span>Master en Comunicación Institutional y Política <span class="article-number">Jun</span></p>
          </div>
        </div>
        <div class="meta-date">
<span class="month">2015</span>
        </div>
      </div>
      <!-- // Article -->
      
      <!-- Article -->
      <div class="timeline-article">
        <div class="content-left-container hideme">
          <div class="content-left">
            <p><span class="institution">Universidad de Sevilla </span>Trabajo de Fin de Grado: La propaganda en Corea del Sur y Corea del Norte <span class="article-number">Jun</span></p>
          </div>
        </div>
        <div class="content-right-container hideme">
          <div class="content-right">
            <p><span class="institution">Universidad de Sevilla </span>Grado en Publicidad y Relaciones Públicas <span class="article-number">Jun</span></p>
          </div>
        </div>
        <div class="meta-date">
<span class="month">2014</span>
        </div>
      </div>
      <!-- // Article -->
      
      
      
      
    </div>
    <div class="timeline-end">1992</div>
  </section>
                    
                    
                  </ul>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" id="headingThreeAccordion45">
                        
                        Habilidades
                      <i class=" more-less fas fa-chevron-down"></i>
                    </a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                                      <ul>
                                        <li><div class="myProgress "><div id="myBarHTML" class="myBar"><label>HTML5</label></div> </div></li>
                                        <li><div class="myProgress "><div id="myBarCSS" class="myBar"><label>CSS3</label></div> </div></li>
                                        <li><div class="myProgress "><div id="myBarBoot" class="myBar"><label>Bootstrap 4</label></div> </div></li>
                                        <li><div class="myProgress "><div id="myBarSass" class="myBar"><label>SASS</label></div> </div></li>
                                        <li><div class="myProgress "><div id="myBarSketch" class="myBar"><label>Sketch</label></div> </div></li>
                                        <li><div class="myProgress "><div id="myBarFlex" class="myBar"><label>Flex y Grid</label></div> </div></li>
                                        <li><div class="myProgress "><div id="myBarjQuery" class="myBar"><label>jQuery</label></div> </div></li>
                                        <li><div class="myProgress "><div id="myBarJs" class="myBar"><label>Javascript</label></div> </div></li>
                                        <li><div class="myProgress "><div id="myBarPSD" class="myBar"><label>Photoshop, Illustrator, inDesign</label></div> </div></li>
                  </ul>
                </div>
            </div>
        </div>

    </div><!-- panel-group -->
            <p class="visitame"> También puedes visitar mi perfil de <a href="https://www.linkedin.com/in/miasalazar/" class="rrss-linkedin"> Linkedin</a> </p>
            
          </div>
        </div>
        

        <div class="images-center containerimg" id="contacta-mia">
          <h2 class="h2-texto">Contacta Mia </h2>
          <div class="separator"></div>

          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 quien-soy">
            <p>¿Ya pidiéndome el teléfono sin tomarnos un café antes?</p>
            <p>Bueno, pero porque eres tú.</p>

            <p>puedes enviarme un e-mail a maria.sgr@gmail.com o a marsalgar3@gmail.com</p>
            <p>O puedes darme un telefonazo en el 685 425 527 (confieso que contesto antes al teléfono que al e-mail).</p>
            <p>Y si todavía no tienes claro quién soy, qué hago, o qué he hecho, puedes hacer scroll hacia arriba y bichear mis proyectos.</p>

          </div>
          <!--Modal-->
          <div class="modal fade" id="Modalcv" tabindex="-1" role="dialog" aria-labelledby="ModalcvLabel" aria-hidden="true">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            <figure class="modal-dialog modal-dialog-centered" role="document">
              <img src="https://78.media.tumblr.com/8fa7c732aa56713146532841fd4808f6/tumblr_pfkwisGMYV1v1odbho1_1280.jpg" class="images-portfolio img-fluid" alt="Mi CV">
            </figure>
          </div>

          <!--Modal fin-->
        </div>
    </div>
  </div>
  </main>
  <footer class="main-footer">
    <div class="footer-container">
      <div class="row">

        <div class="col-lg-12 col-md-12 col-xs-12 me-content">

          <div><img src="https://thumb.ibb.co/h68JUx/yo.jpg" class="me" alt="foto mia"></div>
        </div>
        <div class="col-lg-12 col-md-12 col-xs-12">
          <div class="footer-rrss">
            <p>
              Sígueme en:
            </p>
            <ul>
              <li><a href="https://www.linkedin.com/in/miasalazar/"> <img src="https://thumb.ibb.co/fz2emc/Lk_1.png" class="social-icon" alt="icono linkedin"> </a></li>
              <li><a href="https://twitter.com/chochomona"> <img src="https://thumb.ibb.co/cCSFsH/TW_1.png" class="social-icon" alt="icono twitter"> </a></li>
              <li><a href="#"> <img src="https://thumb.ibb.co/n5HgXH/GH_2.png" class="social-icon" alt="icono github"> </a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>
            
          
!
            
              .container-fluid
  padding-left: 0
  padding-right: 0

body
  background-attachment: fixed
  background-color: #d7d8d3
  width: 100%
  border-top: 0.625rem solid #b47068
  margin-top: 0
  padding-top: 1.563rem
  margin-left: 0
  margin-bottom: 0

.wrap
  margin-left: 8.75rem
  margin-right: 8.75rem
  &::after
    display: table

.row
  margin-left: 0
  margin-right: 0
  display: flex
  flex-wrap: wrap

img
  display: inline
  &:focus
    outline: 0

.container
  margin-left: 0
  margin-right: 0

.wrap::before
  clear: both

a
  text-decoration: none

ul
  list-style-type: none
  text-decoration: none

li
  padding-left: 0.75rem
  list-style-type: none

/*cabecera

#mia-logo
  font-family: "Francois One", sans-serif
  color: #b47068
  text-align: left
  font-size: 6.25rem
  font-weight: lighter
  margin-top: 0.3125rem
  margin-bottom: 0.3125rem

@-webkit-keyframes fadeInLeft
  0%
    opacity: 0
    -webkit-transform: translateX(-20px)

  100%
    opacity: 1
    -webkit-transform: translateX(0)


@keyframes fadeInLeft
  0%
    opacity: 0
    transform: translateX(-20px)

  100%
    opacity: 1
    transform: translateX(0)


.fadeInLeft
  -webkit-animation-name: fadeInLeft
  animation-name: fadeInLeft
  -webkit-animation-duration: 2s
  animation-duration: 2s
  -webkit-animation-fill-mode: both
  animation-fill-mode: both

.presentacion
  text-align: left
  font-size: 1.563rem
  margin-bottom: 0
  margin-top: 0
  color: #a59391
  letter-spacing: 2px
  font-family: "Merriweather", sans-serif
  padding-top: 4.813rem
  font-weight: 200
  line-height: 2.188rem

h2
  font-size: 3rem

.presentacion:last-of-type
  padding-top: 0

/*menu principal lateral

ul .no-list
  padding-bottom: 2px

.menu-principal
  text-align: right
  padding-bottom: 0.3125rem
  padding-left: 0
  font-size: 0.9375rem
  list-style-type: none
  -webkit-transition: width 4s
  /* Safari
  transition: width 4s

.fadeInTop
  -webkit-animation-duration: 2s
  animation-duration: 2s
  -webkit-animation-fill-mode: both
  animation-fill-mode: both
  -webkit-animation-name: fadeInTop
  animation-name: fadeInTop

@-webkit-keyframes fadeInTop
  0%
    opacity: 0
    -webkit-transform: translateY(-1.2rem)

  100%
    opacity: 1
    -webkit-transform: translateY(0)


@keyframes fadeInTop
  0%
    opacity: 0
    transform: translateY(-1.2rem)

  100%
    opacity: 1
    transform: translateY(0)


.navbar-dark .navbar-nav
  .nav-link:hover, .show > .nav-link, .active > .nav-link
    color: #b47068
  .nav-link
    &.show, &.active
      color: #b47068
    color: #a59391

.nav-menu
  text-decoration: none
  padding-right: 1.25rem
  padding-left: 1.25rem
  padding-top: 0.3125rem
  padding-bottom: 0.3125rem
  font-family: "Merriweather"
  font-weight: 200
  float: right
  border-right: 2px solid #a59391
  line-height: 1.5
  letter-spacing: 1px

.nav-menu-last
  border-right: 0px

nav a:hover
  color: #b47068
  text-decoration: none

.list-inline li
  display: inline
  width: auto

.navbar-expand-lg .navbar-collapse
  justify-content: flex-end

.linea2
  display: block

.navbar-expand-lg .navbar-nav .nav-link
  padding-right: 1.7rem
  padding-left: 1.5rem
  padding-bottom: 0.5rem

.navbar-toggler
  border-width: 0px
  background-color: #b47068

.navbar-expand-lg .navbar-nav .nav-link:hover
  font-size: 1.25rem

/*Dropdown

.dropdown-toggle
  &::before
    padding-top: 2px
  &::after
    position: absolute
    left: 40%
    top: 100%

.dropdown-menu
  float: left

.dropdown-item
  &:hover, &:focus
    background-color: transparent
    color: #b47068

.navbar-expand-lg .navbar-nav .dropdown-menu
  background-color: transparent
  border: #a59391
  text-align: center
  min-width: 2.125rem
  left: -2.813rem

#filter .dropdown-item
  color: #a59391
  font-family: "Merriweather", sans-serif
  font-size: 0.9375rem
  padding-bottom: 0.5rem
  cursor: pointer
  &:hover
    background-color: transparent
    color: #b47068
    font-family: "Merriweather", sans-serif
    font-size: 1.25rem
    padding-bottom: 0.5rem

/*portfolio

.ir-arriba
  display: none
  padding: 0.9375rem 1.25rem
  border-radius: 50%
  background: #b47068
  font-size: 1.25rem
  color: #fff
  cursor: pointer
  position: fixed
  bottom: 1.25rem
  right: 1.25rem
  z-index: 10

ul.gallery
  overflow: hidden
  padding-left: 0px
  display: flex
  flex-wrap: wrap
  align-content: center
  margin-bottom: 5rem

.h2-texto
  padding-bottom: 1.25rem
  text-align: center
  font-family: "Merriweather"
  color: #b47068
  font-weight: 250
  letter-spacing: 2px
  margin-left: 0px
  margin-right: 0px
  padding-bottom: 0

.separator
  width: 29.38rem
  height: 0.4375rem
  background-color: #b47068
  margin: auto
  margin-bottom: 4.25rem
  margin-top: 1.25rem

.presumiendo
  padding-top: 6.25rem

.align-icon
  left: 0px

.images-portfolio
  border-left: 0px
  margin-bottom: 1.875rem
  display: inline-block
  width: 100%
  padding-left: 0px

.images-portfolio-round
  border-radius: 50%

li .li-image
  padding-left: 0px

.li-image
  &:focus
    outline: none
  &:hover
  a
    &:focus
      outline: none
    cursor: pointer

.images-center
  width: 100%
  max-width: 100%
  padding-bottom: 8.25rem
  margin-right: 0px
  margin-left: 0px
  padding-right: 0px
  padding-left: 0px

.portfolio
  overflow: hidden
  padding-bottom: 0px

/*modal

.modal-img
  border: 2px solid #a59391
  background-color: #d7d8d3

.modal-header, .modal-body, .modal-footer
  font-family: "Merriweather"
  border: 0px

.modal-header, .modal-body
  color: #a59391

.todo
  display: none
  img:hover
    -webkit-transform: rotate(15deg)
    transform: rotate(15deg)
    -webkit-transition: 0.3s linear
    transition: 0.3s linear

.fa-chevron-down:before
  color: #FFF

.rotated
  transform: rotate(180deg)
  -ms-transform: rotate(180deg)
  /* IE 9
  -moz-transform: rotate(180deg)
  /* Firefox
  -webkit-transform: rotate(180deg)
  /* Safari and Chrome
  -o-transform: rotate(180deg)
  /* Opera

/*pagination

ul .pagination
  display: inline-block
  text-align: center
  font-size: 1rem

.ul-pagination
  padding-left: 0px
  width: 100%
  margin-bottom: 3.125rem
  margin-left: 0px
  margin-right: 0px
  display: flex
  justify-content: center

.container-page
  clear: both
  margin-top: 0px
  margin-left: 0px
  li
    display: inline

.pagination-1
  margin-left: 0px

.pagination-g
  margin-left: 1.875rem

.pagination-a
  padding: 0.625rem 1.25rem 0.625rem 1.25rem
  margin-bottom: 1.875rem
  color: white
  background-color: #a59391
  font-size: 0.875rem
  text-align: center
  font-family: "Merriweather"
  &:hover
    background-color: #b47068
    text-decoration: none
    color: white

.pagination-active a
  background-color: #b47068

/*botón cargar más

#loadMore
  margin: auto
  display: flex
  justify-content: center
  width: 12rem

/*footer

.main-footer
  border-top: 0.625rem solid #b47068
  margin-left: 0px
  margin-right: 0px
  clear: both
  display: block
  max-width: 100%
  padding-top: 0px
  padding-bottom: 1.875rem
  background-color: #a59391
  margin-bottom: 0px

.footer-rrss
  text-align: center
  font-family: "Merriweather", sans-serif
  color: white
  margin-bottom: 1.25rem
  margin-top: 1.875rem
  p
    display: inline
    padding-top: 1.875rem
  li
    display: inline
  ul
    padding-left: 0px

.footer-container
  margin-right: 0px
  overflow: hidden
  width: 100%

.social-icon
  max-height: 1.563rem
  margin-top: 0px
  display: inline
  text-decoration: none
  padding-left: 0px
  margin-left: 0px
  border-bottom: 0px
  &:hover
    max-height: 2.5rem

.social a:hover
  text-decoration: none

ul .social-icon
  display: inline
  width: auto

.me
  border-radius: 50%
  border: 5px solid #fff
  max-width: 7.5rem
  margin-bottom: 0.625rem
  margin-top: 2.5rem

.me-content
  display: flex
  justify-content: center

footer
  ul
    padding-top: 0.625rem
  li
    &:first-of-type
      padding-left: 0px
    a:hover
      text-decoration: none

/*PÁGINA ME HOJA DE ESTILO

.korea
  color: #b47068

.quien-soy p
  font-family: "Merriweather", sans-serif
  color: #a59391
  text-align: center
  max-width: 56.25rem
  margin-left: auto
  margin-right: auto
  line-height: 1.75rem

.korea a:hover
  text-decoration: none
  color: #b47068

#quien-soy, #contacta-mia
  margin-top: 3.125rem
  margin-bottom: 7.125rem

#boton-cv
  width: 14rem

.boton-cv
  transition: all 600ms ease-in-out
  -webkit-transition: all 600ms ease-in-out
  -moz-transition: all 600ms ease-in-out
  -o-transition: all 600ms ease-in-out
  text-align: center
  padding: 0.625rem 0.75rem
  background-color: #b47068
  color: white
  font-family: "Merriweather", sans-serif
  margin-top: 1.25rem
  border-radius: 3px
  &:hover
    text-decoration: none
    color: #b47068
    background-color: white

.visitame
  margin-top: 1.875rem

.rrss-linkedin
  text-decoration: none
  color: #b47068
  font-weight: 600
  &:hover
    color: #b47068

/*De dónde vengo

.panel-group .panel
  border-radius: 0
  box-shadow: none
  border-color: #EEEEEE

.panel-default > .panel-heading
  padding: 0
  border-radius: 0
  color: #212121
  background-color: #a59391

.panel-title
  font-size: 1rem
  margin-bottom: 0.75rem
  font-family: "Merriweather", sans-serif
  > a
    display: block
    padding: 0.9375rem
    text-decoration: none
    display: flex
    justify-content: space-between
    color: white

.more-less
  float: right
  color: #212121

.panel-default > .panel-heading + .panel-collapse > .panel-body
  border-top-color: #EEEEEE

#accordion .panel-body:before
  content: ""
  position: relative
  top: -3rem
  right: -2.5rem
  border: 0.9375rem solid transparent
  border-bottom: 0.9375rem solid #d7d8d3

.panel-body
  margin-left: 1.5rem
  margin-right: 1.5rem
  margin-bottom: 1.5rem

#accordion
  margin-top: 2rem

/*Carrera profesional

h1 span
  white-space: nowrap

.flex-parent
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  width: 100%
  height: 100%

.input-flex-container
  display: flex
  justify-content: space-around
  align-items: center
  width: 45vw
  height: 6.25rem
  max-width: 62.5rem
  position: relative
  z-index: 0
  margin-top: 2.5rem

.input
  width: 1.563rem
  height: 1.563rem
  background-color: #b47068
  position: relative
  border-radius: 50%
  &:hover
    cursor: pointer
  &::before, &::after
    content: ""
    display: block
    position: absolute
    z-index: -1
    top: 50%
    transform: translateY(-50%)
    background-color: #b47068
    width: 8.063rem
    height: 5px
  &.active
    background-color: #b47068
    &::before, &::after
      background-color: #b47068
    span
      font-weight: 700
      &::before
        font-size: 0.8125rem
      &::after
        font-size: 0.9375rem
    ~ .input
      background-color: #FFF
      &::before, &::after
        background-color: #FFF
  span
    width: 1px
    height: 1px
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    visibility: hidden
    font-family: "Merriweather", sans-serif
    &::before
      visibility: visible
      position: absolute
      left: 50%
    &::after
      visibility: visible
      position: absolute
      left: 50%
      content: attr(data-year)
      top: 1.563rem
      transform: translateX(-50%)
      font-size: 0.875rem
    &::before
      content: attr(data-info)
      top: -5.313rem
      width: 8.125rem
      transform: translateX(-5px) rotateZ(-45deg)
      font-size: 0.75rem
      text-indent: -0.625rem

.description-flex-container
  width: 80vw
  font-weight: 400
  font-size: 1.375rem
  margin-top: 6.25rem
  max-width: 62.5rem
  p
    margin-top: 0
    display: none
    &.active
      display: block
      line-height: 2rem

/*Educación

#conference-timeline
  position: relative
  max-width: 57.5rem
  width: 100%
  margin: 0 auto
  .timeline-start, .timeline-end
    display: table
    font-size: 1.125rem
    font-weight: 900
    text-transform: uppercase
    background: #b47068
    padding: 0.9375rem 1.438rem
    color: #fff
    max-width: 5%
    width: 100%
    text-align: center
    margin: 0 auto
  .conference-center-line
    position: absolute
    width: 3px
    height: 100%
    top: 0
    left: 50%
    margin-left: -2px
    background: #b47068
    z-index: -1
  .conference-timeline-content
    padding-top: 4.188rem
    padding-bottom: 4.188rem

.timeline-article
  width: 100%
  height: 100%
  position: relative
  overflow: hidden
  margin: 1.25rem 0
  .content-left-container, .content-right-container
    max-width: 44%
    width: 100%
  display: block
  font-weight: 400
  font-size: 0.875rem
  line-height: 1.5rem
  color: #242424
  text-align: right
  .content-left, .content-right
    position: relative
    width: auto
    border: 1px solid #ddd
    background-color: #fff
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03)
    padding: 1.688rem 1.563rem
  p
    margin: 0 0 0 3.75rem
    padding: 0
    font-weight: 400
    color: #242424
    font-size: 0.875rem
    line-height: 1.5rem
    position: relative
    span.article-number
      position: absolute
      font-weight: 300
      font-size: 1.875rem
      top: 10px
      left: -3.75rem
      color: #b47068
  .content-left-container
    float: left
  .content-right-container
    float: right
  .meta-date
    position: absolute
    top: 0
    left: 50%
    width: 3.875rem
    height: 3.875rem
    margin-left: -1.938rem
    color: #fff
    border-radius: 100%
    background: #b47068
    display: flex
    justify-content: center
    .month
      display: block
      text-align: center
      font-weight: 900
      font-size: 1.125rem
      display: flex
      align-items: center

.hideme
  opacity: 0

.timeline-article .institution
  display: block

/*Barras habilidades

.myBar
  label
    margin-left: 1rem
    margin-bottom: 0
    display: flex
    align-items: center
  width: 0%
  height: 3rem
  background-color: #b47068
  text-align: center
  line-height: 1.875rem
  color: white
  -webkit-transition: width 2s ease 500ms
  /* Safari
  transition: width 2s ease 500ms
  display: flex
  margin-bottom: 1rem

#collapseThree
  ul, li
    padding-left: 0

#myBarHTML.myBarClicked
  width: 95%

#myBarSass.myBarClicked
  width: 75%

#myBarCSS.myBarClicked
  width: 90%

#myBarBoot.myBarClicked
  width: 80%

#myBarSketch.myBarClicked
  width: 90%

#myBarFlex.myBarClicked
  width: 80%

#myBarjQuery.myBarClicked
  width: 50%

#myBarJs.myBarClicked
  width: 25%

#myBarPSD.myBarClicked
  width: 98%

.myProgress
  width: 100%
  background-color: #bcbcbc

@media (min-width: 1000px)
  .input
    &::before
      left: -37.5px
    &::after
      right: -37.5px

@media screen and (max-width: 991px)
  .input
    width: 1.063rem
    height: 1.063rem
    &::before, &::after
      height: 3px
    &::before
      left: calc(-4vw + 8.5px)
    &::after
      right: calc(-4vw + 8.5px)
  .list-inline
    margin: 0 auto
  #mia-logo
    font-size: 4.375rem
    line-height: 1
    text-align: center
  .presentacion
    font-size: 0.9375rem
    text-align: center
    line-height: 1.5
    padding-top: 0.625rem
  .presumiendo, .h2-texto
    font-size: 2.5rem
    line-height: 1
    padding-bottom: 0.625rem
    padding-top: 1.875rem
  .nav-menu
    border-right: 0px
    margin: auto
  .images-center
    padding-bottom: 0.625rem
  .dropdown-toggle::after
    display: none
  .linea2
    display: inline
  .nav-menu
    padding-top: 0.625rem
  .xs-center
    display: flex
    justify-content: center
    padding-top: 1.25rem
  .navbar-toggler:focus
    outline: none
  .ml-auto, .mx-auto, .toggle-center
    margin-left: 0px
  div
    .navbar-collapse .collapse show
      padding-top: 5px
    nav button .toggle-center
      margin-left: 0px
  button
    margin: 0 auto
  .dropdown-item
    text-align: center
  #conference-timeline
    .timeline-start, .timeline-end
      margin: 0
    .conference-center-line
      margin-left: 0
      left: 3.125rem
  .timeline-article
    .meta-date
      margin-left: 0
      left: 1.25rem
    .content-left-container, .content-right-container
      max-width: 100%
      width: auto
      float: none
      margin-left: 6.875rem
      min-height: 3.313rem
    .content-left-container
      margin-bottom: 1.25rem
    .content-left
      padding: 10px 25px
      min-height: 4.063rem
    .content-right
      padding: 10px 25px
      min-height: 4.063rem
      &:before
        display: none

@media screen and (max-width: 600px)
  .input.active span::after
    font-size: 0.75rem
  .flex-parent
    justify-content: initial
  .input-flex-container
    flex-wrap: wrap
    justify-content: center
    width: 100%
    height: auto
    margin-top: 5vh
  .input
    width: 5.75rem
    height: 5.75rem
    margin: 0 20px 60px
    background-color: #b47068
    &::before, &::after
      content: none
    span
      width: 100%
      height: 100%
      display: block
      &::before
        top: calc(100% + 5px)
        transform: translateX(-50%)
        text-indent: 0
        text-align: center
      &::after
        top: 50%
        transform: translate(-50%, -50%)
        color: #ECF0F1
  .description-flex-container
    margin-top: 1.875rem
    text-align: center
  .wrap
    margin-left: 0.625rem
    margin-right: 0.625rem
  #quien-soy, #contacta-mia
    margin-top: 3.125rem
  .presumiendo, .h2-texto
    font-size: 2.5rem
  .images-portfolio
    width: 100%
  .separator
    width: 300px
    margin-top: 7px
  .li-image
    display: flex
    justify-content: center
  .me-content img
    width: 70%
    border: 3px solid #fff
  .footer-container
    padding-left: 0px
    padding-right: 0px
    overflow: hidden
  .me-round
    align-self: center
    flex: 0 0 auto
  .footer-container .me-content div
    margin-right: -3.5rem
  .timeline-article p
    margin: 0
  #collapseTwo ul
    padding-left: 0
  #collapse-Two .panel-body
    margin-left: 0
    margin-right: 0
  .timeline-article p span.article-number
    display: none
  body
    min-height: 59.38rem
            
          
!
            
              $(document).ready(function(){
  
    /*Fade in when scroll en educacion*/
    /*Time line funcione*/
  $('#headingTwoAccordion45').click(function(e){
      setTimeout(function(){
      
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.hideme').each( function(i){
            
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                
                $(this).animate({'opacity':'1'},500);
                    
            }
            
        }); 
    
    });
      },5);
	});
 
 /*Barras*/	$('#headingThreeAccordion45').click(function(e){
      setTimeout(function(){
		    $('.myBar').addClass("myBarClicked");
      },5);
	});
 
  /*Acordeón botón girar*/
  	$('.fa-chevron-down').click(function(){
		$(this).toggleClass('rotated');
	});

 /*Botón volver arriba*/ 
	$('.ir-arriba').click(function(){
		$('body, html').animate({
			scrollTop: '0px'
		}, 300);
	});
 
	$(window).scroll(function(){
		if( $(this).scrollTop() > 0 ){
			$('.ir-arriba').slideDown(300);
		} else {
			$('.ir-arriba').slideUp(300);
		}
	});
  
    /*Dropdown funcione*/
  $('div#filter a').click(function() {
    $(this).css('outline','none');
    $('div#filter .current').removeClass('current');
    $(this).parent().addClass('current');
    
    var filterVal = $(this).text().toLowerCase().replace(' ','-');
        
    if(filterVal == 'all') {
      $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
    } else {
      $('ul#portfolio li').each(function() {
        if(!$(this).hasClass(filterVal)) {
          $(this).fadeOut('normal').addClass('hidden');
        } else {
          $(this).fadeIn('slow').removeClass('hidden');
        }
      });
    }
    
    return false;
  });
 
});


  /*Hacer que cambie texto con dropdown pulsado*/
$(".li-filter").click(function() {
  var titleFilter = $(this).attr("data-title"); 
  $("h2.presumiendo").text(titleFilter);
});

  /*botón cargar más*/
$(".li-filter").click(function() {
  $("#loadMore").css("display", "none");
});

$(function () {
    $(".todo").slice(0, 12).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".todo:hidden").slice(0, 4).slideDown();
        if ($(".todo:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
    });
});

/*Acordeón*/
function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);

/*Línea timeline recorrido profesional*/

$(function(){
	var inputs = $('.input');
	var paras = $('.description-flex-container').find('p');
	$(inputs).click(function(){
		var t = $(this),
				ind = t.index(),
				matchedPara = $(paras).eq(ind);
		
		$(t).add(matchedPara).addClass('active');
		$(inputs).not(t).add($(paras).not(matchedPara)).removeClass('active');
	});
});



            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console