---
# System prepended metadata

title: '*2022/03/31 Lesson04_HW*'
tags: [資訊系統實驗]

---

###### tags: `資訊系統實驗`
# *2022/03/31 Lesson04_HW*
```
<!doctype html>
<html>
<head>
        <style>
			.head{
				display: flex;
				align-items: center;
			}
			
			.logo{
				width: 30%;
			}
			#nav{
				font-size: 20px;
				font-family: monospace;
				width: 70%;
			}
            .site{
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-auto-rows: 220px;
                grid-gap: 5px;
            }
            .orange{
                background-color: bisque;
            }
            .red{
                display: grid;
                grid-row: span 2;
                background-color: crimson;
            }
            .green{
                display: grid;
                grid-column: span 2;
                grid-row: span 2;
                background-color: lightgreen;
            }
        </style>
    </head>

<body>
        <div class="head">
            <div class="logo">
                <img src="TKU.png" alt="TKU" style="width: 70px;height: 70px;">
           	</div>
            <nav id="nav">
                <a href="#">Function 1</a>
                <a href="#">Function 2</a>
                <a href="#">Function 3</a>
                <a href="#">Function 4</a>
            </nav>
		
        </div>
	
        <div class="site">
            <div class="orange"></div>
            <div class="green"></div>
            <div class="orange"></div>
            <div class="red"></div>
            <div class="orange"></div>
            <div class="orange"></div>
            <div class="orange"></div>
            <div class="red"></div>
            <div class="green"></div>
            <div class="orange"></div>
            <div class="orange"></div>
            <div class="green"></div>
            <div class="orange"></div>
        </div>
    </body>
</html>

```