events.html

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Genero2k17</title>
	<meta name="description" content="Card Expansion Effect with SVG clipPath" />
	<meta name="keywords" content="clipPath, svg, effect, layout, expansion, images, grid, polygon" />
	<meta name="author" content="Claudio Calautti for Codrops" />
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/card.css" />
	<link rel="stylesheet" type="text/css" href="css/pattern.css" />

    <!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->

	<!--[if IE]>
	  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<style type="text/css">
		body{
			background-image: url("img/m.jpg"); 

		}
		.sw-large {
		    font-size: 24px!important
		}
		.sw-small {
		    font-size: 15px!important
		}
        .sw-extra-large {
		    font-size: 30px!important
		}
		.sw-row:after ,.sw-row:before {
			content: "";
			display:table;
			clear: both;
		}
		.sw-col{
			float:left;
			width: 100%;
			position: relative;
		}
		.sw-col.s1{
			width: 8.33%;
		}
		.sw-col.s2{
			width: 16.66%;
		}
		.sw-col.s3{
			width: 25%;
		}
		.sw-col.s4{
			width: 33%;
		}
		.sw-col.s5{
			width: 41.63%;
		}
		.sw-col.s6{
			width: 50%;
		}
		.sw-col.s7{
			width: 58.33%;
		}
		.sw-col.s8{
			width: 66.66%;
		}
		.sw-col.s9{
			width: 75%;
		}
		.sw-col.s10{
			width: 83.33%;
		}
		.sw-col.s11{
			width: 91.66%;
		}
		.sw-col.s12{
			width: 100%;
		}

		@media (min-width: 601px)
		{
		.sw-col.m1{
			width: 8.33%;
		}
		.sw-col.m2{
			width: 16.66%;
		}
		.sw-col.m3{
			width: 25%;
		}
		.sw-col.m4{
			width: 33%;
		}
		.sw-col.m5{
			width: 41.63%;
		}
		.sw-col.m6{
			width: 50%;
		}
		.sw-col.m7{
			width: 58.33%;
		}
		.sw-col.m8{
			width: 66.66%;
		}
		.sw-col.m9{
			width: 75%;
		}
		.sw-col.m10{
			width: 83.33%;
		}
		.sw-col.m11{
			width: 91.66%;
		}
		.sw-col.m12{
			width: 100%;
		}	
		}

		@media (min-width: 993px)
		{
		.sw-col.l1{
			width: 8.33%;
		}
		.sw-col.l2{
			width: 16.66%;
		}
		.sw-col.l3{
			width: 25%;
		}
		.sw-col.l4{
			width: 33%;
		}
		.sw-col.l5{
			width: 41.63%;
		}
		.sw-col.l6{
			width: 50%;
		}
		.sw-col.l7{
			width: 58.33%;
		}
		.sw-col.l8{
			width: 66.66%;
		}
		.sw-col.l9{
			width: 75%;
		}
		.sw-col.l10{
			width: 83.33%;
		}
		.sw-col.l11{
			width: 91.66%;
		}
		.sw-col.l12{
			width: 100%;
		}	
		}

			 .btn {
			border: none;
			font-family: inherit;
			font-size: inherit;
			color: #FFF;
			background: #2D2D2D;
			cursor: pointer;
			padding: 15px 50px;
			display: inline-block;
			margin: 10px 20px;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-weight: 500;
			outline: none;
			position: relative;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			transition: all 0.3s;
		}

		.btn:after {
			content: '';
			position: absolute;
			z-index: -1;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			transition: all 0.3s;
		}

		/* Pseudo elements for icons */
		.btn:before{
			font-family: 'icomoon';
			speak: none;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			line-height: 1;
			position: relative;
			-webkit-font-smoothing: antialiased;
		 }
		    .btn-6 {
			color: #fff;
			background: #226fbe;
			-webkit-transition: none;
			-moz-transition: none;
			transition: none;
		    }

		    .btn-6:active {
			   top: 2px;
		    }


			 .btn-6e {
			    border: 2px dashed #2D2D2D;
			    border-radius: 15px;
		     }

		     .btn-6e:hover {
			    background: transparent;
			    color: #2D2D2D;
		     }


	</style>
	<script>
	if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
		var root = document.getElementsByTagName('html')[0];
		root.setAttribute('class', 'ff');
	};
	</script>
</head>

<body class="demo-2" >
<!-- Navbar -->

<!-- Navbar -->


	<div class="container">
		<div class="content">
			<!-- trianglify pattern container -->
			<div class="pattern pattern--hidden"></div>
			<!-- cards -->
			
			<div class="wrapper ">
			
				<div class="card">
					<div class="card__container card__container--closed">
						<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
							<defs>
								<clipPath id="clipPath1">
									<polygon class="clip" points="0,500 0,0 1920,0 1920,500"></polygon>
								</clipPath>
							</defs>
							<image clip-path="url(#clipPath1)" width="1920" height="500" xlink:href="img/a.jpg"></image>
						</svg>
						<div class="card__content">
							<i class="card__btn-close fa fa-times"></i>
							<div class="card__caption">
								<h2 class="card__title">Tech CS</h2>
								<p class="card__subtitle">card subtitle</p>
							</div>
							<div class="card__copy">
								<div class="sw-row">
									<div class="sw-col l5"  style="cursor: pointer;border-right:medium #2D2D2D solid;text-align:center ">
										<p>
										</p>
										<p id="techcs-1 " >
											<button class="btn btn-e btn-6e" onclick="showMe('techcs',1)">Duel of the Geek Freaks</button>
										</p>
										<p id="techcs-2" >
											<button class="btn btn-e btn-6e" onclick="showMe('techcs',2)">Global Optimal</button>
										</p>
										<p id="techcs-3">
											<button class="btn btn-e btn-6e" onclick="showMe('techcs',3)">Shut the Bug Up</button>
										</p>
										<p id="techcs-4">
											<button class="btn btn-e btn-6e" onclick="showMe('techcs',4)">No Leisure for Linguistics</button>
										</p>
										<p id="techcs-5">
											<button class="btn btn-e btn-6e" onclick="showMe('techcs',5)">Simply Weblogical</button>
										</p>
										<p id="techcs-6">
											<button class="btn btn-e btn-6e" onclick="showMe('techcs',6)">Hack TREC</button>
										</p>
										<p id="techcs-7">
											<button class="btn btn-e btn-6e" onclick="showMe('techcs',7)" >Al-Khwarizmi Programming Event</button>
										</p>
									</div>
									<div class="sw-col l7" style="padding-left: 15px">
										 <div id="techcs-data-1" style="display: none">
										 	<h2>
										 		<b>Event Type</b>: Three Round Match
										 	</h2>
										 	<p class="sw-large">
										 		<b>Description</b>: Technology based quiz, mind wobbling puzzles and exciting riddles to exercise your brains.
										 	</p>
										 	<p class="sw-small">
										 		<b>Duration</b>: 2.5 – 3 hours
										 	</p>

										 	<!-- <p class="sw-small"><b>Net Rounds Events</b>:</p>
										 	<ul class="sw-small">
												<li>Puzzles</li>
												<li>Techno GK</li>
												<li>Riddles</li>
												<li>Rapid Fire Questions</li>
										 	</ul>
										 	<p class="sw-small"><b>Round 1:</b></p>
										 	<ul class="sw-small">
										 		<li>Riddles</li>
										 		<li>Puzzles</li>
									    	</ul>
									    	<p style="font-size: 12px;margin-left: 10%"><b>Duration:45 + 15(Result Break)minutes</b></p>
										 	<p class="sw-small"><b>Round 2:</b></p>
										 	<ul class="sw-small">
										 		<li>Technological quiz</li>										 		
									    	</ul>
									    	<p style="font-size: 12px;margin-left: 10%"><b>Duration:45 minutes</b></p>

										 	<p class="sw-small"><b>Round 3:</b>(3 Teams only would get goodies as Winners)</p>
										 	<ul class="sw-small">
										 		<li>Buzzer Round</li>
										 		<li>Rapid Fire</li>
									    	</ul>
									    	<p style="font-size: 12px;margin-left: 10%"><b>Duration:45 minutes</b></p>
									    	<p class="sw-medium"><b>NO NEGATIVE MARKING</b></p>
									    	<p class="sw-small"><b>Rules &amp; Regulations:</b></p>
									    	<ul class="sw-small">
									    		<li>
									    			Usage of Internet during the contest is strictly prohibited.
									    		</li>
									    		<li>
									    			No negative marking on submissions.
									    		</li>
									    		<li>
									    			Criteria of judgement would also include total number of submissions.
									    		</li>
									    		<li>
									    			In case of a tie, time would be the factor of resolution.
									    		</li>
									    		<li>
									    			Inter-team communications are not allowed during the Event. In case of urgency, it has to be first notified.
									    		</li>
									    	</ul> -->
										 </div>
										 <div id="techcs-data-2" style="display: none">
										 	<h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2>
										 	<p class="sw-large">
										 		<b>Description</b>:  Devise a solution and give an algorithm, with an example and a dry run of the example.
										 	</p>
										 	<p class="sw-small">
										 		<b>Duration</b>: 2.5 Hours
										 	</p>

										 </div>
										 <div id="techcs-data-3" style="display: none">
											<h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2>
										 	<p class="sw-large">
										 		<b>Description</b>:  Find the bugs and destroy them off their existence!
										 	</p>
										 	<p class="sw-small">
										 		<b>Duration</b>: 1.5-2 Hours
										 	</p>
										 </div>
										 <div id="techcs-data-4" style="display: none">
										 	<h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2>
										 	<p class="sw-large">
										 		<b>Description</b>: Randomized them of Language quiz!
										 	</p>
										 	<p class="sw-small">
										 		<b>Duration</b>: 1 Hour
										 	</p>
										 </div>	
										 <div id="techcs-data-5" style="display: none">
										 	<h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2>
										 	<p class="sw-large">
										 		<b>Description</b>: Design the best webpage you can in the first round using HTML and CSS. Complexity and number of web pages increase in the next round.
										 	</p>
										 	<p class="sw-small">
										 		<b>Duration</b>: 4.5 Hours
										 	</p>
										 </div>
										 <div id="techcs-data-6" style="display: none">
										 	<h2>
										 		<b>Event Type</b>: Hackathon
										 	</h2>
										 	<p class="sw-large">
										 		<b>Description</b>: Two day event,with teams battling to come up with the most innovative design on the time.Technology no bar.
										 	</p>
										 	<p class="sw-small">
										 		<b>Duration</b>: 30 Hours
										 	</p>
										 </div>
										 <div id="techcs-data-7" style="display: none">
										 	<h2>
										 		<b>Event Type</b>: Full day competitive Programming Event
										 	</h2>
										 	<p class="sw-large">
										 		<b>Description</b>: Solve the maximum number of problems in minimum time and with minimum number of wrong submission.
										 	</p>
										 	<p class="sw-small">
										 		<b>Duration</b>: 8 Hours
										 	</p>
										 </div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card__container card__container--closed">
						<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
							<defs>
								<clipPath id="clipPath2">
									<polygon class="clip" points="0,500 0,0 1920,0 1920,500"></polygon>
								</clipPath>
							</defs>
							<image clip-path="url(#clipPath2)" width="1920" height="500" xlink:href="img/b.jpg"></image>
						</svg>
						<div class="card__content">
							<i class="card__btn-close fa fa-times"></i>
							<div class="card__caption">
								<h2 class="card__title">TECH ME</h2>
								<p class="card__subtitle">Card Subtitle</p>
							</div>
							<div class="card__copy">
							  <div class="sw-row">
									<div class="sw-col l5"  style="cursor: pointer;border-right:medium #2D2D2D solid;text-align:center ">
										<p>
										</p>
										<p id="techme-1 " >
											<button class="btn btn-e btn-6e" onclick="showMe('techme',1)" >Lathe War</button>
										</p>
										<p id="techme-2" >
											<button class="btn btn-e btn-6e" onclick="showMe('techme',2)" >Pirates Battle</button>
										</p>
										<p id="techme-3">
											<button class="btn btn-e btn-6e" onclick="showMe('techme',3)" >3-D Modeling</button>
										</p>
										<p id="techme-4">
											<button class="btn btn-e btn-6e" onclick="showMe('techme',4)" >Robot competition: Road Rash</button>
										</p>
										<p id="techme-5">
											<button class="btn btn-e btn-6e" onclick="showMe('techme',5)" >Water Rocket</button>
										</p>
										<p id="techme-6">
											<button class="btn btn-e btn-6e" onclick="showMe('techme',6)" >Automobile Quiz</button>
										</p>
									</div>
									<div class="sw-col l7" style="padding-left: 15px">
										 <div id="techme-data-1" style="display: none">
										 	<h2>
										 		<b>Event Type</b>: Two Round Match
										 	</h2>
										 	<p class="sw-large">
										 		<b>Description</b>: Want to perform operations on the lathe machine?? This is it, an event where you show how strong your workshop skills are. Lathe War is a manufacturing event about command and accuracy to prove your proficiency on a Lathe machine. 
										 	</p>
										 	<!-- <p class="sw-small">
										 		<b>Duration</b>: hours
										 	</p> -->
										 </div>
										 <div id="techme-data-2" style="display: none">
										 	<!-- <h2>
										 		<b>Event Type</b>: 
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>:  The team has to build a boat which can transverse a maze that will contain hurdles within a given time period.
										 	</p>
										 	<!-- <p class="sw-small">
										 		<b>Duration</b>: Hours
										 	</p> -->

										 </div>
										 <div id="techme-data-3" style="display: none">
											<!-- <h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>: Desktop computers with the required software will be provided by the organizers. It is to be noted that the three views will be provided in printed format.
										 	</p><!-- 
										 	<p class="sw-small">
										 		<b>Duration</b>: 1.5-2 Hours
										 	</p> -->
										 </div>
										 <div id="techme-data-4" style="display: none">
										 	<!-- <h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>: The robots will start from the starting positions and both of them will move in the same sense (shown by arrows). The robots are expected to chase and approach the other robot from behind. Any dimension of the robot should not be less than 200 mm during all time of the game. 
										 	</p><!-- 
										 	<p class="sw-small">
										 		<b>Duration</b>: 1 Hour
										 	</p> -->
										 </div>	
										 <div id="techme-data-5" style="display: none">
										 	<!-- <h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>: The water rocketry challenge is a competition to build a rocket powered by pressurized water. The competition focuses on designing aerodynamically better rockets that would be capable of targeted flights when launched at a particular angle from the horizontal. The participants need to study the basics of rocketry and come up with their own designs.  
										 	</p><!-- 
										 	<p class="sw-small">
										 		<b>Duration</b>: 4.5 Hours
										 	</p> -->
										 </div>
										 <div id="techme-data-6" style="display: none">
										 	<!-- <h2>
										 		<b>Event Type</b>: Hackathon
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>: The event is about a quiz which will be based on basic automobile engineering objective type questions. The questions will not be asked directly in the quiz. Each question would have some obliges so first you have to decode the question for getting the meaning of question and then you have to be accountable. For decoding the question, the hint will be provided within the question. Using that hint you can easily decode the question. 
										 	</p><!-- 
										 	<p class="sw-small">
										 		<b>Duration</b>: 30 Hours
										 	</p> -->
										 </div>
									</div>
								</div> 
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card__container card__container--closed">
						<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
							<defs>
								<clipPath id="clipPath3">
									<polygon class="clip" points="0,500 0,0 1920,0 1920,500"></polygon>
								</clipPath>
							</defs>
							<image clip-path="url(#clipPath3)" width="1920" height="500" xlink:href="img/c.jpg"></image>
						</svg>
						<div class="card__content">
							<i class="card__btn-close fa fa-times"></i>
							<div class="card__caption">
								<h2 class="card__title">TECH CE</h2>
								<p class="card__subtitle">Card Subtitle</p>
							</div>
							<div class="card__copy">
								<div class="sw-row">
									<div class="sw-col l5"  style="cursor: pointer;border-right:medium #2D2D2D solid;text-align:center ">
										<p>
										</p>
										<p id="techce-1 " >
											<button class="btn btn-e btn-6e" onclick="showMe('techce',1)" >Bob The Builder</button>
										</p>
										<p id="techce-2" >
											<button class="btn btn-e btn-6e" onclick="showMe('techce',2)" >Cartes De Palais</button>
										</p>
										<p id="techce-3">
											<button class="btn btn-e btn-6e" onclick="showMe('techce',3)" >Cadd-O-Mania</button>
										</p>
										<p id="techce-4">
											<button class="btn btn-e btn-6e" onclick="showMe('techce',4)" >Floating Concrete</button>
										</p>
										<p id="techce-5">
											<button class="btn btn-e btn-6e" onclick="showMe('techce',5)" >Snapshot</button>
										</p>
										<p id="techce-6">
											<button class="btn btn-e btn-6e" onclick="showMe('techce',6)" >Roller Coaster</button>
										</p>
									</div>
									<div class="sw-col l7" style="padding-left: 15px">
										 <div id="techce-data-1" style="display: none">
										 	<!-- <h2>
										 		<b>Event Type</b>: Two Round Match
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>: In this event participants have to construct a bridge from popsickle sticks (ice-cream sticks).The load bearing capacity and stability of the bridges will be checked. 
										 	</p>
										 	  <p class="sw-small"><b>Rules and Regulations</b>:</p>
											 	<ul class="sw-small">
													<li>Minimum Length of Span = 50cm.</li>
													<li>Minimum Height Of truss = 2sticks</li>
													<li>Number Of Sticks = 60</li>
													<li>Fevicol will be provided as binder.</li>
											 	</ul>
										 	<!-- <p class="sw-small">
										 		<b>Duration</b>: hours
										 	</p> -->
										 </div>
										 <div id="techce-data-2" style="display: none">
										 	<!-- <h2>
										 		<b>Event Type</b>: 
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>:  This event is to check the imagination of the participants and their insight in to the field of Structure and design. In this participants have to make the Civil Structure with the help of 52 playing cards.
										 	</p>
										 	<p class="sw-small">
										 		<b>Participants</b>: Maximum 2 Participants per Team.
										 	</p>

										 </div>
										 <div id="techce-data-3" style="display: none">
											<!-- <h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>: This is an On-The-Spot event which tests the perception and modelling abilities of participants. It is the 2-D Visualisation of a given 3-D structure using AUTOCAD software.
										 	</p><!-- 
										 	<p class="sw-small">
										 		<b>Duration</b>: 1.5-2 Hours
										 	</p> -->
										 </div>
										 <div id="techce-data-4" style="display: none">
										 	<!-- <h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>: A concrete cube of size 15 cm x 15cm x15 cm is to be casted which can float. The cube which can take maximum compressive load will be the winner.
										 	</p>
                                            <p class="sw-small">
										 		<b>Participants</b>: Maximum 3 Participants per Team.
										 	</p>
										 	<!-- 
										 	<p class="sw-small">
										 		<b>Duration</b>: 1 Hour
										 	</p> -->
										 </div>	
										 <div id="techce-data-5" style="display: none">
										 	<!-- <h2>
										 		<b>Event Type</b>: Single Round Match (SRM)
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>: Snapshot is an event that encourages the participants to showcase their photographic skills that help them capture cherishable moments. It is been introduced first time in Genero. Through this competition, Genero’16 tries to uplift the creative and imaginative skills of participants  
										 	</p>
                                            <p class="sw-small">
										 		<b>Participants</b>: Single Participant event.
										 	</p>
										 	<!-- 
										 	<p class="sw-small">
										 		<b>Duration</b>: 4.5 Hours
										 	</p> -->
										 </div>
										 <div id="techce-data-6" style="display: none">
										 	<!-- <h2>
										 		<b>Event Type</b>: Hackathon
										 	</h2> -->
										 	<p class="sw-large">
										 		<b>Description</b>: Participants have to make a Prototype of Roller Coaster using ice cream sticks and paper within given specification. 
										 	</p>
										 	<p class="sw-small">
										 		<b>Participants</b>: Maximum 2 Participants per team.
										 	</p>

										 	<!-- 
										 	<p class="sw-small">
										 		<b>Duration</b>: 30 Hours
										 	</p> -->
										 </div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card__container card__container--closed">
						<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
							<defs>
								<clipPath id="clipPath4">
									<polygon class="clip" points="0,500 0,0 1920,0 1920,500"></polygon>
								</clipPath>
							</defs>
							<image clip-path="url(#clipPath4)" width="1920" height="500" xlink:href="img/d.jpg"></image>
						</svg>
						<div class="card__content">
							<i class="card__btn-close fa fa-times"></i>
							<div class="card__caption">
								<h2 class="card__title">Card Title</h2>
								<p class="card__subtitle">Card Subtitle</p>
							</div>
							<div class="card__copy">
								<p>
									Data
								</p>
                                <p>
									Data
								</p>
                                <p>
									Data
								</p>
                                <p>
									Data
								</p>
                                <p>
									Data
								</p>
                                <p>
									Data
								</p>
                                <p>
									Data
								</p>              			
       				        </div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card__container card__container--closed">
						<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
							<defs>
								<clipPath id="clipPath5">
									<polygon class="clip" points="0,500 0,0 1920,0 1920,500"></polygon>
								</clipPath>
							</defs>
							<image clip-path="url(#clipPath5)" width="1920" height="500" xlink:href="img/e.jpg"></image>
						</svg>
						<div class="card__content">
							<i class="card__btn-close fa fa-times"></i>
							<div class="card__caption">
								<h2 class="card__title">Card Title</h2>
								<p class="card__subtitle">Card Subtitle</p>
							</div>
							<div class="card__copy">
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card__container card__container--closed">
						<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
							<defs>
								<clipPath id="clipPath6">
									<polygon class="clip" points="0,500 0,0 1920,0 1920,500"></polygon>
								</clipPath>
							</defs>
							<image clip-path="url(#clipPath6)" width="1920" height="500" xlink:href="img/f.jpg"></image>
						</svg>
						<div class="card__content">
							<i class="card__btn-close fa fa-times"></i>
							<div class="card__caption">
								<h2 class="card__title">Card Title</h2>
								<p class="card__subtitle">Card Subtitle</p>
							</div>
							<div class="card__copy">
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>				
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card__container card__container--closed">
						<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
							<defs>
								<clipPath id="clipPath7">
									<polygon class="clip" points="0,500 0,0 1920,0 1920,500"></polygon>
								</clipPath>
							</defs>
							<image clip-path="url(#clipPath7)" width="1920" height="500" xlink:href="img/f.jpg"></image>
						</svg>
						<div class="card__content">
							<i class="card__btn-close fa fa-times"></i>
							<div class="card__caption">
								<h2 class="card__title">Card Title</h2>
								<p class="card__subtitle">Card Subtitle</p>
							</div>
							<div class="card__copy">
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>				
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card__container card__container--closed">
						<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
							<defs>
								<clipPath id="clipPath8">
									<polygon class="clip" points="0,500 0,0 1920,0 1920,500"></polygon>
								</clipPath>
							</defs>
							<image clip-path="url(#clipPath8)" width="100%" height="500" xlink:href="img/pagani_car.jpg"></image>
						</svg>
						<div class="card__content">
							<i class="card__btn-close fa fa-times"></i>
							<div class="card__caption">
								<h2 class="card__title">Card Title</h2>
								<p class="card__subtitle">Card Subtitle</p>
							</div>
							<div class="card__copy">
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>
								<p>
									Data
								</p>						
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /cards -->
		</div><!-- /content -->
	</div>
	<!-- /container -->
	<!-- JS -->

   <script>
		var depts = {
			"techcs": 7,
			"techme": 6,
			"techce":6,
		};
		function showMe(deptName, divId) {
			for (var i = 1; i <= depts[deptName]; ++i) {
				if (divId == i) {
					document.getElementById(deptName + "-data-" + i).style.display = "inline";
				}
				else {
					document.getElementById(deptName + "-data-" + i).style.display = "none";
				}
			}
		}
	</script>
	<script src="js/vendors/trianglify.min.js"></script>
	<script src="js/vendors/TweenMax.min.js"></script>
	<script src="js/vendors/ScrollToPlugin.min.js"></script>
	<script src="js/vendors/cash.min.js"></script>
	<script src="js/Card-polygon.js"></script>
	<script src="js/demo-2.js"></script>
</body>

</html>