label$>$block: reservation, element: title

block: reservation, element: form

Mix this element with the form block. Define the margins in the

reservation $\_\_$ form class. All other styles should be given to the

form class.

block: form $,$ element: fieldset.

block: form $,$ element: $1$ abel.

block: form $,$ element: input. Make a border$-$radius of $4px.$

block: form $,$ element: button. Use the appropriate HTML tag for the button.

Make a border$-$radius of $4px.$ Create a hover state, so that the opacity

changes from $100\%$ to $70\%.$ Add a smooth transition for the opacity property.

block: form $,$ element: checkbox. Make a border$-$radius of $2px.$ Ensure

that the text is on the same level as the checkbox.

You can keep the standard checked styles for it$.$ But if you want to challenge

yourself, you can style it as follows: set the background color to #$2$F$80$ED$,$ and a

background image of check.svg$.$ If you keep the default styles, make sure to

remove check.svg from the images directory.

Pro tip

Remember that according to BEM, we can't modify the

"external geometry" of a block. This means that if we want to

adjust a BEM block's margins, or its position on the page, we

have to $"$ mix $"$ it with a BEM element. Refer back to our lesson

on mixes in Sprint $1$ for details.

$4$ Pro tip

To align the checkbox with its label, wrap them both inside

the corresponding

Your email$*$

label$>$

Date & time$*$

label$>$

Your email$*$

$$

Book a Table

$$ label

for$="i-$agree$-$with$-$terms$-of-$use"

class$="for{m}_{{?}_{?}}$label $for{m}_{{?}_{?}}labe{l}_{{?}_{?}}$checkbox"

Book a Table

$$ label

for$="i-$agree$-$with$-$terms$-of-$use"

class$="for{m}_{{?}_{?}}$label $for{m}_{{?}_{?}}labe{l}_{{?}_{?}}$checkbox" label$>$

Your email$*$

label$>$

Date & time$*$

label$>$

Your email$*$

$$

Book a Table

$$ label

for$="i-$agree$-$with$-$terms$-of-$use"

class$="for{m}_{{?}_{?}}$label $for{m}_{{?}_{?}}labe{l}_{{?}_{?}}$checkbox"

Book a Table

$$ label

for$="i-$agree$-$with$-$terms$-of-$use"

class$="for{m}_{{?}_{?}}$label $for{m}_{{?}_{?}}labe{l}_{{?}_{?}}$checkbox"

File:

$,$ line $93.$ The

class does not correspond to BEM

guidelines. BEM elements must always be contained inside the corresponding BEM block. For

instance, an element with the card$\_-\_$footer class must be contained inside a block with the

card class.

File: index.html$,$ line $95.$ The reservation$\_-$form class does not correspond to BEM

guidelines. BEM elements must always be contained inside the corresponding BEM block. For

instance, an element with the

class must be contained inside a block with the

card class.

File: index.html$,$ line $134.$ The form$\_-$label$\_\_$checkbox class is not named appropriately

according to BEM Guidelines. To refresh your memory, refer to this cheat sheet.