https://github.com/devmagno/brafe

☕ Site de uma cafeteria para estudo de diferentes técnicas de layout com CSS3.
https://github.com/devmagno/brafe

adobe-brackets bootstrap4 css3 css3-flexbox css3-media-queries devmagno

Last synced: 2 months ago
JSON representation

☕ Site de uma cafeteria para estudo de diferentes técnicas de layout com CSS3.

• Host: GitHub
• URL: https://github.com/devmagno/brafe
• Owner: devMagno
• License: mit
• Created: 2020-10-10T18:04:45.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2020-10-28T21:50:54.000Z (over 4 years ago)
• Last Synced: 2025-01-07T15:24:35.948Z (4 months ago)
• Topics: adobe-brackets, bootstrap4, css3, css3-flexbox, css3-media-queries, devmagno
• Language: CSS
• Homepage: https://devmagno.github.io/brafe/brafe-1/brafe-1-flexbox/
• Size: 557 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Brafé ☕







## 📖 Sobre   

O 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**: 

1. Com CSS "puro", definindo widths e utilizando float;

2. Utilizando um sistema de Grid de 12 colunas feito com CSS;

3. Utilizando a propriedade Flexbox do CSS;

4. Utilizando o framework [Bootstrap 4](https://getbootstrap.com/).   

Tudo isso com o intuito de aprender as **diferentes técnicas de layout com CSS3**.

---

## 🚀 Tecnologias e ferramentas utilizadas

- **HTML5**

- **CSS3**

- **Bootstrap 4**

- **[Brackets](http://brackets.io/)**

---

## 🖥️ Demonstração

[![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")

[![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")

[![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")

---

## 🔧 Como executar o projeto

Nã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:

```bash

# Clone o repositório

git clone https://github.com/devMagno/brafe

# Entre no diretório

cd brafe

```

Depois 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.

---

## 📝 Licença

O projeto está sob a licença MIT. Para saber mais, acesse o arquivo [LICENSE](https://github.com/devMagno/brafe/blob/main/LICENSE).

---

**Desenvolvido com 🤍 por [Guilherme Magno](https://github.com/devmagno/).**