LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

FIBONACCI GRID

This could be a great musical interface. Like the Push or the Monome.
Brought to you in less than 10 minutes by justGoscha!
CSS
body {
  background-color: #3A2543;
}
h1 {
  color: #f4ecda;
  margin: 30px 0;
  text-align: center;
  display: block;
  font-size: 2.8em;
  font-weight: 200;
  letter-spacing: 0.2em;
}
#container {
  font-size: 0;
  width: 900px;
  margin: auto;
  margin-bottom: 50px;
}
.item {
  background-color: #fff;
  width: 50px;
  height: 50px;
  margin: 5px;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.42, 0, 0, 1.35);
}
.item:hover {
  z-index: 1;
  transform: scale(3) rotate(135deg);
  box-shadow: 2px 0px 10px rgba(5, 0, 30, 0.7);
}
.item:nth-child(1n) {
  background-color: #414073;
}
.item:nth-child(2n) {
  background-color: #41658A;
}
.item:nth-child(3n) {
  background-color: #70A37F;
}
.item:nth-child(5n) {
  background-color: #79B473;
}
.item:nth-child(8n) {
  background-color: #924f8a;
}
.item:nth-child(13n) {
  background-color: #c2ff3a;
}
.item:nth-child(21n) {
  background-color: #f27f54;
}
.bla {
  width: 400px;
  margin: 0 auto 40px;
  color: #fff;
  opacity: 0.3;
  transition: opacity 0.2s ease-in-out;
}
.bla:hover {
  opacity: .6;
}
a {
  color: #79B473;
  font-weight: bold;
}
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 21:40

Related Codes

Pen ID
Pen ID
Pen ID