Correction de Tp 9

1
 2. Code HTML
Voici le code HTML utilisé pour respecter les consignes du TP :
1 <! DOCTYPE html >
2 < html lang = " fr " >
3 < head >

2
4 < meta charset = " UTF -8 " >
5 < meta name = " viewport " content = " width = device - width , initial - scale
=1.0 " >
6 < title > Restaurant Gourmet </ title >
7 < link rel = " stylesheet " href = " style . css " >
8 </ head >
9 < body >
10 <! -- Titre avec animation -- >
11 < header >
12 < h1 id = " restaurant - title " > Restaurant Gourmet </ h1 >
13 </ header >
14
15 <! -- Menu horizontal -- >
16 < nav class = " menu " >
17 <a href = " # " class = " menu - item " > Pizza Margherita </ a >
18 <a href = " # " class = " menu - item " > P t e s Carbonara </ a >
19 <a href = " # " class = " menu - item " > Tiramisu </ a >
20 <a href = " # contact - form " class = " menu - item " > Contact </ a >
21 </ nav >
22
23 <! -- Formulaire de r s e r v a t i o n -- >
24 < section id = " contact - form " >
25 < h2 > FORMULAIRE DE R S E R V A T I O N </ h2 >
26 < form class = " reservation - form " >
27 < div class = " row " >
28 < div class = " column " >
29 < label for = " name " > Nom * </ label >
30 < input type = " text " id = " name " placeholder = " Nom "
required >
31 </ div >
32 < div class = " column " >
33 < label for = " phone " > T l p h o n e * </ label >
34 < input type = " tel " id = " phone " placeholder = "
T l p h o n e " required >
35 </ div >
36 </ div >
37 < div class = " row " >
38 < div class = " column - full " >
39 < label for = " email " >E - mail * </ label >
40 < input type = " email " id = " email " placeholder = "E - mail "
required >
41 </ div >
42 </ div >
43 < div class = " row " >
44 < div class = " column " >
45 < label for = " date " > Date * </ label >
46 < input type = " date " id = " date " required >
47 </ div >
48 < div class = " column " >
49 < label for = " time " > Heure * </ label >
50 < input type = " time " id = " time " required >
51 </ div >
52 < div class = " column " >
53 < label for = " people " > Nombre de personnes * </ label >
54 < input type = " number " id = " people " placeholder = "
Nombre de personnes " required >
55 </ div >
56 </ div >

3
57 < div class = " row " >
58 < div class = " column - full " >
59 < label > Espace * </ label >
60 < div class = " radio - group " >
61 < input type = " radio " id = " smoking " name = " space "
value = " Fumeur " required >
62 < label for = " smoking " > Fumeur </ label >
63 < input type = " radio " id = " non - smoking " name = "
space " value = " Non Fumeur " >
64 < label for = " non - smoking " > Non Fumeur </ label >
65 < input type = " radio " id = " no - opinion " name = " space
" value = " Sans Avis " >
66 < label for = " no - opinion " > Sans Avis </ label >
67 </ div >
68 </ div >
69 </ div >
70 < div class = " row " >
71 < div class = " column - full " >
72 < label for = " message " > Message </ label >
73 < textarea id = " message " placeholder = " Message " > </
textarea >
74 </ div >
75 </ div >
76 < div class = " row " >
77 < button type = " submit " > R S E R V E R </ button >
78 </ div >
79 </ form >
80 </ section >
81 </ body >
82 </ html >

Listing 1: Code HTML

3. Code CSS
Voici le code CSS utilisé pour styliser la page web :
1 /* Style g n r a l */
2 body {
3 font - family : Arial , sans - serif ;
4 margin : 0;
5 padding : 0;
6 background - color : # f8f8f8 ;
7 color : #333;
8 text - align : center ;
9 }
10
11 /* Titre avec animation */
12 # restaurant - title {
13 font - size : 2.5 rem ;
14 color : # A4A393 ;
15 margin : 20 px 0;
16 animation : fadeIn 1.5 s ease - in - out ;
17 }
18
19 @keyframes fadeIn {
20 0% {

4
21 opacity : 0;
22 transform : translateY ( -20 px ) ;
23 }
24 100% {
25 opacity : 1;
26 transform : translateY (0) ;
27 }
28 }
29
30 /* Menu horizontal */
31 . menu {
32 display : flex ;
33 justify - content : space - around ;
34 background - color : white ;
35 padding : 15 px ;
36 margin : 20 px auto ;
37 max - width : 800 px ;
38 border - radius : 10 px ;
39 box - shadow : 0 4 px 6 px rgba (0 , 0 , 0 , 0.1) ;
40 }
41
42 . menu - item {
43 padding : 15 px 30 px ;
44 background - color : #8 EBF42 ;
45 color : white ;
46 text - align : center ;
47 text - decoration : none ;
48 border - radius : 5 px ;
49 font - size : 1 rem ;
50 font - weight : bold ;
51 transition : background - color 0.3 s ease - in - out ;
52 box - shadow : 0 2 px 4 px rgba (0 , 0 , 0 , 0.1) ;
53 }
54
55 . menu - item : hover {
56 background - color : #6 DAF3A ;
57 box - shadow : 0 4 px 8 px rgba (0 , 0 , 0 , 0.2) ;
58 }
59
60 /* Formulaire de r s e r v a t i o n */
61 # contact - form {
62 max - width : 600 px ;
63 margin : 40 px auto ;
64 padding : 20 px ;
65 background : # ffffff ;
66 border - radius : 10 px ;
67 box - shadow : 0 4 px 6 px rgba (0 , 0 , 0 , 0.1) ;
68 text - align : left ;
69 }
70
71 # contact - form h2 {
72 text - align : center ;
73 margin - bottom : 20 px ;
74 font - size : 1.5 rem ;
75 color : # A4A393 ;
76 font - weight : bold ;
77 }
78

5
79 . row {
80 display : flex ;
81 flex - wrap : wrap ;
82 gap : 15 px ;
83 margin - bottom : 15 px ;
84 }
85

86 . column {
87 flex : 1;
88 min - width : 120 px ;
89 }
90
91 . column - full {
92 flex : 1 1 100%;
93 }
94
95 . reservation - form label {
96 display : block ;
97 font - weight : bold ;
98 margin - bottom : 5 px ;
99 font - size : 0.9 rem ;
100 color : #666;
101 }
102
103 . reservation - form input ,
104 . reservation - form textarea {
105 width : 100%;
106 padding : 10 px ;
107 border : 1 px solid # ddd ;
108 border - radius : 5 px ;
109 font - size : 0.9 rem ;
110 box - sizing : border - box ;
111 }
112
113 . reservation - form textarea {
114 height : 100 px ;
115 resize : none ;
116 }
117
118 . radio - group {
119 display : flex ;
120 align - items : center ;
121 gap : 10 px ;
122 }
123
124 . radio - group label {
125 font - weight : normal ;
126 }
127

128 . reservation - form button {

129 background : # A4A393 ;
130 color : white ;
131 font - size : 1 rem ;
132 font - weight : bold ;
133 padding : 10 px 20 px ;
134 border : none ;
135 border - radius : 5 px ;
136 margin : 0 auto ;

6
137 display : block ;
138 cursor : pointer ;
139 transition : background - color 0.3 s ease - in - out ;
140 }
141
142 . reservation - form button : hover {
143 background : #8 F8C83 ;
144 }

Listing 2: Code CSS