cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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 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">
  <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">
          <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 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="https://codepen.io/MiaSalazar/full/GxVOrM"><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 class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="https://codepen.io/MiaSalazar/full/RYWEpo">Maquetación</a>
                    <a class="dropdown-item" href="https://codepen.io/MiaSalazar/full/EeVGMj">Diseño Gráfico</a>
                    <a class="dropdown-item" href="https://codepen.io/MiaSalazar/full/YOXjxz">Publicaciones</a>
                  </div>
                </li>
                <!--dropdown final-->

                <li class="nav-item list-inline ">
                  <a class="nav-link nav-menu " href="https://codepen.io/MiaSalazar/full/NLqegB"><span class="linea1">Mis</span><span class="linea2"> premios</span> </a> </li>
                <li class="nav-item list-inline ">
                  <a class="nav-link nav-menu nav-menu-last" href="https://codepen.io/MiaSalazar/full/JLgZPa"><span class="linea1">Contacta</span><span class="linea2"> Mia</span> </a> </li>
              </ul>
            </div>
          </nav>
        </div>

      </header>

      <main>
        <section class="portfolio row">
          <div class="images-center containerimg">
            <h2 class="presumiendo">Presumiendo </h2>

            <ul class="gallery">
              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image "> <a href="portoliof1.html" data-title="Ejemplo 1" data-toggle="modal" data-target="#logo-voz-paralela"> <img src="https://78.media.tumblr.com/3f6a7329d6565462d332e5372e11ae04/tumblr_pej19edm2f1v1odbho1_1280.png" class="images-portfolio img-responsive images-portfolio-round img-fluid" alt="Logo de voz paralela"> </a>                  </li>
                <div class="overlay-image-portfolio">
                  <div class="text-image-portfolio"></div>
                </div>
              </article>
              <!--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>
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/3f6a7329d6565462d332e5372e11ae04/tumblr_pej19edm2f1v1odbho1_1280.png" class="images-portfolio img-fluid" alt="ejempli 1">

                </div>
              </article>

              <!--Modal fin-->
              
              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image "> <a href="portoliof1.html" data-title="Ejemplo 1" 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" alt="Imagen del programa El Taquigrafo"> </a>                  </li>
                <div class="overlay-image-portfolio">
                  <div class="text-image-portfolio"></div>
                </div>
              </article>
              <!--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>
                <div 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="ejempli 1">

                </div>
              </article>

              <!--Modal fin-->

              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <a href="portoliof1.html" data-title="Ejemplo 1" data-toggle="modal" data-target="#logo-taquigrafo"> <img src="https://78.media.tumblr.com/81e4dcfd1e6fb86ab9f65d3c0e7956d4/tumblr_p2yedbFKeU1v1odbho1_1280.png" class="images-portfolio img-responsive images-portfolio-round img-fluid" alt="Logotipo Taquigrafo"> </a>                  </li>
              </article>
              <!--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>
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/81e4dcfd1e6fb86ab9f65d3c0e7956d4/tumblr_p2yedbFKeU1v1odbho1_1280.png" class="images-portfolio img-fluid" alt="ejempli 1">

                </div>
              </article>

              <!--Modal fin-->
              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <a href="portoliof1.html" 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" alt="Cartel para Animayo 2018"> </a>                  </li>
              </article>
              <!--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>
                <div 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="ejempli 1">

                </div>
              </article>

              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <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" alt="ejempli 1"> </a>                  </li>
              </article>

              <!--Modal fin-->

              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <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" alt="Portfolio de Mauro Civera Ro"/> </a>                  </li>
              </article>

              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <a href="portoliof1.html" data-title="Ejemplo 1" 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 de las Juventudes Socialistas"> </a>                  </li>
              </article>
              <!--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>
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/bddcf77e04021a1d669896e97a15e8e2/tumblr_p1xsxqElgw1v1odbho1_1280.jpg" class="images-portfolio img-fluid" alt="Cartel de recogida de alimentos de las Juventudes Socialistas">

                </div>
              </article>

              <!--Modal fin-->

              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <a href="portoliof1.html" 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>                  </li>
              </article>

              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <a href="portoliof1.html" data-title="Ejemplo 1" 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" alt="Cartel para el concurso de carteles de Aquae"> </a>                  </li>
              </article>
              <!--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>
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <img src="https://78.media.tumblr.com/8be84b4d51efea34280abb27208ac938/tumblr_ogde50DR0d1v1odbho1_540.jpg" class="images-portfolio img-fluid" alt="ejempli 1">
                </div>
              </article>
              <!--Modal fin-->
              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <a href="portoliof1.html" data-title="Ejemplo 1" 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" alt="Cartel para el concurso de Huercasa"> </a>                  </li>
              </article>
              <!--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>
                <div 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="ejempli 1">
                </div>
              </article>
              <!--Modal fin-->
              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <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" alt="Portada del Whitepaper de PeopleAnalytics"> </a>                  </li>
              </article>
              <article class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                <li class="li-image"> <a href="portoliof1.html" data-title="Ejemplo 1" data-toggle="modal" data-target="#animayo2017"> <img src="https://78.media.tumblr.com/07c43a2fcd5de2afda8ac17ebcc449dd/tumblr_ook8pu8eQe1v1odbho2_r1_540.jpg" class="images-portfolio img-responsive images-portfolio-round" alt="Cartel para el concurso de carteles de Animayo 2017"> </a>                  </li>
              </article>
              <!--Modal-->

            </ul>
          </div>
        </section>
        <div class="container-page">
          <ul class="ul-pagination">
            <li class="pagination pagination-active"> <a href="https://codepen.io/MiaSalazar/full/GxBgRe" class="pagination-1 pagination-a hover pagination-active "> 1 </a> </li>
            <li class="pagination"> <a href="https://codepen.io/MiaSalazar/full/OoyLKJ" class="pagination-a pagination-g"> 2 </a> </li>
            <li class="pagination"> <a href="https://codepen.io/MiaSalazar/full/oPjvLo" class="pagination-a pagination-g"> 3 </a> </li>
          </ul>
        </div>

      </main>
    </div>
  </div>

  <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"></div>
        </div>
        <div class="col-lg-12 col-md-12 col-xs-12">
          <div class="footer">
            <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"> </a></li>
              <li><a href="https://twitter.com/chochomona"> <img src="https://thumb.ibb.co/cCSFsH/TW_1.png" class="social-icon"> </a></li>
              <li><a href="#"> <img src="https://thumb.ibb.co/n5HgXH/GH_2.png" class="social-icon"> </a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>
  </div>
</body>

</html>
            
          
!
            
              .container-fluid {
  padding-left: 0px;
  padding-right: 0px;
}

body {
  background-image: url("https://thumb.ibb.co/kL7j2H/papel_blanco.jpg");
  background-attachment: fixed;
  background-color: #d7d8d3;
  margin-left: 50px;
  width: 100%;
  border-top: 10px solid #b47068;
  margin-top: 0px;
  padding-top: 25px;
  margin-left: 0px;
  margin-bottom: 0px;
}

.wrap {
  margin-left: 140px;
  margin-right: 140px;
}

.wrap::after {
  display: table;
}

.row {
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  flex-wrap: wrap;
}

img {
  display: inline;
}

img:focus {
  outline: 0;
}

.container {
  margin-left: 0px;
  margin-right: 0px;
}

.wrap::before {
  clear: both;
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
  text-decoration: none;
}

li {
  padding-left: 12px;
  list-style-type: none;
}

/*cabecera*/
#mia-logo {
  font-family: "Francois One", sans-serif;
  color: #b47068;
  text-align: left;
  font-size: 100px;
  font-weight: lighter;
  margin-top: 5px;
  margin-bottom: 5px;
}

.presentacion {
  text-align: left;
  font-size: 25px;
  margin-bottom: 0px;
  margin-top: 0px;
  color: #a59391;
  letter-spacing: 2px;
  font-family: "Merriweather", sans-serif;
  padding-top: 77px;
  font-weight: 200;
  line-height: 35px;
}

.presentacion:last-of-type {
  padding-top: 0px;
}

/*menu principal lateral*/
ul .no-list {
  padding-bottom: 2px;
}
.menu-principal {
  text-align: right;
  padding-bottom: 5px;
  padding-left: 0px;
  font-size: 15px;
  list-style-type: none;
  -webkit-transition: width 4s; /* Safari */
  transition: width 4s;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #b47068;
}

.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
  color: #b47068;
}

.navbar-dark .navbar-nav .nav-link {
  color: #a59391;
}

.nav-menu {
  text-decoration: none;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  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: 20px;
}

/*Dropdown*/

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

.dropdown-menu {
  float: left;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
  background-color: transparent;
  border: #a59391;
  text-align: left;
  min-width: 34px;
}

.dropdown-item {
  color: #a59391;
  font-family: "Merriweather", sans-serif;
  font-size: 15px;
  padding-bottom: 0.5rem;
}

.dropdown-item:hover {
  background-color:
 transparent;
  color: #b47068;
  font-family: "Merriweather", sans-serif;
  font-size: 20px;
  padding-bottom: 0.5rem;
}

/*portfolio*/

ul.gallery {
  overflow: hidden;
  padding-left: 0px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.presumiendo {
  padding-top: 100px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 2px solid #b47068;
  font-family: "Merriweather";
  color: #b47068;
  font-weight: 250;
  letter-spacing: 2px;
  margin-left: 0px;
  margin-right: 0px;
}

.align-icon {
  left: 0px;
}

.images-portfolio {
  border-left: 0px;
  margin-bottom: 30px;
  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;
}

.li-image a:focus {
  outline: none;
}

.images-center {
  width: 100%;
  max-width: 100%;
  padding-bottom: 100px;
  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;
}


/*pagination*/

ul .pagination {
  display: inline-block;
  text-align: center;
  font-size: 16px;
}

.ul-pagination {
  padding-left: 0px;
  width: 100%;
  margin-bottom: 50px;
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  justify-content: center;
}

.container-page {
  clear: both;
  margin-top: 0px;
  margin-left: 0px;
}

.container-page li {
  display: inline;
}

.pagination-1 {
  margin-left: 0px;
}

.pagination-g {
  margin-left: 30px;
}

.pagination-a {
  padding: 10px 20px 10px 20px;
  margin-bottom: 30px;
  color: white;
  background-color: #a59391;
  font-size: 14px;
  text-align: center;
  font-family: "Merriweather";
}

.pagination-a:hover {
  background-color: #b47068;
  text-decoration: none;
  color: white;
}
.pagination-active a{
  background-color: #b47068;
}

/*footer*/
.main-footer {
  border-top: 10px solid #b47068;
  margin-left: 0px;
  margin-right: 0px;
  clear: both;
  display: block;
  max-width: 100%;
  padding-top: 0px;
  padding-bottom: 30px;
  background-color: #a59391;
  margin-bottom: 0px;
}

.footer {
  text-align: center;
  font-family: "Merriweather", sans-serif;
  color: white;
  margin-bottom: 20px;
  margin-top: 30px;
}

.footer p {
  display: inline;
  padding-top: 30px;
}

.footer li {
  display: inline;
}

.footer ul {
  padding-left: 0px;
}

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

.social-icon {
  max-height: 25px;
  margin-top: 0px;
  display: inline;
  text-decoration: none;
  padding-left: 0px;
  margin-left: 0px;
  border-bottom: 0px;
}

.social-icon:hover {
  max-height: 40px;
}

.social a:hover {
  text-decoration: none;
}

ul .social-icon {
  display: inline;
  width: auto;
}

.me {
  border-radius: 50%;
  border: 5px solid #fff;
  max-width: 120px;
  margin-bottom: 10px;
  margin-top: 40px;
}

.me-content {
  display: flex;
  justify-content: center;
}

footer ul {
  padding-top: 10px;
}

footer li:first-of-type {
  padding-left: 0px;
}

footer li a:hover {
  text-decoration: none;
}

@media screen and (max-width: 991px) {
  
 .list-inline{
    margin: 0 auto;
  }
  
  #mia-logo {
    font-size: 70px;
    line-height: 1;
    text-align: center;
  }

  .presentacion {
    font-size: 15px;
    text-align: center;
    line-height: 1.5;
    padding-top: 10px;
  }
  .presumiendo {
    font-size: 17px;
    line-height: 1;
    padding-bottom: 10px;
    padding-top: 30px;
  }
  .nav-menu {
    border-right: 0px;
    margin: auto;
  }
  .images-center {
    padding-bottom: 10px;
  }
  .dropdown-toggle::after {
    display: none;
  }

  .linea2 {
    display: inline;
  }

  .nav-menu {
    padding-top: 10px;
  }

  .xs-center {
    display: flex;
    justify-content: center;
    padding-top: 20px;
  }

  .navbar-toggler:focus {
    outline: none;
  }

  .ml-auto,
  .mx-auto {
    margin-left: 0px;
  }

  .toggle-center {
    margin-left: 0px;
  }

  div .navbar-collapse .collapse show {
    padding-top: 5px;
  }
  
 div nav button .toggle-center{
    margin-left: 0px;
  }
  
  button{
    margin: 0 auto;
  }
  
  .dropdown-item{
    text-align: center;
  }
}

@media screen and (max-width: 600px) {
  .wrap {
    margin-left: 10px;
    margin-right: 10px;
  }

  .presumiendo {
    font-size: 17px;
    border-bottom: 2px solid;
    margin-bottom: 35px;
  }
  .images-portfolio {
    width: 100%;
  }

  .li-image {
    display: flex;
    justify-content: center;
  }

  .me-content img {
    width: 70%;
    border: 3px solid #fff;
  }

  .footer-container {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
  }

  .me-round {
    align-self: center;
    flex: 0 0 auto;
  }

  .footer-container .me-content div {
    margin-right: -56px;
  }
}

            
          
!
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