Added Keynote

Added Keynote

Author: VedantKhairnar

fss/Speakers-photos/santhosh yadav.jpg

@@ -706,6 +706,33 @@ <h2 class="Topic">Miscellaneous</h2>
 	<div class="container">
         <div class="speakers">
             <div class="speaker-image-div"><img class="speaker-image" src="https://fontmeme.com/permalink/211124/3827380206ee06b7478b1bb866048f7f.png" alt="squid-game-font"></div>
+			<div class="keynote-heading">
+				<div class="lin"></div>
+				<h1 class="" style="font-family:myfirstfont;text-align: center;background: transparent;">Keynote speaker</h1>
+				<div class="lin"></div>
+			</div>
+			<div class="keynote">
+				<div class="card-wrap keynote-img">
+                    <div class="card-header one key-one" style="background-image:url(./Speakers-photos/Chris\ Swan.png);"></div>
+                    <div class="card-content">
+                      <h1 class="card-title">Chris Swan</h1>
+                      <p class="card-text">Engineer at The @ Company</p>
+					  <div class="socials">
+						<a href="https://twitter.com/cpswan?t=1UQ6kkWkjaTjeX3I0SPdUQ&s=08"><i class="fab fa-twitter"></i></a>
+						<a href="https://www.linkedin.com/in/chrisswan/"><i class="fab fa-linkedin-in"></i></a>
+						<a href="https://github.com/cpswan"><i class="fab fa-github"></i></a>
+					</div>
+                   </div>
+                  </div>
+				  <div class="keynote-desc">
+					"Chris will talk about the history and journey of open source in the world of technology, what role that each of us can have in it if we choose to and what he sees as the future of open source."
+				  </div>
+			</div>
+			<div class="keynote-heading">
+				<div class="lin"></div>
+				<h1 class="" style="font-family:myfirstfont;text-align: center;background: transparent;">Event speakers</h1>
+				<div class="lin"></div>
+			</div>
             <div class="list">
                 	<div class="card-wrap">
                     <div class="card-header one" style="background-image:url(./Speakers-photos/Bill\ murugan.jpeg);"></div>
@@ -719,18 +746,7 @@ <h1 class="card-title">Bill Mulligan</h1>
 					</div>
                    </div>
                   </div>
-                  <div class="card-wrap">
-                    <div class="card-header one" style="background-image:url(./Speakers-photos/Chris\ Swan.png);"></div>
-                    <div class="card-content">
-                      <h1 class="card-title">Chris Swan</h1>
-                      <p class="card-text">Engineer at The @ Company</p>
-					  <div class="socials">
-						<a href="https://twitter.com/cpswan?t=1UQ6kkWkjaTjeX3I0SPdUQ&s=08"><i class="fab fa-twitter"></i></a>
-						<a href="https://www.linkedin.com/in/chrisswan/"><i class="fab fa-linkedin-in"></i></a>
-						<a href="https://github.com/cpswan"><i class="fab fa-github"></i></a>
-					</div>
-                   </div>
-                  </div>
+                  
                   <div class="card-wrap">
                     <div class="card-header one" style="background-image:url(./Speakers-photos/kevinNickels.png);"></div>
                     <div class="card-content">
@@ -782,7 +798,7 @@ <h1 class="card-title">Kamlesh Nagware</h1>
                   </div>
 
 				  <div class="card-wrap">
-                    <div class="card-header one" style="background-image:url(./Speakers-photos/Santosh\ Yadav.png);"></div>
+                    <div class="card-header one" style="background-image:url(./Speakers-photos/santhosh\ yadav.jpg);"></div>
                     <div class="card-content">
                       <h1 class="card-title">Santosh Yadav </h1>
                       <p class="card-text">GDE Angular | GitHub Star</p>

fss/index.html

@@ -986,9 +986,6 @@ section {
 .speakers {
 	margin-top: 30px;
 	width: 90%;
-	position: relative;
-	border-radius: 15px;
-	border: 5px ridge rgba(28, 110, 164, 0.05);
 }
 
 .list {
@@ -1062,9 +1059,7 @@ section {
 		width: 140px;
 	}
 
-	.card-header {
-		height: 100px;
-	}
+	
 
 	.list {
 		gap: 25px;
@@ -1198,6 +1193,20 @@ section {
 		0 0 151px #0fa;
 }
 
+.lin{
+	width: 30%;
+	height: 2px;
+	background-color: #fff;
+	box-shadow:
+		0 0 7px #fff,
+		0 0 10px #fff,
+		0 0 21px #fff,
+		0 0 42px #0fa,
+		0 0 82px #0fa,
+		0 0 92px #0fa,
+		0 0 102px #0fa,
+		0 0 151px #0fa;
+}
 .line {
 	margin-top: 20px;
 	width: 40%;
@@ -2408,4 +2417,48 @@ i {
 	.buttons{
 		margin-right:0;
 	}
+}
+
+.keynote{
+	display:flex;
+	flex-direction: row;
+	justify-content: center;
+	column-gap: 50px;
+	margin-bottom: 50px;
+	align-items: center;
+}
+
+.keynote-desc{
+width:30%;
+display:flex;
+align-items: center;
+justify-content: center;
+letter-spacing:2px;
+line-height:1.5em;
+font-weight: 700;
+text-align: center;
+}
+
+.keynote-heading{
+	margin:30px 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	background: transparent;
+	justify-content: center;
+}
+
+@media screen and (max-width:600px) {
+	.keynote{
+		flex-direction:column;
+		gap:30px;
+	}
+	.keynote-desc{
+		width:95%;
+		
+	}
+	.keynote-img{
+		width:50%;
+	}
+	
 }