https://artemave.github.io/pandoc_resume/

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width">
6    <title>Artem Avetisyan CV</title>
7    <link rel="stylesheet" href="./index.css" type="text/css" media="screen" title="no title" charset="utf-8">
8  </head>
9  <body>
10    <div id="download-trigger-zone">
11      <div id="download-button">DOWNLOAD</div>
12    </div>
13    <div id="download-menu" class="slide-up">
14      <div class="download-menu-item"><a href="./resume.pdf" download="Artem Avetisyan CV.pdf" target="_blank">PDF</a></div>
15      <div class="download-menu-item"><a href="./resume.docx" download="Artem Avetisyan CV.docx" target="_blank">Word</a></div>
16    </div>
17    <iframe src="./resume.html" frameborder="0" id="content-frame"></iframe>
18  </body>
19  

19<script type="text/javascript" charset="utf-8">
20    var triggerZone    = document.getElementById('download-trigger-zone'),
21        downloadButton = document.getElementById('download-button'),
22        downloadMenu   = document.getElementById('download-menu'),
23        contentFrame   = document.getElementById('content-frame')
24
25    triggerZone.addEventListener('mouseenter', function() {
26      downloadButton.classList.add('slide-up')
27      downloadMenu.classList.remove('slide-up')
28    })
29
30    triggerZone.addEventListener('click', function(e) {
31      downloadButton.classList.add('slide-up')
32      downloadMenu.classList.remove('slide-up')
33    })
34
35    downloadMenu.addEventListener('mouseleave', function() {
36      downloadMenu.classList.add('slide-up')
37      downloadButton.classList.remove('slide-up')
38    })
39
40    contentFrame.addEventListener('load', function() {
41      this.contentDocument.getElementsByTagName('body')[0].addEventListener('click', function() {
42        downloadMenu.classList.add('slide-up')
43        downloadButton.classList.remove('slide-up')
44      })
45    })
46  </script>

46
47</html>