<html>

<head>
	<title>ای پروژه</title>
	<link rel="icon" type="image/x-icon" href="/images/e-prj-ico.png" />
</head>
<style>
	.bar-B {
		background-color: chartreuse;
		border-radius: 10px;
		width: 70px;
		height: 30px;
		position: absolute;
		top: 1%;
		left: 50%;
		text-align: center;
		font-family: "iran";
		cursor: pointer;
	}

	@font-face {
		font-family: iran;
		src: url(/e-prj.ir/IRANSansWebFaNum.ttf);
	}

	body {
		background-color: rgb(60, 0, 255);
		background-size: cover;
		--background-image: radial-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);
	}

	.notif {
		margin: 0 auto;
		text-align: center;
	}

	.about {
		display: none;
		border-radius: 30px;
		background-color: azure;
		margin: 3px;
		width: 100%;
		height: 15%;
	}

	.hbox {
		border: 2px solid black;
		max-width: 300px;
		text-align: center;
		margin: 0 auto;
		border-radius: 7px;
		background: gray;
		color: white;
		font-family: tahoma;
		padding: 1em;
		box-shadow: 2px 2px 3px rgb(11, 230, 40);
		text-shadow: 2px 2px 3px blue;
	}

	hr {
		margin-right: 10%;
		margin-left: 10%;
		margin-top: 20px;
	}

	header {
		background-color: blueviolet;
		border-radius: 30px;
	}

	.IMG {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-top: 10PX;
		text-align: center;
		margin: 0 auto;
	}

	.IMG:hover {
		box-shadow: 2px 3px 6px;
		width: 120px;
		height: 120px;
	}
</style>

<body dir=rtl>
	<header>
		<img src="https://e-prj.ir/images/menuicon.webp" width="50px" height="50px">
		<input type="button" onclick="about()" class="bar-B" value="درباره ما"/>
		<h3 id="01" class="about">هدف ما ; موفقیت بچه ها🎆🎆
			شرکت e-prj قصد بیشتر شدن عشق بچه ها به برنامه نویسی را دارد <br>ما می خواهیم همه ی دانش آموزان از 7 سال تا
			18 سال به برنامه نویسی عشق پیدا کنند. برنامه بنویس در مسابقه شرکت کن
		</h3>
         <img src="https://e-prj.ir/images/e-prj-ico.png" width="50px" height="25px" style="top: 20 ; position: absolute; left: 30; border-radius: 30px;">
	</header>
		<div class="notif">
			<img title="مسابقات برنامه نویسی توربو وارپ" class="IMG" src="https://e-prj.ir/images/TW.png">
			<img title="مسابقات برنامه نویسی جاوا اسکیریپت" class="IMG" src="https://e-prj.ir/images/js.jpg">
			<img title="مسابقات برنامه نویسی html" class="IMG" src="https://e-prj.ir/images/html.jpg">
			<img title="مسابقات برنامه نویسی css" class="IMG" src="https://e-prj.ir/images/css.png">
		</div>
		<div class="notif">
		<hr>
		<strong>E-prj.ir - www.E-Prj.ir</strong>
	</div>
</body>
<script>

	function about() {
		let elem = document.getElementById("01");
		if (elem.style.display === "none") {
			elem.style.display = "block";
		}
		else {
			elem.style.display = "none";
		}
	}
</script>

</html>