The Planets Gallery

12 November, 2024

The Planets Gallery, si Ahmad mau mencoba menata halaman webnya agar sesuai dengan tata letak pada gambar di atas. Dapatkah Anda membantunya?

Lakukan Ini
Perhatikan urutan, ukuran, perataan, dan jarak item pada gambar contoh.

Sesuaikan urutan item agar sesuai dengan contoh.
Identifikasi item yang disejajarkan secara berbeda dari yang lain dalam wadah dan terapkan align-self untuk memperoleh efek yang sama.
Tentukan item mana yang perlu lebih besar dari yang lain dan terapkan flex-grow pada item tersebut, pertimbangkan proporsinya pada gambar contoh.
Pastikan Anda menyesuaikan Jendela Pratinjau untuk melihat apakah Anda telah mencocokkan contoh gambar.

HTML files:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <!-- title -->
    <div class="title">
      <h1>The Planets Gallery</h1>
    </div>

    <!-- information paragraphs -->
    <div class="info">
      <img class="info-img" src="planets.jpg" alt="plants">
      <p class="info-p1">Our solar system has eight planets and five dwarf planets - all located in an outer spiral arm of the Milky Way galaxy called the Orion Arm.</p>
      <p class="info-p2">Moving outward from the Sun, the planets are: Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, and Neptune.</p>
    </div>

    <!-- image gallery -->
    <div class="image-container">
      <img class="earth" src="earth.jpg" alt="Earth">
      <img class="jupiter" src="jupiter.jpg" alt="Jupiter">
      <img class="mars" src="mars.jpg" alt="Mars">
      <img class="mercury" src="mercury.jpg" alt="Mercury">
      <img class="neptune" src="neptune.jpg" alt="Neptune">
      <img class="saturn" src="saturn.jpg" alt="Saturn">
      <img class="uranus" src="uranus.jpg" alt="Uranus">
      <img class="venus" src="venus.jpg" alt="Venus">
    </div>

    <!-- final information -->
    <div class="final-info">
      <p>In 2006, Pluto was reclassified as a dward planet.</p>
      <p class="newHorizons">NASA's New Horizons spacecraft visited Pluto in 2015, and is currently exploring the Kuiper Belt beyond Pluto. </p>
      <p>The other dwarf planets are Ceres, Makemake, Haumea, and Eris.</p>
    </div>

    <!-- image citation -->
    <div class="footer">
      <p>All images CC0 from free-images.com</p>
    </div>

  </body>
</html>

CSS files:

.mercury {
  order: 1;
}

.venus {
  order: 2;
}

.earth {
  order: 3;
}

.mars {
  order: 4;
}

.jupiter {
  order: 5;
}

.saturn {
  order: 6;
}

.uranus {
  order: 7;
}

.neptune {
  order: 8;
}

.info-p1 {
  order: -1;
  align-self: flex-start;
}

.info-p2 {
  align-self: flex-end;;
  order: 1;
}

.newHorizons {
  flex-grow: 2;
}




/* DO NOT CHANGE CODE BELOW **/

/* body style */
body {
  font-family: Arial;
  background-color: #000000;
}

/* basic style for text on page */
.title, .footer, p {
  text-align: center;
  padding: 5px;
  color: aliceblue;
}

/* flex layout for image container */
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}

/* flex layout for final information paragraphs */
.final-info {
  display: flex;
}

.final-info > p {
  margin: 5px;
  width: 20%;
}

/* images style */
.img {
  width: 100%;
  height: auto;
}

/* flex layout for first information paragraphs */
.info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* style for informational image */
.info-img{
  width: 75%;
}

Tags: css flexbox html web