Buenas tardes! Es el mismo archivo index. Lo que ocurre ahí es lo siguiente:
1ro: Aplica el estilo de css en el mismo archivo index y no en un archivo css.
Hay 3 formas de aplicar css puro:
- En la misma etiqueta. Ej; <div style=margin-top: 50px; > ;
- En el mismo HEAD. EJ: Voy a darle un fonde azul al div con la clase "holaMundo".
.holaMundo{
background-color:blue; }
- Aplicar estilo CSS desde un archivo CSS, llamando en el HEAD del HTML. Ej:
`<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini Alura | Cursos online</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="ejemplo1.css">
</head>
Para hacerlo responsivo se lo puede hacer en el mismo archivo o en otro, es indiferente. Lo que sí es muy importante usar etiqueta media queries, para que no te afecte en el código ya establecido para desktop.
Esto no es ni más ni menos que definir un condicional para aplicar un estilo.
Ej: Si el ancho de la pantalla tiene como mínimo 1024px, entonces la etiqueta h1 tendrá el estilo siguiente:
@media screen and (min-width: 1024px) {
h1 {
font-size: 36px;
}
}
Espero haber resuelto tu duda.
