-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (145 loc) · 10.4 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#021E2D">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#021E2D">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#021E2D">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Press+Start+2P" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
<title>Iván Castelán👾</title>
</head>
<body>
<div id="home" class="section scrollspy">
<div id="index-banner" class="parallax-container">
<nav class="transparent">
<div class="nav-wrapper transparent">
<a href="menu" class="button-collapse" id="btncollapse">
<i class="material-icons">apps</i>
</a>
<div class="menu" id="menu">
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#home" class="link">Home</a></li>
<li><a href="#portfolio" class="link">Portafolio</a></li>
<li><a href="#blog" class="link">Blog</a></li>
<li><a href="#contact" class="link">Contacto</a></li>
</ul>
</div>
</div>
</nav>
<div class="section no-pad-bot">
<div class="container-header"> <br><br>
<h1 class="header center teal-text text-lighten-2"><i class="material-icons">chevron_left</i>Iván Castelán 👾 <i class="material-icons">chevron_right</i></h1>
</div>
</div>
<div class="parallax"><img src="swars1.png"
alt="Unsplashed background img 1"></div>
</div>
</div>
<!-- Portafolio -->
<div class="container" style="padding:20px;">
<div id="portfolio" class="section scrollspy">
<h3 style="text-align:center;">Portafolio</h3>
<div class="row">
<div class="col s12 m6">
<div class="card small sticky-action">
<div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="./modulo_digital.png"> </div>
<div class="card-action"> <span class="card-title activator grey-text text-darken-4">Módulo Digital Monterrey<i class="material-icons right">more_vert</i></span>
<p><a href="https://modulodigital.monterrey.gob.mx/">Ir a plataforma</a></p>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card small sticky-action">
<div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="./soberana.png"> </div>
<div class="card-action"> <span class="card-title activator grey-text text-darken-4">Soberana<i class="material-icons right">more_vert</i></span>
<p><a href="https://play.google.com/store/search?q=Soberana&c=apps">Descargar aplicación</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tools -->
<div class="container" style="padding:20px;">
<div id="skills" class="section scrollspy">
<h3 style="text-align:center;">Tools and Experience</h3>
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-image"> <span class="card-title"><a style="color:white" href=""></a></span> </div>
<div class="card-content"> <i class="devicon-android-plain colored" style="font-size:50px;"></i> <i class="devicon-apache-plain colored" style="font-size:50px;"></i> <i class="devicon-apple-plain colored" style="font-size:50px;"></i> <i class="devicon-atom-plain colored"
style="font-size:50px;"></i> <i class="devicon-bootstrap-plain colored" style="font-size:50px;"></i> <i class="devicon-bower-plain colored" style="font-size:50px;"></i> <i class="devicon-c-plain colored" style="font-size:50px;"></i> <i class="devicon-chrome-plain colored"
style="font-size:50px;"></i> <i class="devicon-csharp-plain colored" style="font-size:50px;"></i> <i class="devicon-css3-plain colored" style="font-size:50px;"></i> <i class="devicon-debian-plain colored" style="font-size:50px;"></i>
<i class="devicon-devicon-plain colored" style="font-size:50px;"></i> <i class="devicon-django-plain colored" style="font-size:50px;"></i> <i class="devicon-facebook-plain colored" style="font-size:50px;"></i> <i class="devicon-firefox-plain colored"
style="font-size:50px;"></i> <i class="devicon-foundation-plain colored" style="font-size:50px;"></i> <i class="devicon-git-plain colored" style="font-size:50px;"></i> <i class="devicon-github-plain colored" style="font-size:50px;"></i> <i class="devicon-gitlab-plain colored" style="font-size:50px;">
</i>
<i class="devicon-google-plain colored" style="font-size:50px;"></i> <i class="devicon-grunt-plain colored" style="font-size:50px;"></i> <i class="devicon-gulp-plain colored" style="font-size:50px;"></i> <i class="devicon-html5-plain colored"
style="font-size:50px;"></i> <i class="devicon-java-plain colored" style="font-size:50px;"></i> <i class="devicon-javascript-plain colored" style="font-size:50px;"></i> <i class="devicon-less-plain colored" style="font-size:50px;"></i>
<i class="devicon-linux-plain colored" style="font-size:50px;"></i> <i class="devicon-mongodb-plain colored" style="font-size:50px;"></i> <i class="devicon-mysql-plain colored" style="font-size:50px;"></i> <i class="devicon-nodejs-plain colored"
style="font-size:50px;"></i> <i class="devicon-nodewebkit-plain colored" style="font-size:50px;"></i> <i class="devicon-photoshop-plain colored" style="font-size:50px;"></i> <i class="devicon-php-plain colored" style="font-size:50px;"></i> <i class="devicon-python-plain colored" style="font-size:50px;">
</i> <i class="devicon-pycharm-plain colored" style="font-size:50px;"></i> <i class="devicon-sass-plain colored" style="font-size:50px;"></i> <i class="devicon-slack-plain colored" style="font-size:50px;"></i> <i class="devicon-ssh-plain colored"
style="font-size:50px;"></i> <i class="devicon-tomcat-plain colored" style="font-size:50px;"></i> <i class="devicon-trello-plain colored" style="font-size:50px;"></i> <i class="devicon-twitter-plain colored" style="font-size:50px;"></i> <i class="devicon-typescript-plain colored" style="font-size:50px;" ></i> <i class="devicon-ubuntu-plain colored" style="font-size:50px;"></i> <i class="devicon-vim-plain colored" style="font-size:50px;"></i> <i class="devicon-webpack-plain colored"
style="font-size:50px;"></i> </div>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center"> </div>
</div>
</div>
<div class="parallax"><img src="parallax.png" alt="Unsplashed background img 3"></div>
</div>
<div class="container" style="padding:20px;">
<!-- Seccion de Contacto -->
<div id="contact" class="section scrollspy">
<h3 style="text-align:center;">Contacto</h3>
<div class="card medium">
<div class="contacto">
<div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="./swars1.jpg"> </div>
<div class="card-content"> <span class="card-title activator" style="text-align:right;"><a class="btn-floating waves-effect waves-light red pulse"><i class="large material-icons">arrow_drop_up</i></a></span>
</div>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">Formulario de contacto<i size="large" class="material-icons right">close</i></span>
<form class="col s12" action="https://formspree.io/[email protected]" method="POST">
<div class="row">
<div class="input-field col s6"> <i class="material-icons prefix">account_circle</i> <input class="validate" id="icon_prefix" type="text" name="name"> <label for="icon_prefix">Nombre</label> </div>
<div class="input-field col s6"> <i class="material-icons prefix">email</i> <input class="validate" id="email" type="email" name="_replyto"> <label for="email" data-error="Please enter a valid Email Address" data-success="Verified!">Email</label> </div>
</div>
<div class="row">
<div class="input-field col s12"> <i class="material-icons prefix">message</i> <textarea id="icon_prefix2" class="materialize-textarea" name="message"></textarea> <label for="icon_prefix2">Mensaje</label> </div>
</div> <button class="btn waves-effect grey waves-dark darken-3 white-text z-depth-4" type="submit" name="action">Enviar <i class="material-icons right">send</i> </button> </form>
</div>
</div>
</div>
</div>
<div class="fixed-action-btn horizontal click-to-toggle"> <a class="btn-floating btn-large waves-effect waves-default pulse"> <i class="material-icons">menu</i> </a>
<ul>
<li><a class="btn-floating blue darken-2 waves-effect waves-default" href="#home"><i class="material-icons">arrow_upward</i></a></li>
<li><a class="btn-floating green darken-2 waves-effect waves-default" href="#portfolio"><i class="material-icons">code</i></a></li>
<li><a class="btn-floating yellow darken-3 waves-effect waves-default" href="#blog"><i class="material-icons">library_books</i></a></li>
<li><a class="btn-floating red darken-1 waves-effect waves-default" href="#contact"><i class="material-icons">person</i></a></li>
</ul>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="materialize.min.js"></script>
<script src="init.js"></script>
<!-- Footer -->
<footer class="page-footer">
<div class="footer-copyright" style="padding-left: 30px"> <i class="material-icons" style="padding-right:5px">copyright</i>
<p>Héctor Iván Hernández Castelán | Proudly <i class="material-icons">code</i> with <i class="material-icons" style="color:red" >favorite</i></p>
</div>
</footer>
</body>
</html>