-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsingle.html
185 lines (176 loc) · 12.8 KB
/
single.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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>INSPIRARED - Plantilla de Blog Personal</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Plantilla gratuita de sitio web" name="keywords">
<meta content="Plantilla gratuita de sitio web" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:300;400;600;700;800&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<!-- Estilos Personalizados de Bootstrap -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class="sidebar-text d-flex flex-column h-100 justify-content-center text-center">
<img class="mx-auto d-block w-75 bg-primary img-fluid rounded-circle mb-4 p-3" src="img/profile.jpg" alt="Imagen">
<h1 class="font-weight-bold">INSPIRARED</h1>
<p class="mb-4">
"INSPIRARED es más que una fuente de palabras; es un faro de motivación y empoderamiento. Nos dedicamos a ofrecer apoyo y guía a aquellos que buscan superar desafíos y encontrar fuerza en tiempos difíciles. Nuestro objetivo es inspirar transformaciones positivas, fomentando la resiliencia y la esperanza a través de mensajes que nutren el alma y fortalecen el espíritu. Con cada palabra, buscamos iluminar el camino hacia un crecimiento personal significativo y duradero."
</p>
<div class="d-flex justify-content-center mb-5">
<a class="btn btn-outline-primary mr-2" href="#"><i class="fab fa-twitter"></i></a>
<a class="btn btn-outline-primary mr-2" href="#"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-outline-primary mr-2" href="#"><i class="fab fa-linkedin-in"></i></a>
<a class="btn btn-outline-primary mr-2" href="#"><i class="fab fa-instagram"></i></a>
</div>
<a href="" class="btn btn-lg btn-block btn-primary mt-auto">Apoyanos</a>
</div>
<div class="sidebar-icon d-flex flex-column h-100 justify-content-center text-right">
<i class="fas fa-2x fa-angle-double-right text-primary"></i>
</div>
</div>
<div class="content">
<!-- Navbar -->
<div class="container p-0">
<nav class="navbar navbar-expand-lg bg-secondary navbar-dark">
<a href="" class="navbar-brand d-block d-lg-none">Menú</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav m-auto">
<a href="index.html" class="nav-item nav-link">Inicio</a>
<a href="about.html" class="nav-item nav-link">Acerca de</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle active" data-toggle="dropdown">Páginas</a>
<div class="dropdown-menu">
<a href="blog.html" class="dropdown-item">Blog</a>
<a href="single.html" class="dropdown-item">Detalle del Blog</a>
</div>
</div>
<a href="contact.html" class="nav-item nav-link">Contacto</a>
</div>
</div>
</nav>
</div>
<!-- Navbar -->
<!-- Encabezado de la Página -->
<div class="container py-5 px-2 bg-primary">
<div class="row py-5 px-4">
<div class="col-sm-6 text-center text-md-left">
<h1 class="mb-3 mb-md-0 text-white text-uppercase font-weight-bold">Detalle del Blog</h1>
</div>
<div class="col-sm-6 text-center text-md-right">
<div class="d-inline-flex pt-2">
<h4 class="m-0 text-white"><a class="text-white" href="">Inicio</a></h4>
<h4 class="m-0 text-white px-2">/</h4>
<h4 class="m-0 text-white">Detalle del Blog</h4>
</div>
</div>
</div>
</div>
<!-- Encabezado de la Página -->
<!-- Detalle del Blog -->
<div class="container py-5 px-2 bg-white">
<div class="row px-4">
<div class="col-12">
<h2 class="mb-3 font-weight-bold">Misión</h2>
<p>"En INSPIRARED, nuestra misión es ser una plataforma integral de motivación y apoyo emocional. Nos dedicamos a proporcionar un refugio digital donde cada palabra y mensaje se conviertan en herramientas poderosas para el crecimiento personal. Nuestro compromiso es ofrecer contenido inspirador y empoderador que no solo levante el espíritu, sino que también fortalezca la resiliencia y fomente un cambio positivo en la vida de nuestros lectores. Creemos en el poder curativo de las palabras para transformar vidas, proporcionando recursos y perspectivas que ayuden a superar obstáculos, cultivar una mentalidad positiva y desarrollar habilidades para enfrentar los desafíos cotidianos con determinación y esperanza. En INSPIRARED, aspiramos a construir una comunidad inclusiva y solidaria donde cada individuo encuentre el apoyo necesario para descubrir su potencial, alcanzar metas significativas y vivir una vida plena y auténtica. Creemos en el impacto positivo de la motivación constante y en el poder de cada historia de superación para inspirar y transformar no solo a quienes nos leen, sino también a quienes nos rodean."</p>
<h3 class="mb-3 font-weight-bold">Vision</h3>
<p>"Nuestra visión en INSPIRARED es convertirnos en el referente global de inspiración y motivación personal a través de nuestras palabras curativas y empoderadoras. Visualizamos un futuro donde cada individuo encuentre en nuestra plataforma el apoyo necesario para transformar desafíos en oportunidades de crecimiento, cultivando una comunidad vibrante y resiliente. Aspiramos a ser reconocidos por nuestro impacto positivo en la vida de las personas, guiándolas hacia un camino de realización personal y bienestar integral. Creemos en un mundo donde la fuerza de las palabras inspire cambios significativos y duraderos, fortaleciendo corazones y mentes para construir un futuro más esperanzador y lleno de posibilidades."</p>
</div>
<div class="col-12 py-4">
<div class="btn-group btn-group-lg w-100">
<button type="button" class="btn btn-outline-primary"><i class="fa fa-angle-left mr-2"></i> Anterior</button>
<button type="button
class="btn btn-outline-primary">Siguiente<i class="fa fa-angle-right ml-2"></i></button>
</div>
</div>
<div class="col-12 py-4">
<h3 class="mb-4 font-weight-bold">Comentarios</h3>
<div class="media mb-4">
<img src="C:\Users\LUIS MARTINEZ NAVARR\Downloads\bloggy (1)\personal-blog-template\img\OIP (2).jpeg" alt="Imagen" class="mr-3 mt-1 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>Jefferson <small><i>26/06/2024</i></small></h4>
<p>"INSPIRARED ha sido una luz en mi camino durante tiempos difíciles. Sus mensajes de motivación y empoderamiento han sido como un bálsamo para mi alma. Gracias a ellos, he encontrado la fuerza para superar obstáculos y perseguir mis sueños con renovada determinación. Cada artículo y palabra compartida en INSPIRARED no solo me ha inspirado, sino que también ha transformado mi perspectiva sobre la vida. Estoy profundamente agradecido por el impacto positivo que esta comunidad ha tenido en mí."
</p>
<button class="btn btn-sm btn-light">Responder</button>
</div>
</div>
<div class="media mb-4">
<img src="C:\Users\LUIS MARTINEZ NAVARR\Downloads\bloggy (1)\personal-blog-template\img\OIP (2).jpeg" alt="Imagen" class="mr-3 mt-1 rounded-circle"
style="width:60px;">
<div class="media-body">
<h4>Sandra<small><i>27/06/2024</i></small></h4>
<p>"Descubrir INSPIRARED ha sido un verdadero cambio de juego para mí. Sus mensajes llenos de esperanza y sabiduría han sido mi guía en momentos de incertidumbre. Gracias a las historias compartidas y las palabras de aliento, he encontrado la fuerza interior para enfrentar mis miedos y perseguir mis metas con pasión renovada. INSPIRARED no solo me ha inspirado a nivel personal, sino que también ha fortalecido mi confianza en el poder de la positividad y el crecimiento personal. Estoy agradecido por esta plataforma que no solo motiva, sino que también transforma vidas de manera significativa."
</p>
<button class="btn btn-sm btn-light">Responder</button>
<div class="media mt-4">
<img src="C:\Users\LUIS MARTINEZ NAVARR\Downloads\bloggy (1)\personal-blog-template\img\OIP (2).jpeg" alt="Imagen" class="mr-3 mt-1 rounded-circle"
style="width:60px;">
<div class="media-body">
<h4>Juan<small><i>28/06/2024</i></small></h4>
<p>"INSPIRARED ha sido mi refugio de motivación constante. Cada artículo y mensaje no solo me ha inspirado a perseguir mis sueños, sino que también ha fortalecido mi resiliencia en momentos difíciles. Gracias a esta comunidad, he descubierto una nueva perspectiva de vida llena de esperanza y positividad."
</p>
<button class="btn btn-sm btn-light">Responder</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<h3 class="mb-4 font-weight-bold">Deja un comentario</h3>
<form>
<div class="form-group">
<label for="name">Nombre *</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Correo Electrónico *</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="website">Sitio Web</label>
<input type="url" class="form-control" id="website">
</div>
<div class="form-group">
<label for="message">Mensaje *</label>
<textarea id="message" cols="30" rows="5" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="submit" value="Enviar Comentario" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
<!-- Detalle del Blog -->
<!-- Pie de Página -->
<div class="container py-4 bg-secondary text-center">
<p class="m-0 text-white">
© <a class="text-white font-weight-bold" href="#">INSPIRARED</a>. Todos los derechos reservados. Diseñado por <a class="text-white font-weight-bold" href="https://htmlcodex.com">Luis Martinez Navarro</a>
</p>
</div>
<!-- Pie de Página -->
</div>
<!-- Volver Arriba -->
<a href="#" class="back-to-top"><i class="fa fa-angle-double-up"></i></a>
<!-- Bibliotecas JavaScript -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<!-- Archivo de JavaScript de Contacto -->
<script src="mail/jqBootstrapValidation.min.js"></script>
<script src="mail/contact.js"></script>
<!-- JavaScript de la Plantilla -->
<script src="js/main.js"></script>
</body>
</html>