Me dice que no paso las pruebas 23, 24 y 25 y sí lo hago. O hay un error o yo soy el error xd.
<!-- file: index.html -->
/* file: styles.css */
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
Product Landing Page - Build a Product Landing Page
Hey there,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
<!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">
<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=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<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=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.keyword {
font-family: Lobster Two, sans-serif;
color: yellow;
}
/* Estilo del header */
#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;
}
/* Estilo de la imagen del logo */
#header-img {
height: 2.5rem;
padding: 0.4rem;
}
#header-img:hover {
background-color: black;
border:1.5px solid white;
border-radius: 10px;
}
/* Estilo del nav */
#nav-bar {
display: flex;
gap: 2rem;
}
/* Estilo de los enlaces de navegación */
.nav-link {
color: #ffffff;
text-decoration: none;
font-size: 1.125rem;
}
.nav-link:hover {
color: #ffeb3b;
}
/* Estilo de las secciones */
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; /* Ocupa las dos columnas */
}
#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;
}
/* Redes Sociales */
.social {
display: flex;
justify-content: center;
gap: 2rem;
}
.social-btn {
display: inline-block;
}
.social-img {
width: 3rem;
height: 3rem;
}
/* Botón para subir */
#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;
}
/* Responsive */
@media (max-width: 768px) {
#header {
flex-direction: column;
}
#nav-bar {
flex-direction: column;
align-items: center;
gap: 1rem;
}
}
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Hello @nachodecuzzi !
Great job!
Just a small typing error, that any of us could make.
It should be styles.css not style.css
Once the correction is made, your code will pass.
Wishing you good progress on your coding journey. 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.