Lecture10/index.html

<!DOCTYPE html>
<html>

<head>
	<title>CSS: pseudo-classes and pseudo-elements</title>
	<link rel="stylesheet" href="style.css" />
</head>

<body>
	<header>
		<h1>pseudo-classes and pseudo-elements</h1>
	</header>
	<main>
		<div id="first" class="mydiv" title="Lorem ipsum">
			Lorem ipsum dolor <span>sit amet</span> consectetur adipisicing elit. Necessitatibus, quas. Iure illo
			reprehenderit nisi deleniti eius in laboriosam, a quo nulla velit est libero! Ea aspernatur blanditiis
			obcaecati neque <a href="https://google.com">necessitatibus</a>.
		</div>
		<div class="mydiv">
			<a title="Anybody can Dance">ABCD</a>
			<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem sunt fugiat assumenda quaerat a vel
				pariatur, ad molestiae distinctio in iure, dicta accusantium cupiditate veniam perspiciatis officia
				recusandae! Iusto, distinctio.
			</p>
			<p>
				<a href="#hello" title="Lorem ipsum dolor">Lorem</a>, ipsum dolor sit amet consectetur adipisicing elit.
				Unde tempora laudantium
				aspernatur voluptatum,
				dolor nostrum nam atque, omnis velit nemo sequi at eos. Ex veniam alias molestiae asperiores eveniet
				mollitia!
			</p>
			<button>Click me!</button>
		</div>
		<div id="hello">
			<p>
				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quo incidunt facilis blanditiis dolorum,
				voluptate vel, beatae nobis vitae possimus debitis dicta autem iste quasi et nam eaque hic repudiandae
				veniam?
			</p>
			Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas a, magnam perspiciatis hic voluptatum
			ratione tempora possimus adipisci consequatur, quod perferendis recusandae quaerat consequuntur, pariatur
			consectetur sint! Eius, labore omnis.
			<ol>
				<li><a href="https://vibinex.com">black</a></li>
				<li>white</li>
				<li>red</li>
				<li><a href="https://youtube.com">yellow</a></li>
				<li><a href="https://wikipedia.org">blue</a></li>
				<li>green</li>
				<li>orange</li>
				<li>indigo</li>
				<li>purple</li>
				<li>violet</li>
				<li>cyan</li>
				<li>aqua</li>
			</ol>
		</div>
	</main>
</body>

</html>