Merge pull request #715 from aslams2020/TutorialVideo

✔️Update Tutorial Video to Latest | Updated Readme Tutorial

README.md

@@ -95,17 +95,18 @@
 ## **Screenshots 📸**
 
 Before Starting Game
-![Screenshot](./assets/images/Screenshot-Before-Start.png)
+![alt text](Before-Start.jpg)
 <br>
 
 After Winning Game
-![Screenshot](./assets/images/Screenshot-After-Win.png)
+![alt text](After-Win.jpg)
 
 <br>
 
 ## **Working video 📹**
+**Watch this tutorial** to learn how to play Dots & Boxes effectively!
 
-https://github.com/GameSphere-MultiPlayer/GameSphere/assets/114330097/293120ab-b1f0-48a8-af15-c05d49c65763
+<video controls src="DotBox Tutorial new.mp4" ></video>
 
 <br>
 

pages/howtoplay.html

@@ -63,7 +63,6 @@
 					<script type="text/javascript" src="../js/navbar.js"></script>
 				</nav>
 			</div>
-
 			<div class="instructions-container">
 				<h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1>
 				<h1 class="heading2">How to Play? ⚔️</h1>
@@ -123,17 +122,14 @@ <h1 class="heading2">How to Play? ⚔️</h1>
 						</div>
 					</li>
 
-					<h1 class="heading" style="text-decoration: underline">
-						Here is a demo :-
-					</h1>
-					<div class="tutorial-video">
-						<video controls paused>
-							<source
-								src="../assets/videos/Dot Box Tutorial.mp4"
-								type="video/mp4"
-							/>
-						</video>
-					</div>
+					<h1 class="heading" style="text-decoration: underline">Here is a demo:</h1>
+					<h2 class="tut-head">Tutorial Video</h2>
+						<div class="tutorial-video">
+							<video controls paused>
+								<source src="/assets/videos/DotBox Tutorial new.mp4" type="video/mp4"/>
+							</video>
+						</div>
+						<p class="video-caption">Watch this tutorial to learn how to play Dots & Boxes effectively!</p>
 					<li>
 						<strong>Scoring: 🏆</strong><br />
 						- Each completed box is worth one point.<br />

styles/howtoplay.css

@@ -150,18 +150,6 @@ body {
 	font-size: 1.5rem;
 }
 
-.tutorial-video {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin: 2rem 0;
-	border-radius: 10px;
-}
-
-.tutorial-video video {
-	width: 80%;
-	border-radius: 10px;
-}
 
 .nav-links {
 	letter-spacing: 2px;
@@ -194,3 +182,36 @@ button a {
 	font-weight: bold;
 	text-decoration: none;
 }
+
+.tutorial-video {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+	box-shadow: -1px 5px 15px rgb(0, 13, 255);
+	background: #33333300;
+    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
+    margin: 20px 0;
+}
+
+.tutorial-video video {
+    width: 100%;
+    max-width: 800px;
+    border-radius: 15px;
+    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
+}
+
+.tut-head {
+    color: #ffffff;
+    margin-bottom: 15px;
+	text-shadow: 1px 1px 2px rgb(255, 217, 0), 0 0 1em blue, 0 0 0.2em blue;
+    text-align: center;
+}
+
+.video-caption {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #ffffff;
+    text-align: center;
+	text-shadow: 1px 1px 2px rgb(208, 178, 11), 0 0 1em rgb(238, 255, 0), 0 0 0.2em rgb(255, 204, 0);
+}