Skip to content

Instantly share code, notes, and snippets.

@pedroarrman
Forked from Kn4ppster/index.html
Last active January 3, 2025 18:20
Show Gist options
  • Select an option

  • Save pedroarrman/5729d973261d36bb8e3e268c304dd13a to your computer and use it in GitHub Desktop.

Select an option

Save pedroarrman/5729d973261d36bb8e3e268c304dd13a to your computer and use it in GitHub Desktop.
Scrolling CSS gradient
<!DOCTYPE html>
<!-- saved from url=(0064)https://practica5-desplieguedeaplicacionesweb-pedro.com/cv/blog/ -->
<html lang="ES-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.84.0">
<title>Mi CV</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog/">
<!-- Bootstrap core CSS -->
<link href="./index_files/bootstrap.min.css" rel="stylesheet">
<style>
#cita {
color: red;
border-style: solid;
border-width: 8px;
background-color: #f1f1ef;
border-color: #f1f1ef;
text-align: left;
}
#xyz {
color: DodgerBlue;
}
h2 {
border-style: solid;
border-width: 8px;
background-color: #f1f1ef;
border-color: #f1f1ef;
text-align: left;
}
/* stylelint-disable selector-list-comma-newline-after */
.blog-header {
line-height: 1;
border-bottom: 1px solid #e5e5e5;
}
.blog-header-logo {
font-family: "Playfair Display", Georgia, "Times New Roman", serif
/*rtl:Amiri, Georgia, "Times New Roman", serif*/
;
font-size: 2.25rem;
}
.blog-header-logo:hover {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif
/*rtl:Amiri, Georgia, "Times New Roman", serif*/
;
}
.display-4 {
font-size: 2.5rem;
}
@media (min-width: 768px) {
.display-4 {
font-size: 3rem;
}
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-scroller .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
}
.card-img-right {
height: 100%;
border-radius: 0 3px 3px 0;
}
.flex-auto {
flex: 0 0 auto;
}
.h-250 {
height: 250px;
}
@media (min-width: 768px) {
.h-md-250 {
height: 250px;
}
}
/* Pagination */
.blog-pagination {
margin-bottom: 4rem;
}
.blog-pagination>.btn {
border-radius: 2rem;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 4rem;
}
.blog-post-title {
margin-bottom: .25rem;
font-size: 2.5rem;
}
.blog-post-meta {
margin-bottom: 1.25rem;
color: #727272;
}
/*
* Footer
*/
.blog-footer {
padding: 2.5rem 0;
color: #727272;
text-align: center;
background-color: #f9f9f9;
border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="./index_files/css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./index_files/blog.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-6 text-center">
<h1>PEDRO ARRIBAS MANZANO</h1>
</div>
</div>
</header>
</div>
<main class="container">
<div class="p-4 p-md-5 mb-4">
<img src="./index_files/1279553.jpg" alt="Descripción de la imagen" class="img-fluid rounded">
<div class="col-md-8 px-0">
<p class="lead my-3 fst-italic" id="cita">💡 "Cuando llegue la inspiración, que me encuentre trabajando" - Pablo
Picasso</p>
<p class="lead mb-3">¡Hola! Me llamo Pedro. He creado este perfil con la intención de elaborar un sitio web,
dinámico y actual que funcione como curriculum para que me puedan conocer.</p>
</div>
</div>
<div class="row g-5">
<div class="p-4 p-md-5 mb-4">
<article class="blog-post w-100 mx-auto">
<h2>👇 ¿Quien soy? 🧑</h2>
<p>Soy Graduado en Relaciones Laborales y Desarrollo de Recursos Humanos, además de ser graduado en estudios
de Máster en Marketing y Estrategia de la Empresa. También cuento con dos ciclos formativos de grado
superior: Administración y Finanzas y Desarrollador de Aplicaciones Web .</p>
<p>Entre mis cualidades puedo decir que soy una persona que destaca por su buena predisposición a la hora de
aprender cosas nuevas, prudencia y compromiso para estar implicado en el día a día de la empresa. Asimismo,
cuento con experiencia en el trato al público y capacidad para trabajar en equipo.</p>
<p>Por último, he tenido una experiencia profesional en el extranjero, concretamente en Portugal, en la
empresa Remarketing.pt, situada en el municipio de Vendas Novas, donde he aprendido mucho y ha influido
positivamente en mi desarrollo profesional.</p>
</article>
<article class="blog-post w-100 mx-auto">
<h2>💼 Experiencia Profesional</h2>
<div id="experiencia-profesional" class="container">
<div class="row bg-dark text-white p-2 rounded">
<div class="col-4"><strong>Fecha</strong></div>
<div class="col-8"><strong>Descripción</strong></div>
</div>
<div class="row border-bottom py-2">
<div class="col-4">Abr 2024 - Jun 2024</div>
<div class="col-8">
<p><b>Remarketing.pt (Portugal) 🤔</b></p>
<p>✪ Realizar y aplicar auditorías de redes sociales.<br>✪ Aplicar tácticas de posicionamiento SEO a
páginas web</p>
</div>
</div>
<div class="row border-bottom py-2">
<div class="col-4">Jul 2022 - May 2023</div>
<div class="col-8">
<p><b>Ayuntamiento de Vara de Rey (Cuenca) 🏠</b></p>
<p>✪ Manejo del gestor de contenidos de la página web y redes sociales.<br>✪ Realizar diseños de
infografía y edición de imágenes</p>
</div>
</div>
<div class="row border-bottom py-2">
<div class="col-4">Abr 2021 - Jun 2021</div>
<div class="col-8">
<b>Yotta Desarrollos Tecnológicos S.L. 💻</b>
<p>✪ Estudios de mercado. <br>✪ Tareas de gestión de la información.</p>
</div>
</div>
<div class="row border-bottom py-2">
<div class="col-4">Jun 2020 - Jul 2020</div>
<div class="col-8">
<b>Administrativo en Extintores Arribas 📋</b>
<p>✪ Gestionar los servicios proporcionados de forma adecuada en los sistemas informáticos. <br>✪
Realizar la reposición asegurando el excelente estado de la sección y la correcta gestión del stock.
</p>
</div>
</div>
<div class="row border-bottom py-2">
<div class="row py-2">
<div class="col-4">Sep 2019 - Ene 2020</div>
<div class="col-8">
<b>Imprenta Repuestos Saiz 📦</b>
<p>✪ Potenciar las ventas superando el objetivo mensual. <br>✪ Asesorar en función de las necesidades
del cliente alcanzando un alto índice de satisfacción.</p>
</div>
</div>
</div>
<div class="row border-bottom py-2">
<div class="row py-2">
<div class="col-4">Sep 2018 - Dic 2018</div>
<div class="col-8">
<b>Prevención Laboral los Llanos 📂</b>
<p>✪ Administración y redacción de documentación. <br>✪ Ayudante en el departamento de formación,
técnico y comercial.</p>
</div>
</div>
</div>
<div class="row py-2">
<div class="col-4">Abr 2015 - Jun 2015</div>
<div class="col-8">
<b>Asesoría Jiménez 📝</b>
<p>✪ Elaborar y archivar los documentos con orden clasificado y control. <br>✪ Informar y atender al
público a través de diferentes vías garantizando su satisfacción.</p>
</div>
</div>
</div>
</article>
<article class="blog-post">
<h2>🎓 Formación Académica</h2>
<ul>
<li id="xyz">Título de Técnico Superior en Desarrollo de Aplicaciones Web.</li>
<li id="xyz">Máster Universitario en Estrategia y Marketing de la Empresa.</li>
<li id="xyz">Grado de Relaciones Laborales y Recursos Humanos.</li>
<li id="xyz">Título de Técnico Superior en Administración y Finanzas.</li>
</ul>
</article>
<article class="blog-post">
<h2>📚 Formación Complementaria</h2>
<ul>
<li>Curso de 24 horas en Ciberseguridad en el puesto de trabajo.</li>
<li>Curso de 80 horas en Ofimática y E-administración.</li>
<li>Curso de 50 horas sobre Los Planes de Igualdad: Cuestiones Prácticas.</li>
<li>Curso de 50 horas sobre Comunicación digital y Networking en internet.</li>
<li>Curso de 15 horas de&nbsp;“Regulación emocional”.</li>
<li>Curso de&nbsp;15 horas de “Resolución de conflictos”.</li>
<li>Curso de 15 horas de&nbsp;“Autocoaching”.</li>
<li>Curso de 15 horas de&nbsp;“Automotivación y productividad”.</li>
<li>“Formación en Prevención de Riesgos Laborales en carretillas elevadoras".</li>
<li>“Formación en Prevención de Riesgos Laborales en Espacios confinados Telco”.</li>
</ul>
</article>
<article class="blog-post">
<h2>🗣️ Idiomas</h2>
<p class="blog-post-meta"> <a href="https://practica5-desplieguedeaplicacionesweb-pedro.com/cv/blog/#"> </a>
</p>
<p>Español: Nativo.</p>
<p>Inglés: Nivel B1 tanto hablado como escrito (En proceso de conseguir en B2).</p>
<p>Portugués: Nivel A2 tanto hablado como escrito.</p>
</article>
<article class="blog-post">
<h2>📞 Contacto 📌</h2>
<p class="blog-post-meta"> <a href="https://practica5-desplieguedeaplicacionesweb-pedro.com/cv/blog/#"> </a>
</p>
<pre>🌐 <a target="_blank" href="https://www.linkedin.com/in/pedro-arribas-manzano-616759a5">LinkedIn</a> 📩 <a href="mailto:ARRIBASMANZANOPEDRO@GMAIL.COM">Email</a></pre>
<div style="position: relative; width: 100%; height: 0; padding-top: 30.7692%;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; 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="./index_files/view.html" allowfullscreen="allowfullscreen" allow="fullscreen">
</iframe>
</div>
</article>
</div>
</div>
</main>
<footer class="blog-footer">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a
href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="https://practica5-desplieguedeaplicacionesweb-pedro.com/cv/blog/#">Back to top</a>
</p>
</footer>
<div id="veepn-breach-alert"><template shadowrootmode="open">
<style>
.breach-popup {
font-family: FigtreeVF, sans-serif;
position: fixed;
z-index: 2147483638;
text-rendering: optimizelegibility;
top: 0;
left: 0;
right: 0;
pointer-events: none;
padding-inline: 16px;
height: 0;
overflow: visible;
color: #222e3a
}
.breach-popup * {
box-sizing: border-box
}
.breach-popup__inner {
background-color: #de4558;
width: 100%;
border-radius: 16px;
margin-inline: auto;
pointer-events: all;
position: relative;
transition: transform .25s ease-in-out, max-width .25s ease-in-out;
transform: translateY(16px);
max-height: calc(100svh - 80px);
display: flex;
flex-direction: column
}
.breach-popup__header {
min-height: 32px;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 16px;
padding: 4px;
cursor: pointer
}
.breach-popup__close {
cursor: pointer;
background-color: transparent;
border-style: none;
outline: none;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
opacity: .5
}
.breach-popup__wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .25s ease-in-out;
overflow: hidden
}
.breach-popup__content {
overflow: hidden;
opacity: 0;
transform: translateY(-10px)
}
.breach-popup--minimize .breach-popup__inner {
max-width: 485px;
transform: translateY(-100%)
}
.breach-popup--collapse .breach-popup__inner {
max-width: 485px
}
.breach-popup--expand .breach-popup__inner {
max-width: 1120px
}
.breach-popup--expand .breach-popup__wrap {
grid-template-rows: 1fr
}
.breach-popup--expand .breach-popup__content {
opacity: 1;
transform: translateY(0);
transition: transform .25s ease-in-out, opacity .25s ease-in-out;
transition-delay: .15s
}
.breach-popup--expand .breach-popup__header {
cursor: default
}
.breach-info {
padding: 2px;
height: 100%
}
.breach-info__inner {
padding: 22px 22px 0;
background-color: #fff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 100%;
overflow: auto
}
.breach-info__alert {
font-size: 24px;
line-height: 32px;
font-weight: 700;
margin: 0
}
.breach-info__list {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 24px
}
@media only screen and (width >=992px) {
.breach-info__list {
flex-wrap: nowrap
}
}
.breach-info__item {
width: 100%
}
.breach-info__item:nth-child(2) {
max-width: 320px
}
.breach-info__item:nth-child(3) {
max-width: 200px
}
.breach-info__title {
font-size: 18px;
font-weight: 700;
line-height: 32px;
letter-spacing: -.1px;
color: #de4558;
margin-top: 0;
margin-bottom: 4px
}
.breach-info__description {
font-size: 16px;
line-height: 28px;
letter-spacing: -.1px
}
.breach-info__description ul {
margin: 0
}
.breach-info__actions {
display: flex;
justify-content: center;
padding-top: 32px;
padding-bottom: 22px;
background-color: #fff;
position: sticky;
bottom: 0
}
.breach-info__btn {
cursor: pointer;
border-style: none;
outline: none;
display: inline-flex;
align-items: center;
height: 48px;
padding-inline: 20px;
border-radius: 12px;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 28px;
letter-spacing: -.1px;
color: #fff;
background-color: #ff6400
}
.button-expand {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
z-index: 1
}
.button-expand__pointer {
cursor: pointer
}
.button-expand__alert {
pointer-events: none;
transition: opacity .25s ease-in-out
}
.button-expand__arrow {
pointer-events: none;
transition: transform .25s ease-in-out, opacity .25s ease-in-out;
transform-origin: center
}
.button-expand--minimize .button-expand__arrow,
.button-expand--collapse .button-expand__alert,
.button-expand--expand .button-expand__alert {
opacity: 0
}
.button-expand--expand .button-expand__arrow {
transform: rotate(180deg)
}
.header-collapse {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 4px;
padding-left: 8px;
font-size: 14px;
line-height: 20px;
letter-spacing: -.1px;
color: #fff
}
.header-expand {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 4px;
padding-left: 20px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: -.1px;
color: #fff
}
</style>
</template></div>
<style>
@font-face {
font-family: FigtreeVF;
src: url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2) format("woff2 supports variations"), url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2) format("woff2-variations");
font-weight: 100 1000;
font-display: swap
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment