Ramen Gallery
22 November, 2024
File HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- photo gallery of popular ramen -->
<h1>🥢 Ramen Gallery 🥢</h1>
<div class="gallery">
<!-- ramen card - miso ramen -->
<div class="ramen-card">
<img src="Tonkotsu_Ramen.jpg" alt="Tonkotsu Ramen">
<div class="content">
<h3>Tonkotsu Ramen</h3>
<p>Originating from modern-day Fukuoka and lending its mouthwatering fragrance to Tokyo’s Asakusa region, tonkotsu ramen is made from boiling pork bones for hours until it brings a creamy cloudy look to the tonkotsu broth.</p>
</div>
</div>
<!-- ramen card -Miso -->
<div class="ramen-card">
<img src="Miso_Ramen.jpg" alt="Miso Ramen">
<div class="content">
<h3>Miso Ramen</h3>
<p>Coming from the Sapporo region of Hokkaido, miso ramen takes its name from its main ingredient. This broth is strong and savory and has an opaque appearance</p>
</div>
</div>
<!-- ramen card - Shoyu -->
<div class="ramen-card">
<img src="Shoyu_Ramen.jpg" alt="Shoyu Ramen">
<div class="content">
<h3>Shoyu Ramen</h3>
<p>Shoyu means soy sauce in Japanese and this style of noodle dish was actually the first type of ramen and is still going strong. There’s lots of different varieties of shoyu ramen but the taste is normally salty and tangy.</p>
</div>
</div>
<!-- ramen card - Shio -->
<div class="ramen-card">
<img src="Shio_Ramen.jpg" alt="Shio Ramen">
<div class="content">
<h3>Shio Ramen</h3>
<p>Shio means salt and this style of ramen tends to be light and transparent. It’s often made by boiling down chicken bones and flavored with seafood based products like dried sardines, dashi stock, and bonito flakes.</p>
</div>
</div>
<!-- ramen card - Tsukemen -->
<div class="ramen-card">
<img src="Tsukemen.jpg" alt="Tsukemen">
<div class="content">
<h3>Tsukemen</h3>
<p>These thick and hearty ramen noodles are cooked, plunged into cool water, and then served alongside a bowl of tare ramen broth. You dip the noodles and let the thick soup coat each strand in tasty moisture.</p>
</div>
</div>
</div>
</body>
</html>
file CSS :
/* body style */
body {
font-family: Verdana, sans-serif;
}
/* gallery style */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
/* style for each ramen info card */
.ramen-card {
width: 325px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border: 2px solid black;
margin: 10px;
}
/* style for card content */
.content {
padding: 10px;
}
/* style for the paragraph text in the ramen info card */
.ramen-card p {
font-size: 17px;
}
/* h3 style */
.ramen-card h3 {
margin-bottom: 10px;
}
/* style for images */
.ramen-card img {
width: 100%;
}
