videos started

wiki/pages/videos.html

 {% extends "layout.html" %}
 
 {% block title %}Videos{% endblock %}
-{% block lead %}On this page you can introduce your team members, instructors, and advisors.{% endblock %}
 
-{% block page_content %}
+{% block kostilj_style %}
+<style>
+    #attribution-container {
+        background-image: url("https://static.igem.wiki/teams/4440/wiki/wiki/attributions/stars-2.svg");
+        padding-left: 5vw;
+        padding-right: 5vw;
+        padding-top: 5vw;
+        width: 100%;
+        height: 100%;
+        padding-bottom: 20vh;
+        background-repeat: no-repeat;
+    }
+
+    #attribution-info {
+        width: 100%;
+        height: 100%;
+        border: #5e91f7 4px solid;
+        border-radius: 3vw;
+        background: transparent;
+        display: flex;
+    }
+
+    #video_list {
+        display: flex;
+        flex-direction: column;
+        /* justify-content: space-around; */
+        width: 25%;
+        /* height: 50vh; */
+        height: 100%;
+        border: #5e91f7 4px solid;
+        border-radius: 2.7vw;
+        background: transparent;
+        /* padding: 10px; */
+        /* padding-top: 5vh;
+        padding-bottom: 5vh; */
+        /* overflow-y: scroll; */
+        overflow: hidden;
+        min-height: 100%;
+
+    }
+
+
+    #attribution-title {
+        color: white;
+        font-size: 2vw;
+        font-weight: bold;
+        text-align: center;
+        margin-bottom: 3vh;
+    }
+
+
+    .other-attr-button {
+        margin-right: 1vw;
+        margin-left: 1vw;
+        min-width: fit-content;
+        margin-bottom: 10px;
+        font-size: 1.5vw;
+        background-color: #1e1e1e;
+
+    }
+
+    #other-attributions {
+        max-width: 85%;
+        display: inline-flex;
+        overflow-x: scroll;
+        margin-bottom: 15px;
+        border-top-right-radius: 1vw;
+        border-bottom-right-radius: 2vw;
+    }
+
+    #other-attributions::-webkit-scrollbar {
+        height: 8px;
+    }
+
+    #other-attributions::-webkit-scrollbar-track {
+        box-shadow: inset 0 0 6px #6e60f4;
+        height: 8px;
+        border-radius: 50%;
+    }
+
+    #other-attributions::-webkit-scrollbar-thumb {
+        background-color: darkgrey;
+        outline: 1px solid slategrey;
+        height: 8px;
+        border-radius: 3px;
+        margin-left: 10%;
+    }
+
+    #person-description-text {
+        text-align: center;
+    }
 
-<div class="row">
-    <div class="col-8">
-        <h2>What should this page contain?</h2>
-        <hr>
-        <ul>
-            <li>Include pictures of your teammates, don't forget instructors and advisors!</li>
-            <li>You can add a small biography or a few words from each team member, to tell us what you like, and what
-                motivated you to participate in iGEM.</li>
-            <li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
-            <li>Remember that image galleries can help you showcase many pictures while saving space.</li>
-        </ul>
-        <div class="bd-callout bd-callout-info"><strong>Important:</strong> Your wiki pages will be archived at the end
-            of the iGEM season and this content will remain online. Please keep this in mind as you post photos and
-            personal information on this page.</div>
+    #attribution-sun {
+        aspect-ratio: 1;
+        width: 20%;
+        border-radius: 50%;
+        background-color: #fcf8e6;
+        display: flex;
+        align-items: center;
+        box-shadow: 0px 3px 60px #fcf8e6;
+    }
+
+
+    #attribution-people-images {
+        width: 80%;
+        padding: 0 5%;
+        padding-right: 0;
+        display: flex;
+        align-items: flex-start;
+        flex-flow: wrap;
+        justify-content: center;
+    }
+
+    #videos_root {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        height: 100vh;
+        max-height: 100vh;
+    }
+</style>
+{% endblock kostilj_style %}
+
+
+{% block page_content %}
+<section class="page_heading mt-5 mb-5">
+    <div class="container">
+        <div class="d-flex row align-content-center justify-content-center">
+            <div class="page-header fade_from_top" id="contribution_title">
+                CONTRIBUTION
+            </div>
+            <hr class="hr-divider width-2 fade_from_static">
+        </div>
     </div>
-    <div class="col-4">
-        <h2>Inspirations</h2>
-        <hr>
-        <ul>
-            <li><a href="https://2019.igem.org/Team:CU/Team">2019 CU</a></li>
-            <li><a href="https://2019.igem.org/Team:UANL/Team">2019 UANL</a></li>
-            <li><a href="https://2019.igem.org/Team:William_and_Mary/Team">2019 William and Mary</a></li>
-            <li><a href="https://2020.igem.org/Team:BOKU-Vienna/Team">2020 BOKU Vienna </a></li>
-            <li><a href="https://2020.igem.org/Team:CAU_China/Team_Member">2020 CAU China</a></li>
-            <li><a href="https://2020.igem.org/Team:Lethbridge/Members">2020 Lethbridge</a></li>
-        </ul>
+</section>
+
+<div id="videos_root">
+    <div id="attribution-container">
+        <div id="attribution-title">
+            Videos
+        </div>
+        <div id="attribution-info">
+            <div id="video_list">
+                <div class="video_thumbnail">
+                    <img src="../../static/denchik.jpg">
+                    <div class="video_name">
+                        Interstellar
+                    </div>
+                </div>
+                <div class="video_thumbnail">
+                    <img src="../../static/denchik.jpg">
+                    <div class="video_name">
+                        Interstellar2
+                    </div>
+                </div>
+                <div class="video_thumbnail">
+                    <img src="../../static/denchik.jpg">
+                    <div class="video_name">
+                        Interstellar2
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 
+<script>
+    rotateGradient('contribution_title', '#9071f1', '#e2b025');
+
+    const videos = [
+        {
+            "name": "INTERSTELLAR",
+            "thumbnail": "../../static/denchik.jpg",
+            "src": "../../static/interstellar.mp4"
+        }
+    ]
+
+
+
+
+</script>
+
 {% endblock %}
\ No newline at end of file