Keynote Speaker Styles

Teknolot · Nov 18, 2020 · abcc4b2 · abcc4b2
1 parent 8798081
commit abcc4b2
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 16 deletions.
diff --git a/assets/js/custom.js b/assets/js/custom.js
@@ -157,7 +157,6 @@
 	/* ----------------------------------------------------------- */
 
 		$('.mu-speakers-slider').slick({
-			centerMode: true,
 		  slidesToShow: 3,
 		  responsive: [
 		    {

diff --git a/index.html b/index.html
@@ -154,30 +154,20 @@ <h2>Etkinlik Hakkında</h2>
 								<h2 class="mu-title">Açılış Konuşmacımız</h2>
 							</div>
 							<!-- Start Speakers Content -->
-							<div class="mu-speakers-content">
-								<div class="mu-speakers-slider">
-										<!-- Start single speaker -->
-										<div class="mu-single-speakers">
-
-										</div>
-										<!-- End single speaker -->
+							<div class="mu-keynote-speakers-content">
+								<div class="mu-keynote-speakers-slider">
 										<!-- Start single speaker -->
-										<div class="mu-single-speakers">
+										<div class="mu-keynote-single-speakers">
 											<img decoding="async" src="assets/images/users/scott_hanselman-profile.jpg" alt="Scott Hanselman" />
-											<div class="mu-single-speakers-info">
+											<div class="mu-keynote-single-speakers-info">
 												<h3>Scott Hanselman</h3>
 												<p>Community Director, .NET, Microsoft</p>
-												<ul class="mu-single-speakers-social">
+												<ul class="mu-keynote-single-speakers-social">
 													<li><a href="https://twitter.com/shanselman" target="_blank"><i class="fa fa-twitter"></i></a> </li>
 												</ul>
 											</div>
 										</div>
 										<!-- End single speaker -->
-										<!-- Start single speaker -->
-										<div class="mu-single-speakers">
-
-										</div>
-										<!-- End single speaker -->
 								</div>
 							</div>
 							<!-- End Speakers Content -->

diff --git a/style.css b/style.css
@@ -715,6 +715,80 @@ button:focus {
 /*--------------------*/
 
 
+#mu-keynote-speakers {
+	background-color: #fff;
+	display: inline;
+	float: left;
+	width: 100%;
+}
+
+.mu-keynote-speakers-area {
+	display: inline;
+	float: left;
+	padding: 100px 0;
+	width: 100%;
+}
+
+.mu-keynote-speakers-content{
+	display: inline;
+	float: left;
+	margin-top: 50px;
+	width: 100%;
+}
+
+.mu-keynote-single-speakers {
+	padding: 0 10px;
+	outline: none;
+	text-align: center;
+	-webkit-transition: all 0.3s ease 0s;
+	transition: all 0.3s ease 0s;
+}
+
+.mu-keynote-speakers-slider .slick-next {
+	right: -60px;
+}
+
+.mu-keynote-speakers-slider .slick-prev {
+	left: -60px;
+}
+
+.mu-keynote-single-speakers-info {
+	display: inline;
+	float: left;
+	margin-top: 20px;
+	width: 100%;
+}
+
+.mu-keynote-single-speakers-info h3 {
+	margin-bottom: 4px;
+	font-size: 22px;
+}
+
+.mu-keynote-single-speakers-info p {
+	margin-bottom: 5px;
+}
+
+.mu-keynote-single-speakers-social {
+
+}
+
+.mu-keynote-single-speakers-social li {
+	display: inline-block;
+}
+
+.mu-keynote-single-speakers-social li a {
+	display: inline-block;
+	margin-right: 5px;
+	-webkit-transition: all 0.5s;
+	-o-transition: all 0.5s;
+	transition: all 0.5s;
+}
+
+/*--------------------*/
+/* SPEAKERS */
+/*--------------------*/
+
+
 #mu-speakers {
 	background-color: #fff;
 	display: inline;