Skip to content

Commit df1bac7

Browse files
lucasmaciel-glucasmaciel-g
authored
Terminando projeto Code Arrow
Com a conclusão de mais um módulo do curso fechamos o projeto Code Arrow.
1 parent bcd3b01 commit df1bac7

File tree

7 files changed

+264
-17
lines changed

7 files changed

+264
-17
lines changed

‎css/style.css‎

Lines changed: 141 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,7 @@ ul{
9494

9595
.principal, .equipe, .video, .migracao, .sucesso{
9696
display: flex;
97-
flex-grow: 1; /* Esse flex-item vai ter o seu tamanho aumentado caso sobre espaço no elemento pai */
98-
flex-basis: 0; /* Os irmãos desse flex-item vão fazer de tudo pra ter o mesmo tamanho */
97+
flex: 1;
9998
max-width: 1200px;
10099
padding: 1.875rem;
101100
gap: 120px;
@@ -104,8 +103,7 @@ ul{
104103
.principal_imagem1{
105104
display: flex;
106105
align-items: center;
107-
flex-grow: 1; /* Esse flex-item vai ter o seu tamanho aumentado caso sobre espaço no elemento pai */
108-
flex-basis: 0; /* Os irmãos desse flex-item vão fazer de tudo pra ter o mesmo tamanho */
106+
flex: 1;
109107
}
110108

111109
.principal_imagem1 img{
@@ -114,8 +112,7 @@ ul{
114112

115113
.principal_projetos, .equipe_texto, .video, .video_texto, .migracao, .migracao_texto, .sucesso{
116114
display: flex;
117-
flex-grow: 1; /* Esse flex-item vai ter o seu tamanho aumentado caso sobre espaço no elemento pai */
118-
flex-basis: 0; /* Os irmãos desse flex-item vão fazer de tudo pra ter o mesmo tamanho */
115+
flex: 1;
119116
flex-direction: column;
120117
justify-content: center;
121118
align-items: flex-start;
@@ -189,8 +186,7 @@ ul{
189186

190187
.equipe_integrantes{
191188
display: flex;
192-
flex-grow: 1; /* Esse flex-item vai ter o seu tamanho aumentado caso sobre espaço no elemento pai */
193-
flex-basis: 0; /* Os irmãos desse flex-item vão fazer de tudo pra ter o mesmo tamanho */
189+
flex: 1;
194190
flex-direction: column;
195191
justify-content: center;
196192
gap: 0.75rem;
@@ -238,8 +234,7 @@ ul{
238234
}
239235

240236
.video_texto{
241-
flex-grow: 0;
242-
flex-basis: auto;
237+
flex: 0;
243238
}
244239

245240
.video_texto h2, .migracao_texto h2, .controle_texto h2{
@@ -317,8 +312,7 @@ ul{
317312
background-color: #0606065e;
318313
color: #F2F2F2;
319314
padding: 32px 32px 64px 32px;
320-
flex-grow: 1;
321-
flex-basis: 0;
315+
flex: 1;
322316
gap: 30px;
323317
}
324318

@@ -380,8 +374,7 @@ ul{
380374
background-position: top left;
381375
background-repeat: no-repeat;
382376
background-size: cover;
383-
flex-grow: 1;
384-
flex-basis: 0;
377+
flex: 1;
385378
}
386379

387380
/* Caso use uma img diretamente no html, usar com essas propriedades de css */
@@ -399,8 +392,7 @@ ul{
399392
padding: 60px;
400393
background-color: #FFF;
401394
gap: 30px;
402-
flex-grow: 1;
403-
flex-basis: 0;
395+
flex: 1;
404396
}
405397

406398
.controle_texto{
@@ -446,4 +438,136 @@ ul{
446438

447439
.controle .menu_botaoPrimario{
448440
align-self: flex-start;
449-
}
441+
}
442+
443+
.rodape_bg{
444+
background-color: #0A151D;
445+
display: flex;
446+
justify-content: center;
447+
}
448+
449+
.rodape{
450+
max-width: 1200px;
451+
padding: 5rem 0;
452+
gap: 120px;
453+
display: flex;
454+
flex-direction: column;
455+
flex: 1;
456+
}
457+
458+
.rodape_texto{
459+
display: flex;
460+
gap: 80px;
461+
}
462+
463+
.rodape_textoSobre{
464+
display: flex;
465+
flex-direction: column;
466+
gap: 32px;
467+
}
468+
469+
.rodape_textoLogo{
470+
max-width: 80%;
471+
}
472+
473+
.rodape_textoSobre p{
474+
color: #F2F2F2;
475+
font-size: 1rem;
476+
max-width: 35rch;
477+
}
478+
479+
.rodape_textoRedes{
480+
display: flex;
481+
gap: 10px;
482+
margin-top: 30px;
483+
align-items: center;
484+
}
485+
486+
.rodape_textoRedes a{
487+
color: #f2f2f2;
488+
transition: .5s;
489+
display: flex;
490+
align-items: center;
491+
padding: 8px;
492+
}
493+
494+
.rodape_textoRedes a:hover{
495+
color: #008C87;
496+
}
497+
498+
.rodape_textoMapa{
499+
display: flex;
500+
gap: 20px;
501+
flex: 1;
502+
}
503+
504+
.rodape_mapaCards{
505+
display: flex;
506+
flex-direction: column;
507+
gap: 12px;
508+
flex: 1;
509+
}
510+
511+
.rodape_mapaCards nav{
512+
display: flex;
513+
flex-direction: column;
514+
gap: 15px;
515+
}
516+
517+
.rodape_mapaCards h3{
518+
color: #008D86;
519+
font-size: 1.25rem;
520+
text-transform: uppercase;
521+
}
522+
523+
.rodape_mapaCards ul{
524+
display: flex;
525+
flex-direction: column;
526+
gap: 15px;
527+
}
528+
529+
.rodape_mapaCards a{
530+
display: inline-block;
531+
color: #D5F4F4;
532+
font-size: 0.8rem;
533+
transition: .1s;
534+
}
535+
536+
.rodape_mapaCards a:hover{
537+
text-decoration: underline;
538+
}
539+
540+
.rodape_termoUso{
541+
display: flex;
542+
border-top: 1px solid #F2F2F2;
543+
padding-top: 20px;
544+
justify-content: space-between;
545+
align-items: center;
546+
}
547+
548+
.rodape_termoUso ul{
549+
display: flex;
550+
gap: 30px;
551+
}
552+
553+
.rodape_termoLinks a{
554+
color: #F2F2F2;
555+
text-decoration: underline;
556+
transition: .1s;
557+
}
558+
559+
.rodape_termoLinks a:hover{
560+
text-decoration: none;
561+
}
562+
563+
.rodape_termoAssinatura{
564+
display: flex;
565+
align-items: center;
566+
gap: 30px;
567+
}
568+
569+
.rodape_termoAssinatura p {
570+
color: #F2F2F2;
571+
font-size: 1rem;
572+
max-width: 100%;
573+
}

‎img/icones/facebook-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎img/icones/instagram-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎img/icones/linkedin-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎img/icones/youtube-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎img/logo-code-arrow-dark-new.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎index.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,5 +167,123 @@ <h3>Leads</h3>
167167
</div>
168168
</section>
169169
</main>
170+
171+
<footer class="rodape_bg">
172+
<section class="rodape">
173+
<div class="rodape_texto">
174+
<section class="rodape_textoSobre">
175+
<img src="img/logo-code-arrow-dark-new.svg" alt="" class="rodape_textoLogo">
176+
<p>
177+
A Code Arrow é a escolha certa para pequenas e médias empresas. Recursos de design inteligentes, ferramentas de desenvolvimento flexíveis e gestão de negócios simplificada permitem que você supere expectativas.
178+
</p>
179+
<section class="rodape_textoRedes">
180+
<a href="#">
181+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M164.44,121.34l-48-32A8,8,0,0,0,104,96v64a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM120,145.05V111l25.58,17ZM234.33,69.52a24,24,0,0,0-14.49-16.4C185.56,39.88,131,40,128,40s-57.56-.12-91.84,13.12a24,24,0,0,0-14.49,16.4C19.08,79.5,16,97.74,16,128s3.08,48.5,5.67,58.48a24,24,0,0,0,14.49,16.41C69,215.56,120.4,216,127.34,216h1.32c6.94,0,58.37-.44,91.18-13.11a24,24,0,0,0,14.49-16.41c2.59-10,5.67-28.22,5.67-58.48S236.92,79.5,234.33,69.52Zm-15.49,113a8,8,0,0,1-4.77,5.49c-31.65,12.22-85.48,12-86,12H128c-.54,0-54.33.2-86-12a8,8,0,0,1-4.77-5.49C34.8,173.39,32,156.57,32,128s2.8-45.39,5.16-54.47A8,8,0,0,1,41.93,68c30.52-11.79,81.66-12,85.85-12h.27c.54,0,54.38-.18,86,12a8,8,0,0,1,4.77,5.49C221.2,82.61,224,99.43,224,128S221.2,173.39,218.84,182.47Z"></path></svg>
182+
</a>
183+
<a href="#">
184+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"></path></svg>
185+
</a>
186+
<a href="#">
187+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"></path></svg>
188+
</a>
189+
<a href="#">
190+
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><path d="M216,24H40A16,16,0,0,0,24,40V216a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V40A16,16,0,0,0,216,24Zm0,192H40V40H216V216ZM96,112v64a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0Zm88,28v36a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.79-1.78A36,36,0,0,1,184,140ZM100,84A12,12,0,1,1,88,72,12,12,0,0,1,100,84Z"></path></svg>
191+
</a>
192+
</section>
193+
</section>
194+
<section class="rodape_textoMapa">
195+
<div class="rodape_mapaCards">
196+
<nav>
197+
<h3>
198+
Produto
199+
</h3>
200+
<ul>
201+
<li><a href="#">Design</a></li>
202+
<li><a href="#">Programação</a></li>
203+
<li><a href="#">Empresarial</a></li>
204+
<li><a href="#">Ferramentas de IA</a></li>
205+
<li><a href="#">Soluções de negócios</a></li>
206+
<li><a href="#">CMS</a></li>
207+
<li><a href="#">Recursos de gerenciamento</a></li>
208+
<li><a href="#">SEO</a></li>
209+
<li><a href="#">Integrações de marketing</a></li>
210+
<li><a href="#">Segurança</a></li>
211+
<li><a href="#">Confiabilidade e desempenho</a></li>
212+
<li><a href="#">Principais recursos</a></li>
213+
</ul>
214+
</nav>
215+
</div>
216+
<div class="rodape_mapaCards">
217+
<nav>
218+
<h3>
219+
Recursos
220+
</h3>
221+
<ul>
222+
<li><a href="#">Arrow Academy</a></li>
223+
<li><a href="#">Comunidade</a></li>
224+
<li><a href="#">Fórum</a></li>
225+
<li><a href="#">Inspiração</a></li>
226+
<li><a href="#">Blog</a></li>
227+
<li><a href="#">Programa de Parceiro</a></li>
228+
<li><a href="#">Central de Ajuda</a></li>
229+
<li><a href="#">Preços</a></li>
230+
<li><a href="#">Diretrizes da Marca</a></li>
231+
<li><a href="#">Segurança</a></li>
232+
</ul>
233+
</nav>
234+
</div>
235+
<div class="rodape_mapaCards">
236+
<nav>
237+
<h3>
238+
Sobre
239+
</h3>
240+
<ul>
241+
<li><a href="#">Agência digital</a></li>
242+
<li><a href="#">Web Design</a></li>
243+
<li><a href="#">Templates de sites</a></li>
244+
<li><a href="#">Plataforma de agendamento</a></li>
245+
<li><a href="#">Portfólio online</a></li>
246+
<li><a href="#">Criar um blog</a></li>
247+
<li><a href="#">Marketing Digital</a></li>
248+
</ul>
249+
</nav>
250+
</div>
251+
<div class="rodape_mapaCards">
252+
<nav>
253+
<h3>
254+
Empresa
255+
</h3>
256+
<ul>
257+
<li><a href="#">Sobre a Code Arrow</a></li>
258+
<li><a href="#">Contato</a></li>
259+
<li><a href="#">Sala de imprensa</a></li>
260+
<li><a href="#">Declaração de acessibilidade</a></li>
261+
<li><a href="#">Mapa do site</a></li>
262+
<li><a href="#">Trabalhe na Code Arrow</a></li>
263+
</ul>
264+
</nav>
265+
</div>
266+
</section>
267+
</div>
268+
<div class="rodape_termoUso">
269+
<div class="rodape_termoLinks">
270+
<nav>
271+
<ul>
272+
<li><a href="#">Termo de uso</a></li>
273+
<li><a href="#">Política de privacidade</a></li>
274+
</ul>
275+
</nav>
276+
</div>
277+
<div class="rodape_termoAssinatura">
278+
<p>
279+
Code Arrow &copy; 2024 | Feito com ❤️ por Lucas Maciel
280+
</p>
281+
<a href="#">
282+
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#f2f2f2" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-78.83a4,4,0,0,1-5.66,5.66L128,109.66,90.83,146.83a4,4,0,0,1-5.66-5.66l40-40a4,4,0,0,1,5.66,0Z"></path></svg>
283+
</a>
284+
</div>
285+
</div>
286+
</section>
287+
</footer>
170288
</body>
171289
</html>

0 commit comments

Comments
 (0)