https://github.com/brunohnsouza/nlw-spacetime

Cápsula do tempo construida na NLW Spacetime da Rocketseat
https://github.com/brunohnsouza/nlw-spacetime

css figma hmtl javascript nlw rocketseat

Last synced: about 2 months ago
JSON representation

Cápsula do tempo construida na NLW Spacetime da Rocketseat

• Host: GitHub
• URL: https://github.com/brunohnsouza/nlw-spacetime
• Owner: brunohnsouza
• Created: 2023-05-19T22:27:16.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-05-21T11:34:50.000Z (over 1 year ago)
• Last Synced: 2024-11-06T02:12:47.352Z (3 months ago)
• Topics: css, figma, hmtl, javascript, nlw, rocketseat
• Language: JavaScript
• Homepage: https://explorer-nlw-spacetime.vercel.app
• Size: 2.54 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    Cápsula do tempo





    Projeto da trilha Explorer do NLW Spacetime ⌛





  Objetivo   |   

  Ferramentas   |   

  Ideias realizadas   |   

  Projeto   |   

  Layout





  





  



🚀 Objetivo:



- Desenvolver uma aplicação Web responsiva para o usuário rever memórias e acontecimentos marcantes da sua vida.

🔧 Ferramentas:



- HTML e CSS

- JavaScript

- Git e GitHub

- Figma

💡 Ideias realizadas:



- **[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components):** 3 (três) componentes customizados criados com JavaScript para reutilização simples. São os seguintes:

    - **``** : Tag usada para criar o loader do site. Tal tag possui os seguintes atributos:

        - `loader-photo=""` -> Passe a URL do seu logotipo. Caso não passe, o logotipo do NLW Spacetime aparecerá.

        - `loader-description=""` -> Passe o texto alternativo do seu logotipo. Caso não passe, tal texto será uma descrição do logotipo do NLW Spacetime.

    - **``** : Tag usada para criar o perfil do lado esquerdo do site. Tal tag possui os seguintes atributos:

        - `logo-photo=""` -> Passe a URL do seu logotipo. Caso não passe, o logotipo do NLW Spacetime aparecerá.

        - `logo-description=""` -> Passe o texto alternativo do seu logotipo. Caso não passe, tal texto será uma descrição do logotipo do NLW Spacetime.

        

        - `profile-photo=""` -> Passe a URL da sua foto de perfil. Caso não passe, uma imagem predeterminada aparecerá.

        

        - `profile-description=""` -> Passe o texto alternativo da sua foto de perfil. Caso não passe, tal texto estará predeterminado.

        

        - `author=""` -> Passe o seu nome de usuário. Caso não passe, um nome alternativo aparecerá.

    - **``** : Tag usada para criar seu momento marcante. Tal tag possui os seguintes atributos:

        - `moment-date=""` -> Passe a data do momento marcante. Caso não passe, um texto descritivo será exibido.

        - `moment-title=""` -> Passe o título do momento marcante. Caso não passe, um texto descritivo será exibido.

        

        - `moment-photo=""` -> Passe a URL da sua foto do momento marcante. Caso não passe, uma imagem predeterminada aparecerá.

        

        - `moment-photo-description=""` -> Passe o texto alternativo a sua foto do momento marcante. Caso não passe, tal texto estará predeterminado.

        

        - `moment-description=""` -> Passe a descrição daquele momento marcante. Caso não passe, um texto descritivo será exibido.

💻 Projeto:



- [Veja o projeto online](https://explorer-nlw-spacetime.vercel.app/)

🎨 Layout:



- [Figma do projeto](https://www.figma.com/community/file/1240071097028170811)






  Feito com 💜 por mim | Bruno Souza