Testy: Difference between revisions

From WytheriaWiki
(Created page with "<style> →‎Define a flex container for the 6 images: .image-container { display: flex; flex-wrap: wrap; } →‎Style the images within the container: .image-container img { width: 100%; →‎Make the images fill the container width: height: auto; →‎Maintain aspect ratio: } →‎Use media queries to adjust the layout for mobile screens: @media only screen and (max-width: 600px) { .image-container { flex-direction: column; /* Stack images vertically on...")
 
No edit summary
Line 1: Line 1:
<style>
<div class="Testy">
/* Define a flex container for the 6 images */
  <img src="Starter guide.png" alt="starter guide">
.image-container {
  <img src="image2.jpg" alt="Image 2">
   display: flex;
  <img src="image3.jpg" alt="Image 3">
   flex-wrap: wrap;
  <img src="image4.jpg" alt="Image 4">
}
   <img src="image5.jpg" alt="Image 5">
   <img src="image6.jpg" alt="Image 6">
</div>


/* Style the images within the container */
{{Testy
.image-container img {
|content1=[[File:Starter guide.png|330px|center|link=starter guide]]
  width: 100%; /* Make the images fill the container width */
|content2=[[File:Moneymaking.png|330px|center|link=Money Making]]
  height: auto; /* Maintain aspect ratio */
|content3=[[File:Skilling.png|330px|center|link=Skilling]]
}
|content4=[[File:Minigames.png|330px|center|link=Minigames]]
 
|content5=[[File:Bosses2.png|330px|center|link=Bosses]]
/* Use media queries to adjust the layout for mobile screens */
|content6=[[File:Other Guides.png|330px|center|link=Misc Guides]]
@media only screen and (max-width: 600px) {
}}
  .image-container {
    flex-direction: column; /* Stack images vertically on smaller screens */
  }
}
</style>

Revision as of 23:43, 20 June 2024

 <img src="Starter guide.png" alt="starter guide">
 <img src="image2.jpg" alt="Image 2">
 <img src="image3.jpg" alt="Image 3">
 <img src="image4.jpg" alt="Image 4">
 <img src="image5.jpg" alt="Image 5">
 <img src="image6.jpg" alt="Image 6">
       {{{content7}}}