HTML Picture Instruction Book
Google an instructive image, have chatgpt write the main points, poof. Instant instruction book.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 1px solid black;
margin-bottom: 20px;
padding: 10px;
}
.container img {
width: 400px;
height: 400px;
margin-right: 20px;
}
.container .description {
flex-grow: 1;
}
@media print {
.container {
page-break-inside: avoid;
}
}
</style>
</head>
<body>
<div class="container">
<img src="mountain.png" alt="mountain pose">
<div class="description">
<h3>Mountain Pose (Tadasana)</h3>
<ul>
<li>Feet hip-width apart, toes spread.</li>
<li>Big toes touching, heels slightly apart.</li>
<li>Ground down evenly through the feet.</li>
<li>Kneecaps lifted, thighs engaged.</li>
<li>Tailbone tucked in slightly, elongating the spine.</li>
<li>Core engaged, belly drawing toward the spine.</li>
<li>Shoulders relaxed back and down, away from the ears.</li>
<li>Arms slightly engaged, fingers spread, palms facing forward.</li>
<li>Neck neutral, chin parallel to the floor.</li>
<li>Gaze straight ahead.</li>
</ul>
</div>
</div>
<div class="container">
<img src="eagle.png" alt="eagle pose">
<div class="description">
<h3>Eagle Pose (Garudasana)</h3>
<ul>
<li>Begin standing in Mountain Pose.</li>
<li>Bend your knees slightly, lift your left foot up and balance on your right foot.</li>
<li>Cross your left thigh over the right. Hook the top of your left foot behind your right calf if possible.</li>
<li>Stretch your arms straight forward, parallel to the floor.</li>
<li>Cross your arms in front of your torso, right arm over the left, then bend your elbows.</li>
<li>Press the right hand to the right and the left hand to the left, so that the palms are now facing each other.</li>
<li>Try to raise your elbows up and stretch the fingers towards the ceiling.</li>
<li>Gaze forward, keeping the neck neutral.</li>
<li>Hold the pose for few breaths and then unwind.</li>
<li>Repeat for the opposite side.</li>
</ul>
</div>
</div>