{"id":18369586,"url":"https://github.com/henriqueotogami/aula-html5-css3","last_synced_at":"2025-04-10T19:43:42.720Z","repository":{"id":149912780,"uuid":"278907902","full_name":"henriqueotogami/Aula-HTML5-CSS3","owner":"henriqueotogami","description":"Curso de HTML5 + CSS3 do Bootcamp Desenvolvedor FullStack Python 2020, na Digital Innovation One. Meu primeiro projeto de página da web.","archived":false,"fork":false,"pushed_at":"2025-03-04T05:29:48.000Z","size":12412,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-04T06:27:49.123Z","etag":null,"topics":["css3","dark-theme","digital-innovation-one","google-fonts-api","html5"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/henriqueotogami.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-11T17:17:00.000Z","updated_at":"2025-03-04T05:29:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"b15b31f2-0361-49fc-8a6f-8d9495b92ebb","html_url":"https://github.com/henriqueotogami/Aula-HTML5-CSS3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriqueotogami%2FAula-HTML5-CSS3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriqueotogami%2FAula-HTML5-CSS3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriqueotogami%2FAula-HTML5-CSS3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henriqueotogami%2FAula-HTML5-CSS3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/henriqueotogami","download_url":"https://codeload.github.com/henriqueotogami/Aula-HTML5-CSS3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248281424,"owners_count":21077423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","dark-theme","digital-innovation-one","google-fonts-api","html5"],"created_at":"2024-11-05T23:29:53.976Z","updated_at":"2025-04-10T19:43:42.696Z","avatar_url":"https://github.com/henriqueotogami.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch4\u003eMobile: 736px X 414px\u003c/h4\u003e\n\u003cimg src=\"https://github.com/henriqueotogami/Aula-HTML5-CSS3/blob/master/Fourty-day-coding-mobile-Iphone6S-7-8Plus.png\" width=\"300\" /\u003e\n\u003ch4\u003eDesktop: 1042px X 1920px\u003c/h4\u003e\n\u003cimg src=\"https://github.com/henriqueotogami/Aula-HTML5-CSS3/blob/master/Fourty-day-coding-desktop-1920x1042.png\" width=\"900\" /\u003e\n\n# Aula HTML5 + CSS3\n## [Rafael Galleani](https://www.github.com/rafegal)\n### Bootcamp Desenvolvedor Full Stack Python\n### Digital Innovation One\n##### [Meu perfil na plataforma da Digital Innovation One (clique aqui).](https://web.digitalinnovation.one/users/henrique_map)\n##### 12/07/2020\n----------------------------------------------------\n### Descrição: \nA princípio, foi construído uma página web bem simples, introduzindo os conceitos básicos.\n#### HTML5:\n- [x] head;\n- [x] meta;\n- [x] title;\n- [x] link;\n- [x] body;\n- [x] nav;\n- [x] p;\n- [x] ul;\n- [x] li;\n- [x] id;\n- [x] class;\n- [x] a;\n- [x] h1;\n- [x] section;\n- [x] h2;\n- [x] img;\n- [x] footer.\n\n#### CSS3:\n- [x] margin;\n- [x] color;\n- [x] font-family;\n- [x] font-size;\n- [x] width;\n----------------------------------------------------\n### Autodesafio\n#### 19/08/2020\nDepois de concluir o Bootcamp, por ser muito conteúdo, decidi recomeçar e refazer algumas coisas. Esse repositório foi o primeiro a ser refeito, e o resultado foi uma página pessoal que eu idealizei no [Canva (clique aqui).](https://www.canva.com/design/DAEFRHMAEkc/uwp1R5w4ZUOlaZV_6io8ZA/view?utm_content=DAEFRHMAEkc\u0026utm_campaign=designshare\u0026utm_medium=link\u0026utm_source=sharebutton)\n##### Metas\n- [x] Responsividade;\n- [x] Dark theme;\n- [x] CSS puro, sem framework;\n- [x] Apenas uma página web;\n- [x] Minimalista.\n### Resultado\n#### Pode ser visto no topo deste README.\nAnexei capturas de tela de diferentes dispositivos neste repositório mostrando o comportamento da página.\n\n### Aprendizado\n#### HTML5\n- [x] Utilização do [fonts.googleapis.com](https://fonts.googleapis.com) no arquivo index.html;\n- [x] Utilização da tag hr;\n- [x] Utilização da fonte Roboto;\n\n#### CCS3\n- [x] Utilização de variáveis para armazenar as cores em hexadecimal no :root{};\n- [x] Utilização de Flex-box e grid-template;\n- [x] Utilização de Position: absolute e relative;\n- [x] Utilização de filter: brightness() nos ícones ao passar o mouse ( img:hover {} );\n- [x] Utilização de box-shadow para a sensação de profundidade;\n- [x] Utilização de @media para configuração das larguras de tela acima de 480px, e 900px separadamente.\n\n#### Ferramentas\n- [x] Utilização do  Chrome DevTools;\n- [x] Utilização do [Picular](https://picular.co/) para seleção das cores;\n- [x] Utilização do [Adobe Color Wheel](https://color.adobe.com/pt/create/color-wheel) para identificar cores complementares;\n\n#### Vídeos\n- [x] Vídeo da [Rocketseat](https://www.youtube.com/watch?v=dUkkOdhyO1w) sobre flexbox;\n- [x] Vídeo da [Rocketseat](https://www.youtube.com/watch?v=HN1UjzRSdBk) sobre grid-template;\n\n#### Créditos\n- [x] Utilização do ícone [Github (clique aqui) Autor: Xinh Studio](https://www.iconfinder.com/icons/765041/github_gloss_media_social_square_icon);\n- [x] Utilização do ícone [E-mail (clique aqui) Autor: José Garcia](https://www.iconfinder.com/icons/306931/email_inbox_mail_message_icon);\n- [x] Utilização do ícone [LinkedIn (clique aqui) Autor: Rudez Studio](https://www.iconfinder.com/icons/986950/linkedin_icon);\n- [x] Utilização do ícone [WhatsApp (clique aqui) Autor: Rudez Studio](https://www.iconfinder.com/icons/986960/whatsapp_icon);\n- [x] Utilização do ícone [Rocket Blue (clique aqui) Autor: Squid.ink](https://www.iconfinder.com/icons/416398/aliens_exploration_fuel_nasa_rocket_space_spaceship_icon);\n- [x] Utilização do ícone [Python (clique aqui) Autor: Flatart](https://www.iconfinder.com/icons/4375050/logo_python_icon);\n- [x] Utilização do ícone [HTML5 (clique aqui) Autor: Flatart](https://www.iconfinder.com/icons/4373229/html5_logo_logos_icon);\n- [x] Utilização do ícone [CSS3 (clique aqui) Autor: Flatart](https://www.iconfinder.com/icons/2916226/css3_marketing_media_social_website_icon);\n- [x] Utilização do ícone [PostgreSQL (clique aqui) Autor: Iconfinder](https://www.iconfinder.com/icons/4691328/postgresql_icon);\n- [x] Utilização do ícone [JavaScript (clique aqui) Autor: Erik Ragnar Eliasson](https://www.iconfinder.com/icons/652581/code_command_develop_javascript_language_programming_software_icon);\n- [x] Utilização do ícone [Swift (clique aqui) Autor: Samat Odedara](https://www.iconfinder.com/icons/1010066/apple_code_logo_swift_icon);\n- [x] Utilização do ícone [Rocket Gold (clique aqui) Autor: Freepik](https://www.flaticon.com/free-icon/rocket_123369).\n----------------------------------------------------\n### IDE: Visual Studio Code\n#### Tema: Monokai Pro.\n#### Extensões: Grammarly, HTML Snippets, GitLens.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenriqueotogami%2Faula-html5-css3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenriqueotogami%2Faula-html5-css3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenriqueotogami%2Faula-html5-css3/lists"}