<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>GRADUATION 2020 - School of Film & Media Studies</title>
	<meta name="author" content="./Made with love from Mr David, Colin Chan and Mr Melvin/index.html">
	<meta name="description" content="./Experience a very special virtual graduation for the class of 2020 from the School of Film & Media Studies - Ngee Ann Polytechnic/index.html">
	<meta name="viewport" content="./width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="./IE=edge/index.html">

	<!-- Bootstrap -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<link rel="stylesheet" href="./css/styles.css">
	<link rel="icon" type="image/x-icon" href="./media/favicon.png">

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">

	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
	<style>.wish .head{
            background:url(./media/profile-pic.jpg);background-size:contain;width:50px;height:50px;border-radius:25px;border:3px #c39966 solid;position:absolute;top:40px;left:10px;
        }
        .wish .title{
            font-size:0.8em;
            font-style:italic;
        }
        #sysmsg{
           width:500px;
           margin:0 auto;
           border-radius:20px;
           background: rgb(114,10,117);
           padding:3rem;
            background: radial-gradient(circle, rgba(114,10,117,1) 0%, rgba(61,5,63,1) 100%);
       }
       #grad {background:url(./media/pose-heart.png);width:100px;height:100px;border-radius:20px;position:absolute;left:70%;top:500px;cursor:pointer;}
       .speech-bubble {
            position: relative;
            padding:12px 20px;
            opacity:0.9;
            font-size:0.8em;
            line-height:1.3em;
            font-weight:700;
            color:white;
            border-radius:30px;
            border:4px solid #E6AB63;
            background:radial-gradient(#6A266E, #2E0C2F);
            box-shadow:0 0 10px rgb(229, 143, 38, 0.82);
        }
        .speak{font-size:0.8em;text-align:center;position:absolute;bottom:-55px;left:0px;}
        #grad .head{
            background:url(./media/profile-denyse.jpg);background-size:contain;width:100px;height:100px;border-radius:50px;margin-top:-50px;margin-left:10px;border:3px #c39966 solid;cursor:pointer;;
        }</style>
</head>

<body>
	<div id="viewport-limiter">
		<div class=""></div>
	</div>

	<!-- Main Content Container -->
	<main>
		<div class="wrapper">
			<div class="container">
				<header class="">
					<div class="menu-icon">
						<div class="nav-icon">
							<div></div>
						</div>
					</div>
					<nav>
                        <div class="container">
							<a class="col-auto mx-2" href="./graduation.php?apr">APR</a>
							<a class="col-auto mx-2" href="./graduation.php?fsv">FSV</a>
							<a class="col-auto mx-2" href="./graduation.php?mcm">MCM</a>
							<a class="col-auto mx-2" href="./graduation.php?vfx">VFX</a>
							<a class="col-auto mx-2 form-popup" href="./form.html">Login</a>
						</div>
					</nav>
				</header>
				<div class="row parallax-bg">
					<img class="parallax animated fadeIn delay-2s slow" src="./media/decoration-layers/circles.png" id="circles" alt="">
					<img class="parallax animated fadeIn slow" src="./media/decoration-layers/dots.png" id="dots" alt="">
					<img class="parallax animated fadeIn slow" src="./media/decoration-layers/lines.png" id="lines" alt="">
					<img class="parallax animated fadeIn delay-1s slow" src="./media/decoration-layers/pinkie.png" id="pinkie" alt="">
					<img class="parallax animated fadeIn delay-1s slow" src="./media/decoration-layers/triangles.png" id="triangles" alt="">
					<img class="parallax animated fadeIn delay-2s slow" src="./media/decoration-layers/balls.png" id="balls" alt="">
				</div>
				<div class="row content">
					<section class="container" id="intro">
					    <div id="grad">
                            <div class="speak"><h4 class="speech-bubble">HEAR OUR<br>VALEDICTORIAN!</h4></div>
                            <div class="head"></div>
                        </div>
						<div class="row h-100 flex-column align-items-start">
							<div class="mt-auto mb-5 mx-auto text-center">
							    								<h6 class="text-uppercase">FMS Graduation 2020</h6>
																<h1 class="ticker">95<img src="./media/graduated-gold.png" width="200">
</h1>
															</div>
							<div class="mx-auto text-center" id="graduate-now">
								<h3 class="">Have You?</h3>
								<a href="./form.html" class="btn glow-btn form-popup">
									<span class="h6">Graduate Now</span>
								</a>
							</div>
						</div>
					</section>

					<section class="container d-flex fh" id="cheeron">
						<div class="row w-100 mx-auto flex-column align-self-center">
							<div class="mx-auto text-center">
								<h1 class="mb-4">Watch The Graduation</h1>
								<p class="lg mb-5">Know someone who graduated in 2020?<br>Join in and cheer them on.</p>
							</div>
							<div class="mx-auto text-center" id="courses">
								<div class="row">
									<div class="col" id="apr">
										<img class="img-fluid mx-auto" width="265" src="./media/apr-cheeron.png">
										<a href="./graduation.php?apr" class="btn">
										</a>
									</div>
									<div class="col" id="fsv">
										<img class="img-fluid mx-auto" width="260" src="./media/fsv-cheeron.png">
										<a href="./graduation.php?fsv" class="btn">
										</a>
									</div>
									<div class="col" id="mcm">
										<img class="img-fluid mx-auto" width="260" src="./media/mcm-cheeron.png">
										<a href="./graduation.php?mcm" class="btn">
										</a>
									</div>
									<div class="col" id="vfx">
										<img class="img-fluid mx-auto" width="240" src="./media/vfx-cheeron.png">
										<a href="./graduation.php?vfx" class="btn">
										</a>
									</div>
								</div>
							</div>
						</div>
					</section>

					<section class="container d-flex" id="well-wishes">
						<div class="row w-100 mx-auto flex-column align-self-center">
							<div class="mx-auto text-center">
								<h1 class="mb-4">Bouquets &amp; Well-Wishes</h1>
								<p class="lg mb-5">Here's what some audiences are saying.</p>
							</div>
							<div class="col-10 mx-auto w-100 text-center" id="courses">
								<div class="d-flex owl-carousel">
								    <div class="wish" sid="10180446G">
									    <div class="head" style="background:url(./media/uploads/10180446G_20200607210107.jpg);background-size:contain"></div>
<p class="message">YAY! Congrats Rachel. Long arduous journey for this major milestone. All the best! 💪<span class="title">Mr Mel</span></p>
</div>
<div class="wish" sid="10180828C">
									    <div class="head" style="background:url(./media/uploads/10180828C_20200521185335.jpeg);background-size:contain"></div>
<p class="message">What took you so long! 😆 Congrats Denyse! Great job helming the yearbook despite the workload! <span class="title">All da best! Mr Mel</span></p>
</div>
<div class="wish" sid="10179155B">
									    <div class="head" style="background:url(./media/uploads/10179155B_20200510170938.png);background-size:contain"></div>
<p class="message">Congratzz Duckieee!!! YEETTT!<span class="title">Pengu</span></p>
</div>								</div>
							</div>
						</div>
					</section>
				</div>
			</div>
<footer class="container">
	<div class="row">
		<div class="col-4 offset-1 py-5 mr-auto">
			<nav class="links">
				<div><a class="" href="./index.php">Home</a></div>
				<div>
<a class="" href="./graduation.php?apr">APR</a>&nbsp;|&nbsp;<a class="" href="./graduation.php?fsv">FSV</a>&nbsp;|&nbsp;<a class="" href="./graduation.php?mcm">MCM</a>&nbsp;|&nbsp;<a class="" href="./graduation.php?vfx">VFX</a>
</div>
				<div><a class="" target="_blank" href="https://np.edu.sg/fms">School of Film &amp; Media Studies</a></div>
				<div><a class="" target="_blank" href="./../2017/index.html">FMS Stories 2017</a></div>
				<div><a class="" target="_blank" href="./../2017/index.html">FMS Stories 2018</a></div>
				<div><a class="" target="_blank" href="./../index.html">FMS Stories 2020 </a></div>
			</nav>
		</div>
		<div class="col d-flex justify-content-end align-items-end xml-auto" id="attribution">
			<p>School of Film &amp; Media Studies Graduation 2020</p>
			<img src="./media/fms-footer.png" height="183px">
		</div>
	</div>
</footer>		</div>

	</main>
	<!-- End Content Container -->

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.2.0/dist/simpleParallax.min.js"></script>

	<script src="./scripts/main.js"></script>
    <script src="./scripts/howler.min.js"></script>

	<script>
	    error=1;	    var speech = new Howl({src: ['sounds/denyse-tan.mp3']});
		function resize() {
			var heights = window.innerHeight;
			var all = document.getElementsByClassName('fh');
			for (var i = 0; i < all.length; i++) {
				all[i].style.height = heights + "px";
			}
		}
		resize();
		window.onresize = function() {
			resize();
		};
        function isIE() {
            var ua = window.navigator.userAgent;
            var msie = ua.indexOf('MSIE ');
            var trident = ua.indexOf('Trident/');
            var edge = ua.indexOf('Edge/');
            
            if (msie > 0 || trident > 0 || edge > 0) {
                return true;
            } else {
                return false;
            }
        }
		$(document).ready(function() {
			$(".owl-carousel").owlCarousel();
			if(isIE()){
			    $("header").hide();
			    $.magnificPopup.open({items:{src:'<div id="sysmsg" class="popup-wrapper mx-auto position-relative mfp-fade" style="color:white;font-family:arial;sans-serif"><div class="container"><div class="row"><h5>YIKES! I&apos;m Allergic To IE<\/h5><p style="color:white;font-family:arial;sans-serif">I have to stop you here because IE is a sorry excuse for a browser and I cannot feel my toes or thumbs. Try using <a href="https://www.google.com/chrome">Chrome<\/a>, <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox<\/a> or <a href="https://www.apple.com/sg/safari/">Safari<\/a> instead.<p><\/div><\/div><\/div>',type:'inline'},showCloseBtn:false,closeOnBgClick:false});
			}
						if(error==1){
			    $("html,body").animate({
        scrollTop: $("#cheeron").offset().top
    }, 1000);$.magnificPopup.open({items:{src:'<div id="sysmsg" class="popup-wrapper mx-auto position-relative mfp-fade"><div class="container"><div class="row"><h5>Hmmm. That URL Was Not Valid<\/h5><p>If you know which course the graduand is in, try using one of these links on this page.<p><\/div><\/div><\/div>',type:'inline'}});
			}
					});
		
	 var isMobile = false; //initiate as false
// device detection
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) {
    isMobile = true;
}
if(isMobile){
    $("header").hide();
    $.magnificPopup.open({items:{src:'<div id="sysmsg" style="width:90%" class="popup-wrapper mx-auto position-relative mfp-fade"><div class="container"><div class="row"><h5>Your Screen Is Too Tiny<\/h5><p>Something this epic has to be experienced on a bigger screen! Please come back with a computer or tablet instead.<p><\/div><\/div><\/div>',type:'inline'},showCloseBtn:false,closeOnBgClick:false});
}
$("#grad").click(function(){
   if(speech.playing()){
       speech.stop();
   } else {
       speech.play();
   }
});
	</script>

	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>