CCCDA/education.html at master · emmahuangg/CCCDA · 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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html>
<head>
<title>Canada-China Cultural Development Association: Education</title>
<link rel="stylesheet" href="CSS/education.css">
<script type="text/javascript" src="Script/jquery-3.5.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
  <div id="windowSizeAlert">
    <center><h5>Please resize your window for a better viewing experience</h5>
      <h5>&#9660;</h5>
    <button id="button1" onclick="newWindow1()">Click here to open up a window that is more suitable for this website.</button>
    <button id="button2" onclick="newWindow2()">Click here to open up a window that is more suitable for this website.</button></center>
  </div>
  <script>
    function newWindow1() {
      myWindow = window.open(window.location.href, "", "width=" + (window.screen.height*1.8) + ", height=" + window.screen.height);
      close();
    }
    function newWindow2() {
      myWindow = window.open(window.location.href, "", "width=" + window.screen.width + ", height=" + (window.screen.width/1.8));
      close();
    }
    var w = window.innerWidth;
    var h = window.innerHeight;
    if ((w/h) > 2.73) {
      $("#windowSizeAlert").css("display","block");
      $("#button1").css("display","block");
    }
    if ((w/h) < 1.56) {
      $("#windowSizeAlert").css("display","block");
      $("#button2").css("display","block");
    }
    $(window).on('resize', function(){
      var w = window.innerWidth;
      var h = window.innerHeight;
      if ((w/h) > 2.73) {
        $("#windowSizeAlert").css("display","block");
        $("#button1").css("display","block");
        $("#button2").css("display","none");
      }
      if ((w/h) < 1.56) {
        $("#windowSizeAlert").css("display","block");
        $("#button2").css("display","block");
        $("#button1").css("display","none");
      }
      if ((w/h) >1.56 && (w/h)<2.73) {
        $("#windowSizeAlert").css("display","none");
        $("#button1").css("display","none");
        $("#button2").css("display","none");
      }
    });
  </script>
  <div id="header">
    <a href="index.html"><div id="headerCompanyLogo">
      <img id="logoRed" src="Images/logoRed.png">
      <img id="logoWhite" src="Images/logoWhite.png">
    </div></a>
    <div id="headerCompanyName">
      <span>C</span>
      <span>C</span>
      <span>C</span>
      <span>D</span>
      <span>A</span>
    </div>
    <a href="index.html"><div id="headerHome">Home</div></a>
    <div id="headerEducationdropdown">
        <a href="education.html"><div id="headerEducation">Education</div></a>
        <div id="headerEducationContent">
          <div><a href="educationSymphony.html">Symphony Orchestra</a></div>
          <div><a href="educationPiano.html">Piano & Teaching</a></div>
          <div><a href="educationChoir.html">CICF & Choir</a></div>
          <div><a href="educationArts.html">Dance, Art & Drama</a></div>
        </div>
    </div>
    <div id="headerEventsdropdown">
        <a href="events.html"><div id="headerEvents">Events</div></a>
        <div id="headerEventsContent">
          <div><a href="events2020.html">2020 Events</a></div>
          <div><a href="pastevents.html">Past Events</a></div>
        </div>
    </div>
    <div id="headerAboutdropdown">
        <a href="about.html"><div id="headerAbout">About</div></a>
        <div id="headerAboutContent">
          <div><a href="about.html#whatWeDo1">What We Do</a></div>
          <div><a href="about.html#history1">History</a></div>
          <div><a href="about.html#board1">Board & Staff</a></div>
          <div><a href="about.html#reviews1">Reviews</a></div>
        </div>
    </div>
    <script>
      $("#sidebarcontainer").css("height",document.height);
      $("#headerEventsdropdown").mouseenter(function(){
        $("#headerEventsContent").show(200);
      })
      $("#headerEventsdropdown").mouseleave(function(){
        $("#headerEventsContent").hide(200);
      })
      $("#headerAboutdropdown").mouseenter(function(){
        $("#headerAboutContent").show(200);
      })
      $("#headerAboutdropdown").mouseleave(function(){
        $("#headerAboutContent").hide(200);
      })
      $("#headerEducationdropdown").mouseenter(function(){
        $("#headerEducationContent").show(200);
      })
      $("#headerEducationdropdown").mouseleave(function(){
        $("#headerEducationContent").hide(200);
      })
    </script>
    <a href="contact.html"><div id="headerContactUs">Contact Us</div></a>
  </div>
  <div id="educationIntro">
    <img src="Images/boyPlayingViolin.jpeg">
    <div id="title">
      <div id="educationIntroTitle">Education</div>
    </div>
    <div id="educationIntroSubtitle">Explore Our Learning Programs</div>
    <script>
      $(document).ready(function(){
        setTimeout(function() {
          $("#educationIntroTitle").animate({
            opacity: "1"
          });
        }, 400);
        setTimeout(function() {
          $("#educationIntroSubtitle, #educationIntroClickhere").animate({
            opacity: "1"
          });
        }, 800);
      });
    </script>
  </div>
  <div id="education1">
    <img src="Images/masterclassCollageoverlay.png">
    <h4>MASTER CLASSES</h4>
  </div>
  <div id="education2">
    <h3>ABOUT OUR </h3><h5>Master Classes</h5>
    <p>Canada is based on immigration culture and multiculturalism, gathering Western Europe, Eastern Europe, South America, Africa and mainland top musicians, artists, creators and music art educators.</p>
    <center><div id="education21"><img src="Images/ottawa.jpg"><h4>OTTAWA</h4><p>Ottawa, as the capital of Canada, is also the national art center.</p></div>
    <div id="education22"><img src="Images/toronto.jpg"><h4>TORONTO</h4><p>Toronto, the third largest city in North America, has an impressive pool of talent and is, together with Ottawa, the largest collection of higher education institutions in Canada.</p></div>
    <div id="education23"><img src="Images/montreal.jpg"><h4>MONTREAL</h4><p>As the oldest city in North America, Montreal is known as the world-famous "North American Art Capital". Music, dance, and art have become the soul of the city, cradling well-known music, art colleges and training bases and exporting top music talents and artistic talents to the world every year.</p></div>
    </center>
  </div>
  <div id="education3">
    <center><h4>[ Highlights ]</h4></center>
      <h3 id="education31">01 ONE-ON-ONE GUIDANCE</h3>
      <h3 id="education32">02 SPECIAL PERFORMANCES</h3>
      <h3 id="education33">03 IMMERSIVE EXPERIENCE</h3>
      <h3 id="education34">04 EXPANDING GLOBAL VIEW</h3>
  </div>
  <div id="education4">
    <a href="educationSymphony.html"><div>
      <img src="Images/zhejiangYouthSymphonyParliament.jpeg">
      <h3>Symphony Orchestra Master Class</h3>
      <p>CCCDA Master Class for symphony orchestras</p>
      <h4>learn more</h4>
    </div></a>
    <a href="educationPiano.html"><div>
      <img src="Images/2020NewYearsConcertPianistOrchestra.jpg">
      <h3>Piano Master Camp and Teacher Training</h3>
      <p>CCCDA Master Class for pianists and teachers</p>
      <h4>learn more</h4>
    </div></a>
    <a href="educationChoir.html"><div>
      <img src="Images/choirMasterClass.jpg">
      <h3>Choral Competition and Master Class</h3>
      <p>CCCDA Master Class for choirs</p>
      <h4>learn more</h4>
    </div></a>
    <a href="educationArts.html"><div>
      <img src="Images/chineseNewYearCarnival.jpg">
      <h3>Dance, Art & Drama Master Class</h3>
      <p>CCCDA Master Class for various artists</p>
      <h4>learn more</h4>
    </div></a>
  </div>
  <div id="education5">
    <h3>Canadian Masters Visit China</h3>
    <p>CCCDA has created a talent pool of Canadian musicians and artists, including professors, performers, dancers and musicians of chorus, group, symphony conductor, instrumental music, piano, dance, musical theater, etc. We look forward to cooperating with China's corresponding government and private institutions, art and music colleges, etc. to open master camps and summer camps.</p>
    <p>The association has cooperated with Canadian art groups, such as a well-known
      Canadian male vocal group "the Cadence" and a percussion-piano duo "SHHH!", organizing
      their tours and master classes in China, acting as agents for their attendance and
      performance in various art and music festivals, speeches, forums and exchanges at high-
      end cultural and artistic conferences in China.</p>
  </div>
  <div id="education6">
    <div class="mastersdiv">
      <h5>Cadence Vocal Ensemble</h5>
      <p>Cadence is a Canadian a cappella vocal quartet based in Toronto, Ontario. Winners of the 2006 Juno Award for Best Vocal Jazz Album of the Year for their album "Twenty for One", they have produced five albums and a number of singles.
        <br><br>Current members include Ross Lynde, tenor, Kurt Sampson, bass and vocal percussion, David Lane, baritone and vocal percussion, and Lucas Marchand, tenor.</p>
    </div>
    <div class="mastersdiv">
      <h5>SHHH!! Ensemble</h5>
      <p>SHHH!!… a powerful utterance designed to draw attention forward… creating space and awareness… opening ears to something important.
      <br><br>
      SHHH!!… une déclaration puissante qui attire l’attention… en créant de l’espace et en aiguisant la conscience… ouvrant les oreilles vers quelque chose d’important.
      <br><br>
      SHHH!! Ensemble is a piano/percussion duo dedicated to the creation and dissemination of new and rarefied sounds.
      <br><br>
      Edana Higham, piano; Zac Pulak, percussion</p>
    </div>
  </div>
  <div id="footer">
    <hr>
    <div id="footerLogoDiv">
      <a href="index.html">
        <img src="Images/CCCDAlogo.png">
      </a>
      <div id="mc_embed_signup">
        <form action="https://ocdsb.us2.list-manage.com/subscribe/post?u=3c41640258b3b732f1452a14e&amp;id=53252c0114" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
          <div id="mc_embed_signup_scroll">
            <label for="mce-EMAIL">Subscribe</label>
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
            <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3c41640258b3b732f1452a14e_53252c0114" tabindex="-1" value=""></div>
         </form>
      </div>
    </div>
      <!--<p>Culture in Art.</p>-->
    <div id="footer2">
      <div class="footerDiv">
        <h3>Explore</h3>
        <p><a href="index.html">Home</a></p>&nbsp;&#8226;
        <p><a href="events.html">Events</a></p>&nbsp;&#8226;
        <p><a href="education.html">Education</a></p>&nbsp;&#8226;
        <p><a href="about.html">About</a></p>&nbsp;&#8226;
        <p><a href="contact.html">Contact Us</a></p>
      </div>
      <div class="footerDiv">
        <h3>Follow</h3>
        <p><a href="https://twitter.com/cccda_ca?lang=en">Twitter</a></p>&nbsp;&#8226;
        <p><a href="https://www.facebook.com/Canada-China-Cultural-Development-Association-364911953578051/about/">Facebook</a></p>&nbsp;&#8226;
        <p><a href="https://www.youtube.com/channel/UCcUF1BexqaJodTvNv5hy8BQ/featured">YouTube</a></p>&nbsp;&#8226;
        <p><a href="https://ca.linkedin.com/in/rudy-gao-75435455?trk=public_profile_browsemap_profile-result-card_result-card_full-click">LinkedIn</a></p>
      </div>
    </div>
    <div onclick="backToTop()" id="backToTopButton">
      <img id="backToTopOutline" src="Images/backToTopOutline.png">
      <img id="backToTopFill" src="Images/backToTopFill.png">
    </div>
    <script>
    function backToTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
    </script>
  </div>
  </body>
</html>