juanatsap
04fdae2347
PROBLEM: - Left and right sidebars occupy too much space on mobile - User wants curriculum (main content) prioritized on mobile - Sidebars should be collapsed by default, expand only on user interaction SOLUTION: HTML Changes (cv-content.html): - Wrapped each sidebar in accordion structure - Added .sidebar-accordion-header with brain icon, title, and chevron * Left sidebar: "Technical Skills" / "Competencias Técnicas" * Right sidebar: "More Skills" / "Más Competencias" - Added .sidebar-accordion-content wrapper around sidebar sections - Added onclick="toggleSidebar(this)" handler CSS Changes (main.css): Desktop (default): - .sidebar-accordion-header: display: none (hidden on desktop) - .sidebar-accordion-content: always visible (no restrictions) Mobile @ 900px: - .sidebar-accordion-header: display: flex, styled as clickable bar * Padding: 1rem 1.5rem * Background: var(--sidebar-gray) with hover effects * Font: 700 weight, 1.1rem size * Chevron rotates 180deg when active - .sidebar-accordion-content: collapsed by default * max-height: 0 (collapsed) * max-height: 5000px when .active (expanded) * Smooth transitions: 0.3s ease-out (close) / 0.5s ease-in (open) * Padding: 0 when closed, 1.5rem when open - .cv-sidebar: padding: 0 (accordion header handles padding) JavaScript Changes (index.html): - Added toggleSidebar(header) function * Toggles .active class on header and content * Smooth expand/collapse animation via CSS max-height transition DATA Changes (cv-en.json, cv-es.json): - Updated summary with more professional, experience-focused description - Emphasizes 18+ years experience, international clients, practical solutions BEHAVIOR: - Desktop: Sidebars always visible, no accordion headers - Mobile: Sidebars collapsed by default showing only header bar - Click header: Expands sidebar with smooth animation - Click again: Collapses sidebar - Main content prioritized and always visible - Each sidebar toggles independently
430 lines
23 KiB
HTML
430 lines
23 KiB
HTML
<!-- PAGE 1 -->
|
|
<div class="cv-page page-1">
|
|
<!-- Professional Title Badges - Full Width Top Bar -->
|
|
<div class="cv-title-badges-header">
|
|
<span class="title-badge">{{if eq .Lang "es"}}ANALISTA{{else}}ANALYST{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">{{if eq .Lang "es"}}CONSULTOR TÉCNICO{{else}}TECHNICAL CONSULTANT{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">NODEJS + REACTJS {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">WEB {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">GO + HTMX {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">PHP {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
</div>
|
|
|
|
<!-- Page 1 Content Grid: Left Sidebar + Main Content -->
|
|
<div class="page-content">
|
|
<!-- Left Sidebar - Skills (first half) -->
|
|
<aside class="cv-sidebar cv-sidebar-left">
|
|
<div class="sidebar-accordion-header" onclick="toggleSidebar(this)">
|
|
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
|
<span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
|
|
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
|
</div>
|
|
<div class="sidebar-accordion-content">
|
|
{{range $index, $category := .SkillsLeft}}
|
|
<section class="sidebar-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="sidebar-title">{{$category.Category}}</h3>
|
|
</summary>
|
|
<div class="sidebar-content">
|
|
{{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
|
|
</div>
|
|
</details>
|
|
</section>
|
|
{{end}}
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Area - Page 1 -->
|
|
<main class="cv-main">
|
|
<!-- Header with Name and Photo -->
|
|
<div class="cv-header">
|
|
<div class="cv-header-content">
|
|
<div class="cv-header-left">
|
|
<h1 class="cv-name">Moreno Rubio, Juan Andrés</h1>
|
|
<p class="years-experience">{{.YearsOfExperience}} {{if eq .Lang "es"}}años de experiencia{{else}}years of experience{{end}}</p>
|
|
|
|
<!-- Photo positioned for mobile (centered between name and intro) -->
|
|
<div class="cv-photo">
|
|
<img src="/static/images/profile/dni.jpeg" alt="{{.CV.Personal.Name}}" onerror="this.src='/static/images/profile/placeholder.svg'">
|
|
</div>
|
|
|
|
<!-- Intro/Excerpt Text - No section heading, just the text -->
|
|
<div class="intro-text">{{.CV.Summary}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Education -->
|
|
<section id="education" class="cv-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Formación{{else}}Training{{end}}
|
|
</h3>
|
|
</summary>
|
|
{{range .CV.Education}}
|
|
<div class="education-item">
|
|
<strong>{{.Degree}}</strong> ({{.StartDate}}-{{.EndDate}}) {{if eq $.Lang "es"}}obtenido de{{else}}obtained from the{{end}} <strong>{{.Institution}}</strong> ({{.Location}})
|
|
</div>
|
|
{{end}}
|
|
</details>
|
|
</section>
|
|
|
|
<!-- Skills Summary -->
|
|
<section id="skills" class="cv-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:brain" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Competencias{{else}}Skills{{end}}
|
|
</h3>
|
|
</summary>
|
|
<p class="summary-text">
|
|
{{if eq .Lang "es"}}
|
|
Desarrollador full-stack con experiencia en Go, Node.js, React y HTMX para aplicaciones modernas, además de conocimientos en Java y PHP para proyectos legacy. He trabajado en más de 30 sitios web para diversos clientes, desde e-commerce y plataformas empresariales hasta sistemas de autenticación que gestionan millones de usuarios. Familiarizado con flujos de trabajo asistidos por IA y gestión de infraestructura (Linux, Docker, CI/CD). Me adapto bien tanto al trabajo independiente como colaborativo en equipos internacionales.
|
|
{{else}}
|
|
Full-stack developer with experience in Go, Node.js, React, and HTMX for modern applications, plus Java and PHP knowledge for legacy projects. I've worked on over 30 websites for diverse clients, from e-commerce and enterprise platforms to authentication systems managing millions of users. Familiar with AI-assisted development workflows and infrastructure management (Linux, Docker, CI/CD). I adapt well to both independent work and collaborative teams across different countries.
|
|
{{end}}
|
|
</p>
|
|
</details>
|
|
</section>
|
|
|
|
<!-- Experience -->
|
|
<section id="experience" class="cv-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:office-building" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}
|
|
</h3>
|
|
</summary>
|
|
|
|
{{range .CV.Experience}}
|
|
<div class="experience-item">
|
|
<div class="company-logo">
|
|
{{if .CompanyLogo}}
|
|
<img src="/static/images/companies/{{.CompanyLogo}}" alt="{{.Company}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:office-building\' width=\'60\' height=\'60\' class=\'default-company-icon\'></iconify-icon>'">
|
|
{{else}}
|
|
<iconify-icon icon="mdi:office-building" width="60" height="60" class="default-company-icon"></iconify-icon>
|
|
{{end}}
|
|
</div>
|
|
<div class="experience-content">
|
|
<strong>{{.Position}}{{if .Company}} - {{if .CompanyURL}}<a href="{{.CompanyURL}}" target="_blank" rel="noopener noreferrer">{{.Company}}</a>{{else}}{{.Company}}{{end}}{{if .Duration}} - <span class="duration-text">{{.Duration}}</span>{{end}}{{end}}</strong>
|
|
{{if .Current}}<span class="current-badge">{{if eq $.Lang "es"}}ACTUAL{{else}}CURRENT{{end}}</span>{{end}}
|
|
{{if .Expired}}<span class="expired-badge">{{if eq $.Lang "es"}}EXPIRADO{{else}}EXPIRED{{end}}</span>{{end}}
|
|
<br>
|
|
<small>{{.StartDate}} / {{if .Current}}{{if eq $.Lang "es"}}presente{{else}}now{{end}}{{else}}{{.EndDate}}{{end}} - ({{.Location}})</small>
|
|
|
|
{{if .ShortDescription}}
|
|
<p class="experience-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
|
{{end}}
|
|
|
|
{{if .Responsibilities}}
|
|
<ul class="responsibilities long-only">
|
|
{{range .Responsibilities}}
|
|
<li>{{. | safeHTML}}</li>
|
|
{{end}}
|
|
</ul>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</details>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PAGE 2 -->
|
|
<div class="cv-page page-2">
|
|
<!-- Professional Title Badges - Same as Page 1 -->
|
|
<div class="cv-title-badges-header">
|
|
<span class="title-badge">{{if eq .Lang "es"}}ANALISTA PROGRAMADOR{{else}}ANALYST PROGRAMMER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">NODEJS + REACTJS {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">WEB {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">GO + HTMX {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
<span class="badge-separator">|</span>
|
|
<span class="title-badge">PHP {{if eq .Lang "es"}}DESARROLLADOR{{else}}DEVELOPER{{end}}</span>
|
|
</div>
|
|
|
|
<!-- Page 2 Content Grid: Main Content + Right Sidebar -->
|
|
<div class="page-content">
|
|
<!-- Main Content Area - Page 2 -->
|
|
<main class="cv-main">
|
|
<!-- Awards Section -->
|
|
{{if .CV.Awards}}
|
|
<section id="awards" class="cv-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:trophy" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}
|
|
</h3>
|
|
</summary>
|
|
{{range .CV.Awards}}
|
|
<div class="award-item">
|
|
{{if .AwardLogo}}
|
|
<div class="award-logo">
|
|
<img src="/static/images/companies/{{.AwardLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:trophy\' width=\'60\' height=\'60\' class=\'default-award-icon\'></iconify-icon>'">
|
|
</div>
|
|
{{end}}
|
|
<div class="award-content">
|
|
<strong>{{.Title}}</strong><br>
|
|
<small>{{.Issuer}} - {{.Date}}</small>
|
|
|
|
{{if .ShortDescription}}
|
|
<p class="award-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
|
{{end}}
|
|
|
|
{{if .Responsibilities}}
|
|
<ul class="responsibilities long-only">
|
|
{{range .Responsibilities}}
|
|
<li>{{. | safeHTML}}</li>
|
|
{{end}}
|
|
</ul>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</details>
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- Projects Section -->
|
|
{{if .CV.Projects}}
|
|
<section id="projects" class="cv-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:web" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Proyectos Personales / Freelance{{else}}Personal / Freelance Projects{{end}}
|
|
</h3>
|
|
</summary>
|
|
{{range .CV.Projects}}
|
|
<div class="project-item">
|
|
{{if .ProjectLogo}}
|
|
<div class="project-icon">
|
|
<img src="/static/images/projects/{{.ProjectLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:web\' width=\'80\' height=\'80\' class=\'default-project-icon\'></iconify-icon>'">
|
|
</div>
|
|
{{else}}
|
|
<div class="project-icon">
|
|
<iconify-icon icon="mdi:web" width="80" height="80" class="default-project-icon"></iconify-icon>
|
|
</div>
|
|
{{end}}
|
|
<div class="project-content">
|
|
<strong>
|
|
{{if .ProjectName}}
|
|
{{if .URL}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.ProjectName}}</a>{{else}}{{.ProjectName}}{{end}}{{if .ProjectDesc}} - {{.ProjectDesc}}{{end}}
|
|
{{else}}
|
|
{{if .URL}}<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a>{{else}}{{.Title}}{{end}}
|
|
{{end}}
|
|
</strong>
|
|
{{if .Current}}<span class="live-badge"><iconify-icon icon="mdi:wifi" width="14" height="14"></iconify-icon>{{if eq $.Lang "es"}}EN VIVO{{else}}LIVE{{end}}</span>{{end}}
|
|
{{if .MaintainedBy}}<span class="maintained-badge">{{if eq $.Lang "es"}}MANTENIDO POR{{else}}MAINTAINED BY{{end}} {{.MaintainedBy}}</span>{{end}}
|
|
<br>
|
|
<small>{{if .StartDate}}{{.StartDate}}{{if .Current}}{{if .DynamicDate}} / {{.DynamicDate}}{{else}} / {{if eq $.Lang "es"}}presente{{else}}ahora{{end}}{{end}}{{end}}{{end}} - ({{.Location}})</small>
|
|
|
|
{{if .ShortDescription}}
|
|
<p class="project-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
|
{{end}}
|
|
|
|
{{if .Responsibilities}}
|
|
<ul class="responsibilities long-only">
|
|
{{range .Responsibilities}}
|
|
<li>{{. | safeHTML}}</li>
|
|
{{end}}
|
|
</ul>
|
|
{{end}}
|
|
|
|
{{if .Technologies}}
|
|
<div class="project-technologies long-only">
|
|
<strong>{{if eq $.Lang "es"}}Tecnologías:{{else}}Technologies:{{end}}</strong>
|
|
{{range $index, $tech := .Technologies}}{{if $index}}, {{end}}{{$tech}}{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- Link to full portfolio -->
|
|
<div class="projects-footer">
|
|
<p>{{if eq .Lang "es"}}Ver todos los proyectos en mi{{else}}See all projects on my{{end}}
|
|
<a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer"><strong>{{if eq .Lang "es"}}portfolio de Domestika{{else}}Domestika portfolio{{end}}</strong></a></p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- Courses Section -->
|
|
{{if .CV.Courses}}
|
|
<section id="courses" class="cv-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:school" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Cursos Realizados{{else}}Courses{{end}}
|
|
</h3>
|
|
</summary>
|
|
{{range .CV.Courses}}
|
|
<div class="course-item">
|
|
{{if .CourseLogo}}
|
|
<div class="course-icon">
|
|
<img src="/static/images/courses/{{.CourseLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:school\' width=\'80\' height=\'80\' class=\'default-course-icon\'></iconify-icon>'">
|
|
</div>
|
|
{{else}}
|
|
<div class="course-icon">
|
|
<iconify-icon icon="mdi:school" width="80" height="80" class="default-course-icon"></iconify-icon>
|
|
</div>
|
|
{{end}}
|
|
<div class="course-content">
|
|
<strong>{{.Title}}</strong><br>
|
|
<small>{{.Institution}} - {{.Date}} - ({{.Location}})</small>
|
|
|
|
{{if .ShortDescription}}
|
|
<p class="course-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
|
{{end}}
|
|
|
|
{{if .Responsibilities}}
|
|
<ul class="responsibilities long-only">
|
|
{{range .Responsibilities}}
|
|
<li>{{. | safeHTML}}</li>
|
|
{{end}}
|
|
</ul>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</details>
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- Languages Section -->
|
|
<section id="languages" class="cv-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:translate" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Idiomas{{else}}Languages{{end}}
|
|
</h3>
|
|
</summary>
|
|
{{range .CV.Languages}}
|
|
<div class="language-item">
|
|
<strong>{{.Language}}:</strong> {{.Proficiency}}{{if .Detail}} {{.Detail}}{{end}}
|
|
</div>
|
|
{{end}}
|
|
</details>
|
|
</section>
|
|
|
|
<!-- References Section -->
|
|
{{if .CV.References}}
|
|
<section id="references" class="cv-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:link-variant" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Referencias{{else}}References{{end}}
|
|
</h3>
|
|
</summary>
|
|
{{range .CV.References}}
|
|
<div class="reference-item">
|
|
{{if .TextBefore}}{{.TextBefore}} {{end}}{{if eq .Action "downloadPDF"}}<a href="{{.URL}}" onclick="event.preventDefault(); openPdfModal(); return false;"><strong>{{if .LinkText}}{{.LinkText}}{{else}}{{.Title}}{{end}}</strong></a>{{else}}<a href="{{.URL}}" {{if and (eq .Type "cv") (ne .URL "/?lang=en") (ne .URL "/?lang=es")}}download{{else}}target="_blank" rel="noopener noreferrer"{{end}}><strong>{{if .LinkText}}{{.LinkText}}{{else}}{{.Title}}{{end}}</strong></a>{{end}}{{if .TextAfter}} {{.TextAfter}}{{end}}
|
|
</div>
|
|
{{end}}
|
|
</details>
|
|
</section>
|
|
{{end}}
|
|
|
|
<!-- Other Section (Driver's License) -->
|
|
{{if .CV.Other.DriverLicense}}
|
|
<section id="other" class="cv-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:information" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Otros{{else}}Other{{end}}
|
|
</h3>
|
|
</summary>
|
|
<div class="other-content">
|
|
{{if eq .Lang "es"}}Carnet de conducir tipo {{.CV.Other.DriverLicense | safeHTML}}{{else}}Driving License type {{.CV.Other.DriverLicense | safeHTML}}{{end}}
|
|
</div>
|
|
</details>
|
|
</section>
|
|
{{end}}
|
|
</main>
|
|
|
|
<!-- Right Sidebar - Skills (second half) -->
|
|
<aside class="cv-sidebar cv-sidebar-right">
|
|
<div class="sidebar-accordion-header" onclick="toggleSidebar(this)">
|
|
<iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
|
|
<span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
|
|
<iconify-icon icon="mdi:chevron-down" width="20" height="20" class="chevron"></iconify-icon>
|
|
</div>
|
|
<div class="sidebar-accordion-content">
|
|
{{range $index, $category := .SkillsRight}}
|
|
<section class="sidebar-section">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="sidebar-title">{{$category.Category}}</h3>
|
|
</summary>
|
|
<div class="sidebar-content">
|
|
{{range $category.Items}}<div class="skill-item">{{.}}</div>{{end}}
|
|
</div>
|
|
</details>
|
|
</section>
|
|
{{end}}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Footer - Only on Page 2 -->
|
|
<footer class="cv-footer">
|
|
<ul class="footer-content">
|
|
<li>
|
|
<div class="footer-label">linkedin_</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="{{.CV.Personal.LinkedIn}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.LinkedIn}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">github_</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="{{.CV.Personal.GitHub}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.GitHub}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">domestika_</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="{{.CV.Personal.Domestika}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.Domestika}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">email@</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="mailto:{{.CV.Personal.Email}}" target="_blank" rel="noopener noreferrer">{{.CV.Personal.Email}}</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="footer-label">phone#</div>
|
|
<div class="footer-separator"><i class="fa fa-circle"></i></div>
|
|
<div class="footer-value">
|
|
<a href="tel:+34676875420" target="_blank" rel="noopener noreferrer">+34 676 875 420</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
</div>
|