home.html

<!-- TEST COMMENT VERSION 1-->

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta name="chinese tutoring website" content="chinese mandarin taiwanese tutor tutoring teacher teaching learning class classes san&nbsp;diego sd">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet"
		  href="https://fonts.googleapis.com/css?family=Sansita+Swashed">
		<link rel="stylesheet" type="text/css" href="CSS/style.css">
		<title>Nancy Shi - Chinese/Mandarin Teacher</title>
	</head>


	<body>
		<div>
			<nav class = "navbar">
				<div class = "brand-title">SD Chinese Teacher</div>
				<a href="#" class="toggle-button">
					<span class="bar"></span>
					<span class="bar"></span>
					<span class="bar"></span>
				</a>
				<div class = "navbar-links">
					<ul>
						<li><a href="home.html">Home</a></li>
						<li><a href="about.html">About</a></li>
						<li><a href="services.html">Services</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div>
		</div>

		

<!--video background-->	

		<div class="video-container">
			<video muted autoplay loop width="1280" height="720"> <source src="video.mp4" type="video/mp4">
			</video>
			<div class="layer-for-home"></div>
		</div>

<!-- Content overlay on video bg -->
		
		<div class="overlay">
			<!-- <h2>Nancy Shi</h2> -->
			<h1>Hello and Welcome! </h1>
			<p>You've come to the right place to learn Chinese. Click "About" to begin.</p>
		</div>
		<div class="button-container">
			<div class="landing-buttons">
				<button class="button"><a href="about.html">About</a></button>
				<button class="button"><a href="services.html">Services</a></button>
				<button class="button"><a href="contact.html">Contact</a></button>
			</div>
		</div>
		<div class="foot-container">
			<footer class="footer">&copy; 2021 Nancy Shi</footer>
		</div>

<script type="text/javascript" src="JS/script.js"></script>

</body>

</html>