-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpresentacion.html
More file actions
123 lines (115 loc) · 6 KB
/
presentacion.html
File metadata and controls
123 lines (115 loc) · 6 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/estilos.css">
<link rel="stylesheet" href="./css/slider.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<body>
<header class="hero">
<nav class="nav container">
<ul class="nav__link nav__link--menu">
<li class="nav__items">
<a href="https://huroncito16.github.io/Pagina-SysOp/index.html" class="nav__links"><i class="bi bi-arrow-left-circle"> Regresar</i></a>
</li>
</ul>
<div class="nav__menu">
<img src="./images/menu.svg" class="nav__img">
</div>
</nav>
<section class="hero__container container">
<h1 class="hero__title">Presentacio en Colegio</h1>
</section>
</header>
<main>
<section class="container" id="Objetivo">
<p class="about__paragraph">La presentacion en el colegio tubo varios
motivos para que se llevara a cabo tato personales como academicos
para nosotros como para ellos, los principales son:</p>
<div class="about__main">
<article class="about__icons">
<img src="./images/shapes.svg" class="about__icon">
<h3 class="about__title">Amplacion de conocimientos</h3>
<p class="about__paragrah">Ampliar el conocimiento de los jovenes en el
establiecimiento en el area de sistemas y su funcionamiento</p>
</article>
<article class="about__icons">
<img src="./images/paint.svg" class="about__icon">
<h3 class="about__title">Presencia</h3>
<p class="about__paragrah">Hacer notar la presencia de la Universidad
Como de la carrera de ingenieria en sistemas a los estudiantes de
Bach para ser una opcion entre las universidades</p>
</article>
<article class="about__icons">
<img src="./images/code.svg" class="about__icon">
<h3 class="about__title">Cumplimineto</h3>
<p class="about__paragrah">Cumplimiento de la programacion y lineamientos de proyecto en el curso de
sistemas Operativos
</p>
</article>
</div>
</section>
<section class="knowledge" id="Colegio">
<div class="knowledge__container container">
<div class="knowledege__texts">
<h2 class="subtitle">Colegio Seleccionado</h2>
<p class="knowledge__paragraph">
Seleccionamos este colegio para impartir la charla sobre sistemas
operativos porque, además de ser una institución reconocida por su compromiso
con la formación académica, uno de los integrantes de nuestro grupo tuvo la
oportunidad de estudiar aquí y guarda un profundo agradecimiento hacia la
comunidad educativa. Esta experiencia personal nos motiva a devolver un poco
de lo recibido, compartiendo conocimientos que puedan ser útiles para las
nuevas generaciones y fortaleciendo así el vínculo entre estudiantes y egresados.
</p>
<a href="https://maps.app.goo.gl/qaQsSZneyBjwJurSA" target="_blank" class="cta">Ver Ubicación</a>
</div>
<figure class="knowledge__picture">
<img id="slider-img" src="img_fotos/1.jpg" class="knowledge__img" alt="Imagen presentación">
</figure>
</div>
</section>
<div id="image-modal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="modal-img">
<div class="controls">
<button id="prev">❮</button>
<button id="next">❯</button>
</div>
</div>
<section>
<div style="position: relative; width: 75%; height: 0; padding-top: 56.25%;
box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin: 1.6em auto 0.9em auto;
overflow: hidden; border-radius: 8px; will-change: transform;">
<iframe loading="lazy"
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;
border: none; padding: 0; margin: 0;"
src="https://www.canva.com/design/DAGuGRWs91Y/NQGbCAn3VnL_vHpCQsWPdw/view?embed"
allowfullscreen>
</iframe>
</div>
</section>
<section>
<div style="position: relative; width: 80%; height: 0; padding-top: 56.25%;
box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin: 1.6em auto 0.9em auto;
overflow: hidden; border-radius: 8px; will-change: transform;">
<iframe loading="lazy"
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;
border: none; padding: 0; margin: 0;"
src="https://www.canva.com/design/DAGuDpofG4Q/5Z5apY2wwt5Rrz9j8GYsRg/view?embed"
allowfullscreen>
</iframe>
</div>
<div style="text-align: center; margin-bottom: 1em;">
</div>
</section>
</main>
<script src="./js/slider.js"></script>
<script src="./js/questions.js"></script>
<script src="./js/menu.js"></script>
</body>
</html>