# 【100sites #008】Showcase, a single-page website design to showcase my portfolio
- Canonical: https://easonchang.com/posts/100sites-008-showcase
- Date: 2016-03-20T18:42:00.000Z
- Language: en
- Translation: AI-assisted, from the zh-TW original
# Showcase, a single-page website design to show off my practice portfolio
> One-sentence summary: My first single-page website
[Try the Showcase live demo](http://kamigami55.github.io/100sites/008_Showcase/)
[Check out the Showcase code on Github](https://github.com/eason-dev/100sites/tree/gh-pages/008_Showcase)
I've always wanted to learn how to design single-page websites, so that's today's 100sites topic!
I found a pretty good tutorial, [PJCHENder's jQuery study notes, lesson 8 part 1](http://pjchender.blogspot.tw/2015/04/jquery_19.html) and [part 2](http://pjchender.blogspot.tw/2015/04/jquery-2mousewheel.html), which walks you through building a simple single-page website step by step.
So I followed the tutorial one step at a time. Once it was done, I swapped in my own images and added some text, links, and an overlay — and that became today's result, Showcase!
Besides the single-page design itself, the special parts of Showcase are the frosted glass and dark overlay effects, both done with CSS.
The frosted glass effect (adjust the px value to get however much blur you want):
```css
-moz-filter: blur(4px);
-webkit-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
```
The dark overlay is a div with the class cover, using background-color and opacity to get the effect:
```css
.cover {
height: 100vh;
width: 100vw;
position: fixed;
top: 0px;
background-color: #333;
opacity: 0.6;
z-index: 1;
}
```
The full code is below:
```html index.html
Showcase