{% extends 'base.html.twig' %}

{% block title %} Bilder-Segelparade {% endblock %}

{% block body %}



<!-- welcome hero -->


<div class="row bg px-3" id='home'>
		<div class="col-lg-2"></div>
				<div class="col-lg-8">
       
            <h1 class="text-center">Dein Bild in der Segelparade!</h1>
             
 

            <div class="welcome_annimation">
              <img src="assets/images/annimation/background.png" alt="welcome image" width="100%" class="annimation_background_sky"/>

              <img src="assets/images/annimation/waves_original.png" alt="welcome image" width="100%" class="annimation_waves annimation_waves_layer0"/>
              <img src="assets/images/annimation/waves_original2.png" alt="welcome image" width="100%" class="annimation_waves annimation_waves_layer1"/>
              <img src="assets/images/annimation/waves_original3.png" alt="welcome image" width="100%" class="annimation_waves annimation_waves_layer2"/>

              <img src="assets/images/annimation/ship-lotta.png" alt="shipt" class="annimation_ship ship1"/>
              <img src="assets/images/annimation/ship2.png" alt="shipt" class="annimation_ship ship2"/>
              <img src="assets/images/annimation/ship3.png" alt="shipt" class="annimation_ship ship3"/>
              <img src="assets/images/annimation/balloon.png" alt="ballon" class="annimation_balloon"/>
              <img src="assets/images/annimation/cloud.png" alt="ballon" class="annimation_cloud cloud1"/>
              <img src="assets/images/annimation/cloud.png" alt="ballon" class="annimation_cloud cloud2"/>
              <img src="assets/images/annimation/cloud.png" alt="ballon" class="annimation_cloud cloud3"/>

            </div>
            



            <!--<img src="assets/images/welcome_image2.jpg" alt="welcome image" width="100%"/><br>-->
            <br>
            <div class="text-white">
              Auch dieses Jahr soll eine Bilder-Segelparade mit euren Zeichungen entstehen. Dafür brauchen wir deine Unterstützung!
              <br>
              Lade hier bis zum 31. Mai 2024 Dein Bild hoch!<br>
            </div>
            <br>
            <div class="text-center">
              <a href="#upload"><button type="button" class="btn blue-btn btn-lg px-4 gap-3">Bild hochladen</button></a>
            </div>
          


            <br>
        </div>
		<div class="col-lg-2"></div>
</div>


<div class="row" id="project">
<br>
</div>




<div class="row bg px-3" id="bts">
		<div class="col-lg-2"></div>
				<div class="col-lg-8">
        
          <h2 class="text-center">Die Einreichphase ist beendet. 
        Nun erstellen wir den Film. Wir danken allen Kindern für ihre Bilder</h2>
          </div>
      </div>
  </div>
<div class="row" id="project">
<br>
</div>











<!-- project hero -->
<div class="row bg  px-3" id="project">
		<div class="col-lg-2"></div>
				<div class="col-lg-8">
          <h2 class="text-center">Zum Projekt</h2>

          <div class="text-white">
            In diesem Jahr veranstalten wir die fünfte Bilder-Segelparade. Von Kindern gemalte Schiffe sollen auch im Jahr 2024 in einem Video über eine animierte Kieler Förde fahren – ähnlich der großen Windjammerparade der Kieler Woche. Für
            die Mitmach-Aktion werden Kinder und Jugendliche gebeten, Segelschiffe oder Heißluftballons zu malen und einzusenden.
                        Schaut euch hier das Ergebnis aus dem letzten Jahr an:

            
            <br>
            <br>

            <br><br>
          </div>

          <iframe width="100%"
          class="custom_iframe"
      src="/cookie_not_accepted.html"
      src_youtube="https://www.youtube.com/embed/ox9rxy1DOEg?rel=0&amp;amp;&amp;showinfo=0&amp;autoplay=0&amp;loop=0" frameborder="0" allowfullscreen=""> </iframe>
      <br><br>
  </div>
  <div class="col-lg-2"></div>
</div>
<!-- project hero -->


<div class="row" id="project"><br></div>




  {% include '/frontend/index_inspiration.html.twig'  %}

<!-- project hero -->



<div class="row" id="project">
<br>
</div>



















<div class="row" id="project">
<br>
</div>

    
     


<!-- making of video -->
<div class="row bg px-3" id="bts">
		<div class="col-lg-2"></div>
				<div class="col-lg-8">
          <h2 class="text-center">So entsteht die Segelparade</h2>

          

          <iframe width="100%"
          class="custom_iframe"
      src="/cookie_not_accepted.html"
      src_youtube="https://www.youtube.com/embed/NcXRe0Wejcg?si=gWnGel19kgPw0vE2" frameborder="0" allowfullscreen=""> </iframe>
      <br><br>
  </div>
  <div class="col-lg-2"></div>
</div>
<!-- making of video -->


<div class="row" id="project">
<br>
</div>




{% endblock %}