<!DOCTYPE html>

<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="description" content="CSE 134B HW3" />
	<meta name="keywords" content="HTML" />
	<meta name="author" content="Zhuoyu Tan" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Zhouyu Tan's Profolio </title>
	<style >
		* {
  		box-sizing: border-box;
		}

		body {
		  font-family: Arial, Helvetica, sans-serif;
		}

		header {
			grid-area: hearder;
		  background-color: #f1f1f1;
		  padding: 20px;
		  text-align: center;
			height: 15vh;
		}

		#nav {
			grid-area: nav;
		  overflow: hidden;
		  background-color: #333;
			height: 5vh;
		}

		/* Style the topnav links */
		#nav a {
		  float: left;
		  display: block;
		  color: #f2f2f2;
		  text-align: center;
		  padding: 14px 16px;
		  text-decoration: none;
		}

		/* Change color on hover */
		#nav a:hover {
		  background-color: #ddd;
		  color: black;
		}

		#nav form {
		  float: right;
		  display: block;
		  color: #f2f2f2;
		  text-align: center;
		  padding: 14px 16px;
		  text-decoration: none;
		}

		#left,
		#middle,
		#right {
		  height: 80vh; /* Should be removed. Only for demonstration */
		}
		#main {
			display: grid;
		  grid-template-areas:
		    'nav nav nav nav nav nav nav'
				'left middle middle middle middle right right';
		}
		/* Style the left column */
		#left {
		  grid-area: left;
		}

		/* Style the middle column */
		#middle {
		  grid-area: middle;
		}

		/* Style the right column */
		#right {
		  grid-area: right;
		}

		.fakeimg {
		  background-color: #aaa;
		  width: 100%;
		  padding: 20px;
		}




	</style>
</head>
<body id = "body">
	<header id = "body">
		<h1>Zhouyu Tan's Profolio</h1>
    <p>July 20 2021</p>
	</header>


  <main id = "main">

	    <nav id = "nav" >
				<a href="/AcademicRecord/">Academic Record </a>
				<a href="/General/">General </a>
				<a href="/ChatWithMe/">Chat With Me</a>
	      <form style = "float:right">
			      <input type="text" placeholder="Search me.." name="search">
	      </form>
			</nav>

			<section id = "left" class = "column" style="background-color:#aaa;">



				<picture style = "height:80vh;">
				  <source media="(min-width:650px)" srcset="selfie650.webp">
				  <source media="(min-width:465px)" srcset="selfie465.webp">
				  <img src="snowMan.webp" alt="snowMan" style="">
				</picture>

			</section>

			<section id = "middle" class = "column" style="background-color:#bbb;">
					<div id = demographics class="text-info">
						<h2>DEMOGRAPHICS</h2>
						<p>Age: 25</p>
						<p>Location: San Francisco</p>
						<p>Education: Computer Science</p>
						<p>Family: live with my parents</p>
					</div>

					<div id = goals class="text-info">
						<h2>GOALS</h2>
						<ul>
							<li>Learn some new sports</li>
							<li>Become a full-stack developer</li>
							<li>Improve communication skill</li>
						</ul>
					</div>

					<div id = frustrations class="text-info">
						<h2>FRUSTRATIONS</h2>
						<ul>
							<li>Cant find study-life balance</li>
							<li>Not having enough money</li>
							<li>unsure about the future</li>
						</ul>
					</div>


			</section>

			<section id = "right" class = "column" style="background-color:#ccc;">
				<div id = "about-me" class="card">
				      <h2>About Me</h2>
				      <p>culpa qui officia deserunt mollit anim..</p>
				    </div>
				    <div class="card">
				      <h3>Popular Post</h3>
				      <div class="fakeimg"><p>Image</p></div>
				      <div class="fakeimg"><p>Image</p></div>
				      <div class="fakeimg"><p>Image</p></div>
				    </div>
				    <div class="card">
				      <h3>Follow Me</h3>
				      <p>Ins: _georgetan</p>
				    </div>
			</section>



  </main>
  <footer id = "footer">

  </footer>
by