├── CodePark-06 └── src │ ├── script.js │ ├── img │ ├── back-end.png │ ├── formato-html.png │ └── script-java.png │ ├── index.html │ └── style.css └── README.md /CodePark-06/src/script.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /CodePark-06/src/img/back-end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/profRobsonPMartins/CodePark-06/HEAD/CodePark-06/src/img/back-end.png -------------------------------------------------------------------------------- /CodePark-06/src/img/formato-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/profRobsonPMartins/CodePark-06/HEAD/CodePark-06/src/img/formato-html.png -------------------------------------------------------------------------------- /CodePark-06/src/img/script-java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/profRobsonPMartins/CodePark-06/HEAD/CodePark-06/src/img/script-java.png -------------------------------------------------------------------------------- /CodePark-06/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Serviços de Desenvolvimento Web 8 | 9 | 10 | 11 |
12 |
13 |
14 | HTML Icon 15 |

Desenvolvimento HTML/CSS

16 |

Construção de websites responsivos com as mais recentes tecnologias HTML e CSS.

17 |
18 | 19 |
20 | JavaScript Icon 21 |

Desenvolvimento JavaScript

22 |

Criação de interatividade dinâmica e funcionalidades avançadas usando JavaScript moderno.

23 |
24 | 25 |
26 | Backend Development Icon 27 |

Desenvolvimento Backend

28 |

Implementação de servidores robustos e lógica de negócios eficiente utilizando diversas tecnologias backend.

29 |
30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /CodePark-06/src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Arial, sans-serif; 5 | } 6 | main{ 7 | border: 2px solid blue; 8 | } 9 | .flex-container { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 400px; 14 | background-color: #f0f0f0; 15 | } 16 | .flex-item{ 17 | height: 60%; 18 | border: 2px solid rgb(0, 68, 255); 19 | border-radius: 10px; 20 | text-align: center; 21 | margin: 1px; 22 | cursor: pointer; 23 | } 24 | .flex-item:hover{ 25 | transform: translateY(-10px); /* Novo: Efeito de levantamento ao passar o mouse */ 26 | } 27 | .flex-item img{ 28 | max-height: 40px; 29 | padding: 5px; 30 | } 31 | .flex-item h3{ 32 | color: blue; 33 | padding: 1px; 34 | } 35 | .flex-item p{ 36 | padding: 1px; 37 | } 38 | 39 | @media (max-width: 768px) { 40 | /* Alteração: Estilos específicos para telas maiores que 768 pixels */ 41 | .flex-container { 42 | flex-direction: row; /* Voltar para a orientação de linha */ 43 | height: 400px; 44 | } 45 | 46 | .flex-item { 47 | width: 30%; /* Reduzir a largura para dispositivos maiores */ 48 | height: 60%; 49 | } 50 | .flex-item h3{ 51 | font-size: 85%; 52 | padding: 1px; 53 | } 54 | .flex-item p{ 55 | font-size: 75%; 56 | padding: 1px; 57 | } 58 | 59 | } 60 | 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CodePark-06 - Meus cards de serviços com flexbox 🚀 2 | 3 | **TURMA 2ºB - E.E YOLLANDA ARAUJO SILVA PAIVA - 2023 - E.M** 4 | 5 | Bem-vindo ao repositório CodePark-06, onde você encontrará os arquivos do meu portfólio. 6 | 7 | ## Sobre o Projeto 8 | 9 | Este projeto foi desenvolvido para demonstrar as habilidades e experiências que acumulei ao longo do tempo. Nele, apliquei o modelo Flexbox, explorando a flexibilidade e organização dos elementos na interface. 10 | 11 | ## Como Visualizar 🖥️ 12 | 13 | Para visualizar o resultado, basta abrir o arquivo `index.html` em um navegador web. 14 | 15 | ## Implementação do Flexbox 🎨 16 | 17 | O modelo Flexbox foi utilizado em determinados elementos para proporcionar movimentações flexíveis e uma organização eficiente. Isso resulta em uma experiência de usuário mais agradável e adaptável. 18 | 19 | Exemplo didático de código em CSS utilizando Flexbox: 20 | 21 | ```css 22 | .flex-container { 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | height: 400px; 27 | background-color: #f0f0f0; 28 | } 29 | ``` 30 | 31 | ## Contribuições 🤝 32 | 33 | Este é um projeto em constante evolução. Sua contribuição é bem-vinda! Sinta-se à vontade para sugerir melhorias, reportar problemas ou adicionar novos recursos. Para isso, crie um fork deste repositório, faça suas alterações e envie um pull request para análise. 34 | 35 | Agradeço por explorar meu portfólio! Se tiver alguma dúvida ou feedback, fique à vontade para entrar em contato. 36 | 37 | Happy coding! 🚀✨ 38 | --------------------------------------------------------------------------------