-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (131 loc) · 7.61 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 name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<title>Portafolio</title>
</head>
<body>
<div class="background"></div>
<div class="intro-left">
<div class="container-fluid full-height">
<div class="row text-center align-items-center full-height">
<div class="col">
<img src="img/img-1.jpg" alt="User avatar" class="avatar">
<h1 class="display-6">Evans R.</h1>
<p>Desarrollador web</p>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8 panel-right px-0">
<section class="quote">
<figure>
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</section>
<section class="intro">
<h1 class="display-4">Pagina de portafolio</h1>
<h2 class="display-6 mb-5">Construida con Bootstrap 5</h2>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quibusdam voluptatum maxime id enim. Voluptates quae doloribus voluptas odio nisi nesciunt libero. Veniam repudiandae magni praesentium sequi dicta aliquam cupiditate nostrum unde sapiente doloribus quia quidem inventore eligendi, et eius.</p>
</section>
<section class="projects">
<h2 class="display-6 mb-4">Mis Proyectos</h2>
<div class="container-fluid">
<div class="row gy-5">
<div class="col-md-6"><img src="https://placeimg.com/360/300/tech" class="img-fluid thumbnail"></div>
<div class="col-md-6"><img src="https://placeimg.com/360/300/arch" class="img-fluid thumbnail"></div>
<div class="col-md-6"><img src="https://placeimg.com/360/300/people" class="img-fluid thumbnail"></div>
<div class="col-md-6"><img src="https://placeimg.com/360/300/nature/sepia" class="img-fluid thumbnail"></div>
<div class="col-md-6"><img src="https://placeimg.com/360/300/arch/grayscale" class="img-fluid thumbnail"></div>
<div class="col-md-6"><img src="https://placeimg.com/360/300/any" class="img-fluid thumbnail"></div>
</div>
</div>
<a href="#" class="mt-3 px-3 d-flex justify-content-end">Ver mas ></a>
</section>
<section class="blog">
<h2 class="display-6 mb-4">Blog</h2>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://placeimg.com/300/350/tech" class="img-fluid thumbnail" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur.</p>
<button type="button" class="btn btn-outline-secondary">Leer mas...</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://placeimg.com/300/350/people" class="img-fluid thumbnail" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur.</p>
<button type="button" class="btn btn-outline-secondary">Leer mas...</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://placeimg.com/300/350/nature" class="img-fluid thumbnail" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur.</p>
<button type="button" class="btn btn-outline-secondary">Leer mas...</button>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="mt-3 px-3 d-flex justify-content-end">Leer mas ></a>
</section>
<section class="contact-form">
<h2 class="display-6 mb-4">Contacto</h2>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="name" class="form-label">Nombre</label>
<input type="text" class="form-control" id="name" placeholder="Escribe tu nombre">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Escribe tu email">
</div>
</div>
<div class="col-md12">
<div class="mb-3">
<label for="mensaje" class="form-label">Mensaje</label>
<textarea class="form-control" id="mensaje" rows="4"></textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-outline-dark float-right">Enviar</button>
</div>
</section>
<footer class="footer">
<div class="container-fluid text-center">
<span class="text-muted">
Hecho con <3 por
<a href="https://getbootstrap.com/">MDBootstrap.com</a></span>
</div>
</footer>
</div>
</div>
</div>
</body>
</html>