https://github.com/traveltimn/bauhaus100

Bauhaus 100th Anniversary image as code
https://github.com/traveltimn/bauhaus100

bauhaus bauhaus100 css css-grid

Last synced: 20 days ago
JSON representation

Bauhaus 100th Anniversary image as code

• Host: GitHub
• URL: https://github.com/traveltimn/bauhaus100
• Owner: TravelTimN
• Created: 2019-08-16T21:55:29.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2020-12-10T15:50:03.000Z (over 5 years ago)
• Last Synced: 2025-10-08T20:53:59.037Z (8 months ago)
• Topics: bauhaus, bauhaus100, css, css-grid
• Language: HTML
• Homepage: https://traveltimn.github.io/bauhaus100
• Size: 700 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
10DEC2020 - Update branch from `master` to `main`.

---

# [100 Years of Bauhaus](https://traveltimn.github.io/bauhaus100/)

From 2002-2003, I studied in [Dessau, Germany](https://goo.gl/maps/1QHpVWvN3wF97kKU8) as an international exchange student. I received a full congressional scholarship through [CBYX](https://exchanges.state.gov/us/program/congress-bundestag-youth-exchange) funded by the US Congress and German Parliament.

Dessau is home to the [Bauhaus](https://en.wikipedia.org/wiki/Bauhaus), which celebrated it's 100th anniversary in 2019. An [article](https://uxdesign.cc/bauhaus-100-years-of-a-great-school-d6736a725d2d) I read online had a cool graphic that I liked, and therefore decided to test my CSS skills by building that same photo using just HTML+CSS.

# Original Photo:

![Bauhaus100](bauhaus-original.png?raw=true "Bauhaus100")

# My CSS:

![Bauhaus100](bauhaus-tim.png?raw=true "Bauhaus100")

## A gif of the original version and my CSS version together:

(it's not 100% perfect, but I made it interactive as well!)

![Bauhaus100](bauhaus100.gif?raw=true "Bauhaus100")

## Check out my [live/interactive](https://traveltimn.github.io/bauhaus100/) version! I designed the entire page with CSS Grid.