-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (156 loc) · 8.66 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Curso de marketing digital</title>
<!--Estilos css-->
<link href="css/Estilos.css" rel="stylesheet" type="text/css">
<!--Fuentes-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<!--Icon fonts-->
<script src="https://kit.fontawesome.com/59809bf793.js" crossorigin="anonymous"></script>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="180x180" href="imgs/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="imgs/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="imgs/favicon-16x16.png">
<link rel="manifest" href="imgs/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<!--Cabecera-->
<header>
<div class="container">
<div id="logo">
<a href="index.html"><img src="imgs/logotipo.png" alt="Logotipo"></a>
</div>
<div id="infoContacto">
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://www.twitter.com" target ="_blank"><i class="fab fa-twitter"></i></a>
<i class="fas fa-phone">1-234-567-8910</i>
</div>
</div>
</header>
<!--Contenido central-->
<main>
<article>
<section>
<div id="intro" class="container">
<div id="descripcion">
<h1>Curso profesional de marketing digital</h1>
<p><i class="fas fa-check"></i>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut quo ut beatae sunt minus! Hic, facere, consequuntur laborum itaque voluptatibus dolorum sunt dolor sit neque quis reiciendis labore recusandae odit.</p>
<p><i class="fas fa-check"></i>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam perspiciatis cum asperiores quaerat pariatur expedita hic ipsam quo laboriosam numquam vel blanditiis praesentium aliquid, earum molestias nisi rerum id? Dolore.</p>
<p><i class="fas fa-check"></i>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam totam ad nihil amet. Delectus iusto voluptatum, hic fuga blanditiis tempore ducimus expedita, odio sunt nam ad quia rerum id laudantium?</p>
</div>
<div id="formulario">
<h2>Solicitar información</h2>
<form action="datos.php" method="POST">
<label for="suNombre">Nombre:</label>
<input type="text" name="nombre" id="suNombre">
<label for="suApellido">Apellido:</label>
<input type="text" name="apellido" id="suApellido">
<label for="suEmail">Email:</label>
<input type="email" name="email" id="suEmail">
<input type="submit" value="Enviar solicitud">
</form>
<small>
*Nunca compartimos tu información con terceros. Revisa nuestra <a href="#" target="_blank">política de privacidad</a>
</small>
</div>
</div>
</section>
<section>
<div id="seccionDos"class="container">
<div class="col"><i class="fas fa-calendar-alt"></i>
<h3>Escoge tu propio horario</h3>
</div>
<div class="col"><i class="fas fa-globe-americas"></i>
<h3>Aprende de expertos en la industria</h3>
</div>
<div class="col"><i class="fas fa-users"></i>
<h3>Crea campañas reales</h3>
</div>
<div class="col"><i class="fas fa-graduation-cap"></i>
<h3>Obtén tu certificado</h3>
</div>
</div>
</section>
<section>
<div id="seccionTres" class="container">
<div>
<h2>Domina las herramientas para implementar campañas efectivas de marketing digital</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga maiores fugiat amet perspiciatis, aperiam quibusdam, sit mollitia ratione possimus expedita a, facere harum dicta vero aut obcaecati cumque animi? Culpa.</p>
<a href="#">Descargar temario</a>
</div>
<video controls>
<source src="marketing.mp4" type="video/mp4">
<source src="marketing.ogg" type="video/ogg">
<source src="marketing.webm" type="video/webm">
<p>Su navegador no soporta este formato de video</p>
</video>
</div>
</section>
<section>
<h2>Conoce nuestro staff de instructores</h2>
<div id="seccionCuatro"class="container">
<div class="card">
<img src="imgs/profile1.jpeg" alt="Rostro de la persona">
<h3>Ned S.</h3>
<p>Consultor de marketing digital</p>
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-square"></i></a>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="https://mx.linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
<div class="card">
<img src="imgs/profile2.jpeg" alt="Rostro de la persona">
<h3>Joan W.</h3>
<p>Paid search specialist</p>
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-square"></i></a>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="https://mx.linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
<div class="card">
<img src="imgs/profile3.jpeg" alt="Rostro de la persona">
<h3>Carrie M.</h3>
<p>Directora de e-commerce</p>
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-square"></i></a>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="https://mx.linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
<div class="card">
<img src="imgs/profile4.jpeg" alt="Rostro de la persona">
<h3>Rick G.</h3>
<p>Consultor de social media</p>
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-square"></i></a>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter-square"></i></a>
<a href="https://mx.linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</section>
<section>
<div id="seccionCinco"class="container">
<h2>¿Deseas más información?</h2>
<p>Rellena nuestro formulario de solicitud de información y nos pondremos en contacto contigo</p>
<a href="#">¡Solicitar información ahora!</a>
</div>
</section>
</article>
</main>
<footer>
<div id="pieDePagina" class="contain">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Cursos</a></li>
<li><a href="#">Política de privacidad</a></li>
<li><a href="#">Contacto</a></li>
</ul>
<div class="copyright">
<small>© Derechos reservados</small>
</div>
</div>
</footer>
</body>
</html>