-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (120 loc) · 4.34 KB
/
index.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
133
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Maiara Moraes. Web Designer Desenvolvedora Front-end">
<title> Portfólio | Maiara Moraes</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="fotos/favicon.svg">
</head>
<body>
<header class="header">
<a href="#contato"><img src="./fotos/MARCA.svg" alt="Maiara"></a>
<nav>
<ul class="header-menu">
<li> <a href="#contato">contato</a></li>
<li> <a href="#sobremim">sobre mim</a></li>
<li> <a href="#projetos">projetos</a></li>
<li> <a href="#skills">skills</a></li>
</ul>
</nav>
</header>
<main class="introducao">
<div>
<h1 id="contato"> Oi, meu nome é <br> <span> Maiara Moraes! </span> </h1>
<h2>BEM-VINDO AO MEU PORTFÓLIO :)</h2>
<div>
<ul class="contato">
<li class="contato-item ">
<img class="logo" src="./fotos/Group 9.png" alt=""> <a href=mailto:maiara.ctt@gmail.com">Email</a>
<p>maiara.ctt@gmail.com</p>
</li>
<li class="contato-item ">
<img class="logo" src="./fotos/linkedinfoto.png" alt=""><a href="https://www.linkedin.com/in/maiaramss">LinkedIn</a>
<p>@maiaram</p>
</li>
<li class="contato-item ">
<img class="logo" src="./fotos/githubfoto.png" alt=""> <a href="https://github.com/maiamss">GitHub</a>
<p>@maiamss</p>
</li>
</ul>
</div>
</div>
<img class="foto" src="./fotos/foto.jpg" alt="Foto de Maiara sorrindo e olhando diretamente para a câmera">
</main>
<section class="sobre" id="sobremim" aria-label="sobre">
<div>
<span class="detalhe"></span>
<img class="avatar" src="./fotos/Group 10.jpg" alt="">
</div>
<div>
<h2>Sobre mim</h2>
<p class="sobre-texto">Tenho 19 anos, curso Ciência da Computação. Sou uma apaixonada por tecnologia, livros e música que decidiu trilhar o caminho da programação. Vivo entre o analógico e o digital. </p>
<p>Não possuo experiência na área, mas atualmente estou focando meus estudos nas tecnologias voltadas ao <strong>FrontEnd.</strong> </p>
</div>
</section>
<section class="projetos" id="projetos" aria-label="projetos">
<h2>Projetos</h2>
<div class="projects">
<div class="project-square">
<span>EM BREVE</span>
</div>
<div class="project-square">
<span>EM BREVE</span>
</div>
<div class="project-square">
<span>EM BREVE</span>
</div>
<div class="project-square">
<span>EM BREVE</span>
</div>
<div class="project-square">
<span>EM BREVE</span>
</div>
<div class="project-square">
<span>EM BREVE</span>
</div>
</div>
</section>
<section class="skills" id="skills" aria-label="skills">
<div>
<H1> <span class="skills-titulo1">SKILLS</span>
<br>
<span class="skills-titulo2"> SKILLS </span>
<br> <span class="skills-titulo3"> SKILLS</span>
</H1>
</div>
<div class="skills-grade">
<div class="skills-item">
<img src="./fotos/htmllogo.png" alt="logo do HTML com fundo laranja">
<p>HTML</p>
</div>
<div class="skills-item">
<img src="./fotos/csslogo.png" alt="logo do CSS com fundo azul">
<p>CSS</p>
</div>
<div class="skills-item">
<img src="./fotos/javascript-logo-big.png" alt="logo do JavaScript com fundo amarelo">
<p>JavaScript</p>
</div>
<div class="skills-item">
<img src="./fotos/figmalogo.png" alt="logo do Figma colorido">
<p>Figma</p>
</div>
</div>
</section>
<footer class="footer">
<div>
<p class="footer-texto1"> <strong>Entre em contato comigo!</strong> </p>
<br>
<p class="footer-texto2">Site desenvolvido por Maiara Moraes, 2023. <br> <a href="https://sp-studio.de./" target="_blank">Imagem do south park</a> </p>
</div>
<ul class="footer-links">
<li> <a href=mailto:maiara.ctt@gmail.com">maiara.ctt@gmail.com</a></li>
<li><a href="https://www.linkedin.com/in/maiaramss">LinkedIn</a></li>
<li><a href="https://github.com/maiamss">GitHub</a></li>
</ul>
</footer>
</body>
</html>