estoy aprendiendo a utilizar media queries pero estas no se aplican. He intentado usar el debugger de chrome para probar diferentes resoluciones, pero al momento de llegar a 1024px, los atributos no cambian como deberia. Revisé tambien la sintaxis de las media queries y lo he escrito bien! Y no se como darme cuenta que estoy haciendo mal, ya que en el debugger al llegar a 1024px, los atributos que deberian aplicarse al h1 y a la clase aparecen tachados. No se a que se debe, y como dije, al ser princiante me vendria bien una ayuda, gracias de antemano! (Estoy usando SCSS)
html {
scroll-behavior: smooth;
}
*{
box-sizing: border-box;
}
body{
margin: 0px;
font-family: "Onest", sans-serif;
background-color: #fcfcf6;
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
border-radius:18px;
}
header{
position: sticky;
top: -0.25px;
margin: auto;
width: 100%;
height: 80px;
padding: 45px 0px;
border-radius: 0px 0px 10px 10px;
background-color: #fcfaf6;
backdrop-filter: blur(10px);
z-index: 100;
nav{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
gap: 50px;
font-size: 1.3em;
font-weight: 600;
a{
color: #111;
opacity: 0.9;
transition: 0.2s;
&:hover{
color: #ec5007a8;
transition: 0.2s;
}
}
.cambiar-tema{
border: none;
background: none;
cursor: pointer;
transition: 0.2s;
.tema-svg {
stroke: #111;
transition: 0.3s;
&:hover {
stroke: #ffb936da;
}
}
}
hr{
position: absolute;
bottom: 0px;
margin: 0px;
width: 20%;
height: 4px;
border: none;
border-radius: 50px;
background-color: #111;
opacity: 0.8;
transition: 0.7s;
}
}
}
main{
.hero-section{
position: sticky;
top: 130px;
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
padding: 0px 0px 400px;
margin: 0px auto;
width: 100%;
.presentacion-hero-section{
width: 1000px;
height: 70%;
margin-bottom: 40px;
cursor: default;
h1{
display: inline-block;
margin-bottom: 30px;
// font-size: clamp(1.5rem, 2vw + 2rem, 4rem);
font-size: 4rem;
font-weight: 800;
color: #1c1cb4cc;
}
.emoji-titulo{
width: 150px;
margin-top: 70px;
}
.corchete-izq{
margin-left: 20px;
font-size: 6em;
font-weight: 700;
}
.corchete-der{
margin-left: 5px;
font-size: 1.3em;
font-weight: 700;
}
.descripcion{
width: 100%;
margin-bottom: 50px;
font-size: 2em;
line-height: 45px;
color: #111111b3;
}
.skills-stack{
display: flex;
gap: 50px;
font-size: 1.4em;
font-weight: 800;
color: #111;
cursor: default;
.svg-tech{
display: flex;
gap: 40px;
svg{
width: 30px;
height: 30px;
}
}
}
}
}
.sections-container{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 90px;
width: 100%;
padding: 50px 0px 200px;
border-radius: 30px 30px 0px 0px;
background-color: #120f0d;
box-shadow: 0px 0px 150px 50px inset #0f0d0c,0px -250px 150px 30px #fcfcf6;
z-index: 10;
.titulo-section{
display: flex;
justify-content: flex-start;
align-items: flex-end;
gap: 10px;
margin-bottom: 20px;
width: 95%;
cursor: default;
color: #fcfcf6;
.linea-separadora{
width: 100px;
height: 5px;
border-radius: 20px;
margin: 0px 0px 20px;
background-color: #fcfcf6;
}
h2{
margin: 0px;
font-size: 4em;
}
.emoji-section{
margin: 0px 0px 20px;
width: 100px;
}
.emoji-sobre-mi{
margin-left: 15px;
margin-right: 10px;
width: 70px;
}
span{
font-size: 4.5em;
font-weight: 600;
margin: 0px 0px 5px;
}
}
.section-sobre-mi{
width: 100%;
margin-bottom: 350px;
.article-sobre-mi{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
.texto-sobre-mi{
position: absolute;
width: 17%;
height: 100%;
z-index: 10;
div{
position: relative;
width: 100%;
height: 100%;
p{
position: absolute;
bottom: -150px;
right: -350px;
margin-top: 5px;
padding: 20px;
border-radius: 40px;
text-align: center;
line-height: 32px;
letter-spacing: 1.2px;
font-size: 1.5em;
font-weight: 500;
text-shadow: -1px 4px 23px rgba(0,0,0,1);
text-rendering: optimizeLegibility;
color: #e0e0e0e5;
background-color: #13100E;
cursor: default;
}
b{
font-weight: 800;
color: #fafafae8;
}
}
}
.imagen-sobre-mi{
img {
height: 600px;
border-radius: 84% 16% 88% 12% / 14% 90% 10% 86% ;
filter: drop-shadow(30px 30px 20px #000000e8);
}
}
}
}
.section-proyectos{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5%;
width: 100%;
height: 1350px;
.article-proyectos{
width: 35%;
height: 45%;
transition: 0.5s;
&:hover{
transform: scale(1.03);
transition: 0.5s;
}
.article-contenido{
position: relative;
width: 100%;
height: 90%;
border-radius: 10px;
background-color: #111;
box-shadow: rgb(8, 5, 2) 0px 20px 30px 10px;
.cursor-article {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}
}
}
.article-arriba{
display: flex;
align-items: flex-start;
}
.article-abajo{
display: flex;
align-items: flex-end;
}
}
.section-conocimientos{
width: 100%;
.conocimientos-container{
display: flex;
flex-direction: column;
gap: 30px;
width: 80%;
margin: auto;
.conocimientos-article{
display: flex;
width: 100%;
height: 350px;
border-bottom: 5px solid #fcfcf6;
background: rgb(18,15,13);
background: linear-gradient(180deg, rgba(18,15,13,1) 28%, rgba(9,7,6,1) 86%);
.imagen-article{
width: 30%;
height: 100%;
background-color: #00000056;
}
.texto-article{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 70%;
height: 100%;
cursor: default;
h3{
width: 80%;
margin: 30px 0px 0px;
font-size: 2.8em;
font-weight: 800;
color: #fcfcf6;
}
p{
width: 80%;
font-size: 2em;
font-weight: 600;
color: #827e77;
}
}
}
}
}
}
.section-contactame{
position: sticky;
top: 130px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 60px;
width: 100%;
height: 600px;
background-color: #fcfcf6;
.contactos-titulo-container{
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
cursor: default;
.link-contacto{
margin: 0px;
font-weight: 700;
font-size: 1.2em;
color: #7d7d7a;
b{
color: #120f0d;
}
}
}
img {
width: 100px;
}
.contactos-links{
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
width: 40%;
height: 80px;
a {
height: 100%;
svg{
height: 100%;
}
}
}
}
}
footer{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 250px;
background-color: #120f0d;
.derechos-reservados{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 50%;
height: 100%;
font-size: 3.6em;
font-weight: 600;
line-height: 60px;
color: #7d7d7a;
p{
margin: 0px 0px 0px 30%;
}
}
.hora-local-container{
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 50%;
height: 100%;
.reloj{
margin: 0px 30% 65px 0px;
font-size: 3.6em;
color: #7d7d7a;
}
}
}
}
a{
text-decoration: none;
}
.violeta{
color: #844984;
}
.naranja{
color: #F28C5C;
}
@media(max-width:1024px) {
h1{
font-size: 1.5rem;
}
.emoji-titulo{
width: 10px;
margin-top: 70px;
}
}
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kevin Osorio - Desarrollador Web</title>
<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=Onest:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<nav>
<a id="header-links" href="#sobre-mi">Sobre mí</a>
<a id="header-links" href="#proyectos">Proyectos</a>
<a id="header-links" href="#conocimientos">¿Qué se hacer?</a>
<a id="header-links" href="#contactame">Contactame</a>
<hr id="borde-inferior">
</nav>
</header>
<main>
<section class="hero-section">
<div class="presentacion-hero-section">
<h1>¡Hey! Soy Kevin Osorio</h1>
<img src="assets/img/emoji-saludando.png" class="emoji-titulo" alt="">
<span class="violeta corchete-izq">{</span>
<p class="descripcion"><b class="naranja">Desarrollador web autodidacta</b>, especializado en el area del Front-End. Opto por estilos minimalistas que brinden rapidamente la información al visitante. Actualmente ubicado en Buenos Aires, Argentina. 📍 <b class="violeta corchete-der">}</b> </p>
<div class="skills-stack">
<span>Skills stack</span>
<span>|</span>
<div class="svg-tech">
<svg class="html-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<title>HTML5 Logo Badge</title>
<path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/>
<path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/>
<path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
<path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<path fill="#264de4" d="M71.357 460.819L30.272 0h451.456l-41.129 460.746L255.724 512z"/>
<path fill="#2965f1" d="M405.388 431.408l35.148-393.73H256v435.146z"/>
<path fill="#ebebeb" d="M124.46 208.59l5.065 56.517H256V208.59zM119.419 150.715H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z"/>
<path fill="#fff" d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
<rect width="630" height="630" fill="#f7df1e"/>
<path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
</svg>
</div>
</div>
</div>
</section>
<div class="sections-container">
<div class="titulo-section" id="sobre-mi">
<div class="linea-separadora"></div>
<h2>Sobre mí</h2>
<img class="emoji-section emoji-sobre-mi" src="assets/img/emoji-sobre-mi.png" alt="">
<span>{</span>
</div>
<section class="section-sobre-mi">
<article class="article-sobre-mi">
<div class="texto-sobre-mi">
<div>
<p>Entusiasta de los diseños minimalistas y paginas web fluidas, pero adaptable a estilos mas complejos y desafiantes. Mi trabajo destaca en crear <b class="opacidad">codigo limpio, comentado y dinamico</b>. Poseo conocimiento de las tecnologías basicas para poner en pie una página web desde el lado del Front-End: <b class="naranja">HTML</b>, <b class="azul">CSS</b> y <b class="amarillo">JavaScript</b>. <b class="verde">}</b></p>
</div>
</div>
<div class="imagen-sobre-mi">
<img src="assets/img/IMG_7423.jpg" alt="">
</div>
</article>
</section>
<div class="titulo-section" id="proyectos">
<div class="linea-separadora"></div>
<h2>Mis proyectos</h2>
<img class="emoji-section" src="assets/img/emoji-proyectos.PNG" alt="">
</div>
<section class="section-proyectos">
<article class="article-proyectos article-arriba">
<div class="article-contenido">
<div class="cursor-article">
</div>
</div>
</article>
<article class="article-proyectos article-abajo">
<div class="article-contenido">
</div>
</article>
<article class="article-proyectos article-arriba">
<div class="article-contenido">
</div>
</article>
<article class="article-proyectos article-abajo">
<div class="article-contenido">
</div>
</article>
</section>
<div class="titulo-section">
<div class="linea-separadora"></div>
<h2>¿Qué se hacer?</h2>
<img class="emoji-section maleta-emoji" src="assets/img/que-se-hacer-emoji.png" alt="">
</div>
<section class="section-conocimientos" id="conocimientos">
<div class="conocimientos-container">
<article class="conocimientos-article">
<div class="imagen-article">
</div>
<div class="texto-article">
<h3>
Desarrollo Web:
</h3>
<p>
¡Mientras puedas imaginarlo, tu página puede hacerse realidad! Estoy especializado en crear webs unicas y personalizadas al gusto del cliente, con buen rendimiento, accesibilidad y fluidez.
</p>
</div>
</article>
<article class="conocimientos-article">
</article>
</div>
</section>
</div>
<section class="section-contactame" id="contactame">
<div class="contactos-titulo-container">
<a href="" class="link-contacto">
¿Te gustó mi trabajo? <b>Contactame para crear cosas increibles.</b>
</a>
<img src="assets/img/apreton-de-manos-emoji.png" alt="">
</div>
<div class="contactos-links">
<a href="">
<svg viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
</div>
</section>
</main>
<footer>
<div class="derechos-reservados">
<p>© 2024</p>
<p>Kevin Osorio</p>
</div>
<div class="hora-local-container">
<div class="reloj">
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
screen
ni nada más tal como he demostrado en mi respuesta