index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap&subset=latin-ext" rel="stylesheet">
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="/path/to/isotope.pkgd.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


	<!--<script type="text/javascript">
window.onscroll = function() {myFunction()};

window.onscroll = function() {myFunction()};

function myFunction() {

	var odvrha = $(document).scrollTop();

	console.log(odvrha);
	 if (odvrha>100) {
		$(".nav").addClass("vidljiv");
	  } else {
		$(".nav").removeClass("vidljiv");
	  }
	}
	</script>


	<script type="text/javascript">
		&(window).on('scroll', function(){
			if(&(window).scrollTop()){
				&('nav').addClass('vidljiv');
			}
			else
			{
				&('nav').removeClass('vidljiv');
			}
		})
	</script>-->

	<script type="text/javascript">
		$(document).ready(function(){
			$(".button").click(function(){
			var value = $(this).attr("data-filter");
			if (value === "")
				{
					$(".active").filter("."+value).show("1000");
				}
			else
				{
					$(".filter").not("."+value).hide("1000");
					$(".filter").filter("."+value).show("1000");
				}
		})
		})
	</script>

<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 2500, function(){
        window.location.hash = hash;
      });
    }
  });
});
</script>

<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="javascript/potpis.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
	canvas = document.getElementById("canvas");
	anim_container = document.getElementById("animation_container");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	var comp=AdobeAn.getComposition("9689E39476087443A0FA2BA979B54F68");
	var lib=comp.getLibrary();
	handleComplete({},comp);
}
function handleComplete(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	exportRoot = new lib.Untitled2();
	stage = new lib.Stage(canvas);
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs.Ticker.setFPS(lib.properties.fps);
		createjs.Ticker.addEventListener("tick", stage);
	}
	//Code to support hidpi screens and responsive scaling.
	function makeResponsive(isResp, respDim, isScale, scaleType) {
		var lastW, lastH, lastS=1;
		window.addEventListener('resize', resizeCanvas);
		resizeCanvas();
		function resizeCanvas() {
			var w = lib.properties.width, h = lib.properties.height;
			var iw = window.innerWidth, ih=window.innerHeight;
			var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
			if(isResp) {
				if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
					sRatio = lastS;
				}
				else if(!isScale) {
					if(iw<w || ih<h)
						sRatio = Math.min(xRatio, yRatio);
				}
				else if(scaleType==1) {
					sRatio = Math.min(xRatio, yRatio);
				}
				else if(scaleType==2) {
					sRatio = Math.max(xRatio, yRatio);
				}
			}
			canvas.width = w*pRatio*sRatio;
			canvas.height = h*pRatio*sRatio;
			canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';
			canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
			stage.scaleX = pRatio*sRatio;
			stage.scaleY = pRatio*sRatio;
			lastW = iw; lastH = ih; lastS = sRatio;
			stage.tickOnUpdate = false;
			stage.update();
			stage.tickOnUpdate = true;
		}
	}
	makeResponsive(false,'both',false,1);
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
</script>

<link href="main.css" rel='stylesheet' />
    <link href="main2.css" rel='stylesheet' />

    <script src="main.js"></script>
    <script src="main2.js"></script>

    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
          plugins: [ 'dayGrid' ]
        });

        calendar.render();
      });

    </script>


    <link href="player/styles.css" rel="stylesheet">
    <script src="player/musicplayer.js"></script>


</head>

<body>

<div id="hero">
	<div class="wrapper">
		<div id="nav">
			<ul>
				<li><a href="#">Početna</a></li>
				<li><a href="#mojamuzika">Moja muzika</a></li>
				<li><a href="#omeni">O meni</a></li>
				<li><a href="#dogadjaji">Događaji</a></li>
				<li><a href="#filterslika">Galerija</a></li>
				<li><a href="#contact-form">Kontakt</a></li>
			</ul>
		</div>
		<div id="naslov">
			<h1>Viktor</h1>
		</div>
		<div class="container">
		<div id="animation_container" style="background-color: rgba(0,0,0,0.00);">
      <canvas id="canvas"  style=" display: block; background-color:rgba(0,0,0,0.00); "></canvas>
      <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:550px; height:400px; position: absolute; left: 0px; top: 0px; display: block;"> </div>
    </div>
			</div>
		<div id="sub">
			<p>Truly different music.</p>
			<div class="border"> </div>
		</div>
	</div>
</div>

<div id="main">

	<div class="wrapper">
		<h2>Saznajte sve o <span class="span">savremenoj teen muzičkoj zvezdi</span> koja nastaje.</h2>
		<div id="mojamuzika"> </div>
		<div id="video">
			<iframe src="https://www.youtube.com/embed/J37VW1Wnadw?autoplay=1" width="100%" height="500px;"></iframe>
		</div>

		<div id="omeni">
			<h3>O Viktoru</h3>
			<div id="border2"> </div>
			<div class="omeni2">
				<div>
					<h4>Počeci</h4>
					<p>Viktor Đurić rođen je na Kipru 22. oktobra 2000. godine. Muzikom je počeo da se bavi sa 14 godina. Pohađa International School Savremena gde je usavršio engleski jezik i ohrabrio se da komponuje pesme za inostrano tržište. Piše pesme na srpskom i engleskom jeziku.</p>
				</div>
				<div>
					<h4>O Savremeenoj gimnaziji</h4>
					<p>Mladi pevač Viktor Đurić je frontmen jednog od najboljih gimnazijskih bendova "Gimnazijalci". Bend je bio odlična odskočna daska za solo karijeru kojoj se posvetio paralelno sa školovanjem. Iako je tek zakoračio u solo vode, već sada je veoma popularan. Ipak, on stoji čvrsto na nogama, ne dozvoljavajući da ga novostečena slava iskvari.</p>
				</div>
			</div>
			<div class="omeni2">
				<div>
					<h4>Moja muzika</h4>
					<p>Svira klavir, bubnjeve i gitaru. Muzički se i dalje usavršava u muzičkom studiju koji mu je obezbedila Savremena gimnazija kako bi pomogla svom ultra-talentovanom učeniku. Trenutno promoviše svoj prvi singl za koji uskoro snima spot. Često govori da nije pevač, da bi verovatno postao glumac jer je uvek imao nešto da kaže. Na kraju se ipak odlučio za muziku, iako su mnogi u njemu prepoznali glumačkji talenat. Viktor obožava životinje, naročito pse, mačke i kornjače. Iako voli istoriju, kad bi mogao da bira u kom vremenu bi živeo izabrao bi savremeno doba.</p>
				</div>
				<div>
					<h4>U medijima</h4>
					<p>U razgovoru sa medijima često ističe da ne voli da priča o sebi, već želi da njegove pesme govore umesto njega.Viktor Đurić u maniru najboljih kantautora već priprema svoj album prvenac za koji sam piše i izvodi pesme. Njegov glas je već nadaleko poznat, a to što se odlično služi mnogim instrumentima, a pre svega gitarom, čini ga jednim od najtalentovanijih savremenih teen zvezda u regionu.</p>
				</div>
			</div>
		</div>

		<div id="icons">
		  <a href="#"><i class="fab faa-facebook-f fa-lg white-text mr-md-5 mr-3 fa-2x"></i></a>
          <!-- Twitter -->
          <a href="#"><i class="fab fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"></i></a>
          <!-- Google +-->
          <a href="#"><i class="fab fa-google-plus-g fa-lg white-text mr-md-5 mr-3 fa-2x"></i></a>
          <!--Linkedin -->
          <a href="#"><i class="fab fa-linkedin-in fa-lg white-text mr-md-5 mr-3 fa-2x"></i></a>
          <!--Instagram-->
          <a href="#"><i class="fab fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"></i></a>
          <!--Pinterest-->
          <a href="#"><i class="fab fa-pinterest fa-lg white-text fa-2x"></i></a>
		</div>

		<div id="images">
			<img src="slike/VD_1.png" alt="#">
			<img src="slike/VD_2.png" alt="#">
			<img src="slike/VD_3.png" alt="#">
		</div>


	<div id="dogadjaji">


		<div id="vesti">

			<h3>Vesti</h3>
			<div id="border3"> </div>

			<div class="vest">
				<div class="slikavest">
					<img src="slike/galerija/IMG_2491.jpg" width="220" height="170">
				</div>
				<div>
					<h4>Gimnazijalci „podgrejali” prazničnu atmosferu na Christmas Platzu</h4>
					<p>Bend Savremene gimnazije nastupio je na novododišnjoj manifestaciji Christmas Platz ispred Tržnog centra „Ušće” i jednočasovnim koncertom ulepšao prazničnu atmosferu srpske prestonice. <a href="#">Više &raquo;</a></p>
					<!--minifooter-->
				</div>
			</div>
			<div class="vest">
				<div class="slikavest">
					<img src="slike/galerija/IMG_2491.jpg" width="220" height="170">
				</div>
				<div>
					<h4>Zapažena uloga u mjuziklu „SGrease”</h4>
					<p>Viktor Đurić je u ulozi Sanija zaintrigirao gledaoce prilikom izvođenja numere „Greased lightning” rame uz rame sa školskim drugarima Budimirom Stošićem u ukozi Kenikija, i Jakovom Travicom, u ulozi Vinsa. <a href="#">Više &raquo;</a></p>
					<!--minifooter-->
				</div>
			</div>
			<div class="vest">
				<div class="slikavest">
					<img src="slike/galerija/IMG_2491.jpg" width="220" height="170">
				</div>
				<div>
					<h4>Gimnazijalci oduševili publiku na Future Parku</h4>
					<p>Članovi školskog benda Savremene gimnazije Gimnazijalci nastupili su na Future Parku, najvećem zabavnom cyber-parku u Evropi i napravili su odličnu atmosferu u epicentru događaja, na glavnoj bini Hale 4 Beogradskog sajma. <a href="#">Više &raquo;</a></p>
					<!--minifooter-->
				</div>
			</div>
			<div class="vest">
				<div class="slikavest">
					<img src="slike/galerija/IMG_2491.jpg" width="220" height="170">
				</div>
				<div>
					<h4>Potvrda muzičkog talenta u inostranstvu</h4>
					<p>Viktor Đurić bio je deo SG tima koji je branio boje Savremene gimnazije na Festivalu drame i dobrog humora pod nazivom STAGE u Rumuniji. Zapaženo učešće i ovacije publike ohrabrilo ji su mladog pevača na korak ka međunarodnoj karijeri. <a href="#">Više &raquo;</a></p>
					<!--minifooter-->
				</div>
			</div>

		</div>

		<div id="calendar">

		</div>


	  </div>


		<div id="mp3">

			<ul class="playlist">
                <li data-cover="slike/galerija/IMG_2491.jpg" data-artist="Viktor Đurić">
                    <a href="player/VIKTOR%20-%20Jos%20te%20trazim%20(Official%20Audio%202019).mp3">Još te tražim</a>
                </li>
            </ul>
		</div>

		<div id="filterslika">
			<ul>
                <li class="active button" data-filter="sdg">sdg</li>
				<li class="button" data-filter="slike">Slike</li>
				<li class="button" data-filter="video">Video</li>
			</ul>
			<div class="box filter sdg"><img src="slike/galerija/IMG_2491.jpg"></div>
			<div class="box filter sdg"><img src="slike/galerija/IMG_2627.jpg"></div>
			<div class="box filter sdg"><img src="slike/galerija/IMG_2710.jpg"></div>
			<div class="box filter slike"><img src="slike/galerija/IMG_2831.jpg"></div>
			<div class="box filter slike"><img src="slike/galerija/IMG_2800.jpg"></div>
			<div class="box filter slike"><img src="slike/galerija/IMG_2698.jpg"></div>
			<div class="box filter slike"><img src="slike/galerija/IMG_2523.jpg"></div>
			<div class="box filter slike"><img src="slike/galerija/IMG_2544.jpg"></div>
			<div class="box filter video"><img src="slike/galerija/IMG_2611.jpg"></div>
			<div class="box filter video"><img src="slike/galerija/IMG_2567.jpg"></div>
			<div class="box filter video"><img src="slike/galerija/IMG_2829.jpg"></div>
			<div class="box filter video"><img src="slike/galerija/IMG_2797.jpg"></div>
			<div class="box filter video"><img src="slike/galerija/IMG_2680.jpg"></div>
		</div>


		<form>
  <div id="contact-form"  class="sekcija">
    <div class="container">
      <div id="naslov3">
        <h2> Pošalji mi poruku</h2>
        <div id="border4"> </div>
      </div>
      <div class="kontakt">
	  	<div class="kontakt2">
            <input class="form-control" name="Last name" placeholder=" Ime i prezime" type="text" required />
		</div>
		<div class="kontakt2">
            <input class="form-control" name="Email adresa" placeholder=" Email adresa" type="email" required />
        </div>
      </div>
      <div>
        <div>
          <input class="form-control" name="Naslov" placeholder=" Naslov" type="text" required />
        </div>
      </div>
      <div>

          <textarea rows="6" cols="100" placeholder=" Napiši poruku"></textarea>
      </div>
      <div>
        <div>
          <input class="submit-btn" name="lastname" type="submit" value="Pošaljite poruku" />
        </div>
      </div>
    </div>
  </div>
</form>


	</div><!-- end .wrapper -->


	<div id="footer">
		<div class="wrapper">
			<a href="#"><img src="slike/logo/logo_link.png"></a>
			<a href="#"><img src="slike/logo/logo_iss.png"></a>
			<a href="#"><img src="slike/logo/logo_sg.png"></a>
			<a href="#"><img src="slike/logo/logo_sos.png"></a>
		</div>
		<div id="copy">
			<p>&copy; 2019 Copyright: <span class="span">Savremena gimnazija</span></p>
		</div>
	</div>

</div>

    <script>
            $("#mp3").musicPlayer({
                autoPlay: false,
                volume: 80,
                loop: false,
                timeSeparator: ' / ',
                playerAbovePlaylist: true,
                infoElements: ['title' , 'artist'],
                elements: ['artwork', 'information', 'controls', 'progress', 'time', 'volume'],
                timeElements: ['current', 'duration'],
                controlElements: ['backward', 'play', 'forward', 'stop'],
            });
        </script>
</body>
</html>