World-Chef-Capstone-project/index.html at main · Rachelwebdev/World-Chef-Capstone-project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="mobile.css"
    />
    <link
      rel="stylesheet"
      href="desktop.css"
    />
    <title>World Chef Congress Capstone project</title>
  </head>
  <body>
    <!-- HEADER -->
    <header>
      <!-- MOBILE MENU -->
      <div class="hamburger">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
      <div class="desktop-nav-bar">
        <nav class="logo-div">
          <a href="index.html"
            ><img
              class="logo-img"
              src="./images/icons/WC-logo-icon.png"
              alt="World chef logo"
          /></a>

          <p class="logo-title">
            WC Global <br />
            Competition
          </p>
        </nav>
        <!-- NAVBAR -->
        <nav class="navbar">
          <ul class="nav-menu">
            <li class="nav-item"><a href="about.html">About</a></li>
            <li class="nav-item"><a href="#program">Program</a></li>
            <li class="nav-item"><a href="#join">Join</a></li>
            <li class="nav-item"><a href="#sponsor">Sponsor</a></li>
            <li class="nav-item"><a href="#news">News</a></li>
            <li class="nav-item">
              <a
                class="nav-last-child"
                href="index.html"
                >WC Competition</a
              >
            </li>
          </ul>
        </nav>
      </div>
      <!-- Mobile Hamburger Menu display -->
      <div class="hamburger-menu-container menu-container navbar">
        <ul class="nav-menu">
          <li class="nav-item"><a href="about.html">About</a></li>
          <li class="nav-item"><a href="#program">Program</a></li>
          <li class="nav-item"><a href="#join">Join</a></li>
          <li class="nav-item"><a href="#sponsor">Sponsor</a></li>
          <li class="nav-item"><a href="#news">News</a></li>
          <li class="nav-item">
            <a
              class="nav-last-child"
              href="index.html"
              >WC Competition</a
            >
          </li>
        </ul>
      </div>
    </header>
    <main class="body-container">
      <!-- HERO SECTION -->
      <section id="competition">
        <div id="hero-section">
          <p class="pre-heading">"Hello! Cooking world"</p>
          <h1 class="main-heading">WORLD CHEFS GLOBAL COMPETITION 2023</h1>
          <p class="main-description">
            The annual World chefs competition, offers an abundance of knowledge
            on cooking, management concepts and operating practices. Network and
            expand your professional bonds with the most influential culinary
            body worldwide.
          </p>
          <h2 class="event-date">2023.10.04(WED) ~ 6(FRI)</h2>
          <p class="location">@Dubai World Trade Center</p>
        </div>
      </section>
      <!-- PROGRAM SECTION -->
      <section id="program">
        <h3 class="program-heading">Main Program</h3>
        <div class="orange-borderline"></div>
        <div class="programs-container">
          <div class="lecture-program single-program">
            <img
              class="program-icon"
              src="./images/icons/lecture-icon.png"
              alt="lecture icon"
            />
            <h4 class="lecture-heading single-program-heading">Lecture</h4>
            <p class="lecture-description program-description">
              Listen to the speakers from various countries about the messages
              of the continuing development of their culinary skills and
              professional development.
            </p>
          </div>
          <div class="exhibition-program single-program">
            <img
              class="program-icon"
              src="./images/icons/exhibition icon.png"
              alt="cooking exhbition cooking icon"
            />
            <h4 class="exhibition-heading single-program-heading">
              WC Exhibition
            </h4>
            <p class="exhibition-description program-description">
              Appreciate and enjoy the view of various creations and cuisine
              from different parts of the world.
            </p>
          </div>
          <div class="forum-program single-program">
            <img
              class="program-icon"
              src="./images/icons/forum-icon.png"
              alt="forum icon"
            />
            <h4 class="forum-heading single-program-heading">Forum</h4>
            <p class="forum-description program-description">
              Have the time to share your thoughts and opinions with experts for
              each topic. Interaction section between top chefs and aspiring
              young chefs.
            </p>
          </div>
          <div class="workshop-program single-program">
            <img
              class="program-icon"
              src="./images/icons/workshop-icon.png"
              alt="workshop icon"
            />
            <h4 class="workshop-heading single-program-heading">Workshop</h4>
            <p class="workshop-description program-description">
              Participate in Global Chefs Challenge by competing with selected
              guest to prepare specific meals and stand the chance to win a
              grand prize.
            </p>
          </div>
          <div class="ignite-program single-program">
            <img
              class="program-icon"
              src="./images/icons/ignite-icon.jpg"
              alt="network icon"
            />
            <h4 class="ignite-heading single-program-heading">WC Ignite</h4>
            <p class="ignite-description program-description">
              Get opportunities to network with WC affiliates around the world,
              also after the congress.
            </p>
          </div>

          <button
            class="join-btn"
            type="submit"
          >
            Join WC Global Competition 2023
          </button>
        </div>
        <a
          href="#"
          class="btn-program"
          >SEE THE WHOLE PROGRAM</a
        >
      </section>
      <!-- JUDGES SECTION -->
      <section id="judges">
        <h3 class="judges-heading">Featured Judges</h3>
        <div class="orange-borderline"></div>
        <div class="judges-container"></div>
      </section>
      <!-- PARTNERS SECTION -->
      <section id="partner">
        <h3 class="partner-heading">Partner</h3>
        <div class="orange-borderline"></div>
        <div class="partners-logos-container">
          <img
            src="./images/sponsors/demkota-logo.png"
            alt="Demkota logo"
            class="partners-logo"
          />
          <img
            src="./images/sponsors/porland-logo.webp"
            alt="Porland logo"
            class="partners-logo"
          />
          <img
            src="./images/sponsors/rational-logo.png"
            alt="Rational logo"
            class="partners-logo"
          />
          <img
            src="./images/sponsors/smithfield-culinary-logo.webp"
            alt="Smithfield culinary logo"
            class="partners-logo"
          />
          <img
            src="./images/sponsors/triar-seafood-logo.webp"
            alt="Triar seafood logo"
            class="partners-logo"
          />
        </div>
      </section>
      <!-- Footer Section  -->
      <footer id="footer">
        <div class="left-container">
          <img
            src="./images/icons/WC-logo-icon.png"
            alt="world chef logo"
            class="logo-img"
          />
          <h3 class="footer-heading">World Chef Competiton</h3>
        </div>
        <p class="footer-description">
          2023 World Chef Competition, UAE. <br />
          Some Rights Reserved.
        </p>
      </footer>
    </main>
    <script src="script.js"></script>
  </body>
</html>