└── Readme.md
/Readme.md:
--------------------------------------------------------------------------------
1 | # 10 projetos de HTML e CSS para adicionar no seu portfólio
2 |
3 | [Vídeo no Youtube](https://youtu.be/y4ltLH9iK8E)
4 |
5 | ## **1.Landing Pages**
6 | https://dribbble.com/shots/14953088-spark-marketing-page
7 | https://dribbble.com/shots/15798662-Product-page-hero-section
8 | https://dribbble.com/shots/16256966-digital-education-website-design
9 | https://dribbble.com/shots/16151477-shopify-website-landing-page-design
10 | https://dribbble.com/shots/16249097-SaaS-Design-in-Webfllow
11 | https://dribbble.com/shots/15096546-Landing-Page-UX-UI-Design
12 | https://dribbble.com/shots/16186293-website-landing-page
13 | https://dribbble.com/shots/16356525-Bangtut-Hero-Section
14 |
15 | ## **2.Páginas de Login e Cadastro**
16 | https://dribbble.com/shots/15252242-Sign-Up-Page
17 | https://dribbble.com/shots/15820957-Login-Screen-from-Webpixels-Templates
18 | https://dribbble.com/shots/14019613-Sign-up-form
19 | https://dribbble.com/shots/14621147-Romeo-Illustrations
20 | https://dribbble.com/shots/14960376-Sign-Up
21 | https://dribbble.com/shots/15846049-Simple-Sign-Up-Page
22 | https://dribbble.com/shots/14147292-Sign-Up-Form
23 | https://dribbble.com/shots/13993146-Ghost-Sign-In
24 | https://dribbble.com/shots/16383982-User-account-page-illustrations
25 |
26 | ## **3.Formulário**
27 | https://dribbble.com/shots/14414277-Subscrify-modals
28 | https://dribbble.com/shots/9145103-Request-a-demo-page
29 | https://dribbble.com/shots/16365420-Sign-up-with-illustration
30 | https://dribbble.com/shots/11785205-Employees-Information-Sytem-Part-3
31 | https://dribbble.com/shots/7862230-Checkout-UI-Concept
32 | https://dribbble.com/shots/16485699-Edit-Task-Light-Dark
33 | https://dribbble.com/shots/11141590-Registration-form
34 | https://dribbble.com/shots/12882202-Freelance-Form-Register-DropDown
35 | https://dribbble.com/shots/3553449-Travel-Form
36 |
37 | ## **4.Catálogo de produtos**
38 | https://dribbble.com/shots/15711636-Catalog
39 | https://dribbble.com/shots/16039018-E-commerce-Furniture-Landing-Page
40 | https://dribbble.com/shots/13893056-Online-Fashion-Store
41 | https://dribbble.com/shots/6626669-e-commerce-personalize
42 | https://dribbble.com/shots/11243718-LH-1064-05-Swimsuits-Catalog
43 | https://dribbble.com/shots/9004128-Catalog-for-ATF-Cosmetics-store
44 | https://dribbble.com/shots/5604689-Lindt-Product-Catalog
45 | https://dribbble.com/shots/5879104-Ulmart-Top-10-Russian-Online-Retailer
46 | https://dribbble.com/shots/5535038-Flower-Shop
47 | https://dribbble.com/shots/10066562-Website-for-sweets-shop
48 | https://dribbble.com/shots/15483957-Catalog-Free-Download
49 | https://dribbble.com/shots/16233335-Product-card
50 |
51 | ## **5.Página de notícias ou blog**
52 | https://dribbble.com/shots/15379976-News-Website
53 | https://dribbble.com/shots/14435664--Exploration-Article-Page
54 | https://dribbble.com/shots/16385499-News-Site
55 | https://dribbble.com/shots/14134149-Penlon-News-Page
56 | https://dribbble.com/shots/6863071-News
57 | https://dribbble.com/shots/11030123-Retro-News-Components
58 | https://dribbble.com/shots/11958568-Farimarket-article-page
59 | https://dribbble.com/shots/15601683-Personal-Blog-Layout
60 | https://dribbble.com/shots/15395473-Personal-Blog
61 | https://dribbble.com/shots/14481273-Portfolio-Courses-website-Blog
62 | https://dribbble.com/shots/14377374--Exploration-Sport-News-Hero-Section
63 | https://dribbble.com/shots/15229042-AGENCY
64 | https://dribbble.com/shots/16279660-Website-design-for-Izabela-Kielczyk
65 |
66 | ## **6.Desenhar algum elemento específico**
67 | https://dribbble.com/shots/16289478-3D-Glass-Card-Illustration
68 | https://dribbble.com/shots/13978524-Button
69 | https://dribbble.com/shots/7268454-Rubber-Slider
70 | https://dribbble.com/shots/14712568-CSS-Glowin-Drop-version
71 | https://dribbble.com/shots/15491646-phone-icon-set
72 | https://dribbble.com/shots/14052578-Star-Toggle
73 | https://dribbble.com/shots/14185527-Figma-UI-kit-React-components-Counter
74 | https://dribbble.com/shots/3541363-Clock
75 | https://dribbble.com/shots/3978148-CSS-Advocat
76 | https://dribbble.com/shots/7425055-Book-Loader
77 | https://dribbble.com/shots/8424211-Smoke-Slider
78 | https://dribbble.com/shots/9070657-Heart-Switch
79 | https://dribbble.com/shots/9828547-Feedback-Reactions
80 | https://dribbble.com/shots/11139240-Thumbs-up-button
81 | https://dribbble.com/shots/12287144-Rating
82 | https://dribbble.com/shots/4364095-Rainbow-is-here
83 | https://dribbble.com/shots/13985244-Colorful-Buttons
84 | https://dribbble.com/shots/14725005-3D-Switch
85 |
86 | ## **7.Dashboard**
87 | https://dribbble.com/shots/16364085-Wallet-Dashboard-Design
88 | https://dribbble.com/shots/15378686-Task-Management-Dashboard-Design
89 | https://dribbble.com/shots/15543862-Finance-Dashboard-Dark-theme
90 | https://dribbble.com/shots/15501287-Finance-Dashboard-Design
91 | https://dribbble.com/shots/16362432-E-learning-platform-dashboard
92 | https://dribbble.com/shots/16152318-Tukunen-Sales-Analytics-Dashboard
93 | https://dribbble.com/shots/15023587-File-Manager-Dashboard-design
94 | https://dribbble.com/shots/15271947-Finance-Dashboard-UX-UI-Design
95 | https://dribbble.com/shots/15145910-Store-Admin-Panel
96 | https://dribbble.com/shots/16508365-Finance-Dashboard-Design
97 | https://dribbble.com/shots/16097888-Dark-Theme-for-Project-Management-Dashboard-Animation
98 | https://dribbble.com/shots/15223174-Project-Management-Dashboard-UI-Exploration
99 | https://dribbble.com/shots/16018192-Digital-Wallet-Dashboard-UI-Dark-Theme
100 | https://dribbble.com/shots/15804820-Finance-Dashboard-Dark-theme
101 | https://dribbble.com/shots/15877041-Prostore-Sales-Dashboard
102 | https://dribbble.com/shots/14973430-Fitness-Tracker-Dashboard
103 |
104 | ## **8.Email marketing**
105 | https://dribbble.com/shots/13801246-Email-Design-Mailchimp
106 | https://dribbble.com/shots/8810403-Referral-Program
107 | https://dribbble.com/shots/6153546-anyExcuse-Newsletter-Template
108 | https://dribbble.com/shots/14554850-Order-Confirmation-Email-Dark-UI
109 | https://dribbble.com/shots/14238815-Email-Receipt-Design
110 | https://dribbble.com/shots/15184358-Sendlane-Visual-Identity
111 | https://dribbble.com/shots/7104528-Mens-Watch-Brand-Email-Design
112 |
113 | ## **9.To do list/calendário/organização pessoal/notion**
114 | https://dribbble.com/shots/5726145-Todo-Web-App
115 | https://dribbble.com/shots/7882888-Daily-UI-042-To-Do-List
116 | https://dribbble.com/shots/3383167-To-Do-List
117 | https://dribbble.com/shots/14238178-To-Do-List
118 | https://dribbble.com/shots/15850805-Calendar-App-Concept
119 | https://dribbble.com/shots/5019211-Simple-To-Do-List-App-UI-Concent
120 | https://dribbble.com/shots/10544666-Hyperskill-To-Do-List-course
121 | https://dribbble.com/shots/2366419-Projects-http-getlaps-com
122 | https://dribbble.com/shots/4517985-Todo-web-app-tidily-io
123 | https://dribbble.com/shots/3884941-Todooo-Tasks
124 | https://dribbble.com/shots/14928544-Goal-based-project-management
125 |
126 | ## **10. Seu portfólio**
127 | https://dribbble.com/shots/15790280-personal-portfolio-Website-UI
128 | https://dribbble.com/shots/16077352-Personal-Portfolio-Site-Bruno-Erdison
129 | https://dribbble.com/shots/15534060-Freelancer-Personal-Portfolio-Website-UI-Design
130 | https://dribbble.com/shots/14832163-JOHN-Developer-Portfolio-Website
131 | https://dribbble.com/shots/15566022-Personal-portfolio-landing-page
132 | https://dribbble.com/shots/15176184-Portfolio-Landing-Page
133 | https://dribbble.com/shots/15473091-MoonexLab-Digital-Agency-Index
134 | https://dribbble.com/shots/14135859-JanLosert-com-V4-Live
135 |
136 | ## Dicas para te ajudar durante o desenvolvimento
137 |
138 | 1. Utilize sites para se inspirar
139 | Alguns deles são: [Codepen](https://codepen.io/), [Up labs](https://www.uplabs.com/search?q=portfolio), [Behance](https://www.behance.net), [Dribbble](https://dribbble.com), [Niice](https://niice.co) e [Pinterest](https://br.pinterest.com)
140 |
141 | 2. Utilize sites para pegar imagens e ícones
142 | Alguns deles são: [Pixabay](https://pixabay.com/pt/) e [Flaticon](https://www.flaticon.com/)
143 |
144 | 3. Utilize sites para escolher as cores do seu site e paletas
145 | Alguns deles são: [Color hunt](https://colorhunt.co/), [Adobe color](https://color.adobe.com/pt/create), [Coolors](https://coolors.co/) e [Web gradients](https://webgradients.com/)
146 |
147 | 4. Utilize sites para se inspirar em fontes e importá-las
148 | Alguns deles são: [Adobe fonts](https://fonts.adobe.com) e [Google fonts](https://fonts.google.com/)
149 |
--------------------------------------------------------------------------------