Proyectos de diseño web responsivo - Construye una página tributo

Español HTML-CSS
1

Desafío: Proyectos de diseño web responsivo - Construye una página tributo

2

Puedes compartir tu codigo y cual es la duda que tienes?

5

haciendo click en el boton </>
image
aparecen esas comillas invertidas `

solo pega tu código en medio, tres para abrir el bloque de codigo y tres para cerrar

copia y pega tu codigo html y css

1 Like
6

Aquí está, me dice que “Tu #image debe estar centrado dentro de su padre”, agradecería mucho si me ayudas con este asunto, gracias!

<!DOCTYPE html>
<html>
  <head>
<link rel="stylesheet" href="styles.css">
 </head>
  <body>
   <main id="main">
<div id="main">

  <h1 id="title">Marilyn Monroe</h1>
  <p><em>La mujer que el mundo de hoy sigue amando</em></p>

  <figure id="img-div">
   
   <div id="img-div">
        <img id="image"
        src="https://i.pinimg.com/564x/7d/2c/63/7d2c635623328b340f5d26ae37341964.jpg" alt="Marilyn Monroe image" />
          <figcaption id="img-caption">
            
            <em><u>Marilyn Monroe posando para fotógrafos en The Seven Year Itch (1955).</u></em></figcaption>
 
      </div>
 
       <div id="tribute-info">
      <h3>Aquí hay una línea de tiempo de la vida de Marilyn Monroe.</h3>
<ul>
 <li> <strong>1926</strong> - Nace el día 01 de Junio en Los Ángeles, California.</li>
 <li><strong>1938</strong> - Luego de una serie de problemas con su madre, comienza a vivir con la tía de Grace,Anna Lower,por lo tanto, asiste a la secundaria Emerson. </li>
  <li> <strong>1941</strong> - Debido a los problemas de salud que Lower tenía al ser una mujer de edad avanzada,Monroe regresa a vivir con los Goddard en Van Nuys. En este mismo año, asiste a la secundaria Van Nuys.</li>
  <li> <strong>1942</strong> - Las leyes de protección infantil de California impididen que los Goddard se la lleve fuera del estado,regresa al orfanato,no obstante,a los 16 años,se casa con James Dougherty,quien tenía 21 años.</li>
   <li> <strong>1944</strong> - Monroe se muda con sus suegros y comenzó a trabajar en Radioplane Company, una fábrica de municiones en Van Nuys.</li>
   <li> <strong>1945</strong> - Renuncia a su trabajo y empieza en el modelaje.</li>
 <li> <strong>1946</strong> - Se divorcia de Dougherty, quien estaba en contra de su carrera, en este mismo año firma un contrato con Fox y crea su nombre artístico, Marilyn Monroe.</li>
 <li> <strong>1947</strong> - No renueva su contrato con fox y regresa al modelaje.</li>
 <li> <strong>1948</strong> - Gracias a su amistad con el ejecutivo de fox, Joseph M. Schenck,quien convence a su amigo Harry Cohn, el director ejecutivo de Columbia Pictures, para que la contratara en Marzo.</li>
   <li> <strong>1949</strong> - Monroe termina su contrato con Columbia.</li>
    <li> <strong>1953</strong> -Protagoniza tres películas,"Niagara,"Gentlemen Prefer Blondes" y  "How to Marry a Millionaire."</li>
    <li> <strong>1954</strong> - Se casa con  Joe DiMaggio. Funda con el fotógrafo Milton H. Greene su propia productora, Marilyn Monroe Productions. Más tarde se divorcia de Joe DiMaggio.</li>
     <li> <strong>1956</strong> - Luego de sus múltiples conflictos sobre 20th Century-Fox, consigue la victoria. También, se casa con Arthur Miller.</li>
     <li> <strong>1960</strong> - Sufre abortos espóntaneos, su salud física y mental va decayendo ,poco después se divorcia con Miller. Más tarde, se toma un descanso para cantar «Feliz cumpleaños, Sr. Presidente» en el escenario de la celebración del cumpleaños anticipado del presidente John F. Kennedy en el Madison Square Garden de Nueva York.</li>
     <li> <strong>1962</strong> - Muere a la edad de 36 años.</li>
  </ul>
 <p>
            "La imperfección es belleza, la locura es genialidad, y es mejor ser absolutamente ridículo que absolutamente aburrido."
          </p>
          <cite>- Marilyn Monroe</cite>
        </blockquote>
 

  <h3>
          Más información con respecto a su vida
          <a
            id="tribute-link"
            href="https://es.wikipedia.org/wiki/Marilyn_Monroe"
            target="_blank"
            >Wikipedia</a>.
        </h3>
          </main>
  </body>
</html>


#main {
  max-width: 1280px;
  max-height: 100%;
  margin: 30px auto;
  padding: 15px;
  border-radius: 5px;

}

#title {
text-align: center;
}

#main > p {
text-align: center;
}

#img-dev {
max-width: 600px;
margin: 0 auto;
padding: 15px;
background-color: #ffffff;
}

#image { 
  margin-top: 24px;
  margin-bottom: 24px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: 330px;
  border-radius: 5px;
}

#tribute-info {
max-width: 600px;
margin: 0 auto;
}

#tribute-info > h3 {
  text-align: center;
}

#tribute-info > ul li {
  margin-bottom: 10px;
  line-height: 30px;
  box-shadow: 10px 5px 5px black;
}

h5{
text-align: center;
}

h1 {
  font-size: 60px;
   box-shadow: 10px 5px 5px black;

}

body {
    background-color:  #FDEDEC;
}

p {
    font-size: 20px;
  }
7

Antes de centrar la imagen, en tu código css copiaste mal el id revisa que todos los selectores están bien escritos

image
image813×517 69.1 KB

Detras de la imagen tienes un elemento div (le puse color rojo para que se vea bien), este elemento está centrado y lo centraste con este código

#img-div {
max-width: 600px;
margin: 0 auto;
padding: 15px;
background-color: red;
}

una de esas líneas centra el elemento #img-div, la puedes usar para centrar la imagen (pudes buscar como centrar con margin)

recuerda que el id es un valor único, y en tu código tienes id’s repetidos
y tambien hay elementos que no tienen etiquetas de cierre,

1 Like