<!--
narrator: UK English Male

@dd
make input a draggable unit
@end

@customQuiz
[[...]]
<script>
"@0" == btoa( "@input".trim().toLowerCase() )
</script>
@end

@big
<span style="font-size: 2em;">@0</span>
@end

@flashcard
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        @0
      </div>
      <div class="flip-card-back">
        @1
      </div>
    </div>
  </div>
@end

@flashcard2
  <div class="f2">
      <div class="f2f">
        @0
      </div>
      <div class="f2b">
        @1
      </div>
  </div>
@end

@style
.f2 {
  display: flex;
  flex: 1;
  position: relative;
  height: auto;
  padding: 0;
  background-color: #eee;
}
.f2f:active {
  z-index: 0;   
}
.f2f {
  position: relative; //pushes height of f2          
  background-color: green;
  height: auto;
  padding: .5em;
  font-size: 2em;
  top: 0;
  left: 0;
  z-index: 1;
}
.f2b {
  position: absolute; //required to overlat f2f (front card)          
  background-color: #eee;
  height: auto;
  padding: .5em;
  font-size: 2em;
  top: 0;
  left: 0;
}


.lia_header__logo {display: none}

    .flip-card {
      background-color: transparent;
      width: 100%;
      max-width: 300px; /* Set a maximum width for larger screens */
      perspective: 1000px;
      margin: 0 auto; /* Center the card */
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: auto; /* Adjusted to fit content */
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    }

    .flip-card:active .flip-card-inner {
      transform: rotateY(180deg);
    }

    .flip-card-front,
    .flip-card-back {
      position: absolute;
      width: 100%;
      height: auto; /* Adjusted to fit content */
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px; /* Add padding for better visual appearance */
      box-sizing: border-box; /* Include padding in the total width/height */
    }

    .flip-card-front {
      background-color: #bbb;
      color: black;
    }

    .flip-card-back {
      background-color: #2980b9;
      color: white;
      transform: rotateY(180deg);
    }
 
    /* Add a media query for smaller screens */
    @media (max-width: 600px) {
      .flip-card {
        max-width: 100%; /* Full width on smaller screens */
      }
    }
@end
-->

# Room Attendants 2024

__Vocabulary and sentences__

## Table of Contents

### Greet guests and say goodbye	
(saluer les clients et leur dire au revoir)

{{|> UK English Male}} 

@big(Good morning)

<details><summary>Translation</summary>

Bonjour (le matin)

</details>

@flashcard2(Paul,Lily)

Good afternoon 

Bonjour (l'après-midi)

Good evening 

Bonsoir

Hello Bonjour 

(à toutes les heures)

madam / ma'am 

madame (sans nom)

sir monsieur (sans nom)

Mr [mister] Grey

Monsieur Grey (avec nom de famille)

Mr and Mrs [misiz] Brown 

Monsieur et Madame Brown (=un couple marié)

Miss Green [mis] 

Mademoiselle Green (=célibataire)

Ms Black [miz] 

Madame Black (=état civil inconnu)

### Offering help and giving polite answers	
### Comprehension and vocabulary problems	
### In the bedroom	
### In the bathroom	
### Alphabet and numbers 
### In the hotel and hotel floors	
### Giving information about the hotel
### Question words 	
### Time and prepositions of time	
### Housekeeping verbs 	
### Prepositions of place
### Giving directions	
### Giving solutions for the guest's problems


__Miscellaneous__

### Hotel facilities
### Pronouns
### Housekeeping verbs and actions
### Cleaning procedure and equipment
### Adjectives and opposites
### Phonetic symbols

