Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

This page was made as a challenge to DevChallenge, and it was made with html5, CSS3, JavaScript and an advice API.

NotificationsYou must be signed in to change notification settings

isaccunha/wise-goat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Logo

WiseGoat byLorena


Site gerador de conselhos e imagens de bodes :)

Desafio ·DevChallenge

Índice

Devchallenge

DevChallenge permite que você evolua suas skills como programador! Participe da nossacomunidade o/

Desafio

Seu desafio é consumir os dados de duas API's e criar um site gerador de conselhos e de imagens de bodes! O modelo final está disponível na pasta "design"

Requisitos:

  • Sua página inicial deverá conter um botão "Pedir conselho", que irá redirecionar para a segunda página.
  • A segunda página deverá contar uma frase e uma imagem de um bode
  • A frase poderá ser gerada com a APIAdvice Slip. Para utilizá-la faça uma requisição GET para a URL "https://api.adviceslip.com/advice"
  • A imagem de bode poderá ser gerada utilizando a APIPlaceGoat. Para utilizá-la, basta adicionar o link "http://placegoat.com/width/height" na src da sua imagem. No lugar de width informe a largura desejada e no lugar de height informe a altura desejada.
    Exemplo:<img src="http://placegoat.com/200/200" alt="Bodezinho">

Desafio extra:

  • Você pode aplicar uma animação no bode da página inicial, para dar o efeito que ele está flutuando

Techs:

  • HTML
  • CSS
  • Livre escolha :)

Como começar:

1 - Use esse template (clicando em Use this template) ou faça um fork deste repositório com o código inicial
2 - Leia as instruções no readme.md
3 - Comece a codar! Sinta-se livre para utilizar o fluxo de trabalho que ache mais confortável
4 - Compartilhe seu resultado com a comunidade! #devchallenge

Dicas

Cores:

Roxo: #72005F
Bege: #BAA193

Modelo:

O modelo final desktop está disponível na pasta./design

Tipo de fonte:

  • Roboto

Compartilhe!

Inicie seu projeto utilizando esse template no seu github como um repositório público
Faça um print, gif ou vídeo e compartilhe o resultado com a #devchallenge!

Desafio criado porLorena :)

Comunidade DevChallenge

Site:https://www.devchallenge.com.br/

Discord

Linkedin

Twitter

Instagram

About

This page was made as a challenge to DevChallenge, and it was made with html5, CSS3, JavaScript and an advice API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

[8]ページ先頭

©2009-2025 Movatter.jp