I’m excited to share my latest project! artifakt’s very own website redesign!

As far as content goes this has been the most straightforward project so far but because of we were able to have a little more fun with the design. With even a fun 404 page. Like all of our clients going forward we used Bootstrap and FontAwesome including a little jQuery here and there.

We had some fun with CSS3 animations as well, here is a small bit of code we used to make the “get a quote” button shake:


.animateMe {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.animateMe.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}

@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}

10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}

20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}

@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}

10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}

20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
}

.shake {
-webkit-animation-name: shake;
animation-name: shake;
}

This block of code was found on this handy site which has a wide range of CSS animation examples to use.

Check out our latest project, our very own website relaunch at www.artifakt.ca