-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
217 lines (210 loc) · 12.5 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a1140612d3.js" crossorigin="anonymous"></script>
<title>Marcelo Tremari - Profolio</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/fondoStyles.css">
<link rel="stylesheet" href="css/logo.css">
<link rel="stylesheet" href="css/flexbox.css">
<link rel="stylesheet" href="css/efectoColor.css">
</head>
<body>
<section class="animation_background">
<svg id="svg">
<defs>
<filter id="disFilter">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" seed="1" result="turbulence">
<animate attributeName="baseFrequency" values="0.01;0.005;0.01;" dur="30s" begin="0" repeatCount="indefinite" />
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="20" xChannelSelector="R" yChannelSelector="B" result="displacement" />
</filter>
</defs>
<g id="background">
<image xlink:href="img/fondo.jpg" x="-10" y="-10" height="110%" width="110%" preserveAspectRatio="xMidYMid slice" />
</g>
</svg>
</section>
<header class="headerPrincipal">
<div class="container">
<h1 class="header_logo">
<a href="./index.html">
<div class="words">
<span>M</span>
<span>a</span>
<span>T</span>
<span>r</span>
<span>3</span>
</div>
</a>
</h1>
<nav class="headerPrincipal_nav">
<input id="btSobreMi" class="headerPrincipal_nav__link" type="submit" value="Sobre Mi" onclick="location.href='#sobreMi_nav'">
<input id="btSkills" class="headerPrincipal_nav__link" type="submit" value="Skills" onclick="location.href='#skills_nav'">
<input id="btHobbies" class="headerPrincipal_nav__link" type="submit" value="Hobbies" onclick="location.href='#hobbies_nav'">
<input id="btFormacion" class="headerPrincipal_nav__link" type="submit" value="Formación" onclick="location.href='#formacion_nav'">
<input id="btProyectos" class="headerPrincipal_nav__link" type="submit" value="Proyectos" onclick="location.href='#proyectos_nav'">
<input id="btContacto" class="headerPrincipal_nav__link" type="submit" value="Contacto" onclick="location.href='#contacto_nav'">
</nav>
<h6 class="headerPrincipal_email"><a href="mailto:tremari.marce@gmail.com">tremari.marce@gmail.com</a></h6>
</div>
</header>
<main class="contenidoPrincipal">
<section class="principal">
<div class="container">
<div class="contenidoPrincipal_text">
<div class="imgEmpresarial">
<img class="img_personal" src="./img/MT.jpg" alt="Marcelo Tremari - FrontEnd Students">
</div>
<ul class="presentacion_lista">
<li class="presentacion">Hola, mi nombre es</li>
<li class="presentacion1">Marcelo Alfredo Tremari.</li>
<li class="presentacion2">Estudiante Front-end.</li>
<li class="comentario">Actualmente estoy participando del proyecto Oracle ONE en Alura Latam.</li>
</ul>
</div>
</div>
</section>
<!---->
<section id="sobreMi_nav" class="sobreMi">
<div class="container">
<div class="sobreMi_text">
<h2 class="sobreMi_text__title">Sobre Mí</h2>
<ul class="sobreMi_text__list">
<li class="sobreMi_text__item styleSobreMi">Mi nombre es <p>Marcelo Alfredo Tremari,</p> vivo en Argentina, Buenos Aires. Tengo 42 años, actualmente estoy cursando proyecto Oracle ONE en Alura Latam.</li>
<li class="sobreMi_text__item styleCursiva">Soy autodidacta y me gusta mucho la programación. Valoro el buen ambiente de trabajo y el aprendizaje diario junto con el resto del equipo. Trato de aprender nuevas tecnologías, mejorar mis habilidades cada día, y adaptarme a los cambios. Aspiro a trabajar en una empresa donde pueda ampliar mis conocimientos y evolucionar constantemente.</li>
</ul>
<p class="sobreMi_text__item">Firma</p>
<button id="cv" class="sobreMi_button">Mi Cv</button>
</div>
</div>
</section>
<!---->
<section id="skills_nav" class="skills">
<div class="container">
<div class="skills_text">
<h2 class="skills_text__title">Skills</h2>
<ul class="skills_text__list">
<li>HTML5<i class="skills_text__item fa fa-html5 fa-2x"></i></li>
<li>Javascript<i class="skills_text__item fa-brands fa-js-square fa-2x"></i></li>
<li>Github<i class="skills_text__item fab fa-github-square fa-2x"></i></li>
<li>CSS3<i class="skills_text__item fab fa-css3-alt fa-2x"></i></li>
<li>Bootstrap<i class="skills_text__item fa-brands fa-bootstrap fa-2x"></i></li>
<li>Trello<i class="skills_text__item fa-brands fa-trello fa-2x"></i></li>
</ul>
</div>
</div>
</section>
<!---->
<section id="hobbies_nav" class="hobbies">
<div class="container">
<div class="hobbies_text">
<h2 class="hobbies_text__title">Hobbies</h2>
<ul class="hobbies_text__list">
<li>Oir Musica<i class="hobbies_text__item fa-solid fa-music fa-2x"></i></li>
<li>Cocinar<i class="hobbies_text__item fa-solid fa-kitchen-set fa-2x"></i></li>
<li>Ir al Cine<i class="hobbies_text__item fa-solid fa-film fa-2x"></i></li>
<li>Programar<i class="hobbies_text__item fa-solid fa-laptop-code fa-2x"></i></li>
<li>Gamer<i class="hobbies_text__item fa-solid fa-gamepad fa-2x"></i></li>
<li>Pasear<i class="hobbies_text__item fa-solid fa-person-walking fa-2x"></i></li>
</ul>
</div>
</div>
</section>
<!---->
<section id="formacion_nav" class="formacion">
<div class="container">
<div class="formacion_text">
<h2 class="formacion_text__title">Formación Académica</h2>
<div class="formacion_text__list">
<ul>
<li class="formacion_text__item"><img class="alura-logo" src="./img/alura-logo.png"></li>
<li class="formacion_text__item"><img src="./img/oracle-one-logo.png"></li>
<li class="formacion_text__item">2022</li>
</ul>
<div class="formacion_text__list">
<ul>
<li class="formacion_text__item"><a href="https://app.aluracursos.com/degree/certificate/379cb907-3008-49aa-a304-96fde124025d" target="_blank">Principiante en Programación</a></li>
<li class="formacion_text__item"><a href="https://d335luupugsy2.cloudfront.net/cms%2Ffiles%2F10224%2F1644515319BADGE_2.png?utm_campaign=alura_latam_-_challenge_email_projeto_1_esp&utm_medium=email&utm_source=RD+Station" target="_blank">Insignia ONE Alura Challenge Proyecto 1</a></li>
<li class="formacion_text__item"><a href="https://d335luupugsy2.cloudfront.net/cms%2Ffiles%2F10224%2F1644516322badge.png?utm_campaign=alura_latam_-_challenge_email_projeto_2_esp&utm_medium=email&utm_source=RD+Station" target="_blank">Insignia ONE Alura Challenge Proyecto 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!---->
<section id="proyectos_nav" class="proyectos">
<div class="container">
<div class="proyectos_text">
<h2 class="proyectos_text__title">Proyectos</h2>
<div class="container_proyectos">
<div class="proyectos_text__area img1">
<p class="proyectos_text__item bg">Challenge Ahorcado - Segundo Challenge Formación ONE
</p>
<input id="btRepo" class="proyectos_button" type="submit" value="Repositório"
onclick="location.href='https://github.com/Matr3/ahorcado-challenges-oracle-ONE';" target="_blank">
<input id="btDemo" class="proyectos_button" type="submit" value="Ver demo"
onclick="location.href='https://matr3.github.io/ahorcado-challenges-oracle-ONE/';" target="_blank">
</div>
<div class="proyectos_text__area img2">
<p class="proyectos_text__item bg">Challenge Ahorcado - Primer Challenge Formación ONE
</p>
<input id="btRepo" class="proyectos_button" type="submit" value="Repositório"
onclick="location.href='https://github.com/Matr3/encriptador-desencriptador/';" target="_blank">
<input id="btDemo" class="proyectos_button" type="submit" value="Ver demo"
onclick="location.href='https://matr3.github.io/encriptador-desencriptador/';" target="_blank">
</div>
</div>
</div>
</div>
</section>
<!---->
<section id="contacto_nav" class="contacto">
<div class="container">
<h2 class="contacto__titulo">Contacto</h2>
<form action="#" class="formulario" id="formulario" method="post">
<div class="input-container">
<input class="contacto__input" type="text" name="nombre" id="nombre" placeholder="Nombre y Apellido" data-tipo="nombre">
<label for="nombre"></label>
</div>
<div class="input-container">
<input class="contacto__input" type="text" name="email" id="email" placeholder="E-mail" data-tipo="email" >
<label for="email"></label>
</div>
<div class="input-container">
<input class="contacto__input" type="text" name="asunto" id="asunto" placeholder="Asunto" data-tipo="asunto" >
<label for="asunto"></label>
</div>
<div class="input-container">
<textarea class="contacto__textarea" rows="5" cols="26" id="mensaje" name="mensaje" placeholder="Su mensaje" data-tipo="mensaje"></textarea>
<label for="mensaje"></label>
</div>
<input type="submit" class="contacto__boton" name="enviar" id="btn-enviar" disabled="true">
</form>
</div>
</div>
</section>
<!---->
<section class="social">
<div class="redesSociales icon">
<a href="https://github.com/Matr3" target="_blank"><i class="contenidoPrincipal_link__1 fa fa-github-square github fa-4x"></i></a>
<a href="https://www.instagram.com/matrecreative/" target="_blank"><i class="contenidoPrincipal_link__2 fa fa-instagram fa-4x"></i></a>
<a href="https://www.linkedin.com/in/marcelo-tremari/" target="_blank"><i class="contenidoPrincipal_link__3 fa fa-linkedin-square fa-4x"></i></a>
</div>
</section>
</main>
<footer class="piePagina">
<section class="piePagina_pincipal">
<div class="container">
<h3>Desarrollado por Marcelo Alfredo Tremari © 2022</h3>
</div>
</section>
</footer>
<script src="js/botonera.js"></script>
<script src="js/validacion.js"></script>
</body>
</html>