-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (103 loc) · 5.64 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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Krub:wght@400;700&display=swap" rel="stylesheet">
<title>Diseñador Freelance</title>
<link rel="stylesheet" href="./CSS/Style.CSS">
</head>
<body>
<!--Esto es un coñaso deja la carrera-->
<header>
<h1 class="titulo">Iván Santana <span>Freelancer</span></h1>
</header>
<div class="nav-bg"> <!--Esto sirve para que el codigo se mas facil de leer-->
<nav class="navegacion-principal">
<a href="./index.html">Inicio</a>
<a href="#">Sobre mi</a>
<a href="#">Clientes</a>
<a href="./Proyecto.html">Proyectos</a>
<a href="#"> Contacto </a>
</nav>
</div>
<section class="hero" >
<div class="contenido-hero">
<h2 class="titulo" >Diseño y desarrollo <span>Web</span></h2>
<h2>Freelancer</h2>
<div class="location">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffec00" 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>IES Ana Luisa Benítez, Las Palmas de Gran Canaria</p>
</div>
<a class="boton" href="#">Contactar</a>
</div>
</section>
<br>
<br>
<main class="cotenedor , sombra">
<h2>Mis servicios</h2>
<div class="servicios">
<section class="servicio">
<h3>Diseño Web</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-palette" width="60" height="60" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M12 21a9 9 0 1 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" />
<circle cx="7.5" cy="10.5" r=".5" fill="currentColor" />
<circle cx="12" cy="7.5" r=".5" fill="currentColor" />
<circle cx="16.5" cy="10.5" r=".5" fill="currentColor" />
</svg>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget lobortis magna. Curabitur vitae dignissim.</p>
</section>
<section class="servicio">
<h3>Aplicaciones Web</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-android" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" 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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-apple" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 7c-3 0 -4 3 -4 5.5c0 3 2 7.5 4 7.5c1.088 -.046 1.679 -.5 3 -.5c1.312 0 1.5 .5 3 .5s4 -3 4 -5c-.028 -.01 -2.472 -.403 -2.5 -3c-.019 -2.17 2.416 -2.954 2.5 -3c-1.023 -1.492 -2.951 -1.963 -3.5 -2c-1.433 -.111 -2.83 1 -3.5 1c-.68 0 -1.9 -1 -3 -1z" />
<path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2" />
</svg>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget lobortis magna. Curabitur vitae dignissim.</p>
</section>
<section class="servicio">
<h3>E-commerce </h3>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-credit-card" width="56" height="56" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<rect x="3" y="5" width="18" height="14" rx="3" />
<line x1="3" y1="10" x2="21" y2="10" />
<line x1="7" y1="15" x2="7.01" y2="15" />
<line x1="11" y1="15" x2="13" y2="15" />
</svg>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget lobortis magna. Curabitur vitae dignissim.</p>
</section>
</div> <!---Aqui termina los servicios-->
</main>
<sectio>
<h2>
</svg>Contacto</h2>
</sectio>
<footer>
<form action="">
<label for="fname">First name:</label><label for="tnumber">Telefono:</label><br>
<input type="text" id="fname" name="fname"> <input type="text" id="tnumber" name="tnumber"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
<input type="submit" value="Enviar">
</form>
<p>Iván Santana Quintana </p>
</footer>
</body>
</html>