<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>seal</title>
<style> 

		body {background-color: grey; color: black; 

			text-align: center

		}

		img {width:300px; height: 200px; border: solid black 5px;


		}

		#button{

			font-size: 30px; color: cadetblue; background-color: azure; border: solid #242441 5px ; width: 150px ; margin-left: auto ; margin-right: auto	

		}

		#button:hover {background-color: beige;

		color: blueviolet; }

		span {font-size: 50px ;}
   </style>
       <script> 

		var num =0;

		var pics = ["Dingo 6.png ",
                  "Dingo 5.png",
                  "Dingo 1.png",
                  "Dingo 2.png ",
                    "Yo mato 7.png",
                 "Dingo 3.png", 
                   "Dingo 4.png "


		]; 

		var caps =[ "this is a baby seal ",

				   "this is my favorite animal",

				   " this is my project about mabel",

				   "this is mabel"


		];

	function test() {

		//alert ("hello");

		//alert("how are you");

		document.body.style.backgroundColor = "black";

		document.body.style.color = "white";

	}

	function next (){ var i = document.getElementById("pic");

					 num++;

					 if (num >=pics.length) 

						 num = 0;

					 i.src =pics[num];

					var t = document.getElementById("text");

					t.innerHTML = caps[num];


					}


		function prev() { var i = document.getElementById("pic"); 

	 i.src = "nose.webp";

	num--;if (num<0)

		num=pics.length - 1;

		i.src=pics[num]	;			 

	var t = document.getElementById("text");

					t.innerHTML = caps[num];

	}
</script>
</head>
 
<body>
<p id="text" > bebebbebebebebebebebeebe</p>
<img id="pic" src="angela- computer/nose/nose.webp" alt=""/>
<br>
<p id="button" onClick="test();"> change </p>
<span onClick="prev();">⬅️</span>
<span onClick="next ();">➡️</span>
</body>
</html>

