-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (132 loc) · 7.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edwin J. Mendez</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body style="margin: 0; padding: 0; scroll-behavior: smooth;">
<div class="container-fluid">
<div class="row bg-dark nv d-flex h-5" style="position: sticky;
top: 0; z-index: 1;">
<div class="col-xxl-1 col-md-1 nav"></div>
<div class="col-xxl-8 col-xl-7 col-lg-7 col-md-6 col-sm-5">
<p class="text-light nombre fs-4 pt-2"><b>Edwin J.</b> Mendez</p>
</div>
<div class="col-xxl-3 col-lg-4 col-md-5 col-sm-7 opc d-flex align-items-center">
<div class="col nav inicio justify-content-center">
<a href="#" class="text-light text-decoration-none">Inicio</a>
</div>
<div class="col nav soy">
<a href="#quien" class="text-secondary text-decoration-none">¿Quien soy?</a>
</div>
<div class="col nav inicio">
<a href="#proyectos" class="text-decoration-none text-secondary">Proyectos</a>
</div>
</div>
<div class="col nav"></div>
</div>
<section id="inicio" class="row seccion-uno py-4 mt-2 mb-5 px-4">
<div class="col-xxl-2 col-lg-1 col-md-1 col-sm-1"></div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-5 col-sm-5">
<img class="programador w-100 pt-2" src="./img/programador.jpg">
</div>
<div class="col-xxl-1 col-lg-1 col-md-1 col-sm-1 p-0"></div>
<div class="col-xxl-5 col-xl-6 col-lg-6 col-md-4 col-sm-4 texto align-self-center px-0 pt-sm-2">
<h2 class="text-danger titulo fs-1"><b>¿Quien soy?</b></h2>
<p class="text-secondary lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita repellendus quisquam officia ex obcaecati similique tenetur et accusamus dolores officiis cum temporibus, vero neque! Ea consequuntur praesentium iste nulla nihil!</p>
<a href="#quien" class="btn btn-danger">Leer más...</a>
</div>
<div class="col-xxl-3 col-xl-1 col-md-1"></div>
</section>
<section id="quien" class="row bg-danger seccion-dos py-4">
<div class="col-2"></div>
<div class="col-8">
<div class="row">
<img class="foto m-auto pt-1 pb-3 rounded-circle" src="./img/foto.jpg" style="width: 220px; height: 250px;">
</div>
<div class="row lorem-dos fs-3 text-center">
<p class="text-light fs-5">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi libero, ipsum et cumque debitis at officiis animi? Quos veniam amet rerum ea molestias nesciunt. Ea distinctio saepe nobis nostrum esse.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem facere iure aut. Perspiciatis similique magni quaerat quasi quo nesciunt. Accusantium a suscipit exercitationem laudantium quos molestias reprehenderit obcaecati architecto at?<br>
<p class="text-light fs-5"><i>- Edwin J. Mendez</i></p>
</p>
</div>
</div>
<div class="col-2"></div>
</section>
<section id="proyectos" class="seccion-tres mb-5">
<div class="row">
<p class="titulo-proyectos text-secondary text-center fs-1 mt-4 mb-4"><b>Mis proyectos</b></p>
</div>
<div class="row tarjetas">
<div class="col-xxl-1 col-md-1 col-sm-2"></div>
<div class="col-10 cards text-secondary d-flex text-center">
<div class="row">
<div class="tarj-uno col-xxl-3 col-lg-4 col-md-6 col-sm-9 px-5 pb-4">
<div class="card image-size px-0 py-0">
<img src="./img/escritorio.jpg" class="card-img-top card-size" alt="escritorio" style="height: 150px; border-radius: 5px 5px 0 0;">
<div class="card-body">
<h5 class="card-title fs-3">Proyecto 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eligendi, excepturi sit voluptate maxime quasi assumenda facere libero quis quidem, atque tempora eaque magnam pariatur aliquid enim aperiam dolores repellendus!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<a href="#" class="btn btn-danger boton">Ver proyecto</a>
</div>
</div>
</div>
<div class="tarj-dos col-xxl-3 col-lg-4 col-md-6 col-sm-9 px-5 pb-4">
<div class="card image-size px-0 py-0">
<img src="./img/imagen2.jpeg" class="card-img-top card-size" alt="estudio" style="height: 150px; border-radius: 5px 5px 0 0;">
<div class="card-body">
<h5 class="card-title fs-3">Proyecto 2</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eligendi, excepturi sit voluptate maxime quasi assumenda facere libero quis quidem, atque tempora eaque magnam pariatur aliquid enim aperiam dolores repellendus!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<a href="#" class="btn btn-danger boton">Ver proyecto</a>
</div>
</div>
</div>
<div class="tarj-tres col-xxl-3 col-lg-4 col-md-6 col-sm-9 px-5 pb-4">
<div class="card image-size px-0 py-0">
<img src="./img/imagen3.jpg" class="card-img-top card-size" alt="teclado" style="height: 150px; border-radius: 5px 5px 0 0;">
<div class="card-body">
<h5 class="card-title fs-3">Proyecto 3</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eligendi, excepturi sit voluptate maxime quasi assumenda facere libero quis quidem, atque tempora eaque magnam pariatur aliquid enim aperiam dolores repellendus!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<a href="#" class="btn btn-danger boton">Ver proyecto</a>
</div>
</div>
</div>
<div class="tarj-cuatro col-xxl-3 col-lg-4 col-md-6 col-sm-9 px-5 pb-4">
<div class="card image-size px-0 py-0">
<img src="./img/imagen4.jpg" class="card-img-top card-size" alt="robot" style="height: 150px; border-radius: 5px 5px 0 0;">
<div class="card-body">
<h5 class="card-title fs-3">Proyecto 4</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eligendi, excepturi sit voluptate maxime quasi assumenda facere libero quis quidem, atque tempora eaque magnam pariatur aliquid enim aperiam dolores repellendus!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<a href="#" class="btn btn-danger boton">Ver proyecto</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-1"></div>
</section>
<footer class="row bg-dark footer">
<div class="col-xxl-5 col-lg-3 col-sm-1"></div>
<div class="col-xxl-6 col-sm-8 copy d-flex justify-content-end">
<p class="text-light pt-3 ">Copyright © 2018. Todos los derechos reservados.</p>
</div>
<div class="col"></div>
</footer>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>