禪意花園是一款基于CSS的網頁設計案例，讓用戶更能感受到大自然之美，給人一種寧靜的感覺。

禪意花園的設計靈感來自于同名的日式花園禪意花園，以其極簡、自然、任意、深邃的品格，構筑了一個安靜而美好的空間。

/*禪意花園 CSS代碼 */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
min-height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #b2dfdb, #f0f4c3);
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px;
background: #4caf50;
}
.menu {
display: flex;
align-items: center;
}
.menu li {
margin-right: 20px;
list-style: none;
font-size: 18px;
}
.menu li a {
text-decoration: none;
color: #fff;
transition: .3s all;
}
.menu li a:hover {
color: #76ff03;
}
h1 {
margin: 0 0 30px;
font-size: 60px;
text-align: center;
color: #fff;
text-shadow: 1px 1px #000;
}
.copy {
text-align: center;
color: #fff;
margin-bottom: 40px;
}
.copy a {
text-decoration: none;
color: #fff;
transition: .3s all;
}
.copy a:hover {
color: #76ff03;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.gallery img {
width: 300px;
height: 300px;
margin-bottom: 40px;
transition: .3s all;
}
.gallery img:hover {
transform: scale(1.1);
}
.footer {
width: 100%;
padding: 20px;
color: #fff;
text-align: center;
background: #424242;
}

禪意花園通過設置漸變色的背景色，加上一個寬高百分百的容器，實現了自適應的效果。同時，利用Flex布局，實現各個元素的自適應和對齊。

頭部和尾部的樣式設置使得頁面更加豐富，整個頁面的設計也非常美觀，符合大自然的美學。

禪意花園CSS案例的設計風格非常適合展現一些美好的情景，使得網頁風格更加溫馨、安靜，給人們帶來舒適的感受。