Cuéntanos qué está pasando:
Hola…! Estoy teniendo problemas con el desafío “Página web del Portafolio personal - Construye una página portafolio personal”. He seguido las instrucciones cuidadosamente, pero mi código no funciona correctamente . Me indica que el problema esta en que
Falló:Tu portafolio debe usar al menos una consulta de medios.
Pero eso ya esta incluido y no entiendo porque no me lo acepta
Tu código hasta el momento
ADVERTENCIA
El código semilla del desafío y/o tu solución excedió la longitud máxima que podemos transferir del desafío.
Tendrás que dar un paso adicional aquí para que el código que escribiste se presente en un formato fácil de leer.
Por favor, copia/pega todo el código del editor que se muestra en el desafío desde el que acabas de enlazar.
**HTML**
<!DOCTYPE html>
<html lang="es">
<head>
<!--Metadatos-->
<meta charset="UTF-8">
<meta name="autor" content="Ruthmary De Nobrega">
<meta name="description" content="Portafolio de desarrollo web de Ruthmary De Nobrega">
<meta name="keywords" content="HTML, CSS, JavaScript, React">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- titulo-->
<title>Ruthmary De Nobrega | Desarrollo Web Front-End</title>
<!-- favicon-->
<link rel="icon" type="image/x-icon" href="imagenes/Icono.png">
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- Icono de bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!--CSS-->
<link href="style.css" rel="stylesheet">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik+Dirt&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ephesis&family=Quicksand:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<!-- Barra de navegacion -->
<nav id="navbar" class="navbar navbar-expand-md navbar-ligth">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggler" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-toggler">
<a class="navbar-brand" href="#">
<img class="miniatura" src="Imagenes/Icono.png" alt="Logo de la pagina web">
</a>
<ul class="navbar-nav d-flex justify-content-center align-items-center">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#sobre-mi">Sobre mi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Proyectos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonio">Testimonio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Seccion Hero -->
<section class="align-items-stretch" id="welcome-section">
<div class="hero-principal d-flex flex-column justify-content-center align-items-center">
<img class="hero-icono" src="Imagenes/Ruthmary.png" alt="foto del icono" width="150">
<h1>Hola, soy Ruthmary De Nobrega</h1>
<h2>Desarrollo sitios web y escribo articulos sobre programacion.</h2>
</div>
<div class="hero-inferior">
<img class="hero-inferior-imagen img-fluid" src="Imagenes/desarrollo-web.jpg" alt="Imagen de desarrollo web">
</div>
</section>
<!-- Sobre mi -->
<section id="sobre-mi" class="sobre-mi seccion-oscura">
<div class="contenedor">
<h2 class="seccion-titulo">Conoce a Ruthmary</h2>
<p class=""seccion-texto>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut cursus nunc. In vitae neque ullamcorper, rhoncus enim id, dictum magna. Suspendisse posuere nisi sapien, ut placerat elit posuere in. Ut rhoncus purus et nisl tincidunt lobortis. Ut sed lobortis eros. Ut ac interdum urna. Praesent ultricies cursus lacus, et scelerisque sem pharetra sit amet. Nulla ac consequat tellus, quis imperdiet tortor. Donec non ornare urna. Donec in semper nulla. Ut eu venenatis metus. Curabitur ut facilisis purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed pulvinar diam et nulla venenatis lobortis vitae vitae mi.</p>
</div>
</section>
<!-- Experiencia -->
<section id="Exp"class="experiencia seccion-clara">
<div class="container text-center">
<div class="row">
<!-- Desarrollo Web -->
<div class="columna col-12 col-md-4">
<i class="bi bi-laptop"></i>
<p class="experiencia-titulo">Desarrollo Web</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut cursus nunc. In vitae neque ullamcorper, rhoncus enim id, dictum magna. Suspendisse posuere nisi sapien, ut placerat elit posuere in. </p>
<div class="badges-contenedor">
<span class="badge text-bg-primary">HTML</span>
<span class="badge text-bg-primary">CSS</span>
<span class="badge text-bg-primary">JavaScript</span>
<span class="badge text-bg-primary">Git y GitHub</span>
<span class="badge text-bg-primary">Bootstrap</span>
</div>
</div>
<!-- Articulos -->
<div class="columna col-12 col-md-4">
<i class="bi bi-laptop"></i>
<p class="experiencia-titulo">Articulos</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut cursus nunc. In vitae neque ullamcorper, rhoncus enim id, dictum magna. </p>
<div class="badges-contenedor">
<span class="badge text-bg-primary">Escribir</span>
<span class="badge text-bg-primary">Editar</span>
<span class="badge text-bg-primary">Blogs</span>
</div>
</div>
<!-- Estudiante -->
<div class=" columna col-12 col-md-4">
<i class="bi bi-laptop"></i>
<p class="experiencia-titulo">Estudiante</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut cursus nunc. In vitae neque ullamcorper, rhoncus enim id, dictum magna. Suspendisse posuere nisi sapien, ut placerat elit posuere in. </p>
<div class="badges-contenedor">
<span class="badge text-bg-primary">FreeCodeCamp</span>
<span class="badge text-bg-primary">Desarrollo Web</span>
<span class="badge text-bg-primary">Python</span>
</div>
</div>
</div>
</div>
</section>
<!-- Proyectos -->
<section id="projects" class="proyectos-recientes seccion-clara d-flex flex-column">
<h2 class="seccion-titulo texto-negro">Mis proyectos recientes</h2>
<h3 class="seccion-descripcion">Estos son algunos proyectos que he creado recientemente...</h3>
<!-- Galeria de Proyectos -->
<div class="container text-center proyecto-contenedor">
<div class="row">
<!-- Proyecto 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="project-tile">
<img src="Imagenes/proyecto1.jpg" alt="Proyecto 1">
<div class="overlay">
<p>Proyecto 1</p>
<div class="iconos-contenedor">
<a id ="profile-link" href="https://github.com/RuthmaryV/ejemplo-git-pull" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.staffcreativa.pe/blog/las-matematicas-detras-de-un-proyecto-de-paginas-web-exitoso/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="project-tile">
<img src="Imagenes/proyecto2.jpg" alt="Proyecto 2">
<div class="overlay">
<p>Proyecto 2</p>
<div class="iconos-contenedor">
<a href="https://github.com/RuthmaryV/mi-primer-repositorio" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://es.99designs.com/web-design/contests/circles-needs-website-design-72627" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="project-tile">
<img src="Imagenes/proyecto3.jpg" alt="Proyecto 3">
<div class="overlay">
<p>Proyecto 3</p>
<div class="iconos-contenedor">
<a href="https://github.com/RuthmaryV/mi-primer-repositorio" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.talem.es/diseno-y-desarrollo-web-ic-construction/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="project-tile">
<img src="Imagenes/proyecto4.jpg" alt="Proyecto 4">
<div class="overlay">
<p>Proyecto 4</p>
<div class="iconos-contenedor">
<a href="https://github.com/RuthmaryV/mi-primer-repositorio" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.ntxpro.net/sistemas/tipos-de-pagina-web/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="project-tile">
<img src="Imagenes/proyecto5.png" alt="Proyecto 5">
<div class="overlay">
<p>Proyecto 5</p>
<div class="iconos-contenedor">
<a href="https://github.com/RuthmaryV/mi-primer-repositorio" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.ntxpro.net/sistemas/tipos-de-pagina-web/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Proyecto 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="project-tile">
<img src="Imagenes/proyecto6.png" alt="Proyecto 6">
<div class="overlay">
<p>Proyecto 6</p>
<div class="iconos-contenedor">
<a href="https://github.com/RuthmaryV/mi-primer-repositorio" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.ntxpro.net/sistemas/tipos-de-pagina-web/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-laptop"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="https://github.com/" target="_blank" rel="noopener noreferrer">
<button type="button" class="btn btn-info">
Ver mas proyectos
<i class="bi bi-arrow-right-circle-fill"></i>
</button>
</a>
</section>
<!-- Articulos -->
<section class="articulos justify-content-start">
<h2 class="seccion-titulo texto-negro">Articulos</h2>
<div class="card">
<div class="card-header">
Mas recientes
</div>
<ul class="list-group list-group-flush">
<a href="https://www.freecodecamp.org/espanol/news/" target="_blank" rel="noopener noreferrer">
<li class="list-group-item">El decorador @property en Python - como usarlo, ventajas y sintaxis</li>
</a>
<a href="https://www.freecodecamp.org/espanol/news/" target="_blank" rel="noopener noreferrer">
<li class="list-group-item">Python tutotial clclos while - while True ejemplos de sintaxis y ciclos infinitos</li>
</a>
<a href="https://www.freecodecamp.org/espanol/news/" target="_blank" rel="noopener noreferrer">
<li class="list-group-item">Python leer archivo JSON - como cargar JSON desde un archivo y procesar dump</li>
</a>
<a href="https://www.freecodecamp.org/espanol/news/" target="_blank" rel="noopener noreferrer">
<li class="list-group-item">Python como escribir en un archivo -abrir, leer, escribir y otras funciones de archivos explicadas</li>
</a>
<a href="https://www.freecodecamp.org/espanol/news/" target="_blank" rel="noopener noreferrer">
<li class="list-group-item">Para que se usa Python? 10 usos del lenguaje de programacion Python </li>
</a>
</ul>
</div>
<a href="https://www.freecodecamp.org/espanol/news/" target="_blank" rel="noopener noreferrer">
<button type="button" class="btn btn-info">
Ver mas articulos
<i class="bi bi-arrow-right-circle-fill"></i>
</button>
</a>
</section>
<!-- Testimonios -->
<section id="testimonio" class="testimonios seccion-clara">
<h2 class="seccion-titulo">Testimonios</h2>
<h3 class="seccion-descripcion">Estos son algunos testimonios de mis clientes...</h3>
<!-- Carrusel -->
<div id="testimonios-carrusel" class="carousel carousel-dark slide">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<img class="testimonio-imagen rounded-circle" src="Imagenes/Robert.webp" alt="foto de Robert">
<p class="testimonio-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis augue lorem, eget commodo orci ullamcorper quis. Nullam dictum nisl tempus, venenatis elit vel, egestas urna. Sed risus est, vehicula non fringilla ac, porta nec purus. </p>
<div class="testimonio-info">
<p class="cliente">Robert</p>
<p class="cargo">Gerente de proyecto en Desarrollo Web</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<img class="testimonio-imagen rounded-circle" src="Imagenes/mary.webp" alt="foto de Mary">
<p class="testimonio-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis augue lorem, eget commodo orci ullamcorper quis. Nullam dictum nisl tempus, venenatis elit vel, egestas urna. Sed risus est, vehicula non fringilla ac, porta nec purus. </p>
<div class="testimonio-info">
<p class="cliente">James</p>
<p class="cargo">Gerente de proyecto en Desarrollo Web</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<img class="testimonio-imagen rounded-circle" src="Imagenes/james.jpg" alt="foto de James">
<p class="testimonio-texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis augue lorem, eget commodo orci ullamcorper quis. Nullam dictum nisl tempus, venenatis elit vel, egestas urna.</p>
<div class="testimonio-info">
<p class="cliente">James</p>
<p class="cargo">Gerente de proyecto en Desarrollo Web</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonios-carrusel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Anterior</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonios-carrusel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Siguiente</span>
</button>
</div>
</section>
<!-- Contactos -->
<section id="contacto"class="contacto seccion-oscura">
<div class="container">
<div class="container text-center rectangulo d-flex justify-content-evenly">
<div class="row">
<div class="col-12 col-md-4 seccion-titulo">
Hablemos!
</div>
<div class="col-12 col-md-4 descripcion">
Contactame para iniciar tu proyecto de desarrollo web y hare que tu vision se haga realidad
</div>
<div class="col-12 col-md-4">
<a href="mailto:rvdnd91@gmail.com">
<button type="button">
Contacto
<i class="bi bi-envelope-at-fill"></i>
</button>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Pie de pagina(footer) -->
<footer class="seccion-oscura d-flex flex-column align-items-center justify-content-center">
<img class="footer-icono" src="Imagenes/Icono.png" alt="logo del portafolio">
<p class="footer-texto text-center">Aprendo y creo todos los dias.<br>Creemos un proyecto juntos</p>
<div class="iconos-redes-sociales d-flex flex-wrap align-items-center justify-content-center">
<a href="https://twitter.com/?lang=es" target="_blank" rel="noopener noreferrer">
<i class="bi bi-twitter"></i>
</a>
<a href="https://github.com/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-github"></i>
</a>
<a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-linkedin"></i>
</a>
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">
<i class="bi bi-instagram"></i>
</a>
<a href="mailto:rvdnd91@gmail.com" target="_blank" rel="noopener noreferrer">
<i class="bi bi-envelope"></i>
</a>
</div>
<div class="derechos-de-autor">Creado por Ruthmary De Nobrega (2023) ©</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
**CSS**
/* Barra de navegacion */
.navbar {
padding: 2rem;
background-color: #f5f6f7;
}
.navbar-collapse {
align-items: center;
justify-content: space-between;
}
.miniatura{
border-radius: 50%;
width:50px;
}
/* Estilos generales */
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 2.5rem;
font-family: 'Rubik Dirt', cursive;
}
.seccion-oscura {
background-color: #1b1b32;
color: white;
}
.seccion-clara {
color:black;
background-color: white;
}
.seccion-titulo {
font-size: 2rem;
padding:15px 0;
font-family: 'Rubik Dirt', cursive;
}
.seccion-descripcion {
font-size:1.2rem;
color: #584e4e;
}
.seccion-texto {
font-size: 1.2rem;
}
.texto-negro {
color: black;
}
.btn-info {
font-size: 1.1rem;
margin: 20px;
}
.texto-blanco {
color: white;
}
/* Seccion Hero */
#welcome-section {
background-color: #f5f6f7;
min-height: 450px;
text-align: center;
}
.hero-principal {
padding: 3rem;
}
.hero-icono {
width: 200px;
height:200px;
border-radius:50%;
margin: 20px;
border-color: orangered;
border-style: double;
}
.hero-principal h2 {
font-size: 1.5rem;
color: #615151;
}
/* Sobre mi */
.sobre-mi {
height: 500px;
padding: 10px;
}
.sobre-mi .contenedor {
max-width: 600px;
text-align: center;
}
/* Experiencia */
.experiencia {
padding: 40px 40px 60px 40px;
}
.experiencia .columna {
padding: 20px;
border: 2px solid #8080804d;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
transition: all 0.2s ease-in;
}
.experiencia .columna:hover {
color: white;
background-color: #1b1b32;
}
.experiencia-titulo {
font-size: 25px;
font-weight: bold;
margin: 10px 0;
}
.experiencia i {
font-size: 2.5rem;
color:#7ade30;
background-color:#0a0a23;
padding: 8px 19px;
border-radius: 50%;
}
.badges-contenedor {
font-size: 20px;
font-weight: bold;
margin: 10px 0;
}
.badges {
margin: 5px;
}
/* Proyectos */
.proyectos-recientes {
padding: 40px;
}
.proyectos-recientes img {
height:100%;
width: 100%;
padding: 10px;
border-radius: 25px;
display:block;
transition: all 0.2s ease;
}
.proyectos-contenedor {
padding-top: 60px;
margin-bottom:40px;
}
.overlay {
transition: all 0.2s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.overlay p {
font-size: 25px;
font-weight: bold;
margin-bottom: 0;
}
.project-tile {
position: relative;
}
.project-tile:hover img {
opacity: 0.2;
}
.project-tile:hover .overlay {
opacity: 1;
}
.overlay .iconos-contenedor {
display: flex;
}
.overlay i {
color: black;
font-size: 60px;
margin: 10px;
}
/* Articulos */
.articulos {
min-height: 500px;
padding: 30px;
}
.articulos .card {
width: 80%;
max-width: 600px;
margin: 20px;
}
.articulos .card-header {
font-weight: bold;
}
.testimonios {
padding: 40px 40px 80px 40px;
}
.testimonios .carousel {
max-width: 800px;
}
.carousel-item {
height: 500px;
}
.carousel-item .container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.testimonio-imagen {
height: 150px;
width: 150px;
margin: 10px 10px 20px 10px;
}
.testimonio-texto {
max-width: 70%;
font-size: 20px;
text-align: center;
font-family: 'Share Tech Mono', monospace;
}
.testimonio-info {
font-weight: bold;
text-align: center;
}
.testimonio-info p {
margin-bottom: 0;
}
.testimonio-info .cliente {
font-size: 1.2rem;
}
.testimonio-info .cargo {
font-size: 0.9rem;
color: #656060;
}
/* Contacto */
.contacto .container {
max-width: 1100px;
min-height: 200px;
padding: 20px;
}
.contacto .rectangulo {
margin-top: -5rem;
background-color: rgb(13,110,253);
border-radius: 10px;
box-shadow: 0px 1px 4px 1px white;
}
.contacto .row {
width: 100%;
display: flex;
align-items: center;
}
.contacto .descripcion {
color: white;
font-size: 1.2rem;
}
.contacto button {
color:white;
font-weight: bold;
background-color: transparent;
border: 2px solid white;
padding: 1.25em 2em;
margin: 10px;
border-radius: 100px;
transition: all 0.2s ease-in-out;
}
.contacto button:hover {
background-color: white;
color: black;
}
.contacto button:hover i {
color: black;
}
.contacto button i {
color: white;
font-size: 1.3rem;
transition: all 0.2s ease-in-out;
}
/* pie de pagina (footer)*/
footer {
min-height: 500px;
}
.footer-icono {
height: 80px;
width: 80px;
margin:10px;
}
.footer-texto {
font-size: 1.5rem;
padding: 20px;
margin-bottom: 30px;
font-family: 'Quicksand',sans-serif;
}
.iconos-redes-sociales a{
width: 50px;
height: 50px;
display:flex;
align-items: center;
justify-content: center;
padding: 2px;
margin: 10px;
border: 2px solid white;
border-radius: 50%;
transition: all 0.2s ease-in;
}
.iconos-redes-sociales i {
color: white;
font-size: 1.5rem;
transition: all 0.2s ease-in;
}
.iconos-redes-sociales a:hover {
background-color: white;
border: 2px solid rgb(13,110,253)
}
.iconos-redes-sociales a:hover i {
color: black;
}
.derechos-de-autor{
font-size: 15px;
color: #aeaeae;
padding: 20px;
}
/* Adaptable responsivo */
@media screen and (max-width: 400px) {
.overlay p {
font-size: 18px;
}
.overlay i {
font-size: 40px;
}
}
@media screen and (max-width: 767px) {
.navbar-brand {
display: none;
}
}
@media screen and (min-width: 700px) {
.hero-inferior-imagen {
max-width: 600px;
}
}
@media screen and (max-width: 800px) {
.testimonio-imagen {
height: 120px;
width: 120px;
}
.testimonio-texto {
font-size: 18px;
}
}
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
Desafío: Página web del Portafolio personal - Construye una página portafolio personal
Enlaza al desafío: