Add presentation

youcon · Nov 1, 2017 · 0355509 · 0355509
1 parent 08a1314
commit 0355509
Show file tree

Hide file tree

Showing 5 changed files with 462 additions and 0 deletions.
diff --git a/presentation/presentation.html b/presentation/presentation.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>2018</title>
+        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300&amp;subset=latin,cyrillic" />
+        <link rel="stylesheet" href="static/css/style.css" />
+    </head>
+
+    <body>
+        <div id="impress" style="position: absolute; ">
+
+            <div id="overview" class="step" data-scale="2">
+            </div>
+
+            <div id="you" class="step" data-x="-50" data-y="-800" data-scale="0.1">
+                <h1>YOU</h1>
+            </div>
+
+            <div id="conf" class="step" data-x="50" data-y="-800" data-scale="0.1">
+                <h1>CONFERENCE</h1>
+            </div>
+
+            <div id="youcon" class="step" data-x="0" data-y="-600" data-scale="0.3" >
+                <h1>YOUCON</h1>
+            </div>
+
+            <div align="center" id="youconlogo" class="slide2 step" data-x="5800" data-y="700" data-scale="15" data-rotate-y="90"  >
+                <img padding="300 px" src="static/images/logo2.svg" width='60%'; onerror="this.onerror=null; this.src='static/images/logo_gr.png'">
+            </div>
+        </div>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/impress.js/0.5.3/impress.js"></script>
+        <script>impress().init();</script>
+    </body>
+</html>
diff --git a/presentation/static/css/style.css b/presentation/static/css/style.css
@@ -0,0 +1,169 @@
+*{
+	margin:0;
+	padding:0;
+}
+
+
+p {
+color:green;
+font-family:arial;
+font-size:1.5em;
+}
+
+
+html{
+	background-color: #333333;
+}
+
+body{
+	min-height: 600px;
+    padding: 10px 0 50px;
+	font:14px/1.3 'Segoe UI',Arial, sans-serif;
+	height:100%;
+}
+
+footer{
+	display: block;
+}  
+
+.colortext {
+    color: #0099cc;
+	font-size:170%;	 
+   }
+
+
+#impress .step{
+	width:1400px;
+	height: 900px;
+	position:relative;
+	margin:0 auto;
+
+	box-shadow:0 0 25px rgba(0,0,0,0.3) inset;
+
+	-moz-transition:1s opacity;
+	-webkit-transition:1s opacity;
+	transition:1s opacity;
+}
+
+#impress .step.active{
+	opacity:1;
+}
+#impress h1{
+	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
+	text-align: center;
+	font-size:10em;
+	color: #eeeeee;
+	padding: 300px 0px;
+	z-index:10 ;
+}
+
+#impress h2{
+	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
+	text-align: center;
+	font-size:20em;
+	color: #eeeeee;
+	z-index:8 ;
+
+}
+
+#impress div{
+	position:absolute;
+	z-index:8;
+
+}
+
+.step {
+	opacity: 0.1;
+		margin: auto;
+	top: 50%;
+}
+
+
+.impress-on-overview .step {
+	opacity: 1;
+	cursor: pointer;
+}
+
+.fallback-message {
+
+    width: 650px;
+    padding: 10px 10px 0;
+    margin: 20px auto;
+
+    border: 1px solid #E4C652;
+    border-radius: 10px;
+    background: #EEDC94;
+}
+
+.fallback-message p {
+    margin-bottom: 10px;
+}
+
+.impress-not-supported .fallback-message {
+	display: block;
+}
+.impress-supported .fallback-message {
+	display: none;
+}
+
+
+
+
+#impress .slide1{
+	width: 690px;
+	z-index:10;
+
+
+}
+
+.slide1 h2{
+	left: 0;
+    text-align: center;
+    top: 0;
+    width: 100%;
+}
+
+#impress .slide1 p{
+    left: 45px;
+    text-align: center;
+    top: 80px;
+	font-size: 22px;
+}
+
+.slide1 div{
+	right: 0;
+    top: 140px;
+}
+
+.slide2  {
+	opacity: 0.0;
+	display: inline-block;
+	vertical-align: middle;
+
+}
+
+.slide2 h3{
+	font: normal 4em 'Code Pro LC', sans-serif;
+	color:#eeeeee;
+	position:absolute;
+	padding: 50px 200px;
+	z-index:10;
+}
+
+.slide2 h1{
+	text-align: center;
+    width: 300%;
+}
+
+#impress .slide2 p{
+	font-size: 22px;
+    left: 200px;
+    line-height: 1.6;
+    top: 120px;
+}
+
+.slide2 div{
+	margin: auto;
+	top: 50%;
+	z-index:6;
+}