Tell us what’s happening:
Hello. I’m making another post because I have this error when I inspect the project (in vscode it works perfectly and the file path is correctly placed in the html):
Refused to apply style from ‘https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/style.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coca-Cola Universe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<img src="Coca_Cola_logo_PNG11.png" alt="Coca-Cola logo..." id="header-img">
<nav id="nav-bar">
<a href="#encabezado" class="nav-link">¡Bienvenida!</a>
<a href="#history" class="nav-link">Historia</a>
<a href="#publicidad" class="nav-link">#seeThis</a>
<a href="#form" class="nav-link">Sorteo</a>
<a href="#contact" class="nav-link">Contacto</a>
</nav>
</header>
<main>
<section id="encabezado">
<h1 id="title">Coca-Cola Universe.</h1>
<p>La bebida más popular del <span class="keyword">universo</span>.</p>
</section>
<section id="history">
<h2 class="section-title">
Algo de <span class="keyword">historia</span>.
</h2>
<p class="subtitle">
Desde 1886, Coca-Cola ha sido parte de la vida de
millones de personas en todo el mundo. A lo largo
de los años, hemos evolucionado y crecido, llevando
nuestra refrescante bebida a cada rincón del planeta.
Hoy, seguimos innovando para ofrecer momentos únicos,
mientras cuidamos nuestro legado y miramos hacia <span class="keyword">un
futuro más sostenible</span>.
</p>
<hr>
<div class="fact-l">
<div class="fact" id="fact1">
<h4 class="fact-title">Creación y Fundación (<span class="keyword">1886</span>)</h4>
<p class="fact-text">
Coca-Cola fue creada por el farmacéutico John Stith Pemberton en Atlanta como un jarabe medicinal. Frank M. Robinson, su socio, le dio el nombre y diseñó el famoso logo.
</p>
</div>
<div class="fact" id="fact2">
<h4 class="fact-title">Expansión Comercial (<span class="keyword">1890s</span>)</h4>
<p class="fact-text">
Asa Candler compró los derechos de Coca-Cola, convirtiéndola en una marca comercial exitosa, estableciendo una sólida red de embotelladoras y popularizándola en todo Estados Unidos.
</p>
</div>
<div class="fact" id="fact3">
<h4 class="fact-title">Reconocimiento Global (<span class="keyword">1900s-1950s</span>)</h4>
<p class="fact-text">
Durante la primera mitad del siglo XX, Coca-Cola se expandió internacionalmente, convirtiéndose en una de las primeras marcas globales, con presencia en más de 50 países.
</p>
</div>
<div class="fact" id="fact4">
<h4 class="fact-title">Innovación y Diversificación (<span class="keyword">1960s-1990s</span>)</h4>
<p class="fact-text"> La compañía introdujo nuevos productos como Fanta, Sprite, y Diet Coke, y continuó innovando en su publicidad, consolidándose como un símbolo cultural en todo el mundo.</p>
</div>
<div class="fact" id="fact5">
<h4 class="fact-title">Liderazgo Moderno (<span class="keyword">2000s-Presente</span>)</h4>
<p class="fact-text">
Coca-Cola sigue siendo una de las marcas más valiosas del mundo, adaptándose a nuevas tendencias de consumo con productos sin azúcar y campañas digitales enfocadas en sostenibilidad.
</p>
</div>
</div>
</section>
<section id="publicidad">
<iframe src="https://youtu.be/oxomkXwGWPs?si=jkyZxdQQGOEWoRI0"
frameborder="0"
id="video"
title="Destapá esos momentos"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
width="100%" height="315"></iframe>
</section>
<section class="form">
<h2 class="section-title">
¿Quieres tener Coca-Cola ilimitada por un año? Registrate aquí para ser el afortunado.
</h2>
<p class="subtitle">Habrá 5 ganadores.</p>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<label for="name">Name:
<input type="text" name="name" id="name" class="txt-input" placeholder="Javier..." required>
</label>
<label for="last-name">Last name:
<input type="text" name="last-name" id="last-name" class="txt-input" placeholder="...Milei" required>
</label>
<label for="email">Email:
<input type="email" name="email" id="email" class="txt-input" placeholder="example@email.com..." required>
</label>
<input type="submit" id="submit">
</form>
</section>
<section id="contact">
<h2 class="section-title">¡Síganos en nuestras redes!</h2>
<div class="social">
<a href="https://twitter.com/cocacolaar" class="social-btn">
<img src="" alt="X..." class="social-img">
</a>
<a href="https://www.facebook.com/cocacolaar/" class="social-btn">
<img src="" alt="Facebook..." class="social-img">
</a>
<a href="https://www.instagram.com/cocacolaar/?hl=es" class="social-btn">
<img src="" alt="Instagram..." class="social-img">
</a>
<a href="https://www.youtube.com/user/cocacola" class="social-btn">
<img src="" alt="YouTube" class="social-img">
</a>
<a href="https://ar.linkedin.com/company/the-coca-cola-company" class="social-btn">
<img src="" alt="LinkedIn" class="social-img">
</a>
</section>
<div id="go-up">
<a href="#header" id="goUpButton">↑</a>
</div>
</main>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.keyword {
font-family: Lobster Two, sans-serif;
color: yellow;
}
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.3rem 3%;
background-color: #e60000;
position: fixed;
width: 100%;
border-bottom: 0.5vh solid black;
}
#header:hover {
background-color: black;
}
#header-img {
height: 2.5rem;
padding: 0.4rem;
}
#header-img:hover {
background-color: black;
border:1.5px solid white;
border-radius: 10px;
}
#nav-bar {
display: flex;
position: fixed;
left: 35%;
gap: 2rem;
}
.nav-link {
color: #ffffff;
text-decoration: none;
font-size: 1.125rem;
}
.nav-link:hover {
color: #ffeb3b;
}
section {
height: 100vh;
display: flexbox;
flex-direction: column;
align-items: flex-start;
text-align: center;
margin: 0;
padding: 0;
}
#encabezado {
background-color: #e60000;
color: white;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding: 2rem;
}
#title {
font-size: 7rem;
margin: 0;
}
#title::selection {
background-color: #e60000;
color: black;
}
#encabezado p {
font-size: 1rem;
margin-left: 2rem;
max-width: 300px;
}
#encabezado p::selection {
background-color: #e60000;
color: black;
}
#encabezado .keyword::selection {
background-color: #e60000;
color: white;
}
#history {
display: flexbox;
flex-direction: column;
align-items: flex-start;
background-color: white;
color: black;
}
#history p::selection {
background-color: white;
color: #e60000;
}
.fact-title::selection {
background-color: white;
color: #e60000;
}
.fact-l {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
#fact5 {
grid-column: 1 / span 2;
}
#history .keyword {
background-color: #e60000;
border-radius: 5%;
}
#history span::selection {
background-color: white;
color: black;
}
#history h2 {
font-size: 2.7rem;
padding-top: 6vh;
padding-bottom: 1vh;
}
#history h2::selection {
background-color: white;
color: #e60000;
}
#history .subtitle {
padding: 0 7vw 5vh 7vw;
font-size: smaller;
font-style: italic;
color: black;
}
#history hr {
margin: 0 15vw 5vh 15vw;
border: 1.5px solid yellow;
border-radius: 3em;
}
.fact-l {
padding-left: 2vw;
padding-right: 2vw;
}
#publicidad {
display: flex;
align-items: center;
justify-content: center;
background-color: #e60000;
color: black;
}
#publicidad iframe {
width: 70vw;
height: 60vh;
border: 3px solid rgba(128, 128, 128, 0.61);
border-radius: 1%;
}
.form {
background-color: black;
color: #e60000;
}
.form h2 {
padding: 9vh 15vw 0 15vw;
}
.form h2::selection {
background-color: black;
color: white;
}
.form .subtitle {
padding-bottom: 5vh;
font-family: Lobster Two, sans-serif;
color: yellow;
}
.form .subtitle::selection {
background-color: black;
color: #e60000;
}
.form label::selection {
background-color: black;
color: white;
}
.txt-input {
display: block;
margin: 1rem 0;
padding: 1rem;
background-color: #e60000;
height: 5vh;
width: 40%;
border: none;
border-radius: 1em;
position: relative;
top: 65%;
left: 30%;
}
.txt-input::placeholder {
color: black;
font-style: italic;
}
.txt-input:hover {
background-color: #e600009d;
}
#email {
margin-bottom: 10vh;
}
#contact {
background-color: #673ab7;
color: white;
height: auto;
padding: 4rem 0;
}
#submit {
padding: 1rem 2rem;
background-color: #f00;
color: white;
border: none;
border-radius: 2em;
cursor: pointer;
}
#submit:hover {
background-color: #c00;
}
.social {
display: flex;
justify-content: center;
gap: 2rem;
}
.social-btn {
display: inline-block;
}
.social-img {
width: 3rem;
height: 3rem;
}
#go-up {
position: fixed;
bottom: 2rem;
right: 2rem;
}
#goUpButton {
background-color: #f00;
color: white;
padding: 1rem;
border-radius: 50%;
text-decoration: none;
font-size: 1.5rem;
line-height: 1.5;
}
#goUpButton:hover {
background-color: #c00;
}
@media (max-width: 768px) {
#header {
flex-direction: column;
}
#nav-bar {
flex-direction: column;
align-items: center;
gap: 1rem;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page