nickcolumn / 1618-room-website

Website for my Self-education. Grids, Basic Animations, Responsive design.

1618 Room. Architecture Studio Website.

Self-education Part 2.

Goal

I've started this project just to understand how CSS Grid works and how to create something Responsive, but ended up creating this whole page.

As far as I have tested it - it's a fully responsive design that works and looks okay(ish) on every single device in my house.

The main goal here was to use Grid Layout EVERYWHERE and to teach myself some basic JS in the way.

This whole page was made only by using HTML, CSS and super basic JavaScript.

---

Responsive Design

iPhone 13 Mini

iPad Mini

---

Animations

(all GIFs are in 24fps due to limitations, it doesn't look that choppy irl I promise...)

Dropdown

Galleries

---

GRIDS!

So yeah, I said that I wanted to create everything here only by using grids and this is how it looks in the end..

Creating something like this with Grid turned out to be super convenient when I was making the site Responsive.

---

The design was made by Liza Maleeva https://www.behance.net/lizamaleeva

Thanks for watching!