diff --git a/wiki/pages/inclusivity.html b/wiki/pages/inclusivity.html index 4ea66ef572224302bf6f60795c9e47b66243726c..10c75167f62a9335c9903667973e9519d2c84b4c 100644 --- a/wiki/pages/inclusivity.html +++ b/wiki/pages/inclusivity.html @@ -26,6 +26,12 @@ /* width: fit-content; */ overflow-y: hidden; } + + #anime_zalupa { + /* padding-top: 5vh; */ + width: 100vw; + position: relative; + } </style> {% endblock kostilj_style %} @@ -33,7 +39,13 @@ {% block page_content %} <link href="{{ url_for('static', filename = 'css/inclusivity.css') }}" rel="stylesheet"> +<div class="width-12 flex row align-items-center justify-content-center"> + <div id="anime_zalupa"> + <img src="https://static.igem.wiki/teams/4440/wiki/inclusivity/incl.gif" class="fade_from_top" id="intro_gif"> + </div> +</div> <section class="text-section width-12 flex justify-content-center" id="hiding-top-section"> + <div class="width-10"> <div class="flex row align-items-center justify-content-center"> <h1 class="page-header fade_from_top" id="inclusivity_section-header" style="margin-top: 4vw;"> @@ -1997,6 +2009,17 @@ {% include 'sidebar.html' %} <script> + + // GIF + const gif_wrapper = document.getElementById('anime_zalupa') + const gif = document.getElementById('intro_gif') + setTimeout(() => { + gif_wrapper.innerHTML = ''; + const img_gif = document.createElement('img'); + img_gif.src = "https://static.igem.wiki/teams/4440/wiki/inclusivity/incl.png"; + gif_wrapper.appendChild(img_gif); + }, 2000); + rotateGradient('inclusivity_section-header', '#9071f1', '#e2b025'); rotateGradient('language_inclusivity_title', '#9071f1', '#e2b025'); rotateGradient('ages_title', '#9071f1', '#e2b025');