forked from mrfranco97/as-agencia
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontacto.html
158 lines (155 loc) · 8.29 KB
/
contacto.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 lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="As agencia de marketing y comunicación. Brindamos planes a medida de cada negocio y orientados a sus objetivos para crecer online.">
<title>Contacto</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;700&family=Mulish:wght@400;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light m-0 p-0">
<div>
<a class="navbar-brand" href="#"><img src="images/logo as.png" alt="Logos As" width="110px"
height="110px"></a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav"
aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html#inicio">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#nosotros">Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="servicios.html">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="asblog.html">AsBlogs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacto.html">Contacto</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<div class="container">
<!-------------------------------- No puedo centrarlo ------------------------------------->
<section id="contacto">
<div class="row row-cols-1 row-cols-md-2">
<div class="col">
<h2 class="text-center">Contacto</h2>
<form>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<input type="text" placeholder="Nombre" class="form-control">
</div>
<div class="col-md-6">
<input type="text" placeholder="Apellido" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="email" name="email-field" id="email-field" class="form-control"
placeholder="ejemplo@gmail.com">
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Asunto">
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div class="col">
<textarea name="textarea-field" id="textarea-field" placeholder="Mensaje"
class="form-control" cols="30" rows="10"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="col">
<div class="contact-data-wraper d-flex flex-column justify-content-center">
<div class="img-wraper d-flex justify-content-center">
<img src="images/logo.jpg" height="150px" width="150px" alt="logo">
</div>
<div class="contact-data">
<p><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ratione, amet
quia
quis excepturi veritatis magnam fugiat minima iste vero vitae iusto quo numquam
optio expedita repellendus accusamus provident voluptatibus?</span><span>Beatae
quia
accusantium officiis expedita dicta, nihil ullam consequuntur natus quod eaque
pariatur, voluptatibus, numquam optio aliquam quaerat ipsum ducimus. Veritatis
necessitatibus odit nisi aspernatur, quae accusantium iste aut et!</span></p>
<p><span>Dolorem magnam commodi quia et! Nemo necessitatibus numquam laborum ipsa nobis
voluptates voluptatem officiis praesentium doloribus saepe quisquam optio eum
similique voluptatibus mollitia maxime rerum, eius quasi minus dolor
ipsum!</span><span>Facere, voluptate dolores repellendus aperiam totam veritatis
accusantium deserunt! Sunt recusandae alias eveniet dolorem nostrum unde
dignissimos
nam consequuntur doloremque repudiandae, provident ipsum fugiat? Deserunt minima
expedita perferendis ex dignissimos.</span></p>
<div class="d-flex justify-content-center contact-icons">
<a href="#"><i class="far fa-envelope"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<aside>
<nav class="position-fixed p-2 media">
<ul class="nav flex-column">
<li class="nav-item">
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li class="nav-item">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li class="nav-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
<li class="nav-item">
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
</ul>
</nav>
</aside>
<footer>
<div class="container d-flex justify-content-center aling-items-center">
<p class="my-2 text-center">© 2020 AS | Agencia de Marketing Digital y Pubilicidad</p>
</div>
</footer>
<script src="js/jquery-3.5.1.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="https://kit.fontawesome.com/d62257e39f.js" crossorigin="anonymous"></script>
</body>
</html>