Add video block on index and changes (#89)

* add video section on index page * add video section on index page
ybashir · Sep 7, 2018 · bcb1c4b · bcb1c4b
1 parent bac5b9b
commit bcb1c4b
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 12 deletions.
diff --git a/theme/static/css/custom.css b/theme/static/css/custom.css
@@ -307,6 +307,17 @@ section#pricing{
 .speakers-member .member-desc { padding: 15px 25px 30px; }
 .speakers-member { min-height: 520px; }
 
+/* home page video Section */
+.pycon-video .text{
+    max-width: 450px;
+}
+.pycon-video .text h2 {
+    margin-bottom: 20px;
+    margin-top: 0;
+}
+.pycon-video-area iframe{
+    height: 315px;
+}
 /* Media Queries*/
 
 @media (max-width: 1199px) {
@@ -324,6 +335,9 @@ section#pricing{
         line-height: 35px;
     }
     #blog .blog-info { height: 260px !important; }
+    .pycon-video-area iframe{
+        height: 260px;
+    }
 }
 
 @media (max-width: 1024px) and (min-width: 768px){
@@ -352,6 +366,16 @@ section#pricing{
     }
     .time-countdown { margin-top: 50px; }
     #blog .blog-info { height: 230px !important; }
+    .pycon-video-area iframe{
+        height: 200px;
+        margin-top: 20px;
+    }
+    .navbar-event .navbar-nav li a {
+        padding: 0 14px;
+    }
+    .time-countdown {
+        margin-left: -10px;
+    }
 }
 
 @media (max-width: 767px){
@@ -444,7 +468,35 @@ section#pricing{
         margin-bottom: 20px;
     }
     #blog .blog-info { height: auto !important; }
+    .pycon-video .text{
+       max-width: 100%;
+        text-align: center;
+    }
+    .pycon-video-area iframe{
+        height: auto;
+    }
+    .pycon-video-area {
+        position:relative;
+        padding-bottom:56.25%;
+        padding-top:30px;
+        height:0;
+        overflow:hidden;
+    }
+
+    .pycon-video-area iframe, .pycon-video-area object, .pycon-video-area embed {
+        position:absolute;
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+    }
+    .time-countdown {
+        margin-left: 0;
+    }
 }
+
+
+
 .form-group > select{
     max-width: 100%;
 }

diff --git a/theme/static/css/main.css b/theme/static/css/main.css
@@ -992,14 +992,26 @@ fieldset[disabled] .btn {
 .gallery-item img {
   width: 100%;
 }
+.gallery-item .icons {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 50%;
+  margin: -24px 0 0;
+  text-align: center;
+  letter-spacing: -0.32em;
+}
+.gallery-item .icons * {
+  letter-spacing: normal;
+}
 .gallery-item .icons i {
+  display: block;
   color: #fff;
   border: 2px solid #fff;
   padding: 12px;
-  margin: -42px;
   font-size: 20px;
-  width: 42px;
-  height: 42px;
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
@@ -1011,31 +1023,38 @@ fieldset[disabled] .btn {
   border-color: #e91e63;
 }
 .gallery-item .icons .preview {
-  position: absolute;
-  left: 40%;
-  top: 45%;
+  position: relative;
+  left: -20px;
+  display: inline-block;
+  vertical-align: top;
+  width: 48px;
+  height: 48px;
   color: #fff;
+  margin: 0 7px;
   -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
   -moz-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
   -o-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
   transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
 }
 .gallery-item .icons .link {
-  position: absolute;
-  left: 55%;
-  margin-left: 42px;
-  top: 45%;
+  margin: 0 7px;
+  position: relative;
+  right: -20px;
+  display: inline-block;
+  vertical-align: top;
+  width: 48px;
+  height: 48px;
   color: #fff;
   -webkit-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
   -moz-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
   -o-transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
   transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
 }
 .gallery-item:hover .preview {
-  left: 45%;
+  left: 0;
 }
 .gallery-item:hover .link {
-  left: 50%;
+  right: 0;
 }
 /* ==========================================================================
    Video Section Style

diff --git a/theme/templates/index.html b/theme/templates/index.html
@@ -111,6 +111,28 @@ <h3 class="wow fadeInUp">Be a part of PyCon Pakistan</h3>
     </section>
     <!-- Welocme Event End -->
     <p></p>
+    <!-- pycon video Section Start -->
+    <section class="pycon-video section">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInLeft">
+                    <div class="text">
+                        <h2>A look back at PyCon Pakistan 2017</h2>
+                        <p>PyCon Pakistan 2017 was the first milestone in community building for the growth and promotion
+                            of Python in the country. We owe its tremendous success to our speakers and attendees.
+                            Watch them talk about their experiences in this video.</p>
+                    </div>
+                </div>
+                <div class="col-md-6 col-sm-6 col-xs-12 wow fadeInRight">
+                    <div class="pycon-video-area">
+                        <iframe width="100%" height="400" style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FPyConPakistan%2Fvideos%2F955602924592152%2F&amp;show_text=0&amp;width=560" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- pycon video Section End -->
+    <p></p>
     <!-- Featured Section Start -->
     <section class="section" id="featured">
         <div class="container">