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