update css

baponkar · Jun 1, 2024 · 1a698b1 · 1a698b1
1 parent 781467e
commit 1a698b1
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 22 deletions.
diff --git a/css/style.css b/css/style.css
@@ -116,24 +116,51 @@ li{
 	color: var(--blue-text-color)
 }
 
+/* normal  image container*/
+.imageContainer {
+	width: 70%;
+	height: auto;
+	margin-top: 5%;
+	margin-bottom: 5%;
+	margin-left: auto;
+	margin-right: auto;
+	overflow: hidden;
+	display: flex; /* Use flexbox to center the image */
+    justify-content: center; /* Horizontally center the image */
+	align-self: center;
+	border-color: #F2F5FF;
+	border-radius: 5px;
+	border: solid 2px white;
+	background-color: var(--secondary-color);
+}
+
+.imageContainer img {
+	width: 100%;
+	height: 100%;
+}
+
 
 
 /* Screenshots Animated image container*/
-#imageContainer {
+#anim-imageContainer {
 	position: relative;
 	width: 445px;
 	height: 250px;
 	padding: 5%;
+	margin-top: 5%;
+	margin-bottom: 1%;
+	margin-left: auto;
+	margin-right: auto;
 	overflow: hidden;
-	display: flex; /* Use flexbox to center the image */
-    justify-content: center; /* Horizontally center the image */
+	display: block; /* Use flexbox to center the image */
+    /*justify-content: center; /* Horizontally center the image */
 	border-color: #F2F5FF;
 	border-radius: 5px;
 	border: solid 2px white;
 	background-color: var(--secondary-color);
 }
 
-#imageContainer img {
+#anim-imageContainer img {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -173,7 +200,8 @@ li{
 }
 
 #dotsContainer{
-	padding: 5%;
+	padding-top: 0%;
+	padding-bottom: 5%;
 	text-align: center;
 }
 
@@ -376,10 +404,24 @@ li{
 		box-shadow: 10px 10px 10px var(--secondary-color);
 	}
 
-    #imageContainer {
+    #anim-imageContainer {
 		width: 356px;
         height: 200px; /* Adjust height for smaller screens */
     }
+
+	#dotsContainer{
+		padding: 4%;
+		text-align: center;
+	}
+
+
+	.dot {
+		height: 5px;
+		width: 5px;
+
+		margin: 0 3px;
+
+	}
 }
 
 

diff --git a/index.html b/index.html
@@ -157,7 +157,7 @@ <h1 class="typewritter">
 
       <h2 id="screenshots-">Screenshots:</h2>
 
-      <div class="center" id="imageContainer">
+      <div class="center" id="anim-imageContainer">
          <img id="image1" src="ScreenShots/screenshot_with_weapon.png" alt="Image 1">
          <img id="image2" src="ScreenShots/screenshot_with_multiple_zombie.png" alt="Image 2">
          <img id="image3" src="ScreenShots/screenshot_with_weapon.png" alt="Image 3">
@@ -178,7 +178,7 @@ <h2 id="screenshots-">Screenshots:</h2>
       <h2 id="behavior-tree-">Behavior Tree:</h2>
       <p>I have dropped this feature.</p>
 
-      <div class="center" id="imageContainer">
+      <div class="imageContainer">
         <img src="ScreenShots/behavior_tree.png" alt="Behavior Tree" width="300" height="auto">
       </div>
 
@@ -236,14 +236,17 @@ <h2 id="documentation-">Documentation :</h2>
       <li><p>Change Layer of <strong>Player</strong> into <strong>Character</strong> which will be seen by NPCs, and also
       Change Tag of <strong>Player</strong> with &quot;<strong>Player</strong>&quot;.</p>
       </li>
+
       <li><p>Change Layer of all prefabs <strong>indicator plane</strong> into &quot;<strong>Mini Map</strong>&quot; Layer.Which will be seen only by Mini Map Camera.</p>
       </li>
       <li><p>See <strong>NPCVisionSensor</strong> Script which attached with npcs i.e. zombie/Romero prefabs and change its <strong>Occulation Layer</strong> with corresponding
       <strong>Ground Layer</strong> i.e. if ground plain be <strong>Defult</strong> then change into <strong>Defult</strong> Layer.</p>
       </li>
+
       <li><p>See NPCVisionSensor.cs Script which attached with npcs i.e. zombie/Romero prefabs and change its <strong>Target Layer</strong> into <strong>Character</strong> Layer which is the Layer of Player.So NPCs can see the player by vision sensor.</p>
       </li>
       </ol>
+
       <ol>
       <li><p>Bake Navmesh with Humanoid Agent which should be in NavMeshAgent(Which attached to the Zombie Prefab).</p>
       </li>
@@ -258,16 +261,14 @@ <h2 id="documentation-">Documentation :</h2>
       <li><p>If you don&#39;t see the npcs then you need to add &#39;NPC&#39; layer into the culling mask section of FPSCamera which have attached to theplayer prefab</p>
       </li>
       </ol>
+
       <h2 id="zombie-sensor-sense-character-layer-for-this-npcsensorymemory-cs-script-">Zombie sensor sense <em>Character</em> Layer for this NPCSensoryMemory.cs Script.</h2>
       <p>Find <strong>&quot;NPCSensoryMemory.cs&quot;</strong> Script inside Scripts folder.</p>
-      <ul>
-      <li>Zombie_Ai<ul>
-      <li>Assets<ul>
-      <li>Zombie_ai<ul>
-      <li>Zombie_NPC<ul>
-      <li>Scripts<ul>
-      <li>NPCSensoryMemory.cs</li>
-      </ul>
+
+
+      <p> 
+        <li>Zombie_Ai/Assets/Zombie_ai/Zombie_NPC/ Scripts/NPCSensoryMemory.cs</li>
+      </p>
 
 
 
@@ -295,12 +296,16 @@ <h2 id="zombie-sensor-sense-character-layer-for-this-npcsensorymemory-cs-script-
         </pre>
     </div>
 
+
+
 
 
-      <p><img src="ScreenShots/set_sensor_layer.png" alt="Changing Target Layer" width="300" height="300"></p>
-      <ul>
-      <li>This Project has a Demo Scene with necessary setup.<h2 id="license-">License:</h2>
-      </li>
+      <div class="imageContainer">
+        <img src="ScreenShots/set_sensor_layer.png" alt="Changing Target Layer">
+        </div>
+
+      <li>This Project has a Demo Scene with necessary setup.<h2 id="license-">License:</h2></li>
+
       <li><a href="LICENSE.md">GNU GPL v-3.0 License</a>
       But you are requested to see the delendency assets licences.</li>
       </ul>
@@ -335,7 +340,7 @@ <h2 id="dependency">Dependency</h2>
       <h2 id="unity-version">Unity Version</h2>
       <p>Unity 2020.3.15f2 or higher version.</p>
       </li>
-      </ol>
+
       <h2 id="contact-">Contact:</h2>
       <p><img src="https://img.shields.io/badge/Gmail-baponkar%40gmail.com-red?logo=gmail" alt="Gmail">
       <a href="https://x.com/kar_bapon"><img src="https://img.shields.io/badge/X-%40baponkar-maker?logo=x&amp;logoColor=black&amp;labelColor=red&amp;color=black" alt="X"></a>

diff --git a/js/slide_show.js b/js/slide_show.js
@@ -1,5 +1,5 @@
 let currentIndex = 0;
-const images = document.querySelectorAll('#imageContainer img');
+const images = document.querySelectorAll('#anim-imageContainer img');
 const dots = document.querySelectorAll('.dot');
 const totalImages = images.length;