leeseohyun(lee)

Modify layout and design of 'menu.ejs'

...@@ -40,24 +40,22 @@ ...@@ -40,24 +40,22 @@
40 <h2 class="fw-bolder">추천메뉴</h2> 40 <h2 class="fw-bolder">추천메뉴</h2>
41 <p class="lead fw-normal text-muted mb-5">Recommend the menu you can eat at the rest stop</p> 41 <p class="lead fw-normal text-muted mb-5">Recommend the menu you can eat at the rest stop</p>
42 </div> 42 </div>
43 + <center><hr style ="height:2px; width: 55%"></hr></center>
43 <div class="row gx-5 row-cols-1 row-cols-sm-2 row-cols-xl-4 justify-content-center"> 44 <div class="row gx-5 row-cols-1 row-cols-sm-2 row-cols-xl-4 justify-content-center">
44 <div class="col mb-5 mb-5 mb-xl-0"> 45 <div class="col mb-5 mb-5 mb-xl-0">
45 <div class="text-center"> 46 <div class="text-center">
46 - <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
47 <h5 class="fw-bolder"><recommend1></recommend1></h5> 47 <h5 class="fw-bolder"><recommend1></recommend1></h5>
48 <div class="fst-italic text-muted"><rec1></rec1></div> 48 <div class="fst-italic text-muted"><rec1></rec1></div>
49 </div> 49 </div>
50 </div> 50 </div>
51 <div class="col mb-5 mb-5 mb-xl-0"> 51 <div class="col mb-5 mb-5 mb-xl-0">
52 <div class="text-center"> 52 <div class="text-center">
53 - <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
54 <h5 class="fw-bolder"><recommend2></recommend2></h5> 53 <h5 class="fw-bolder"><recommend2></recommend2></h5>
55 <div class="fst-italic text-muted"><rec2></rec2></div> 54 <div class="fst-italic text-muted"><rec2></rec2></div>
56 </div> 55 </div>
57 </div> 56 </div>
58 <div class="col mb-5 mb-5 mb-sm-0"> 57 <div class="col mb-5 mb-5 mb-sm-0">
59 <div class="text-center"> 58 <div class="text-center">
60 - <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
61 <h5 class="fw-bolder"><recommend3></recommend3></h5> 59 <h5 class="fw-bolder"><recommend3></recommend3></h5>
62 <div class="fst-italic text-muted"><rec3></rec3></div> 60 <div class="fst-italic text-muted"><rec3></rec3></div>
63 </div> 61 </div>
...@@ -68,147 +66,93 @@ ...@@ -68,147 +66,93 @@
68 </div> 66 </div>
69 </section> 67 </section>
70 68
71 -
72 - <!--menu1-->
73 - <section class="py-3">
74 - <div class="container px-0.1 my-0.1">
75 - <div class="text-center">
76 - <h4 class="fw-bolder"> <menu1></menu1></h4>
77 - </div>
78 - </section>
79 -
80 - <section class="py-5 bg-light" id="scroll-target">
81 - <div class="container px-2 my-2">
82 - <div class="text-center">
83 - <h2 class="fw-bolder"><foodname1></foodname1></h2>
84 - <p class="lead fw-normal text-muted mb-0"><foodcost1></foodcost1></p>
85 - </div>
86 - </div>
87 - </section>
88 -
89 -
90 - <!--menu2-->
91 <section class="py-3"> 69 <section class="py-3">
92 <div class="container px-0.1 my-0.1"> 70 <div class="container px-0.1 my-0.1">
93 - <div class="text-center">
94 - <h4 class="fw-bolder"> <menu2></menu2></h4>
95 </div> 71 </div>
96 </section> 72 </section>
97 73
98 - <section class="py-5 bg-light" id="scroll-target"> 74 + <section class="py-5 bg-light">
99 <div class="container px-2 my-2"> 75 <div class="container px-2 my-2">
100 <div class="text-center"> 76 <div class="text-center">
101 - <h2 class="fw-bolder"><foodname2></foodname2></h2> 77 + <h2 class="fw-bolder">전체메뉴</h2>
102 - <p class="lead fw-normal text-muted mb-0"><foodcost2></foodcost2></p> 78 + <p class="lead fw-normal text-muted mb-5">the menu you can eat at the rest stop</p>
103 - </div> 79 + </div>
104 - </div> 80 + <center><hr style ="height:2px; width: 55%"></hr></center>
105 - </section> 81 + <div class="row gx-5 row-cols-1 row-cols-sm-2 row-cols-xl-4 justify-content-center">
106 - 82 + <div class="col mb-5 mb-5 mb-xl-0">
107 - 83 + <div class="text-center">
108 - <!--menu3--> 84 + <h5 class="fw-bolder"><foodname1></foodname1></h5>
109 - <section class="py-3"> 85 + <div class="fst-italic text-muted"><foodcost1></foodcost1></div>
110 - <div class="container px-0.1 my-0.1"> 86 + </div>
111 - <div class="text-center"> 87 + </div>
112 - <h4 class="fw-bolder"> <menu3></menu3> </h4> 88 + <div class="col mb-5 mb-5 mb-xl-0">
113 - </div> 89 + <div class="text-center">
114 - </section> 90 + <h5 class="fw-bolder"><foodname2></foodname2></h5>
91 + <div class="fst-italic text-muted"><foodcost2></foodcost2></div>
92 + </div>
93 + </div>
94 + <div class="col mb-5 mb-5 mb-xl-0">
95 + <div class="text-center">
96 + <h5 class="fw-bolder"><foodname3></foodname3></h5>
97 + <div class="fst-italic text-muted"><foodcost3></foodcost3></div>
98 + </div>
99 + </div>
100 + <div class="col mb-5 mb-5 mb-xl-0">
101 + <div class="text-center">
102 + <h5 class="fw-bolder"><foodname4></foodname4></h5>
103 + <div class="fst-italic text-muted"><foodcost4></foodcost4></div>
104 + </div>
105 + </div>
115 106
116 - <section class="py-5 bg-light" id="scroll-target">
117 - <div class="container px-2 my-2">
118 - <div class="text-center">
119 - <h2 class="fw-bolder"><foodname3></foodname3></h2>
120 - <p class="lead fw-normal text-muted mb-0"><foodcost3></foodcost3></p>
121 - </div>
122 - </div>
123 - </section>
124 107
108 + <div class="col mb-5 mb-5 mb-xl-0">
109 + <div class="text-center">
110 + <h5 class="fw-bolder">&emsp;</h5>
111 + </div>
112 + </div>
113 + <div class="col mb-5 mb-5 mb-xl-0">
114 + <div class="text-center">
115 + <h5 class="fw-bolder">&emsp;</h5>
116 + </div>
117 + </div>
118 + <div class="col mb-5 mb-5 mb-xl-0">
119 + <div class="text-center">
120 + <h5 class="fw-bolder">&emsp;</h5>
121 + </div>
122 + </div>
123 + <div class="col mb-5 mb-5 mb-xl-0">
124 + <div class="text-center">
125 + <h5 class="fw-bolder">&emsp;</h5>
126 + </div>
127 + </div>
125 128
126 - <!--menu4-->
127 - <section class="py-3">
128 - <div class="container px-0.1 my-0.1">
129 - <div class="text-center">
130 - <h4 class="fw-bolder"> <menu4></menu4></h4>
131 - </div>
132 - </section>
133 129
134 - <section class="py-5 bg-light" id="scroll-target"> 130 + <div class="col mb-5 mb-5 mb-xl-0">
135 - <div class="container px-2 my-2"> 131 + <div class="text-center">
136 - <div class="text-center"> 132 + <h5 class="fw-bolder"><foodname5></foodname5></h5>
137 - <h2 class="fw-bolder"><foodname4></foodname4></h2> 133 + <div class="fst-italic text-muted"><foodcost5></foodcost5></div>
138 - <p class="lead fw-normal text-muted mb-0"><foodcost4></foodcost4></p> 134 + </div>
139 </div> 135 </div>
140 - </div> 136 + <div class="col mb-5 mb-5 mb-xl-0">
141 - </section> 137 + <div class="text-center">
142 - 138 + <h5 class="fw-bolder"><foodname6></foodname6></h5>
143 - 139 + <div class="fst-italic text-muted"><foodcost6></foodcost6></div>
144 - <!--menu5--> 140 + </div>
145 - <section class="py-3">
146 - <div class="container px-0.1 my-0.1">
147 - <div class="text-center">
148 - <h4 class="fw-bolder"> <menu5></menu5> </h4>
149 - </div>
150 - </section>
151 -
152 - <section class="py-5 bg-light" id="scroll-target">
153 - <div class="container px-2 my-2">
154 - <div class="text-center">
155 - <h2 class="fw-bolder"><foodname5></foodname5></h2>
156 - <p class="lead fw-normal text-muted mb-0"><foodcost5></foodcost5></p>
157 </div> 141 </div>
158 - </div> 142 + <div class="col mb-5 mb-5 mb-xl-0">
159 - </section> 143 + <div class="text-center">
160 - 144 + <h5 class="fw-bolder"><foodname7></foodname7></h5>
161 - 145 + <div class="fst-italic text-muted"><foodcost7></foodcost7></div>
162 - <!--menu6--> 146 + </div>
163 - <section class="py-3">
164 - <div class="container px-0.1 my-0.1">
165 - <div class="text-center">
166 - <h4 class="fw-bolder"> <menu6></menu6> </h4>
167 - </div>
168 - </section>
169 -
170 - <section class="py-5 bg-light" id="scroll-target">
171 - <div class="container px-2 my-2">
172 - <div class="text-center">
173 - <h2 class="fw-bolder"><foodname6></foodname6></h2>
174 - <p class="lead fw-normal text-muted mb-0"><foodcost6></foodcost6></p>
175 </div> 147 </div>
176 - </div> 148 + <div class="col mb-5 mb-5 mb-xl-0">
177 - </section> 149 + <div class="text-center">
178 - 150 + <h5 class="fw-bolder"><foodname8></foodname8></h5>
179 - <!--menu7--> 151 + <div class="fst-italic text-muted"><foodcost8></foodcost8></div>
180 - <section class="py-3"> 152 + </div>
181 - <div class="container px-0.1 my-0.1">
182 - <div class="text-center">
183 - <h4 class="fw-bolder"> <menu7></menu7> </h4>
184 - </div>
185 - </section>
186 -
187 - <section class="py-5 bg-light" id="scroll-target">
188 - <div class="container px-2 my-2">
189 - <div class="text-center">
190 - <h2 class="fw-bolder"><foodname7></foodname7></h2>
191 - <p class="lead fw-normal text-muted mb-0"><foodcost7></foodcost6></p>
192 </div> 153 </div>
193 - </div>
194 - </section>
195 -
196 - <!--menu8-->
197 - <section class="py-3">
198 - <div class="container px-0.1 my-0.1">
199 - <div class="text-center">
200 - <h4 class="fw-bolder"> <menu8></menu8> </h4>
201 - </div>
202 - </section>
203 -
204 - <section class="py-5 bg-light" id="scroll-target">
205 - <div class="container px-2 my-2">
206 - <div class="text-center">
207 - <h2 class="fw-bolder"><foodname8></foodname8></h2>
208 - <p class="lead fw-normal text-muted mb-0"><foodcost8></foodcost8></p>
209 </div> 154 </div>
210 - </div> 155 + </section>
211 - </section>
212 156
213 </main> 157 </main>
214 <!-- Footer--> 158 <!-- Footer-->
......