From 3ea88b7eb74c69f3bf04476b9181a001d6429abd Mon Sep 17 00:00:00 2001
From: ductoanthanh <toanth@metropolia.fi>
Date: Tue, 23 Oct 2018 00:38:00 +0700
Subject: [PATCH 1/2] Update UI speaker-section by adding topic

---
 index.html                | 62 ++++++++++++++++++++++++++++++++++++++-
 resources/css/queries.css |  5 ++++
 resources/css/style.css   | 24 ++++++++++++---
 3 files changed, 86 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 5ddb244..4ab7b4d 100644
--- a/index.html
+++ b/index.html
@@ -116,7 +116,7 @@ <h2>Hack Talks 2018</h2>
             <div class="row">
                 <h2>Speakers</h2>
             </div>
-            <div class="row center" id="speakers-list">
+            <!-- <div class="row center" id="speakers-list">
                 <div class="col span-1-of-5 box" id="trigger_jasmine">
                     <img src="resources/img/jasmine.jpg" alt="JasmineGreenaway" class="speaker-photo">
                     <div class="name">Jasmine Greenaway</div>
@@ -147,6 +147,66 @@ <h2>Speakers</h2>
                     <div>Product Manager</div>
                     <div class="speaker-company">Facebook</div>
                 </div>
+            </div> -->
+
+            <div class="row" id="speakers-list">
+                <div class="row center">
+                    <div class="col span-1-of-3 box" id="trigger_jasmine">
+                        <img src="resources/img/jasmine.jpg" alt="JasmineGreenaway" class="speaker-photo">
+                        <div class="name">Jasmine Greenaway</div>
+                        <div id="jasmine_title"></i>
+                        Cloud Developer Advocate</div>
+                        <div class="speaker-company">Microsoft</div>
+                        <div class="speaker-topic">
+                            <i class="ion-ios-mic icon-small"></i>
+                            Embracing Constant Change
+                        </div>
+                    </div>
+                    <div class="col span-1-of-3 box" id="trigger_mikko">
+                        <img src="resources/img/mikko.jpg" alt="MikkoHypponen" class="speaker-photo">
+                        <div class="name">Mikko Hyppönen</div>
+                        <div>Chief Research Officer</div>
+                        <div class="speaker-company">F-Secure</div>
+                        <div class="speaker-topic">
+                            <i class="ion-ios-mic icon-small"></i>
+                            Cyber Arms Race
+                        </div>
+                    </div>
+                    <div class="col span-1-of-3 box" id="trigger_ines">
+                        <img src="resources/img/ines.jpg" alt="InesMontani" class="speaker-photo">
+                        <div class="name">Ines Montani</div>
+                        <div>Founder</div>
+                        <div class="speaker-company">Explosion AI</div>
+                        <div class="speaker-topic">
+                            <i class="ion-ios-mic icon-small"></i>
+                            The AI Revolution Will Not Be Monopolized
+                        </div>
+                    </div>
+                </div>
+                <div class="row center">
+                    <div class="col span-1-of-6"></div>
+                    <div class="col span-2-of-6 box" id="trigger_charlie">
+                        <img src="resources/img/charlie.jpg" alt="CharlieGerard" class="speaker-photo">
+                        <div class="name">Charlie Gerard</div>
+                        <div>Senior Software Developer</div>
+                        <div class="speaker-company">ThoughtWorks</div>
+                        <div class="speaker-topic">
+                            <i class="ion-ios-mic icon-small"></i>
+                            The usefulness of useless knowledge
+                        </div>
+                    </div>
+                    <div class="col span-2-of-6 box" id="trigger_michael">
+                        <img src="resources/img/michael.jpg" alt="MichaelSlater" class="speaker-photo">
+                        <div class="name">Michael Slater</div>
+                        <div>Product Manager</div>
+                        <div class="speaker-company">Facebook</div>
+                        <div class="speaker-topic">
+                            <i class="ion-ios-mic icon-small"></i>
+                            Building Augmented Reality Experiences With Spark AR Studio
+                        </div>
+                    </div>
+                    <div class="col span-1-of-6"></div>
+                </div>  
             </div>
         </section>
 
diff --git a/resources/css/queries.css b/resources/css/queries.css
index 1956597..8f7fa0c 100644
--- a/resources/css/queries.css
+++ b/resources/css/queries.css
@@ -145,6 +145,11 @@
         font-size: 120%;
         margin-bottom: 30px;
     }
+
+    .box {
+        font-size: 120% !important;
+        box-shadow: 0 2px 2px #efefef;
+    }
 }
 
 
diff --git a/resources/css/style.css b/resources/css/style.css
index 3e80bc4..2b1e10d 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -433,7 +433,7 @@ h4 {
 .box img {
     width: 100%;
     height: auto;
-    margin-bottom: 15px;
+    margin-bottom: 15px; 
 }
 
 .speaker-photo {
@@ -442,11 +442,25 @@ h4 {
     -webkit-box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, .2);
             box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, .2);
     color: rgb(82, 92, 101);
+    opacity: 1;
+    -webkit-transform: scale(1.02);
+    -ms-transform: scale(1.02);
+    transform: scale(1.02);
+    transition: transform 0.5s, opacity 0.5s;
+}
+
+.speaker-photo:hover {
+    opacity: 0.95;
+    transform: scale(1.1);
+    -webkit-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    cursor: pointer;
 }
 
 .name {
     font-weight: 700;
     margin-bottom: 5px;
+    text-transform: uppercase;
 }
 
 .speaker-company {
@@ -460,12 +474,14 @@ h4 {
     padding-left: 15px;
 }
 
-#speakers-list .span-1-of-4 {
+#speakers-list .box:hover {
     cursor: pointer;
 }
 
-#speakers-list .box:hover {
-    cursor: pointer;
+.speaker-topic {
+    margin-top: 12px;
+    font-style: italic;
+    font-weight: bold;
 }
 
 /* ----------------------------------------------- */

From 84e6482410a75334b902d789f459b5a60a960ecf Mon Sep 17 00:00:00 2001
From: ductoanthanh <toanth@metropolia.fi>
Date: Tue, 23 Oct 2018 00:46:52 +0700
Subject: [PATCH 2/2] Minor queries fix

---
 resources/css/queries.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/resources/css/queries.css b/resources/css/queries.css
index 8f7fa0c..ccc3204 100644
--- a/resources/css/queries.css
+++ b/resources/css/queries.css
@@ -146,9 +146,18 @@
         margin-bottom: 30px;
     }
 
-    .box {
+    #speakers-list .box {
         font-size: 120% !important;
-        box-shadow: 0 2px 2px #efefef;
+        box-shadow: 8px 10px 20px 0 rgba(46,61,73,.15)
+    }
+
+    .speaker-photo:hover {
+        transform: scale(1.02);
+        cursor: pointer;
+    }
+
+    .speaker-topic {
+        margin-bottom: 10px;
     }
 }