03192019/index.html

<!DOCTYPE html>
<html>
	<head>

		<!-- this is for "meta" content,
			 info ABOUT the page vs info *IN* the page -->
		<title>🐱🐱 Layla Karim</title>
		<!-- more info about og tags: http://ogp.me/ -->
		<meta property="og:title" content="The Amazing Layla Karim!" />
		<meta property="og:image" content="https://raw.githubusercontent.com/FEWDMaterials/IntroToCoding/master/assets/LaylaKarim1.JPG" />
		<meta property="og:description" content="Layla Karim is a great cat. Fight me." />

		<style>
			body {
				text-align: center;
			}
			nav {
				text-align: center;
			}
			a {
				color: white;
				background-color: black;
				text-decoration: none;
				padding: 20px;
				display: inline-block;
				border-radius: 5px;
				font-family: Helvetica, sans-serif;
				font-size: 14px;
				text-transform: uppercase;
				transition: color 0.5s, background-color 0.5s;
			}

			a:hover {
				color: black;
				background-color: white;
			}

			img {
				transform: rotate(90deg);
				margin-top: 50px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<nav>
			<a href="https://www.nytimes.com/section/science" target="_blank">About</a>
			<a href="https://www.giphy.com" target="_blank">Contact</a>
		</nav>
		<!-- LOL this is a comment -->
		<!-- comments are ignored by the browser -->
		<!-- also, comments
				are
					multilined
						yo -->

		<!-- https://www.w3schools.com/tags/ -->
		<!-- everything in the body tag is meant to be
			 content that the user can see / interact with -->
		<h1>All about my cat</h1>
		<h2>Layla Karim</h2>
		<img src="https://raw.githubusercontent.com/FEWDMaterials/IntroToCoding/master/assets/LaylaKarim2.JPG" width="300px">
		<img src="https://raw.githubusercontent.com/FEWDMaterials/IntroToCoding/master/assets/LaylaKarim1.JPG" width="300px">
	</body>
</html>