-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (211 loc) · 12.1 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<title>Ultimate bootstrap template | Simple, Clean, Light and Ready to use Bootstrap Template</title>
</head>
<body>
<!-- Navbar -->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="images/favicon.png" width="45" height="45" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
<a class="nav-link " href="blog.html">Blog</a>
<a class="nav-link" href="contact.html">Contact</a>
</div>
</div>
</div>
</nav>
</header>
<!--Hi-iam quick introduction-->
<main>
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<img src="https://arielsperduti.com/generated/assets/images/profile_pic-938-d8e66e.webp"
class="d-block mx-lg-auto img-fluid rounded-circle" alt="Bootstrap Themes" loading="lazy" width="700" height="500">
</div>
<div class="col-lg-6 text-center">
<h1 class="display-5 fw-bold lh-1 mb-3">Hola, soy El Guerrero del SEO se lleva el trofeo</h1>
<p class="lead">Así sin mas, soy el autentico Guerrero del SEO, con legitimo derecho a llevarse el trofeo.
</p>
<div class="d-flex justify-content-center">
<a href="https://github.com/asperduti" class="mx-2 text-secondary"><i class="fab fa-github"></i></a>
<a href="https://twitter.com/arielsperduti" class="mx-2 text-secondary"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/arielsperduti" class="mx-2 text-secondary"><i class="fab fa-instagram"></i></a>
<a href="https://youtube.com/https%3A%2F%2Fwww.youtube.com%2Fchannel%2FUCbrGLkc9j9SysV3luRzJYIg?fbclid=IwAR0Udn-slqYbb6JMMf4uZv7-98oYka0JLGstkzxnCdQThD6qAQMkJ2fE2Ig"
class="mx-2 text-secondary"><i class="fab fa-youtube"></i></a>
<a href="https://www.linkedin.com/in/arielsperduti/?locale=en_US" class="mx-2 text-secondary"><i
class="fab fa-linkedin"></i></a>
<a href="https://www.facebook.com/ariel.sperduti" class="mx-2 text-secondary"><i class="fab fa-facebook"></i></a>
</div>
</div>
</div>
</div>
<!--More info-->
<section id="more-info">
<!--Built with-->
<div class="container-fluid bg-light">
<div class="row text-center">
<div class="col">
<span>Built with</span>
<a
href="https://getbootstrap.com/">
<img src="images/bs4.png" class="ms-3 me-3 mb-2 mt-2"
height="30">
</a>
<a
href="https://sass-lang.com/">
<img src="images/sass.png" class="ms-3 me-3 mb-2 mt-2"
height="30">
</a>
</div>
</div>
</div>
<!--Short bio-->
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<img src="https://arielsperduti.com/generated/assets/images/feature-1000-cf1d9c.webp"
class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" loading="lazy" width="700" height="500">
</div>
<div class="col-lg-6 text-center">
<h1 class="display-5 fw-bold lh-1 mb-3 ">About The Project</h1>
<p class="lead">Pancho is a multipurpose template created by <a href="https://arielsperduti.com">Ariel
Sperduti</a>. This template is
perfect for personal or company blogs. It features four HTML pages: landing page/homepage, blog index,
sample post and a
contact page.</p>
</div>
</div>
</div>
<!--Future Features-->
<div class="container-fluid bg-light">
<div class="row justify-content-center">
<div class="col col-md-8 text-center">
<h2 class="display-6 fw-bold lh-1 mb-3 ">Future Features</h2>
<ul class="list-unstyled">
<li>A score of 100 in PageSpeed Insights</li>
<li>Completely SEO Optimized</li>
<li>Extract and inline critical CSS automatically</li>
<li>LazyLoad</li>
</ul>
</div>
</div>
</div>
</section>
<!--Usage-->
<section id="talk-about" class="">
<div class="container">
<div class="row justify-content-center g-5 py-5">
<div class="col col-md-8">
<h2 class="text-center">
Getting Started
</h2>
<h3 class="text-center">
Installation
</h3>
<p>
To begin using this temaplate just:
</p>
<ul class="">
<li>Clone the repo: git clone https://github.com/asperduti/pancho-ultimate-bootstrap-template.git or</li>
<li><a href="https://github.com/asperduti/pancho-ultimate-bootstrap-template">Fork, Clone, or Download on Github</a>:</li>
</ul>
<h3 class="text-center">
Usage
</h3>
<p>
Once downloaded, just edit the HTML and CSS files included, you can add your images and pages. To preview your website simply open the index.html file in your favorite browser.
</p>
</div>
</div>
</div>
</section>
<!--Lastest Articles-->
<section id="last-articles" class="bg-white">
<div class="container">
<div class="row justify-content-center">
<div class="col col-md-8 text-center">
<h2>
Lastest articles
</h2>
<article>
<div class="card my-3">
<a href="post.html">
<img src="https://i.ytimg.com/vi/oTNMPiYDa-M/maxresdefault.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="post.html">
<h5 class="card-title">Post Example</h5>
</a>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida magna tincidunt, tristique est non, ultrices
nisi. Proin efficitur, mi eget luctus semper, mauris augue porttitor magna, nec commodo risus eros nec dui. Nulla
posuere ex ut mauris cursus malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p class="card-text"><small class="text-muted">Published in <a href="https://arielsperduti.com">Ariel Sperduti</a></small></p>
</div>
</div>
</article>
<article>
<div class="card my-3">
<a href="post.html">
<img src="https://i.ytimg.com/vi/oTNMPiYDa-M/maxresdefault.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<a href="post.html">
<h5 class="card-title">Post Example</h5>
</a>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida magna tincidunt, tristique est non, ultrices
nisi. Proin efficitur, mi eget luctus semper, mauris augue porttitor magna, nec commodo risus eros nec dui. Nulla
posuere ex ut mauris cursus malesuada. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p class="card-text"><small class="text-muted">Published in <a href="https://arielsperduti.com">Ariel Sperduti</a></small></p>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
</main>
<!--Footer-->
<footer class="footer mt-auto bg-dark py-3">
<div class="container">
<div class="row text-center align-items-center">
<div class="col">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<p>© 1988-2021 Pancho by <a href="https://arielsperduti.com">Ariel Sperduti</a></p>
</div>
</div>
</div>
</footer>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
</body>
</html>