Initial commit

This commit is contained in:
popovskik committed 2026-04-08 21:54:43 +02:00
commit f3187036c1
33 files changed
+5480

No files matched your search

@@ -0,0 +1,432 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>CV | Kristijan Popovski</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&amp;family=Inter:wght@400;500;600&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary": "#741f00",
"surface": "#f8f9fa",
"surface-dim": "#d9dadb",
"on-error": "#ffffff",
"tertiary-fixed-dim": "#ffb59e",
"on-primary-fixed": "#001356",
"primary-fixed": "#dde1ff",
"primary-container": "#1a44d1",
"surface-tint": "#2a4fdb",
"on-primary-fixed-variant": "#0035be",
"outline": "#747686",
"on-secondary-fixed": "#001550",
"inverse-primary": "#b8c3ff",
"inverse-on-surface": "#f0f1f2",
"surface-container-lowest": "#ffffff",
"on-surface": "#191c1d",
"secondary-fixed-dim": "#b6c4ff",
"tertiary-fixed": "#ffdbd0",
"on-error-container": "#93000a",
"on-secondary-fixed-variant": "#163da5",
"error-container": "#ffdad6",
"on-tertiary": "#ffffff",
"inverse-surface": "#2e3132",
"secondary": "#3657be",
"primary-fixed-dim": "#b8c3ff",
"primary": "#002da7",
"on-primary-container": "#bcc6ff",
"surface-container": "#edeeef",
"background": "#f8f9fa",
"on-secondary-container": "#002780",
"surface-container-low": "#f3f4f5",
"secondary-fixed": "#dce1ff",
"on-background": "#191c1d",
"on-secondary": "#ffffff",
"on-primary": "#ffffff",
"on-surface-variant": "#444655",
"secondary-container": "#7593fd",
"error": "#ba1a1a",
"tertiary-container": "#9c2d00",
"on-tertiary-container": "#ffb9a3",
"surface-container-high": "#e7e8e9",
"on-tertiary-fixed-variant": "#842500",
"outline-variant": "#c4c5d7",
"surface-bright": "#f8f9fa",
"on-tertiary-fixed": "#3a0b00",
"surface-variant": "#e1e3e4",
"surface-container-highest": "#e1e3e4"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"fontFamily": {
"headline": ["Manrope"],
"body": ["Inter"],
"label": ["Inter"]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
body { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4 { font-family: 'Manrope', sans-serif; }
body { min-height: 100dvh; }
/* Smooth scanning guide for timeline */
.timeline-line {
background: linear-gradient(to bottom, #002da7 0%, #e1e3e4 100%);
}
</style>
</head>
<body class="bg-surface text-on-surface">
<!-- Top Navigation Bar -->
<nav class="fixed top-0 w-full z-50 bg-white/90 backdrop-blur-xl border-b border-outline-variant/10 h-16 md:h-20">
<div class="flex justify-between items-center max-w-7xl mx-auto px-6 h-full">
<span class="text-xl md:text-2xl font-bold tracking-tighter text-slate-900">Kristijan Popovski</span>
<div class="hidden md:flex gap-8 items-center">
<a class="text-slate-600 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Home</a>
<a class="text-slate-600 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Projects</a>
<a class="text-blue-700 border-b-2 border-blue-700 pb-1 font-manrope font-bold tracking-tight text-lg" href="#">CV</a>
<a class="text-slate-600 hover:text-blue-600 transition-colors font-manrope font-bold tracking-tight text-lg" href="#">Contact</a>
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-xl font-manrope font-bold text-sm scale-95 active:scale-90 transition-transform">Get in Touch</button>
</div>
<!-- Mobile Menu Toggle -->
<div class="md:hidden">
<span class="material-symbols-outlined text-primary text-3xl">menu</span>
</div>
</div>
</nav>
<main class="pt-24 md:pt-32 pb-24 px-6 max-w-2xl mx-auto">
<!-- Header Section -->
<header class="mb-16">
<h1 class="text-5xl md:text-[3.5rem] leading-tight font-extrabold tracking-tighter text-primary mb-6">Curriculum Vitae</h1>
<p class="text-on-surface-variant text-lg leading-relaxed mb-10">
BA of Business and Economics <span class="mx-2 text-primary/30">•</span> MSc in Business and Organisation (IMB)
</p>
<!-- Prominent Download Buttons - Enhanced Tap Targets -->
<div class="flex flex-col gap-4">
<button class="w-full bg-surface-tint bg-gradient-to-r from-primary to-primary-container text-on-primary rounded-2xl py-5 flex items-center justify-center gap-3 shadow-lg shadow-primary/20 active:scale-[0.98] transition-all">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">download</span>
<span class="font-headline font-bold uppercase tracking-wider text-sm">Download Full CV</span>
</button>
<button class="w-full bg-white text-primary border-2 border-primary/10 rounded-2xl py-5 flex items-center justify-center gap-3 shadow-sm active:scale-[0.98] transition-all">
<span class="material-symbols-outlined">description</span>
<span class="font-headline font-bold uppercase tracking-wider text-sm">Download One-Page CV</span>
</button>
</div>
</header>
<!-- Experience Section -->
<section class="mb-20">
<div class="flex items-center gap-4 mb-10">
<div class="h-1 w-10 bg-primary rounded-full"></div>
<h2 class="text-2xl font-extrabold tracking-tight text-on-surface uppercase">Work Experience</h2>
</div>
<div class="space-y-16 relative">
<div class="absolute left-[14px] top-2 bottom-0 w-[3px] timeline-line opacity-20"></div>
<!-- Founder -->
<div class="relative pl-14">
<div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-white border-[3px] border-primary flex items-center justify-center z-10 shadow-sm">
<div class="w-2.5 h-2.5 rounded-full bg-primary"></div>
</div>
<span class="font-label text-xs font-black tracking-widest text-primary uppercase block mb-3">2022 — NOW</span>
<h3 class="text-2xl font-bold text-on-surface mb-2">Founder and President</h3>
<p class="text-secondary font-semibold text-base mb-6">Macedonian Student Organisation in Slovenia</p>
<div class="bg-white/50 rounded-2xl p-5 border border-outline-variant/10 shadow-sm">
<p class="text-on-surface-variant leading-relaxed text-sm">
Founded and led a student organisation growing membership to 120+ students. Organized 50+ events with attendance of up to 500 participants.
</p>
</div>
</div>
<!-- Board Member -->
<div class="relative pl-14">
<div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-white border-[3px] border-outline-variant flex items-center justify-center z-10">
<div class="w-2.5 h-2.5 rounded-full bg-outline-variant"></div>
</div>
<span class="font-label text-xs font-black tracking-widest text-on-surface-variant uppercase block mb-3">2021 — NOW</span>
<h3 class="text-2xl font-bold text-on-surface mb-2">Board Member</h3>
<p class="text-secondary font-semibold text-base mb-6">Leaders for Education, Activism, and Development (LEAD)</p>
<div class="bg-white/50 rounded-2xl p-5 border border-outline-variant/10 shadow-sm">
<p class="text-on-surface-variant leading-relaxed text-sm">
Active member of the Board of LEAD, an NGO focused on empowering youth through education and activism.
</p>
</div>
</div>
<!-- CVS Mobile -->
<div class="relative pl-14">
<div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-white border-[3px] border-outline-variant flex items-center justify-center z-10">
<div class="w-2.5 h-2.5 rounded-full bg-outline-variant"></div>
</div>
<span class="font-label text-xs font-black tracking-widest text-on-surface-variant uppercase block mb-3">2024 — 2025</span>
<h3 class="text-2xl font-bold text-on-surface mb-2">Intern in Finance and Accounting</h3>
<p class="text-secondary font-semibold text-base mb-6">CVS Mobile d.d. <span class="text-on-surface-variant/60 font-medium">(a Eurowag company)</span></p>
<div class="bg-white/50 rounded-2xl p-5 border border-outline-variant/10 shadow-sm">
<p class="text-on-surface-variant leading-relaxed text-sm">
Supported finance operations across 4 subsidiaries. Reviewed financial reports, assisted with invoice data processing, and supported daily workflows.
</p>
</div>
</div>
<!-- Uni Ljubljana Intern -->
<div class="relative pl-14">
<div class="absolute left-0 top-1 w-8 h-8 rounded-full bg-white border-[3px] border-outline-variant flex items-center justify-center z-10">
<div class="w-2.5 h-2.5 rounded-full bg-outline-variant"></div>
</div>
<span class="font-label text-xs font-black tracking-widest text-on-surface-variant uppercase block mb-3">2024</span>
<h3 class="text-2xl font-bold text-on-surface mb-2">Student Intern</h3>
<p class="text-secondary font-semibold text-base mb-6">Dept. for Internationalisation &amp; Strategic Partnerships, Uni Ljubljana</p>
<div class="bg-white/50 rounded-2xl p-5 border border-outline-variant/10 shadow-sm">
<p class="text-on-surface-variant leading-relaxed text-sm">
Organized webinars for incoming students, prepared data reports, and supported regional university cooperation.
</p>
</div>
</div>
</div>
</section>
<!-- Education Section -->
<section class="mb-20">
<div class="flex items-center gap-4 mb-10">
<div class="h-1 w-10 bg-primary rounded-full"></div>
<h2 class="text-2xl font-extrabold tracking-tight text-on-surface uppercase">Education</h2>
</div>
<div class="space-y-8">
<!-- University of Ljubljana -->
<div class="bg-white rounded-2xl p-8 border border-outline-variant/10 shadow-sm">
<div class="flex gap-5">
<div class="bg-primary/5 p-3 rounded-xl h-fit">
<span class="material-symbols-outlined text-primary text-3xl">school</span>
</div>
<div class="flex-1">
<h4 class="text-lg font-extrabold text-on-surface leading-snug">University of Ljubljana</h4>
<p class="text-primary font-bold text-sm mt-1">School of Economics and Business</p>
<p class="text-on-surface-variant text-xs font-black mt-2 tracking-widest uppercase opacity-60">2022 — 2026</p>
<div class="mt-8 space-y-6">
<div class="relative pl-4 border-l-2 border-primary/20">
<p class="font-bold text-base text-on-surface">MSc in Business and Organisation (IMB)</p>
<p class="text-sm text-secondary mt-1 font-medium italic">Ranked 44th globally – Financial Times MiM 2025</p>
</div>
<div class="relative pl-4 border-l-2 border-primary/20">
<p class="font-bold text-base text-on-surface">Bachelor's Degree in Economics and Business</p>
<p class="text-sm text-on-surface-variant mt-1">Major in Entrepreneurship (2017—2022)</p>
</div>
</div>
</div>
</div>
</div>
<!-- Summer School -->
<div class="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm">
<div class="flex gap-5 items-center">
<div class="bg-primary/5 p-3 rounded-xl">
<span class="material-symbols-outlined text-primary text-2xl">history_edu</span>
</div>
<div>
<h4 class="font-bold text-on-surface">Resilient Cities Summer School</h4>
<p class="text-on-surface-variant text-sm mt-0.5">Slovak University of Technology <span class="mx-1">•</span> 2024</p>
</div>
</div>
</div>
<!-- High School -->
<div class="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm">
<div class="flex gap-5 items-center">
<div class="bg-primary/5 p-3 rounded-xl">
<span class="material-symbols-outlined text-primary text-2xl">school</span>
</div>
<div>
<h4 class="font-bold text-on-surface">High School "Nikola Karev" Skopje</h4>
<p class="text-on-surface-variant text-sm mt-0.5">Natural Sciences &amp; Mathematics <span class="mx-1">•</span> 2017 — 2021</p>
</div>
</div>
</div>
</div>
</section>
<!-- Leadership Section -->
<section class="mb-20">
<div class="flex items-center gap-4 mb-10">
<div class="h-1 w-10 bg-primary rounded-full"></div>
<h2 class="text-2xl font-extrabold tracking-tight text-on-surface uppercase leading-tight">Leadership &amp; Involvement</h2>
</div>
<div class="grid grid-cols-1 gap-5">
<div class="p-6 bg-white border border-outline-variant/10 rounded-2xl shadow-sm flex gap-5 active:bg-surface-container transition-colors">
<span class="material-symbols-outlined text-primary text-3xl">public</span>
<div>
<h4 class="font-bold text-on-surface mb-2 text-lg">International Student Ambassador</h4>
<p class="text-on-surface-variant text-sm leading-relaxed">One-on-one mentorship for prospective students at University of Ljubljana.</p>
</div>
</div>
<div class="p-6 bg-white border border-outline-variant/10 rounded-2xl shadow-sm flex gap-5 active:bg-surface-container transition-colors">
<span class="material-symbols-outlined text-primary text-3xl">account_balance</span>
<div>
<h4 class="font-bold text-on-surface mb-2 text-lg">Student Representation &amp; Governance</h4>
<p class="text-on-surface-variant text-sm leading-relaxed">Elected Student Representative (~5,000 students) and Senate Member.</p>
</div>
</div>
<div class="p-6 bg-white border border-outline-variant/10 rounded-2xl shadow-sm flex gap-5 active:bg-surface-container transition-colors">
<span class="material-symbols-outlined text-primary text-3xl">volunteer_activism</span>
<div>
<h4 class="font-bold text-on-surface mb-2 text-lg">Volunteering &amp; Humanitarian</h4>
<p class="text-on-surface-variant text-sm leading-relaxed">Red Cross Youth Club member and High School Student Council President.</p>
</div>
</div>
<div class="p-6 bg-white border border-outline-variant/10 rounded-2xl shadow-sm flex gap-5 active:bg-surface-container transition-colors">
<span class="material-symbols-outlined text-primary text-3xl">assignment</span>
<div>
<h4 class="font-bold text-on-surface mb-2 text-lg">Selected Projects</h4>
<p class="text-on-surface-variant text-sm leading-relaxed">22nd Int. Youth Conference Krushevo; Consultant for ATech Electronics.</p>
</div>
</div>
</div>
</section>
<!-- Skills & Languages -->
<section class="mb-20 space-y-8">
<div class="bg-surface-container-lowest rounded-2xl p-8 border border-outline-variant/15 shadow-sm">
<div class="flex items-center gap-3 mb-8 text-primary">
<span class="material-symbols-outlined text-3xl">terminal</span>
<h2 class="text-xl font-extrabold uppercase tracking-tight">Hard Skills</h2>
</div>
<div class="flex flex-wrap gap-3">
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Microsoft Office 365</span>
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Microsoft Dynamics NAV</span>
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">ChatGPT</span>
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Canva.com</span>
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Cluster Analysis</span>
<span class="px-4 py-2 bg-primary-fixed text-on-primary-fixed rounded-xl text-xs font-bold tracking-wide uppercase shadow-sm">Segmentation</span>
</div>
</div>
<div class="grid grid-cols-1 gap-8">
<div class="bg-primary text-on-primary rounded-2xl p-8 shadow-xl shadow-primary/20 overflow-hidden relative">
<div class="absolute top-0 right-0 p-4 opacity-10">
<span class="material-symbols-outlined text-8xl" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
</div>
<div class="relative z-10">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-2xl">workspace_premium</span>
<h2 class="font-black uppercase text-xs tracking-[0.2em] opacity-80">Honors &amp; Awards</h2>
</div>
<div>
<span class="text-[10px] font-black tracking-[0.2em] opacity-60 uppercase mb-2 block">2021 RECOGNITION</span>
<h4 class="font-extrabold text-2xl leading-tight mb-4">Top Graduate of Generation 2017-2021</h4>
<p class="text-sm opacity-90 leading-relaxed font-medium">Awarded recognition by the Mayor of the City of Skopje as the top graduate of High School Gymnasium "Nikola Karev".</p>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-8 border border-outline-variant/10 shadow-sm">
<div class="flex items-center gap-3 mb-8 text-primary">
<span class="material-symbols-outlined text-2xl">translate</span>
<h2 class="font-black uppercase text-xs tracking-[0.2em]">Languages</h2>
</div>
<div class="space-y-6">
<div>
<div class="flex justify-between items-center mb-2">
<span class="font-bold text-sm text-on-surface">Macedonian</span>
<span class="text-[10px] font-black text-primary uppercase tracking-widest bg-primary/10 px-2 py-0.5 rounded">Native</span>
</div>
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
<div class="h-full bg-primary w-full rounded-full"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<span class="font-bold text-sm text-on-surface">English</span>
<span class="text-[10px] font-black text-on-surface-variant uppercase tracking-widest">B2 Level</span>
</div>
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
<div class="h-full bg-primary w-[75%] rounded-full"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<span class="font-bold text-sm text-on-surface">Slovenian</span>
<span class="text-[10px] font-black text-on-surface-variant uppercase tracking-widest">B2 Level</span>
</div>
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
<div class="h-full bg-primary w-[75%] rounded-full"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<span class="font-bold text-sm text-on-surface">Serbo-Croatian</span>
<span class="text-[10px] font-black text-on-surface-variant uppercase tracking-widest">B2 Level</span>
</div>
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
<div class="h-full bg-primary w-[75%] rounded-full"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-2">
<span class="font-bold text-sm text-on-surface">French</span>
<span class="text-[10px] font-black text-on-surface-variant uppercase tracking-widest">A2 Level</span>
</div>
<div class="h-2 w-full bg-outline-variant/10 rounded-full overflow-hidden">
<div class="h-full bg-primary w-[40%] rounded-full"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Quote/Visual Section -->
<section class="mb-20">
<div class="relative rounded-[2.5rem] overflow-hidden min-h-[220px] bg-white flex items-center justify-center p-10 border border-outline-variant/10 shadow-sm">
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent"></div>
<img alt="Professional Profile Background" class="absolute inset-0 w-full h-full object-cover opacity-10 mix-blend-multiply" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDiX_URlQY5YoyfUrTchlNjd9nlLPqXnhHCMlZM9q1-PfrIG65dlYBDl0_qKYKxt-U2BmgnTdbibir0fM7vtV0vUc7ihPjS6k5cHNeJRF2f4hDJdWZWQrPAV6TWfEns7KqupxiJQ0PeBt16368e54TqFCiFsPOpZwUBK-9T7iqBmjejQ75wju6UGp2NnsZFDbuNnJoIFk4QY4Yn8MNXJp3ghZgFHh823Lc5sxm_8MJWOjFOEaQ6Kmf1fISfeAMh1_YEwgF6Xik0bUw"/>
<div class="relative text-center max-w-sm">
<span class="material-symbols-outlined text-primary/20 text-5xl absolute -top-10 left-1/2 -translate-x-1/2">format_quote</span>
<p class="font-headline italic text-xl md:text-2xl text-primary font-bold leading-relaxed">
"Building a career in management and leadership."
</p>
<div class="mt-6 h-1 w-12 bg-primary mx-auto rounded-full opacity-30"></div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-outline-variant/10 pt-20 pb-28 md:pb-20 px-8">
<div class="max-w-7xl mx-auto flex flex-col items-center text-center">
<span class="font-extrabold text-3xl tracking-tighter text-slate-900 block mb-4">Kristijan Popovski</span>
<p class="text-sm text-on-surface-variant font-medium mb-10 max-w-xs leading-relaxed">
© 2024. Dedicated to excellence in business and organisational growth.
</p>
<div class="flex flex-wrap justify-center gap-x-8 gap-y-4">
<a class="text-sm font-bold text-on-surface-variant hover:text-primary transition-colors flex items-center gap-2" href="#">
<span class="w-1 h-1 bg-primary rounded-full"></span> LinkedIn
</a>
<a class="text-sm font-bold text-on-surface-variant hover:text-primary transition-colors flex items-center gap-2" href="#">
<span class="w-1 h-1 bg-primary rounded-full"></span> Instagram
</a>
<a class="text-sm font-bold text-on-surface-variant hover:text-primary transition-colors flex items-center gap-2" href="mailto:popovskik02@yahoo.com">
<span class="w-1 h-1 bg-primary rounded-full"></span> Email
</a>
</div>
</div>
</footer>
<!-- Mobile Navigation Shell - Enhanced Bottom Bar -->
<div class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-2xl md:hidden z-50 flex justify-around items-center h-20 border-t border-outline-variant/10 px-2 pb-2">
<a class="flex flex-col items-center justify-center gap-1 w-full h-full text-slate-400 active:scale-95 transition-all" href="#">
<span class="material-symbols-outlined text-2xl">home</span>
<span class="text-[10px] font-black uppercase tracking-widest">Home</span>
</a>
<a class="flex flex-col items-center justify-center gap-1 w-full h-full text-slate-400 active:scale-95 transition-all" href="#">
<span class="material-symbols-outlined text-2xl">work</span>
<span class="text-[10px] font-black uppercase tracking-widest">Projects</span>
</a>
<a class="flex flex-col items-center justify-center gap-1 w-full h-full text-primary active:scale-95 transition-all" href="#">
<div class="bg-primary/10 px-4 py-1.5 rounded-full flex flex-col items-center">
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">description</span>
<span class="text-[10px] font-black uppercase tracking-widest">CV</span>
</div>
</a>
<a class="flex flex-col items-center justify-center gap-1 w-full h-full text-slate-400 active:scale-95 transition-all" href="#">
<span class="material-symbols-outlined text-2xl">alternate_email</span>
<span class="text-[10px] font-black uppercase tracking-widest">Contact</span>
</a>
</div>
</body></html>