add program talks styles, add thomas

css/custom.css

@@ -74,4 +74,9 @@ body {
 html {
     overflow-x: hidden !important;
     overscroll-behavior-x: revert;
+}
+
+#fh5co-services .section-heading {
+  padding-bottom: 10px;
+  margin-bottom: 10px;
 }

css/style5.css

@@ -672,7 +672,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 #fh5co-services h3 {
   font-size: 24px;
-  color: #fff;
+  color: rgba(0, 0, 0, 0.5);
 }
 #fh5co-services .icon {
   font-size: 70px;
@@ -785,18 +785,18 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 400;
 }
 
-#fh5co-testimonials .box-testimony {
+#fh5co-services .box-testimony {
   margin-bottom: 2em;
   float: left;
 }
-#fh5co-testimonials .box-testimony a {
+#fh5co-services .box-testimony a {
   color: #fff;
 }
-#fh5co-testimonials .box-testimony a:hover, #fh5co-testimonials .box-testimony a:focus, #fh5co-testimonials .box-testimony a:active {
+#fh5co-services .box-testimony a:hover, #fh5co-services .box-testimony a:focus, #fh5co-services .box-testimony a:active {
   color: white;
   text-decoration: none;
 }
-#fh5co-testimonials .box-testimony blockquote {
+#fh5co-services .box-testimony blockquote {
   padding-left: 0;
   border-left: none;
   padding: 30px;
@@ -810,7 +810,7 @@ h1, h2, h3, h4, h5, h6 {
   -ms-border-radius: 7px;
   border-radius: 7px;
 }
-#fh5co-testimonials .box-testimony blockquote:after {
+#fh5co-services .box-testimony blockquote:after {
   content: "";
   position: absolute;
   top: 100%;
@@ -821,42 +821,43 @@ h1, h2, h3, h4, h5, h6 {
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
 }
-#fh5co-testimonials .box-testimony blockquote p {
+#fh5co-services .box-testimony blockquote p {
   font-style: italic;
   color: #fff;
 }
-#fh5co-testimonials .box-testimony .author {
+#fh5co-services .box-testimony .author {
   line-height: 20px;
   color: black;
-  font-size: 16px;
+  font-size: 20px;
   margin-left: 20px;
   font-weight: 400;
 }
-#fh5co-testimonials .box-testimony .author a {
+#fh5co-services .box-testimony .author a {
   color: #fab4b7;
 }
-#fh5co-testimonials .box-testimony .author a:hover {
+#fh5co-services .box-testimony .author a:hover {
   text-decoration: underline;
 }
-#fh5co-testimonials .box-testimony .author > figure {
+#fh5co-services .box-testimony .author > figure {
   float: left;
   margin-right: 10px;
 }
-#fh5co-testimonials .box-testimony .author > figure img {
+#fh5co-services .box-testimony .author > figure img {
   width: 60px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   border-radius: 50%;
 }
-#fh5co-testimonials .box-testimony .author p {
+#fh5co-services .box-testimony .author p {
   float: left;
   margin-top: 10px;
 }
-#fh5co-testimonials .box-testimony .author .subtext {
+#fh5co-services .box-testimony .author .subtext {
   display: block;
   color: rgba(0, 0, 0, 0.5);
-  font-size: 16px;
+  padding-top: 10px;
+  font-size: 18px;
   font-weight: 400 !important;
 }
 

index.html

@@ -61,9 +61,9 @@
 				  <ul class="nav navbar-nav navbar-right" 
 				  		style="padding-top: .5em;">
 
-					<li><a href="#" data-nav-section="program"><span>Program</span></a></li>
 					<li><a href="#" data-nav-section="themes"><span>Themes</span></a></li>
-		            <li><a href="#" data-nav-section="about"><span>Team</span></a></li>
+					<li><a href="#" data-nav-section="program"><span>Program</span></a></li>
+					<li><a href="#" data-nav-section="about"><span>Team</span></a></li>
 					<li><a href="#" data-nav-section="cfp"><span>CFP</span></a></li>
 					<li><a href="#" data-nav-section="tickets"><span>Tickets </span></a></li>
 					<li><a href="coc.html" class="external"><span>CoC </span></a></li>
@@ -100,7 +100,7 @@
 	</section>
 
 
-	<section id="fh5co-testimonials" data-section="program">
+	<section id="fh5co-testimonials" data-section="themes">
 		<div class="container">
 			<div class="row">
 				<div class="col-md-12 section-heading text-left">
@@ -138,7 +138,7 @@
 		</div>
 	</section>
 
-	<section id="fh5co-services" data-section="themes">
+	<section id="fh5co-services" data-section="program">
 		<div class="container">
 			<div class="row">
 				<div class="col-md-12 section-heading text-center">
@@ -150,6 +150,54 @@
 					</div>
 				</div>
 			</div>
+			<div class="row">
+				<div class="col-md-4">
+					<div class="box-testimony">
+						<blockquote class="to-animate-2">
+							<h3>A modern web setup for static sites with a sprinkle of JavaScript</h3>
+							<p>
+								Join me in taking a brief history in how web development started with html, css, js and how is it different to the complex js heavy development from today.
+Not everyone likes these complexities so we will explore some (upcoming) web standards and tools which allow us go full circle and working with html, css, js again without compromises in Developer or User Experience.
+							</p>
+						</blockquote>
+						<div class="author to-animate">
+							<figure><img src="https://sessionize.com/image/dc94-200o200o2-WJxBwHYSyNYyBMY7n69Mwk.jpg" alt="Thomas	Allmer image"></figure>
+							<p>
+								Founder of <a href="https://open-wc.org/" target="_blank">open-wc</a> and <a href="https://modern-web.dev/" target="_blank">Modern Web</a>
+							
+								<span class="subtext">Developer since the golden ages and strong believer in the web and its standard process. I like simplicity and avoid complexities by splitting them up. I like to automate things because then I can't forget them.</span>
+							</p>
+						</div>
+					</div>
+				</div>
+
+				<!-- <div class="col-md-4"> -->
+					<!-- <div class="box-testimony">
+						<blockquote class="to-animate-2">
+							<p>&ldquo;Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.&rdquo;</p>
+						</blockquote>
+						<div class="author to-animate">
+							<figure><img src="images/person1.jpg" alt="Person"></figure>
+							<p>
+							Jean Doe, CEO <a href="http://freehtml5.co/" target="_blank">FREEHTML5.co</a> <span class="subtext">Creative Director</span>
+							</p>
+						</div>
+					</div> -->
+				<!-- </div> -->
+				<!-- <div class="col-md-4"> -->
+					<!-- <div class="box-testimony">
+						<blockquote class="to-animate-2">
+							<p>&ldquo;Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. &rdquo;</p>
+						</blockquote>
+						<div class="author to-animate">
+							<figure><img src="images/person3.jpg" alt="Person"></figure>
+							<p>
+							Chris Nash, Director <a href="http://freehtml5.co/" target="_blank">FREEHTML5.co</a> <span class="subtext">Creative Director</span>
+							</p>
+						</div>
+					</div> -->
+				<!-- </div> -->
+			</div>
 		</div>
 	</section>
 
@@ -256,9 +304,6 @@
 		</div>
 	</section>
 
-	<section id="fh5co-services">
-	</section>
-
 	<section id="fh5co-about" data-section="tickets">
 		<div class="container">
 			<div class="row">