-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (145 loc) · 8.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Portfolio</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap Icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2&family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<!-- SimpleLightbox plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<!--Google font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand sub" href="#page-top">Inicio</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item sub"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item sub"><a class="nav-link" href="#services">Servicios</a></li>
<li class="nav-item sub"><a class="nav-link" href="#portfolio">Conocimientos</a></li>
<a class="bi bi-github social" href="https://github.com/luchh9"></a>
<a class="bi bi-facebook social" href="https://www.facebook.com/lucho.mariotti"></a>
<a class="bi bi-linkedin social" href="https://www.linkedin.com/in/luciano-mariotti-b95883210/"></a>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container px-4 px-lg-5 h-100">
<div class="align-items-center justify-content-center text-center">
<img src="assets/img/portfolio/Logo/parte_superior.png" alt="" id="logo1">
<img src="assets/img/portfolio/Logo/parte_inferior.png" alt="" id="logo2">
</div>
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
<div class="col-lg-8 align-self-end">
<h1 class="text-white titulo">Hola, soy Luciano Mariotti</h1>
<hr class="divider" />
</div>
<div class="col-lg-8 align-self-baseline">
<p class="text-white-75 mb-5 sub">Desarrollador frontend</p>
<a class="btn btn-primary btn-xl sub" href="#about">Baja!</a>
</div>
</div>
</div>
</header>
<!-- About-->
<section class="page-section bg-primary" id="about">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">Un poco de mi historia...</h2>
<hr class="divider divider-light" />
<p class="text-white-75 mb-4">Soy un estudiante con conocimientos en tecnologias WEB. Soy de Argentina y estudio en UNICEN, aunque soy mas autodidacta. Mi objetivo es convertirme en frontend developer y estoy en eso! Si bien tengo algunos conocimientos backend (Php) mi idea es focalizarme en tecnologias frontend, aunque no descarto otra posibilidad.</p>
<a class="btn btn-light btn-xl" href="#services">Mis servicios...de momento</a>
</div>
</div>
</div>
</section>
<!-- Services-->
<section class="page-section" id="services">
<div class="container px-4 px-lg-5">
<h2 class="text-center mt-0">A sus ordenes profe!</h2>
<hr class="divider" />
<div class="row gx-4 gx-lg-5">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi bi-headset fs-1 text-primary "></i></div>
<h3 class="h4 mb-2">Comunicacion</h3>
<p class="text-muted mb-0">Soy alguien extrovertido, por lo cual no me cuesta comunicarme! Ni preguntar!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-laptop fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Adaptabilidad</h3>
<p class="text-muted mb-0">Capaz de adaptarme a cualquier ambito.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi bi-graph-up fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Crecimiento</h3>
<p class="text-muted mb-0">Enfocado en crecer, tanto como persona y como developer.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi bi-lightning-charge fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Sacrificio</h3>
<p class="text-muted mb-0">Dispuesto a aprender y pulir los conocimientos adquiridos.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Conocimientos-->
<div id="portfolio">
<div class="container-fluid p-0">
<div class="text-center"><i class="bi bi-journal-code text-primary">Tecnologías</i></div>
<div class="row g-0">
<div class="text-center">
<img src="assets/img/portfolio/Tecnologias/javascript-logo.png" class="img-thumbnail iconos" alt="...">
<img src="assets/img/portfolio/Tecnologias/html-logo.png" class="img-thumbnail iconos" alt="...">
<img src="assets/img/portfolio/Tecnologias/css-logo.png" class="img-thumbnail iconos" alt="...">
<img src="assets/img/portfolio/Tecnologias/react-logo.png" class="img-thumbnail iconos" alt="...">
<img src="assets/img/portfolio/Tecnologias/github-logo.png" class="img-thumbnail iconos" alt="...">
</div>
</div>
</div>
</div>
<!-- aca va el contact-->
<!-- Footer-->
<footer class="bg-light py-5">
<div class="container px-4 px-lg-5"><div class="small text-center text-muted">Copyright © 2021 - luchh9</div></div>
</footer>
<!-- gsap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- SimpleLightbox plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>