{"id":19411842,"url":"https://github.com/devmagno/brafe","last_synced_at":"2026-05-16T04:43:00.219Z","repository":{"id":191296757,"uuid":"302961352","full_name":"devMagno/brafe","owner":"devMagno","description":"☕ Site de uma cafeteria para estudo de diferentes técnicas de layout com CSS3.","archived":false,"fork":false,"pushed_at":"2020-10-28T21:50:54.000Z","size":570,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-07T15:24:35.948Z","etag":null,"topics":["adobe-brackets","bootstrap4","css3","css3-flexbox","css3-media-queries","devmagno"],"latest_commit_sha":null,"homepage":"https://devmagno.github.io/brafe/brafe-1/brafe-1-flexbox/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devMagno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-10-10T18:04:45.000Z","updated_at":"2021-07-15T18:40:40.000Z","dependencies_parsed_at":"2023-08-29T08:00:11.540Z","dependency_job_id":null,"html_url":"https://github.com/devMagno/brafe","commit_stats":null,"previous_names":["devmagno/brafe"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devMagno%2Fbrafe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devMagno%2Fbrafe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devMagno%2Fbrafe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devMagno%2Fbrafe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devMagno","download_url":"https://codeload.github.com/devMagno/brafe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240589131,"owners_count":19825303,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe-brackets","bootstrap4","css3","css3-flexbox","css3-media-queries","devmagno"],"created_at":"2024-11-10T12:23:26.359Z","updated_at":"2026-05-16T04:42:55.199Z","avatar_url":"https://github.com/devMagno.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Brafé ☕\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://i.imgur.com/z4YhTm8.png\" alt=\"Brafé\" title=\"Brafé\"\u003e\n\u003c/p\u003e\n\n## 📖 Sobre   \nO projeto **Brafé** foi desenvolvido durante o curso de **CSS Avançado Posicionamento** da **[Origamid](https://www.origamid.com/)**. Foram desenvolvidas **três páginas** diferentes, cada uma delas de **quatro formas diferentes**: \n1. Com CSS \"puro\", definindo widths e utilizando float;\n2. Utilizando um sistema de Grid de 12 colunas feito com CSS;\n3. Utilizando a propriedade Flexbox do CSS;\n4. Utilizando o framework [Bootstrap 4](https://getbootstrap.com/).   \n\nTudo isso com o intuito de aprender as **diferentes técnicas de layout com CSS3**.\n\n---\n\n## 🚀 Tecnologias e ferramentas utilizadas\n- **HTML5**\n- **CSS3**\n- **Bootstrap 4**\n- **[Brackets](http://brackets.io/)**\n\n\n---\n\n## 🖥️ Demonstração\n[![Brafé 1](https://i.imgur.com/6Myddo9.png \"Clique para acessar o Brafé 1\")](https://devmagno.github.io/brafe/brafe-1/brafe-1-puro/index.html \"Clique para acessar o Brafé 1\")\n[![Brafé 2](https://i.imgur.com/cPNaagc.png \"Clique para acessar o Brafé 2\")](https://devmagno.github.io/brafe/brafe-2/brafe-2-flexbox/index.html \"Clique para acessar o Brafé 2\")\n[![Brafé 3](https://i.imgur.com/UDoYUOR.png \"Clique para acessar o Brafé 3\")](https://devmagno.github.io/brafe/brafe-3/brafe-3-flexbox/index.html \"Clique para acessar o Brafé 3\")\n\n\n---\n\n## 🔧 Como executar o projeto\nNão há necessidade de executar o projeto, você pode visualizá-lo clicando nos links a seguir: [Brafé 1](https://devmagno.github.io/brafe/brafe-1/brafe-1-puro/index.html), [Brafé 2](https://devmagno.github.io/brafe/brafe-2/brafe-2-flexbox/index.html) e [Brafé 3](https://devmagno.github.io/brafe/brafe-3/brafe-3-flexbox/index.html), mas se ainda quiser fazê-lo, siga as instruções abaixo:\n```bash\n# Clone o repositório\ngit clone https://github.com/devMagno/brafe\n\n# Entre no diretório\ncd brafe\n```\nDepois disso, utilize uma ferramenta como o [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) do Visual Studio Code para criar um servidor local e executar o projeto.\n\n---\n\n## 📝 Licença\n\nO projeto está sob a licença MIT. Para saber mais, acesse o arquivo [LICENSE](https://github.com/devMagno/brafe/blob/main/LICENSE).\n\n---\n**Desenvolvido com 🤍 por [Guilherme Magno](https://github.com/devmagno/).**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmagno%2Fbrafe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevmagno%2Fbrafe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmagno%2Fbrafe/lists"}