Skip to content

Commit 731877d

Browse files
lucasmaciel-glucasmaciel-g
authored
Aprimorando o projeto com semântica
1 parent 54a2d98 commit 731877d

File tree

3 files changed

+128
-58
lines changed

3 files changed

+128
-58
lines changed

‎css/style.css‎

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ ul{
235235
text-align: center;
236236
}
237237

238-
.video_texto h2, .migracao_texto h2{
238+
.video_texto h2, .migracao_texto h2, .controle_texto h2{
239239
font-size: 2.75rem;
240240
}
241241

@@ -328,29 +328,78 @@ ul{
328328
max-width: 100%;
329329
}
330330

331-
.migracao_card h3, .sucesso .menu_botaoPrimario{
331+
.migracao_card h3, .controle_card h3{
332332
font-size: 1.25rem;
333333
}
334334

335-
.migracao_card p{
335+
.migracao_card p, .controle p{
336336
font-size: 1.125rem;
337337
line-height: 1.4;
338338
}
339339

340340
.sucesso_bg{
341-
min-height: 30vh;
341+
padding: 80px 30px;
342342
display: flex;
343343
justify-content: center;
344344
align-items: center;
345345
background-color: #D9FFFE;
346346
}
347347

348+
.sucesso{
349+
gap: 60px
350+
}
351+
348352
.sucesso h2{
349353
font-weight: 400;
350-
color: #273945;
351-
font-size: 3.4rem;
354+
color: #21323f;
355+
font-size: 3.5rem;
352356
}
353357

354358
.sucesso .menu_botaoPrimario{
355359
font-weight: 400;
360+
font-size: 1.5rem;
361+
}
362+
363+
.controle_bg{
364+
background-image: url(../img/6-controle-total.png);
365+
background-color: #FFF;
366+
background-position: left top;
367+
background-size: cover;
368+
display: flex;
369+
justify-content: flex-end;
370+
}
371+
372+
.controle{
373+
width: 50%;
374+
display: flex;
375+
flex-direction: column;
376+
justify-content: center;
377+
padding: 60px;
378+
background-color: #FFF;
379+
gap: 30px;
380+
}
381+
382+
.controle_texto{
383+
display: flex;
384+
flex-direction: column;
385+
gap: 32px;
386+
}
387+
388+
.controle_baralho{
389+
display: flex;
390+
gap: 50px;
391+
}
392+
393+
.controle_card{
394+
display: flex;
395+
flex-direction: column;
396+
gap: 30px;
397+
border-top: 1px solid #060606;
398+
padding-top: 20px;
399+
/* flex-grow: 1; */
400+
/* flex-basis: 0; */
401+
}
402+
403+
.controle .menu_botaoPrimario{
404+
align-self: flex-start;
356405
}

‎img/6-controle-total.png‎

433 KB
Loading

‎index.html‎

Lines changed: 73 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,139 +7,160 @@
77
<title>Code Arrow</title>
88
</head>
99
<body>
10-
<div class="cabecalho_bg">
10+
<header class="cabecalho_bg">
1111
<div class="cabecalho">
1212
<img src="./img/logo-code-arrow-light.svg" alt="logo code arrow" class="cabecalho_logo">
13-
<div class="cabecalho_nav">
13+
<nav class="cabecalho_nav">
1414
<ul class="cabecalho_menu">
1515
<li><a href="#">Inicio</a></li>
1616
<li><a href="#">Sobre</a></li>
1717
<li><a href="#">Contato</a></li>
1818
</ul>
1919
<a href="#" class="menu_botaoTerciario">Entrar</a>
20-
</div>
20+
</nav>
2121
</div>
22-
</div>
22+
</header>
2323

24-
<div class="principal_bg">
25-
<div class="principal">
26-
<div class="principal_imagem1">
24+
<main class="principal_bg">
25+
<article class="principal">
26+
<section class="principal_imagem1">
2727
<img src="img/1-principal.png" alt="">
28-
</div>
29-
<div class="principal_projetos">
28+
</section>
29+
<section class="principal_projetos">
3030
<h1>Sua marca com nosso estúdio digital</h1>
3131
<p>Transformamos ideias em experiências digitais impactantes.</p>
3232
<div class="principal_menu">
3333
<a href="#" class="menu_botaoPrimario">Projetos</a>
3434
<a href="#" class="menu_botaoSecundario">Iniciar Projeto</a>
3535
</div>
36-
</div>
37-
</div>
38-
</div>
36+
</section>
37+
</article>
38+
</main>
3939

40-
<div class="equipe_bg">
40+
<article class="equipe_bg">
4141
<div class="equipe">
42-
<div class="equipe_texto">
42+
<section class="equipe_texto">
4343
<h2>É diferente trabalhar conosco</h2>
4444
<p>Organizamos a liderança sênior e a critividade para cada cliente, portanto, não existe uma solução única para todos. Essa abordagem garante que você obtenha o conhecimento profundo que vem com a experiência em seu setor e um apartamento.</p>
4545
<a href="#" class="menu_botaoPrimario">Saiba mais</a>
46-
</div>
46+
</section>
4747

48-
<div class="equipe_integrantes">
49-
<div class="integrantes_id">
48+
<section class="equipe_integrantes">
49+
<section class="integrantes_id">
5050
<img src="img/foto-pessoas/01.png" alt="foto terri stojceski">
5151
<div class="integrante_nomeCargo">
5252
<h3>Terri Stojceski</h3>
5353
<p>Fundador, Diretor de Design</p>
5454
</div>
55-
</div>
56-
<div class="integrantes_id">
55+
</section>
56+
<section class="integrantes_id">
5757
<img src="img/foto-pessoas/02.png" alt="foto kelly savala">
5858
<div class="integrante_nomeCargo">
5959
<h3>Kelly Savala</h3>
6060
<p>Diretora de Marca e Comunicação</p>
6161
</div>
62-
</div>
63-
<div class="integrantes_id">
62+
</section>
63+
<section class="integrantes_id">
6464
<img src="img/foto-pessoas/03.png" alt="foto shane reynolds">
6565
<div class="integrante_nomeCargo">
6666
<h3>Shane Reynolds</h3>
6767
<p>Diretor de Estratégia</p>
6868
</div>
69-
</div>
70-
<div class="integrantes_id">
69+
</section>
70+
<section class="integrantes_id">
7171
<img src="img/foto-pessoas/05.png" alt="foto lindsay watson">
7272
<div class="integrante_nomeCargo">
7373
<h3>Lindsay Watson</h3>
7474
<p>Diretora de Arte</p>
7575
</div>
76-
</div>
77-
<div class="integrantes_id">
76+
</section>
77+
<section class="integrantes_id">
7878
<img src="img/foto-pessoas/06.png" alt="foto Chung Schlueter">
7979
<div class="integrante_nomeCargo">
8080
<h3>Chung Schlueter</h3>
8181
<p>Chefe de Gestão de Produtos</p>
8282
</div>
83-
</div>
84-
<div class="integrantes_id">
83+
</section>
84+
<section class="integrantes_id">
8585
<img src="img/foto-pessoas/04.png" alt="foto david bell">
8686
<div class="integrante_nomeCargo">
8787
<h3>David Bell</h3>
8888
<p>Desenvolvedor líder</p>
8989
</div>
90-
</div>
91-
</div>
90+
</section>
91+
</section>
9292
</div>
93-
</div>
93+
</article>
9494

95-
<div class="video_bg">
95+
<article class="video_bg">
9696
<div class="video">
97-
<div class="video_texto">
97+
<section class="video_texto">
9898
<h2>Nossa estrutura. Seu Crescimento.</h2>
9999
<p>Nossa infraestrutura robusta, baseada em tecnologias modernas garantem agilidade, eficiência e segurança, permitindo que você foque no que realmente importa: alcançar resultados extraordinários.</p>
100-
</div>
100+
</section>
101101

102-
<div class="video_player">
102+
<section class="video_player">
103103
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZalMmnW_fvo?si=VlQph9bVN8_zS0qP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
104-
</div>
104+
</section>
105105
<a href="#" class="menu_botaoQuaternario">Comece agora!</a>
106106
</div>
107-
</div>
107+
</article>
108108

109-
<div class="migracao_bg">
109+
<article class="migracao_bg">
110110
<div class="migracao">
111-
<div class="migracao_texto">
111+
<section class="migracao_texto">
112112
<h2>Migração de sistema. Simplificada.</h2>
113113
<p>Seu sistema está em outro lugar? Junte-se aos mais de 3 milhões de clientes que já aproveitam uma gestão rápida, segura e confiável aqui na Code Arrow. Nossa equipe de especialistas cuida de tudo, e seu sistema continua online o tempo todo. Isso mesmo – sem queda/downtime, sem perda de dados, sem complicações.
114114
</p>
115-
</div>
116-
<div class="migracao_baralho">
117-
<div class="migracao_card">
115+
</section>
116+
<section class="migracao_baralho">
117+
<section class="migracao_card">
118118
<div class="migracao_icone"><img src="img/list-dashes.svg" alt="icone menu sanduiche"></div>
119119
<h3>3 passos simples</h3>
120120
<p>Basta escolher seu plano, preencher o formulário de solicitação de migração, enviá-lo e depois é só relaxar.
121121
</p>
122-
</div>
123-
<div class="migracao_card">
122+
</section>
123+
<section class="migracao_card">
124124
<div class="migracao_icone"><img src="img/lightning.svg" alt="icone raio"></div>
125125
<h3>Rápido e seguro</h3>
126126
<p>95% dos sistemas são migrados em menos de 20 minutos. Os outros 5% ainda são mais rápidos que a média do mercado. E o melhor de tudo: seu sistema fica no ar o tempo todo.</p>
127-
</div>
128-
<div class="migracao_card">
127+
</section>
128+
<section class="migracao_card">
129129
<div class="migracao_icone"><img src="img/seal-check.svg" alt="icone check"></div>
130130
<h3>Grátis</h3>
131131
<p>Seja 1 ou 100 sistemas para migrar, a migração é gratuita em todos os nossos planos.
132132
</p>
133-
</div>
134-
</div>
133+
</section>
134+
</section>
135135
</div>
136-
</div>
136+
</article>
137137

138-
<div class="sucesso_bg">
139-
<div class="sucesso">
138+
<article class="sucesso_bg">
139+
<section class="sucesso">
140140
<h2>O sucesso de amanhã começa hoje.</h2>
141141
<a href="#" class="menu_botaoPrimario">Comece já</a>
142-
</div>
143-
</div>
142+
</section>
143+
</article>
144+
145+
<article class="controle_bg">
146+
<section class="controle">
147+
<div class="controle_texto">
148+
<h2>Controle total das suas vendas</h2>
149+
<p>Gerencie todas as suas vendas e leads em um só lugar. Tenha uma visão completa e em tempo real de como seu negócio está performando, permitindo que você tome decisões estratégicas de forma rápida e eficiente.</p>
150+
</div>
151+
<div class="controle_baralho">
152+
<div class="controle_card">
153+
<h3>Vendas</h3>
154+
<p>Monitore suas vendas, identifique padrões de compra e acompanhe o faturamento. Tenha controle sobre o desempenho de cada produto e identifique oportunidades para aumentar seus lucros.</p>
155+
</div>
156+
<div class="controle_card">
157+
<h3>Leads</h3>
158+
<p>Quando novos leads são gerados, eles são automaticamente adicionados ao seu banco de dados. Organize seus leads com etiquetas, filtre os mais importantes e crie estratégias de conversão para transformar oportunidades em vendas.
159+
</p>
160+
</div>
161+
</div>
162+
<a href="#" class="menu_botaoPrimario">Começar</a>
163+
</section>
164+
</article>
144165
</body>
145166
</html>

0 commit comments

Comments
 (0)