-
Notifications
You must be signed in to change notification settings - Fork 0
/
index1.html
132 lines (111 loc) · 6.53 KB
/
index1.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200&family=Inter:wght@600&family=Josefin+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Portfólio - Charles Anderson</title>
</head>
<body>
<!-- Cabeçalho -->
<div class="menu-principal">
<div>
<nav>
<h2 class="portfolio">Portfó<span class="lio">lio</span></h2>
<ul>
<li class="lista_menu_principal"><a href="#">Home</a></li>
<li class="lista_menu_principal"><a href="#">Sobre Mim</a></li>
<li class="lista_menu_principal"><a href="#">Skills</a></li>
<li class="lista_menu_principal"><a href="#">Contato</a></li>
</ul>
</nav>
</div>
<!-- Conteúdo Principal -->
<main>
<div class="conteudo-principal">
<h4>Olá, meu nome é</h4>
<h1>Charles <span class="lio">Anderson</span></h1>
<h3>Sou Desenvolvedor Full Stack e Analista de Dados</h3>
<div class="contato">
<form action="https://getform.io/f/8e5008cc-8cc5-45fd-a909-d7767a30a74b" method="post" name="contato">
<input type="text" name="nome-usuario" id="nome" placeholder="Informe Seu Nome" autocomplete="on" minlength="4" maxlength="38" required>
<input type="email" name="email-usuario" id="email" placeholder="Informe Seu E-mail" autocomplete="on" required>
<input type="textarea" name="texto-usuario" id="textarea" maxlength="200" placeholder="Escreva Sua Mensagem" required>
<input type="submit" name="botao-enviar" id="enviar" value="Vamos Conversar?">
</form>
</div>
</div>
</main>
</div>
<!-- Conteúdo Secundário -->
<section class="sobre-mim">
<div class="conteudo-secundario">
<img src="/assets/javascript-1.jpg" alt="Foto de Código em JavaScript">
<div class="texto-sobre-mim">
<h2>Sobre Mim</h2>
<h5>Software Developer & <span class="lio"> Data Analyst</span></h5>
<p>Sou um desenvolvedor full stack, posso trabalhar no front e no back end. Utilizo tecnologias como HTML, CSS javaScript, React, Node.Js, MongoDB e SQL na construção de softwares e aplicações. Escrevo meus códigos de forma limpa e valorizo a experiência do usuário, a interface e o design. Também posso trabalhar com análise de dados utilizando SAS Enterprise Guide, SQL, Power BI e TIBCO Spotfire.</p>
</div>
</div>
</section>
<!-- Conteúdo Serviços -->
<section class="servicos">
<div class="titulo-servicos">
<h2>Nossos Serviços</h2>
</div>
<div class="caixa">
<div class="cartao">
<i class="fa-solid fa-code"></i>
<h5>Desenvolvedor Web</h5>
<div class="pra">
<p>Todo site precisa ser construído sob duas premisas básicas: Primeira, funcionar em qualquer dispositivo. Segunda, ser o mais rápido possível.</p>
<p style="text-align: center;">
<a class="botao" href="#">Mais Informações</a>
</p>
</div>
</div>
<div class="cartao">
<i class="fa-sharp fa-solid fa-database"></i>
<h5>Analista de Dados</h5>
<div class="pra">
<p>Coleta, organização, interpretação de datasets, estatística aplicada e ETL na elaboração de projetos e construção de dashboards.</p>
<p style="text-align: center;">
<a class="botao" href="#">Mais Informações</a>
</p>
</div>
</div>
</div>
</section>
<!-- Contate-Me / Contrate-Me -->
<div class="contate-me">
<p>Deixe-Me Construir Um Lindo Site Para Você.</p>
<form method="post" name="escolha-dev-ou-dados">
<label for="escolha-dev-web">
<input type="checkbox" id="escolha-dev-web" name="escolha-dev-web" value="desenvolvimento-web">
Desenvolvimento Web
</label>
<label for="escolha-analise-dados">
<input type="checkbox" id="escolha-analise-dados" name="escolha-analise-dados" value="analise-de-dados">
Análise de Dados
</label>
</form>
<a href="segundo-botao" href="#">Contrate-Me</a>
</div>
<!-- Rodapé -->
<footer>
<p>Charles Anderson</p>
<p>Para mais informações, por favor, entre em contato via minhas redes sociais:</p>
<div class="redes-sociais">
<a href="https://www.linkedin.com/in/charlesanderson25/" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/charlesanderson25" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="https://www.instagram.com/charles_anderson_25/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
</div>
<p class="fim"><i class="fa-regular fa-copyright"></i>Charles Anderson</p>
</footer>
</body>
</html>