Merge pull request #4 from suresh-srinivas/suresh-edg

Style Sheet for YouTube ThumbNail
suresh-srinivas · Jun 28, 2024 · 3a0d4ee · 3a0d4ee
2 parents 30c5528 + 4d3fa98
commit 3a0d4ee
Showing 1 changed file with 31 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -5,18 +5,36 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>EveryDay G.I.T.A Challenge</title>
     <style>
-        .participant {
-            margin-bottom: 20px;
-            display: flex;
-            align-items: center;
-        }
+.participant {
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+    }
+
+    .participant img {
+      margin-right: 15px;
+      width: 80px; /* Adjust as per your requirement */
+      height: 80px; /* Adjust as per your requirement */
+      border-radius: 50%; /* This will make the images circular */
+    }
+
+    .YouTubeVideo {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    .YouTubeVideo img {
+      margin-right: 15px;
+      width: 200px; /* Increased size for the thumbnail */
+      height: auto;
+      border-radius: 10px; /* Rounded corners for the thumbnail */
+    }
+
+    .YouTubeVideo .details {
+      flex-grow: 1;
+    }
 
-        .participant img {
-            margin-right: 15px;
-            width: 80px; /* Adjust as per your requirement */
-            height: 80px; /* Adjust as per your requirement */
-            border-radius: 50%; /* This will make the images circular */
-        }
     </style>
 </head>
 <body>
@@ -79,8 +97,8 @@ <h2>Chapter 1: Participants' Recitations: Audio </h2>
        <h2> Chapter 1: Participants' Recitation: Video </h2>
         <div class="participant">
             <img src="Suresh.jpg" alt="Participant 6">
-            <div>
-                <strong>Suresh Srinivas</strong>
+            <div class = "YouTubeVideo">
+                <strong>Suresh Srinivas (click ThumbNail & watch video) </strong>
                 <a href="https://www.youtube.com/watch?v=cYyrw857rlw" target="_blank">
                    <img src="https://img.youtube.com/vi/cYyrw857rlw/maxresdefault.jpg" alt="YouTube Video Thumbnail">
                 </a>