Advertisement
Guest User

Untitled

a guest
Jan 17th, 2018
170
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.96 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="en" class="no-js">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6.  
  7. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
  8.  
  9. <link href="css/bootstrap.css" rel="stylesheet">
  10. <link href="css/styles.css" rel="stylesheet">
  11. <link href="css/reset.css" rel="stylesheet"> <!-- CSS reset -->
  12. <link href="css/style.css" rel="stylesheet"> <!-- Resource style -->
  13.  
  14. <title>The Show Must Go On</title>
  15. </head>
  16. <!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
  17.  
  18.  
  19.  
  20. <body data-hijacking="on" data-animation="scaleDown">
  21.  
  22.  
  23.  
  24. <section class="cd-section visible">
  25. <div class="container-fluid">
  26.  
  27.  
  28. <div id="one" class="parallax-container">
  29. <img class="image-parallax img-parallax" src="images/cordy-page.JPG">
  30. <div id="messageBox">
  31. <div>
  32. <div>
  33. <div id="img-bubble">
  34. <h1>Cordelia Barber</h1>
  35. <i>"The person who I am when I stand on stage isn't Cordelia. She's this strong, independent, powerful person who can do these incredible things."</i>
  36. </div>
  37.  
  38. </div>
  39.  
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </section>
  45.  
  46. <section class="cd-section">
  47. <div class="section">
  48. <div class="card border-0 bg-dark text-white">
  49. <img class="card-img" src="images/cordy1.JPG" alt="Card image">
  50. <div class="card-img-overlay sectionpadding bg-transparent">
  51. <h1 class="card-title headerpadding h1">Introduction to Performance</h1>
  52. <div class="col-5 p-2 bg-black-half rounded">
  53. <p class="card-text fontsize">Cordelia, better known as Cordy, is a director and performer of Steamship Circus. As well as performing and designing costumes, she also works as a nursery teacher. These two jobs see her travelling between London and Bournemouth on a regular basis.</p>
  54. <p class="card-text fontsize">"My first ever performance was probably at the age of three, because I've always been a performer. I would put on princess dresses and perform for my family and relatives. What inspired me to get into circus performance was when my Dad took me to a local camp when I was about eight or nine years old, and there was a circus entertainer. His name was Jonathan the Jester, and I remember looking at him and thinking, 'Wow! This guy is absolutely incredible. I wish I could do that.' I had the pleasure of actually working with him, and I was so awestruck that I was a proper little fangirl going, 'Oh Jonathan it's you! You taught me my first circus trick! Do you remember me?'"</p>
  55. <p class="card-text fontsize">"My interest in costume pretty much came from the fact that I've been sewing since I was old enough to hold a needle. It's a family tradition of sorts that all the women in our family learn, so me and my Mum would share different projects. I became fascinated by sparkly fabrics and I love to have a finished piece, which I'm so proud of most of the time."</p>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </section>
  61.  
  62. <section class="cd-section container-fluid">
  63. <div class="video-container">
  64. <video poster="images/cordy-thumbnail-1.jpg" class="" loop>
  65. <source src="videos/cordy-interview-1.mp4">
  66. </video>
  67. </div>
  68. </section>
  69.  
  70. <section class="cd-section">
  71. <div class="section">
  72. <div class="card border-0 bg-dark text-white">
  73. <img class="card-img" src="images/cordy2.JPG" alt="Card image">
  74. <div class="card-img-overlay sectionpadding bg-transparent">
  75. <h1 class="card-title headerpadding h1">Life as a Performer</h1>
  76. <div class="col-5 p-2 bg-black-half rounded">
  77. <p class="card-text fontsize">"So most performances, I start with the makeup. I could sit for hours and paint my face to make it as extravagant as possible, and then Pearl and I will collaborate on what we're going to do for the crew. It's great when we all have matching costumes, because it pulls us all together when we're performing on stage. Sometimes we'll perform in front of anywhere from a couple of people at a corporate event, to thousands of people at a festival. Then we'll have a debrief, where we'll give each other feedback and assess each other. I find self-assessment quite hard, so that's always nice because then you can develop yourself and apply that feedback to the next performance."</p>
  78. <p class="card-text fontsize">"My favourite thing is probably the thought that I'm inspiring people. If someone walks past with their child and they see me performing, that might make their day and put a smile on their face. That's a big reward for me."</p>
  79. <p class="card-text fontsize">"The other thing is that, off the stage, I'm quite an introvert. But when I'm on stage, I take aspects of someone elses performance and bring it into my own. For example, if there's something that Jasmin or Pearl do in a performance that I really love, I might use them as inspiration for my next performance. It's nice to have this patchwork in my performance that reflects the people who are really special to me."</p>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. </section>
  85.  
  86. <section class="cd-section container-fluid">
  87. <div class="video-container">
  88. <video poster="images/cordy-thumbnail-2.jpg" class="" loop>
  89. <source src="videos/cordy-interview-2.mp4">
  90. </video>
  91. </div>
  92. </section>
  93.  
  94. <section class="cd-section">
  95. <div class="section">
  96. <div class="card border-0 bg-dark text-white">
  97. <img class="card-img" src="images/cordy3.JPG" alt="Card image">
  98. <div class="card-img-overlay sectionpadding bg-transparent">
  99. <h1 class="card-title headerpadding h1">Challenges</h1>
  100. <div class="col-5 p-2 bg-black-half rounded">
  101. <p class="card-text fontsize">"About two years ago, when I first started performing on stage as a circus entertainer, I started to suffer from severe depression and anxiety. When I was going through this, I met the circus troupe who I am with today, and they really encouraged me. I can become quite closed off, or paranoid about what people think of me, so performance helps me set that aside and create these incredible things and inspire people."</p>
  102. <p class="card-text fontsize">"The public opinion can be quite varied at the moment. I always think it's nice to see performers: it adds culture to the town, it makes things more interesting and it can just make someone's day. But sometimes when you're performing, you have to wear certain clothing for fire or hooping performance, and you can get judged for that, especially if you're a woman. Or the opposite happens, and lots of people just walk past. I remember going down into the London underground once, and I heard this incredible music playing. I turned the corner to see this proper five-piece band with the most amazing music, and all of a sudden, I realised I'd lost everyone who I was with, because they just continued walking."</p>
  103. <p class="card-text fontsize">"The biggest challenge I've faced however, is juggling my performance life with my personal life. I'm recently married, and now I live up in London whereas a lot of my performance work happens in Bournemouth. Sometimes it feels like I'm living two lives: when I'm a nursery teacher, I change completely- even in the way that I dress. It's hard having to keep leaving my husband to come down to Bournemouth, but performance is something I really enjoy doing. He knows that, and he'd never make me give it up, but it can still be quite hard."</p>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </section>
  109.  
  110. <section class="cd-section container-fluid">
  111. <div class="video-container">
  112. <video poster="images/cordy-thumbnail-3.jpg" class="" loop>
  113. <source src="videos/cordy-interview-3.mp4">
  114. </video>
  115. </div>
  116. </section>
  117.  
  118. <section class="cd-section">
  119. <div class="section">
  120. <div class="card border-0 bg-dark text-white">
  121. <img class="card-img" src="images/cordy4.JPG" alt="Card image">
  122. <div class="card-img-overlay sectionpadding bg-transparent">
  123. <h1 class="card-title headerpadding h1">Steamship Circus and the Future</h1>
  124. <div class="col-5 p-2 bg-black-half rounded">
  125. <p class="card-text fontsize">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
  126.  
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </section>
  132.  
  133. <section class="cd-section container-fluid">
  134. <div class="video-container">
  135. <video poster="images/cordy-thumbnail-4.jpg" class="" loop>
  136. <source src="videos/cordy-interview-4.mp4">
  137. </video>
  138. </div>
  139. </section>
  140.  
  141. <section class="cd-section">
  142. <div class="sectionpadding background">
  143. <div class="section backgroundcolour">
  144. <p class="fontcolour headerpadding h1">The Performers</p>
  145.  
  146. <div class="container">
  147. <div class="iconrow">
  148.  
  149. <div class="col-4 text-center">
  150. <figure>
  151. <div>
  152. <a href="jasmin.html">
  153. <img class="imageicon hovericon" src="images/jasmin1.jpg" class="img-fluid">
  154. </a>
  155. </div>
  156. <figcaption class="figure-caption center fontcolour font">Jasmin</figcaption>
  157. </figure>
  158. </div>
  159.  
  160. <div class="col-4 text-center">
  161. <figure>
  162. <div>
  163. <a href="pearl.html">
  164. <img class="imageicon hovericon" src="images/pearl1.jpg" class="img-fluid">
  165. </a>
  166. </div>
  167. <figcaption class="figure-caption center fontcolour font">Pearl</figcaption>
  168. </figure>
  169. </div>
  170.  
  171. <div class="col-4 text-center">
  172. <figure>
  173. <div>
  174. <a href="cordy.html">
  175. <img class="imageicon hovericon" src="images/cordy-profile.jpg" class="img-fluid">
  176. </a>
  177. </div>
  178. <figcaption class="figure-caption center fontcolour font">Cordy</figcaption>
  179. </figure>
  180. </div>
  181.  
  182.  
  183. <div class="col-6 offset-3 text-center">
  184. <figure>
  185. <div>
  186. <a href="pspo.html">
  187. <img class="imageicon hovericon" src="images/pspo-link.jpg" class="img-fluid">
  188. </a>
  189. </div>
  190. <figcaption class="figure-caption center fontcolour font">The PSPO</figcaption>
  191. </figure>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. </div>
  197. </section>
  198.  
  199.  
  200. <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  201. <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  202. <span class="navbar-toggler-icon"></span>
  203. </button>
  204. <a class="navbar-brand" href="index.html">THE SHOW MUST GO ON</a>
  205. <div class="collapse navbar-collapse" id="navbarNav">
  206. <ul class="navbar-nav">
  207. <li class="nav-item">
  208. <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
  209. </li>
  210. <li class="nav-item">
  211. <a class="nav-link" href="jasmin.html">Jasmin</a>
  212. </li>
  213. <li class="nav-item">
  214. <a class="nav-link" href="pearl.html">Pearl</a>
  215. </li>
  216. <li class="nav-item">
  217. <a class="nav-link" href="harley.html">Harley</a>
  218. </li>
  219. <li class="nav-item active">
  220. <a class="nav-link" href="cordy.html">Cordy</a>
  221. </li>
  222. <li class="nav-item">
  223. <a class="nav-link" href="pspo.html">The PSPO</a>
  224. </li>
  225. </ul>
  226. </div>
  227. </nav>
  228.  
  229. <script src="js/jquery.js"></script>
  230. <script src="js/popper.js"></script>
  231. <script src="js/bootstrap.js"></script>
  232. <script src="js/scripts.js"></script>
  233. <script src="js/velocity.min.js"></script>
  234. <script src="js/velocity.ui.min.js"></script>
  235. <script src="js/modernizr.js"></script> <!-- Modernizr -->
  236. <script src="js/main.js"></script> <!-- Resource jQuery -->
  237.  
  238. <script>
  239.  
  240. </script>
  241.  
  242. </body>
  243.  
  244. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement