I did it 3 times, always makes me the same corrections. Can´t get it!Help me please!
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"content="landing page"/>
<title>Product Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img"src="https://photos.google.com/u/1/photo/AF1QipOsnUeRAfsKwwFDF5xXoUP-xiEf6Y3IGl9Erm5s"alt="logo San Jose"
</div>
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link"href="#informacion">Información</a>
</li>
<li>
<a class="nav-link"href="#productos">Productos</a>
</li>
<li>
<a class="nav-link"href="#ellos">Ellos</a>
</li>
</ul>
<h1>Bienvenidos</h1>
<div class="contenedor">
<div class="info" >
<h2>Conocenos!</h2>
<h3 id="informacion">Informacion</h3>
<p>Tienda para Mascotas San Jose
Suministros para mascotas
📲 3516331087 - ☎️ 4587388
Servicio veterinario 👨⚕️- Balanceados 🍴 - Juguetes y accesorios 🥏 Peluquería Canina 🧽🧼</p>
<img id="perro" src="https://www.instagram.com/p/CiH_zcSs3Q0/?hl=es" alt="perro tierno">
</div>
<div class="productos">
<h3 id="productos">Productos</h3>
<div class="fotos">
<img src="https://www.instagram.com/p/CmrsdtVOYEC/?hl=es"alt="correas">
<img src="https://www.instagram.com/p/Cj3jZvLOJVr/?hl=es"alt="peluqueria">
<img src="https://www.instagram.com/p/CRhEulDt9mk/?hl=es"alt="atencion veterinaria">
<img src="https://www.instagram.com/p/CdVz6ViMAhS/?hl=es"alt="balanceado">
</div>
</div>
<div class="video">
<h3 id="ellos">Ellos</h3>
<iframe id="video"src="https://www.instagram.com/p/CI6LjHoHiie/?hl=es"alt="cachorro"></iframe>
</div>
<br>
<h3>Dudas?</h3>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email"type="email"name="email"placeholder="Escribe tu Email"required>
<input id="submit"type="submit"value="enviar">
<p>Nos contactaremos a la brevedad</p>
<p>Gracias!</p>
</form>
</div>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
head{
display: none;
}
body {
background-color: #eee;
font-family: sans-serif;
display: block;
}
.page-wrapper {
position: relative;
}
.logo{
width: 25%;
}
nav{
font-weight: 400;
display: block;
}
nav > ul {
width: 50%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
li {
list-style: none;
display: list-item;
text-align: -webkit-match-parent;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #eee;
width: 100%;
}
h1{
font-weight: bold;
}
.contenedor{
display: flex;
width: 100%;
}
p{
text-align: center;
}
#perro{
display: flex;
justify-content: center;
}
.productos{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.fotos{
width: 50%;
padding: 20px;
border-radius: 10px;
}
.video{
overflow-clip-margin: content-box !important;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
overflow: clip !important;
}
@media (max-width: 350px) {
#video {
width: 300;
height: 200;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: