index.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Step-by-Step Instructions</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. line-height: 1.6;
  11. margin: 20px;
  12. text-align: center;
  13. }
  14. h1 {
  15. color: #333;
  16. }
  17. .step {
  18. margin: 20px 0;
  19. }
  20. .step img {
  21. width: 600px; /* Set all images to 600px width */
  22. height: auto; /* Maintain aspect ratio */
  23. border: 2px solid #ddd;
  24. border-radius: 5px;
  25. }
  26. .step h2 {
  27. margin: 10px 0;
  28. color: #555;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <h1>Follow These Steps</h1>
  34. <p>Please follow the instructions below in the correct order to complete the process.</p>
  35. <!-- Step 1 -->
  36. <div class="step">
  37. <h2>Step 1</h2>
  38. <img src="1.png" alt="Step 1 Image">
  39. <p>Begin by completing the first task shown in the image above.</p>
  40. </div>
  41. <!-- Step 2 -->
  42. <div class="step">
  43. <h2>Step 2</h2>
  44. <img src="2.png" alt="Step 2 Image">
  45. <p>Proceed to the next task as illustrated in the second image.</p>
  46. </div>
  47. <!-- Step 3 -->
  48. <div class="step">
  49. <h2>Step 3</h2>
  50. <img src="3.png" alt="Step 3 Image">
  51. <p>Finally, complete the process by following the third step in the last image.</p>
  52. </div>
  53. </body>
  54. </html>