| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Through Their Eyes - How to Play</title> |
| <link rel="stylesheet" href="../assets/css/index-style.css" /> |
| <link rel="stylesheet" href="../assets/css/how-to-play.css" /> |
| </head> |
| <body> |
| <div class="led-bar"> |
| <div class="light-beam"></div> |
| </div> |
|
|
| <div class="background-elements"> |
| <img src="../assets/img/blood-2.png" alt="" class="blood blood-top-left" /> |
| <img src="../assets/img/help.png" alt="" class="blood blood-top-right" /> |
| <img src="../assets/img/splatter.png" alt="" class="blood splatter" /> |
| <img src="../assets/img/hand.png" alt="" class="blood blood-bottom-right" /> |
| </div> |
|
|
| <main> |
| <div class="content"> |
| <h1>How to Play</h1> |
| <p class="main-description"> |
| Make sure the murderous ghost clown doesn't see you |
| </p> |
|
|
| <div class="objects-container"> |
| <div class="object-type red"> |
| <div class="image-container"> |
| <img |
| src="../assets/img/how_to_play/monster.png" |
| alt="Monster warning" |
| class="tutorial-image" |
| /> |
| </div> |
| <p class="object-title">Don't let him see</p> |
| <p class="sub-text">or catch your girlfriend</p> |
| </div> |
|
|
| <div class="object-type yellow"> |
| <div class="image-container"> |
| <img |
| src="../assets/img/how_to_play/bed.png" |
| alt="Hiding spot example" |
| class="tutorial-image" |
| /> |
| </div> |
| <p class="object-title">Yellow objects</p> |
| <p class="sub-text">are hiding spots</p> |
| </div> |
| </div> |
|
|
| <div class="navigation-buttons"> |
| <a href="how-to-play-2.html" class="back-button">Back</a> |
| <a href="how-to-play-4.html" class="next-button">Next 3/4</a> |
| </div> |
| </div> |
| </main> |
|
|
| </body> |
| </html> |
|
|
