├── image
    ├── sua-foto-perfil.png
    └── seu-projeto-destaque.png
├── css
    ├── responsive.css
    └── style.css
├── README.md
└── index.html


/image/sua-foto-perfil.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RicardoMouraa/portfolio-bento-box-one-page-video-tiktok/HEAD/image/sua-foto-perfil.png


--------------------------------------------------------------------------------
/image/seu-projeto-destaque.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RicardoMouraa/portfolio-bento-box-one-page-video-tiktok/HEAD/image/seu-projeto-destaque.png


--------------------------------------------------------------------------------
/css/responsive.css:
--------------------------------------------------------------------------------
 1 | @media (min-width: 768px) and (max-width: 999px) {
 2 |     .servicos-box {
 3 |         flex-direction: row;
 4 |     }
 5 | }
 6 | 
 7 | @media (min-width: 1000px) {
 8 |     body {
 9 |         height: 100vh;
10 |     }
11 |     
12 |     /*Widget 1*/
13 |     .top {
14 |         width: 100%;
15 |         height: 40vh;
16 |         flex-direction: row;
17 |     }
18 | 
19 |     .user {
20 |         width: 70%;
21 |         height: 100%;
22 |     }
23 | 
24 |     .info-user h1 {
25 |         font-size: 1.8rem;
26 |     }
27 |     
28 |     .info-user span {
29 |         font-size: 1.5rem;
30 |     }
31 |     
32 |     .info-user p {
33 |         font-size: 1.2rem;
34 |     }
35 | 
36 |     .projeto {
37 |         width: 30%;
38 |         height: 100%;
39 |     }
40 | 
41 |     /*Widget 2*/
42 |     .center {
43 |         width: 100%;
44 |         height: 10vh;
45 |         flex-direction: row;
46 |     }
47 | 
48 |     .redes-sociais {
49 |         width: 30%;
50 |         height: 100%;
51 |     }
52 | 
53 |     .skills {
54 |         width: 70%;
55 |         height: 100%;
56 |     }
57 |     
58 |     /*Widget 3*/
59 |     .bottom {
60 |         width: 100%;
61 |         height: 40vh;
62 |         flex-direction: row-reverse;
63 |     }
64 | 
65 |     .contato {
66 |         width: 30%;
67 |         height: 100%;
68 |     }
69 | 
70 |     .servicos {
71 |         width: 70%;
72 |         height: 100%;
73 |     }
74 | 
75 |     .servicos-box {
76 |         flex-direction: row;
77 |         gap: 1rem;
78 |     }
79 | 
80 |     .item-servico {
81 |         width: 240px;
82 |         height: 240px;
83 |         border-radius: 10px;
84 |     }
85 |     
86 |     .item-servico i {
87 |         font-size: 2.5rem;
88 |     }
89 | 
90 |     .item-servico span {
91 |         font-size: 1rem;
92 |     }
93 | 
94 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # One Page Portfolio - Bento Box
 2 | 
 3 | Este é um template simples e elegante de portfólio one-page no estilo Bento Box. Ideal para desenvolvedores e profissionais que desejam apresentar suas habilidades, projetos e informações de contato de forma clara e direta.
 4 | 
 5 | ## Tecnologias Utilizadas
 6 | 
 7 | - HTML5
 8 | - CSS3
 9 | - FontAwesome
10 | 
11 | ## Estrutura do Projeto
12 | 
13 | ### Arquivos e Pastas
14 | 
15 | - `index.html`: Estrutura principal do site.
16 | - `css/style.css`: Estilos principais do site.
17 | - `css/responsive.css`: Estilos responsivos para diferentes tamanhos de tela.
18 | - `image/sua-foto-perfil.png`: Imagem de perfil do usuário (substitua pelo seu).
19 | - `image/seu-projeto-destaque.png`: Imagem do projeto em destaque (substitua pelo seu).
20 | 
21 | ### Estrutura HTML
22 | 
23 | O site é dividido em três seções principais, cada uma representada por um widget:
24 | 
25 | 1. **Widget 1 (Topo)**
26 |    - Exibe informações do usuário, incluindo foto de perfil, nome, cargo e uma breve descrição.
27 |    - Exibe o último projeto do usuário com um link para acessar o site.
28 | 
29 | 2. **Widget 2 (Centro)**
30 |    - Contém links para redes sociais.
31 |    - Lista das habilidades do usuário com ícones representativos.
32 | 
33 | 3. **Widget 3 (Rodapé)**
34 |    - Descreve os serviços oferecidos pelo usuário.
35 |    - Informações de contato com um botão para iniciar uma conversa.
36 | 
37 | ## Como Usar
38 | 
39 | 1. Clone este repositório ou baixe os arquivos para o seu computador.
40 | 2. Substitua as imagens de exemplo (`sua-foto-perfil.png` e `seu-projeto-destaque.png`) pelas suas próprias imagens.
41 | 3. Atualize o conteúdo HTML com suas informações pessoais, projetos e detalhes de contato.
42 | 4. Customize os estilos no arquivo `style.css` conforme necessário.
43 | 5. Use o arquivo `responsive.css` para ajustar o design responsivo para diferentes dispositivos.
44 | 
45 | ## Fontes e Recursos
46 | 
47 | - [FontAwesome](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css): Biblioteca de ícones usada no site.
48 | - [Google Fonts - Open Sans](https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap): Fonte principal utilizada no site.
49 | 
50 | ## Contribuição
51 | 
52 | Se você quiser contribuir com melhorias para este template, sinta-se à vontade para abrir um pull request ou relatar problemas na seção de issues.
53 | 
54 | ## Licença
55 | 
56 | Este projeto está licenciado sob a Licença MIT. Consulte o arquivo `LICENSE` para obter mais informações.
57 | 
58 | ## Me Marque!
59 | 
60 | Este template é livre para uso, mas adoraria ver como você o utiliza! Se você usar este template, por favor, me marque ou poste nas redes sociais e me marque:
61 | 
62 | - [Instagram](https://www.instagram.com/riicardomoura/)
63 | - [TikTok](https://www.tiktok.com/@riicardomoura)
64 | - [LinkedIn](https://www.linkedin.com/in/ricardomouradev/)
65 | 
66 | ---
67 | 
68 | Feito com ❤️ por RICARDO MOURA DEV
69 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-BR">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>One Page Portfolio - Bento Box</title>
  8 | 
  9 |     <link rel="stylesheet" href="css/style.css">
 10 |     <link rel="stylesheet" href="css/responsive.css">
 11 | 
 12 |     <!--FontAwesome-->
 13 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
 14 |         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
 15 |         crossorigin="anonymous" referrerpolicy="no-referrer" />
 16 | 
 17 | </head>
 18 | 
 19 | <body>
 20 |     <div class="container">
 21 | 
 22 |         <!--WIDGET 1-->
 23 |         <div id="widget1" class="top">
 24 |             <div class="user card">
 25 |                 <div class="content-user">
 26 |                     <div class="img-user">
 27 |                         <img src="image/sua-foto-perfil.png" alt="user">
 28 |                     </div>
 29 |                     <div class="info-user">
 30 |                         <h1>Nome do Usuario</h1>
 31 |                         <span>Cargo do Usuario</span>
 32 |                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem excepturi provident
 33 |                             cupiditate expedita? Aspernatur commodi fugiat, quasi expedita, iste recusandae dolores
 34 |                             voluptates facere doloremque accusamus.</p>
 35 |                     </div>
 36 |                 </div>
 37 |             </div>
 38 | 
 39 |             <div class="projeto card">
 40 |                 <div class="content-projeto">
 41 |                     <span class="text-projeto">Último projeto</span>
 42 |                     <div class="img-projeto">
 43 |                         <img src="image/seu-projeto-destaque.png" alt="projeto">
 44 |                     </div>
 45 |                     <div class="btn-projeto">
 46 |                         <a href="#" class="btn">Acesse o site</a>
 47 |                     </div>
 48 |                 </div>
 49 |             </div>
 50 |         </div>
 51 | 
 52 |         <!--WIDGET 2-->
 53 |         <div id="widget2" class="center">
 54 |             <div class="redes-sociais card">
 55 |                 <div class="box-social"><a href="#"><i class="fab fa-github"></i></a></div>
 56 |                 <div class="box-social"><a href="#"><i class="fab fa-linkedin-in"></i></a></div>
 57 |                 <div class="box-social"><a href="#"><i class="fab fa-instagram"></i></a></div>
 58 |                 <div class="box-social"><a href="#"><i class="fab fa-tiktok"></i></a></div>
 59 |             </div>
 60 | 
 61 |             <div class="skills card">
 62 |                 <div class="content-skills">
 63 |                     <div class="text-skills">
 64 |                         <span>My Skills</span>
 65 |                     </div>
 66 |                     <div class="skills-icons">
 67 |                         <i class="fab fa-html5"></i>
 68 |                         <i class="fab fa-css3-alt"></i>
 69 |                         <i class="fab fa-js"></i>
 70 |                         <i class="fab fa-bootstrap"></i>
 71 |                         <i class="fab fa-react"></i>
 72 |                         <i class="fab fa-node"></i>
 73 |                         <i class="fab fa-php"></i>
 74 |                         <i class="fab fa-github"></i>
 75 |                     </div>
 76 |                 </div>
 77 |             </div>
 78 |         </div>
 79 | 
 80 |         <!--WIDGET 3-->
 81 |         <div id="widget3" class="bottom">
 82 |             <div class="servicos card">
 83 |                 <div class="content-servicos">
 84 |                     <div class="text-servicos">
 85 |                         <h1>Serviços</h1>
 86 |                         <span>Serviços que vão posicionar sua empresa no mundo digital</span>
 87 |                     </div>
 88 | 
 89 |                     <div class="servicos-box">
 90 |                         <div class="item-servico">
 91 |                             <i class="fas fa-code"></i>
 92 |                             <span>Criação de sites</span>
 93 |                         </div>
 94 |                         <div class="item-servico">
 95 |                             <i class="fas fa-search"></i> 
 96 |                             <span>Otimizações de SEO</span>
 97 |                         </div>
 98 |                         <div class="item-servico">
 99 |                             <i class="fas fa-headset"></i>
100 |                             <span>Suporte e manutenção</span>
101 |                         </div>
102 |                         <div class="item-servico">
103 |                             <i class="fas fa-paint-brush"></i>
104 |                             <span>Web Designer</span>
105 |                         </div>
106 |                     </div>
107 |                 </div>
108 |             </div>
109 | 
110 |             <div class="contato card">
111 |                 <div class="content-contato">
112 |                     <div class="text-contato">
113 |                         <h1>Contato</h1>
114 |                         <span>Deixe-me mostrar o potêncial digital que sua empresa tem com um site único!</span>
115 |                     </div>
116 | 
117 |                     <div class="lista-contato">
118 |                         <a href="#">seuemail@seuemail.com.br</a>
119 |                         <a href="#">+55 11 55555-5555</a>
120 |                     </div>
121 |                     <div class="btn-contato">
122 |                         <a href="#" class="btn2">Fale comigo agora!</a>
123 |                     </div>
124 |                 </div>
125 |             </div>
126 |         </div>
127 |     </div>
128 | </body>
129 | 
130 | </html>


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
  2 | 
  3 | * {
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 | }
  8 | 
  9 | :root {
 10 |     --color-black: #101010;
 11 |     --color-white: #f0f0f0;
 12 |     --color-gray: #5c5c5c;
 13 |     --color-destaque: #1d2adf;
 14 | 
 15 |     --font-title-desktop: 3rem;
 16 |     --font-span-desktop: 1.5rem;
 17 |     --font-text-desktop: 1.2rem;
 18 | 
 19 |     --font-title-mobile: 2rem;
 20 |     --font-span-mobile: 1.2rem;
 21 |     --font-text-mobile: 1rem;
 22 | }
 23 | 
 24 | body {
 25 |     font-family: "Open Sans", sans-serif;
 26 |     background-color: var(--color-black);
 27 |     display: flex;
 28 |     align-items: center;
 29 |     justify-content: center;
 30 |     min-height: 100vh;
 31 | }
 32 | 
 33 | .container {
 34 |     width: 100%;
 35 |     max-width: 1800px;
 36 |     padding: 1rem;
 37 |     display: flex;
 38 |     flex-direction: column;
 39 |     align-items: center;
 40 |     justify-content: center;
 41 |     gap: 1.2rem;
 42 |     box-sizing: border-box;
 43 |     min-height: 100vh;
 44 | }
 45 | 
 46 | .card {
 47 |     background-color: var(--color-white);
 48 |     padding: 1rem;
 49 | }
 50 | 
 51 | /************** WIDGET 1*/
 52 | .top {
 53 |     width: 100%;
 54 |     min-width: 350px;
 55 |     height: 100vh;
 56 |     border-radius: 10px;
 57 |     display: flex;
 58 |     flex-direction: column;
 59 |     gap: 1.2rem;
 60 | }
 61 | 
 62 | /************** Úsuario*/
 63 | .user {
 64 |     width: 100%;
 65 |     height: 60%;
 66 |     border-radius: 10px;
 67 |     display: flex;
 68 |     align-items: center;
 69 |     justify-content: center;
 70 |     padding: 1.5rem 1rem; 
 71 | }
 72 | 
 73 | .content-user {
 74 |     width: 100%;
 75 |     max-width: 90%;
 76 |     height: 100%;
 77 |     display: flex;
 78 |     flex-direction: column;
 79 |     align-items: center;
 80 |     justify-content: center;
 81 | }
 82 | 
 83 | .img-user {
 84 |     display: flex;
 85 |     align-items: center;
 86 |     justify-content: center;
 87 | }
 88 | 
 89 | .img-user img {
 90 |     width: 120px;
 91 |     border-radius: 10px;
 92 | }
 93 | 
 94 | .info-user {
 95 |     display: flex;
 96 |     flex-direction: column;
 97 |     align-items: center;
 98 |     justify-content: center;
 99 |     text-align: center;
100 | }
101 | 
102 | .info-user h1 {
103 |     padding-top: 1rem;
104 |     font-size: 1.5rem;
105 |     font-weight: bold;
106 |     color: var(--color-black);
107 | }
108 | 
109 | .info-user span {
110 |     font-size: 1.2rem;
111 |     font-weight: 400;
112 |     color: var(--color-destaque);
113 | }
114 | 
115 | .info-user p {
116 |     margin-top: auto; 
117 |     padding-top: 1rem;
118 |     font-size: 1rem;
119 |     color: var(--color-black);
120 | }
121 | 
122 | /************** Projeto*/
123 | .projeto {
124 |     width: 100%;
125 |     height: 40%;
126 |     border-radius: 10px;
127 |     display: flex;
128 |     flex-direction: column;
129 |     align-items: center;
130 |     justify-content: center;
131 | }
132 | 
133 | .content-projeto {
134 |     width: 100%;
135 |     max-width: 400px;
136 |     height: 100%;
137 |     display: flex;
138 |     flex-direction: column;
139 |     align-items: center;
140 |     justify-content: center;
141 | }
142 | 
143 | .text-projeto {
144 |     font-size: 1.3rem;
145 |     font-weight: 500;
146 |     color: var(--color-destaque);
147 | }
148 | 
149 | .img-projeto {
150 |     padding-top: 1rem;
151 |     display: flex;
152 |     align-items: center;
153 |     justify-content: center;
154 | }
155 | 
156 | .img-projeto img {
157 |     width: 280px;
158 | }
159 | 
160 | .btn-projeto {
161 |     display: flex;
162 |     flex-direction: column;
163 |     align-items: center;
164 |     justify-content: center;
165 |     text-align: center;
166 |     padding-top: 1rem;
167 | }
168 | 
169 | .btn {
170 |     background-color: var(--color-destaque);
171 |     color: var(--color-white);
172 |     font-weight: 600;
173 |     padding: .7rem 1.3rem;
174 |     border-radius: 10px;
175 |     text-decoration: none;
176 | }
177 | 
178 | /************** WIDGET 2*/
179 | .center {
180 |     min-width: 350px;
181 |     width: 100%;
182 |     height: 25vh;
183 |     border-radius: 10px;
184 |     display: flex;
185 |     flex-direction: column;
186 |     gap: 1.2rem;
187 | }
188 | 
189 | /************** Redes sociais*/
190 | .redes-sociais {
191 |     background-color: transparent;
192 |     width: 100%;
193 |     height: 40%;
194 |     border-radius: 10px;
195 |     display: flex;
196 |     align-items: center;
197 |     justify-content: space-between;
198 |     padding: 0!important;
199 |     gap: 1rem;
200 | }
201 | 
202 | .box-social {
203 |     background-color: var(--color-destaque);
204 |     height: 90px;
205 |     width: 90px;
206 |     border-radius: 10px;
207 |     display: flex;
208 |     align-items: center;
209 |     justify-content: center;
210 | }
211 | 
212 | .box-social i {
213 |     font-size: 2.5rem;
214 |     color: var(--color-white);
215 | }
216 | 
217 | /************** Skills*/
218 | .skills {
219 |     width: 100%;
220 |     height: 100%;
221 |     border-radius: 10px;
222 | }
223 | 
224 | .content-skills {
225 |     height: 100%;
226 |     width: 100%;
227 |     display: flex;
228 |     flex-direction: column;
229 |     justify-content: space-around;
230 |     align-items: center;
231 | }
232 | 
233 | .text-skills {
234 |     font-size: 1.2rem;
235 |     text-transform: uppercase;
236 |     font-weight: bold;
237 |     color: var(--color-destaque);
238 | }
239 | 
240 | .skills-icons {
241 |     width: 100%;
242 |     max-width: 90%;
243 |     gap: 10px;
244 |     display: flex;
245 |     justify-content: space-between;
246 |     align-items: center;
247 | }
248 | 
249 | .skills-icons i {
250 |     color: var(--color-black);
251 |     font-size: 1.5rem;
252 |     transition: color 0.3s;
253 | }
254 | 
255 | .skills-icons i:hover {
256 |     cursor: pointer;
257 | }
258 | 
259 | /* Cores específicas para cada ícone das skills*/
260 | .skills-icons .fa-html5:hover {
261 |     color: #e34f26;
262 | }
263 | 
264 | .skills-icons .fa-css3-alt:hover {
265 |     color: #1572b6;
266 | }
267 | 
268 | .skills-icons .fa-js:hover {
269 |     color: #f7df1e;
270 | }
271 | 
272 | .skills-icons .fa-bootstrap:hover {
273 |     color: #7952b3;
274 | }
275 | 
276 | .skills-icons .fa-react:hover {
277 |     color: #61dafb;
278 | }
279 | 
280 | .skills-icons .fa-node:hover {
281 |     color: #339933;
282 | }
283 | 
284 | .skills-icons .fa-php:hover {
285 |     color: #777bb4;
286 | }
287 | 
288 | .skills-icons .fa-github:hover {
289 |     color: #181717;
290 | }
291 | 
292 | /************** WIDGET 3*/
293 | .bottom {
294 |     width: 100%;
295 |     height: auto;
296 |     border-radius: 10px;
297 |     display: flex;
298 |     flex-direction: column;
299 |     gap: 1.2rem;
300 | }
301 | 
302 | /************** Serviços*/
303 | .servicos {
304 |     width: 100%;
305 |     border-radius: 10px;
306 |     display: flex;
307 |     align-items: center;
308 |     justify-content: center;
309 | }
310 | 
311 | .content-servicos {
312 |     width: 100%;
313 |     max-width: 90%;
314 |     display: flex;
315 |     flex-direction: column;
316 |     align-items: center;
317 |     justify-content: center;
318 |     text-align: center;
319 |     gap: 1rem;
320 | }
321 | 
322 | .text-servicos h1 {
323 |     font-size: var(--font-title-mobile);
324 |     color: var(--color-black);
325 | }
326 | 
327 | .text-servicos span {
328 |     font-size: 1.2rem;
329 |     font-weight: 400;
330 |     color: var(--color-gray);
331 | }
332 | 
333 | .servicos-box {
334 |     width: 100%;
335 |     display: flex;
336 |     flex-direction: column;
337 |     justify-content: space-between;
338 |     align-items: center;
339 |     gap: 0.5rem;
340 | }
341 | 
342 | .item-servico {
343 |     box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
344 |     width: 100%;
345 |     max-width: 250px;
346 |     height: 250px;
347 |     border-radius: 10px;
348 |     display: flex;
349 |     flex-direction: column;
350 |     align-items: center;
351 |     justify-content: center;
352 |     gap: 1rem;
353 |     padding: 1rem;
354 | }
355 | 
356 | .item-servico i {
357 |     font-size: 3rem;
358 |     color: var(--color-destaque);
359 | }
360 | 
361 | .item-servico span {
362 |     font-size: 1.2rem;
363 |     color: var(--color-black);
364 | }
365 | 
366 | /************** Contato*/
367 | .contato {
368 |     width: 100%;
369 |     border-radius: 10px;
370 |     display: flex;
371 |     flex-direction: column;
372 |     align-items: center;
373 |     justify-content: center;
374 |     text-align: center;
375 |     background-color: var(--color-destaque);
376 |     padding: 1rem; /* Certificando que a seção de contato tenha padding */
377 | }
378 | 
379 | .content-contato {
380 |     width: 100%;
381 |     max-width: 400px;
382 |     display: flex;
383 |     flex-direction: column;
384 |     align-items: center;
385 |     justify-content: center;
386 |     text-align: center;
387 |     gap: 1rem;
388 | }
389 | 
390 | .text-contato h1 {
391 |     font-size: var(--font-title-mobile);
392 |     color: var(--color-white);
393 | }
394 | 
395 | .lista-contato {
396 |     display: flex;
397 |     flex-direction: column;
398 |     gap: .5rem;
399 | }
400 | 
401 | .lista-contato a {
402 |     color: #000;
403 |     text-decoration: none;
404 |     font-weight: 600;
405 | }
406 | 
407 | .text-contato span {
408 |     font-size: var(--font-text-mobile);
409 |     font-weight: 400;
410 |     color: var(--color-white);
411 | }
412 | 
413 | .btn-contato {
414 |     display: flex;
415 |     flex-direction: column;
416 |     align-items: center;
417 |     justify-content: center;
418 |     text-align: center;
419 | }
420 | 
421 | .btn2 {
422 |     background-color: var(--color-black);
423 |     color: var(--color-white);
424 |     font-weight: 600;
425 |     padding: .7rem 1.3rem;
426 |     border-radius: 10px;
427 |     text-decoration: none;
428 | }
429 | 


--------------------------------------------------------------------------------