Challange
What’s your passion?
This was my first project for the Webdevelopment Course in ETIC School in Lisbon. The goal was to create a website about a passion, using what I had learned of Javascript, HTML and CSS in three months of classes. As I had recently moved to Portugal, I was in love with the beautiful tiles of the Lisbon buildings and houses.
Inspiration
Lisbon Tiles
My idea was to mix tradition and modernity, creating a website that was all about an ancient Portuguese technique but also followed some of the latest trends in Web Design.
Community
Sharing ideas
One thing I love about the developer community is the collaborative spirit. Many times I used Open Source projects to enhance my layouts and this was my turn to give something back to the world.
Context
Research
While searching what has been done online about tiles I could found mainly 3 kinds of websites
Solution
Lisbon Tiles Playground
A free collection of repeatable SVG background patterns based on amazing Lisbon tiles and their cool history
Tiles Editor
Playground Tool
Using this tool, you can create your own Lisbon Tiles background, with customized colors and proportions. The tool run JavaScript to manipulate fill colors, background, and size of each tile.
Generated CSS
After editing your tiles background you can generate a code or download the svg
Usage
The code copied by the user can be inserted in any website
History Pages
About each Tile
All the tiles patterns are attached to a page telling their history and where they can be found in the city of Lisbon. This way, users can find their pattern in the real world.
Contribution Page
Submit your Tile
Anyone can share a Lisbon Tile SVG with the public, by submitting it to Lisbon Tiles Playground.
