Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luis92guimaraes/pet-life-project
Projeto PetLife @onebitcode - Start na Programação
https://github.com/luis92guimaraes/pet-life-project
css css3 figma flexbox flexbox-css html html5 javascript
Last synced: 30 days ago
JSON representation
Projeto PetLife @onebitcode - Start na Programação
- Host: GitHub
- URL: https://github.com/luis92guimaraes/pet-life-project
- Owner: luis92guimaraes
- Created: 2023-10-15T02:52:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-15T21:38:35.000Z (over 1 year ago)
- Last Synced: 2024-11-15T00:35:40.172Z (3 months ago)
- Topics: css, css3, figma, flexbox, flexbox-css, html, html5, javascript
- Language: HTML
- Homepage: https://luis92guimaraes.github.io/pet-life-project/
- Size: 33 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Projeto PetLife - Start na Programação One bit Code
#### Este é o Projeto PetLife, projeto idealizado e realizado com a mentoria da @onebitcode no mini curso Start na Programação.
## Índice
- [Capturas de telas](#capturas-de-telas)
- [Links](#links)
- [Construído com](#construído-com)
- [O que aprendi](#o-que-aprendi)
- [Desenvolvimento contínuo](#desenvolvimento-contínuo)
- [Recursos úteis](#recursos-úteis)
- [Luis Fernando Guimaraes](#autor)
### Capturas de telas
#### Tela Desktop
#### Tela Ipad
#### Tela Mobile
### Links
- Site URL: https://luis92guimaraes.github.io/pet-life-project/
### Construído com
### O que aprendi
Esse projeto me ajudou a fixar meu conhecimento com algumas propriedades que já venho trabalhando em outros projetos, usando o flexbox e o uso da propriedade positione também aprendi um pouco sobre o Javascript que estará sendo meu proximo nível de estudo. Foi minha primeira landing page e estou contente com o resultado final.
## Trechos de códigos
```
header {
background-color: #ff9a6c;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 80px;
}
header nav a {
color: #FFFFFF;
font-weight: 600;
padding: 32px;
text-decoration: none;
}
#inicio {
display: flex;
align-items: center;
gap: 32px;
padding: 24px 80px 128px 80px;
position: relative;
}
h1,
h2 {
font-weight: 600;
font-size: 32px;
margin-bottom: 32px;
}
.paragrafo {
line-height: 150%;
margin-bottom: 32px;
}
.botao {
background-color: #FF725E;
color: #FFFFFF;
border-radius: 8px;
padding: 16px 32px;
text-decoration: none;
}
.botao-transparente {
background-color: transparent;
color: #FF725E;
padding: 16px 32px;
text-underline-offset: 4px;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: -10;
}
```
### Desenvolvimento contínuo
Pretendo continuar aprendendo cada vez mais sobre as ferramentas utilizadas nesse projeto, ainda tem muita coisa pra ser absorvida mas sigo confiante e feliz em estar conseguindo tornar meu conhecimento solido e poder realizar projetos como esse com mais clareza e confiança a cada dia de estudos.
### Recursos úteis
- [Mdn](https://developer.mozilla.org/en-US/) - O Mozilla Developer Network (MDN) desempenha um papel crucial ao fornecer recursos abrangentes e atualizados para desenvolvedores web em todo o mundo.
- [W3School](https://www.w3schools.com/css/default.asp) - Esse site sempre me ajuda a resolver qualquer problema relacionados a códigos de uma maneira fácil e muito rápida.
- [Dev em Dobro](https://www.youtube.com/@DevemDobro) - Este é um canal onde encontro muito material. Tem muito conteúdo relacionado ao desenvolvimento. Recomendo a todos que querem aprender sobre esse e outros conceitos relacionados.
- [One Bit Code](https://www.onebitcode.com) - Site de ensino tecnológico onde foi proposto o Projeto.
## Autor
[Luis Fernando Guimarães](https://www.linkedin.com/in/luisfguimaraes/)