-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·142 lines (126 loc) · 7.56 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"><!-- UTF-8 es el formato de codificacion para unicode-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/estilos/style.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=Roboto:wght@100&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="img/favicon.png">
<title>Pagina personal</title>
</head>
<body>
<header>
<!-- Encabezado de tipo h1 -->
<h1 class="titulo-principal" >Alejandro Rodrigo Villaseñor Rivas</h1>
</header>
<div class="bgr">
<nav class="container navegador">
<!-- Agregar mi especialidad y un formulario de contacto -->
<a href="index.html">Inicio</a>
<a href="about.html">Sobre mi</a>
<a href="clientes.html">Clientes</a>
<a href="contacto.html">Contacto</a>
</nav><!-- Basrra de navegacion -->
</div>
<section class="background">
<div class="transparencia">
<h2 class="titulo2">Ingeniero en computación</h2><!-- Las etiquetas h son jerarquicas-->
<div class="direccion">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="80" height="80" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a4e42f" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="11" r="3" />
<path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />
</svg>
<p>Guadalajara, Jalisco.</p>
</div>
<div class="alinear-boton">
<a class="boton" href="#">Contactar</a>
</div>
</div>
</section>
<main class=" container sombreado">
<h2 class="titulo2">Experiencia profesional</h2>
<div class="container-principal">
<section class="servicio">
<h3>Desarollo web</h3>
<div class="iconos">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-edge" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#00b341" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M20.978 11.372a9 9 0 1 0 -1.593 5.773" />
<path d="M20.978 11.372c.21 2.993 -5.034 2.413 -6.913 1.486c1.392 -1.6 .402 -4.038 -2.274 -3.851c-1.745 .122 -2.927 1.157 -2.784 3.202c.28 3.99 4.444 6.205 10.36 4.79" />
<path d="M3.022 12.628c-.283 -4.043 8.717 -7.228 11.248 -2.688" />
<path d="M12.628 20.978c-2.993 .21 -5.162 -4.725 -3.567 -9.748" />
</svg>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid quis maxime, eum, necessitatibus consequuntur optio commodi praesentium sit perferendis eaque vel sapiente! Repellat laudantium quis, laborum hic saepe illo ullam.</p>
</section>
<section class="servicio">
<h3>Desarollo de software</h3>
<div class="iconos">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-android" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#7bc62d" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="4" y1="10" x2="4" y2="16" />
<line x1="20" y1="10" x2="20" y2="16" />
<path d="M7 9h10v8a1 1 0 0 1 -1 1h-8a1 1 0 0 1 -1 -1v-8a5 5 0 0 1 10 0" />
<line x1="8" y1="3" x2="9" y2="5" />
<line x1="16" y1="3" x2="15" y2="5" />
<line x1="9" y1="18" x2="9" y2="21" />
<line x1="15" y1="18" x2="15" y2="21" />
</svg>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora aperiam doloribus ipsum veniam vero, sint nostrum, dolor accusamus eaque laboriosam dignissimos, libero ad unde. In cupiditate distinctio molestias velit accusamus?</p>
</section>
<section class="servicio">
<h3>Linux OS</h3>
<div class="iconos">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-devices-2" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#c9de00" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M10 15h-6a1 1 0 0 1 -1 -1v-8a1 1 0 0 1 1 -1h6" />
<rect x="13" y="4" width="8" height="16" rx="1" />
<line x1="7" y1="19" x2="10" y2="19" />
<line x1="17" y1="8" x2="17" y2="8.01" />
<circle cx="17" cy="16" r="1" />
<line x1="9" y1="15" x2="9" y2="19" />
</svg>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto aliquid sed natus ex, facere deserunt sunt doloremque corporis molestiae iste tenetur repudiandae doloribus sint, sit impedit quo maiores, fugiat saepe.</p>
</section>
</div>
<section>
<h2 class="titulo2">Contacto</h2>
<form action="" class="formulario">
<fieldset><!-- Fieldset permite organizar en grupos los campos de un formulario-->
<legend>Contactame llenando todos los campos</legend>
<div class="contenedor-campos">
<div class="campo">
<label for="">Nombre</label>
<input class="input-text" type="text" title="name" >
</div>
<div class="campo">
<label for="">Telefono</label>
<input class="input-text" type="tel" class="telefono" title="phone">
</div>
<div class="campo">
<label for="">Correo</label>
<input class="input-text" type="email" title="email">
</div>
<div class="campo">
<label for="">Mensaje</label>
<textarea class="input-text" title="msg" ></textarea>
</div>
</div>
<div class="alinear-boton-2">
<a class="boton" href="#">Contactar</a>
</div>
</fieldset>
</form>
</section>
</main>
<footer>
<p>Todos los derechos reservados © 2023 Rodrigo Villaseñor</p>
</footer>
</body>
</html>