You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
9.0 KiB
HTML
215 lines
9.0 KiB
HTML
5 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<title>Lorenzo Ponte</title>
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<link rel="stylesheet" href="../../../style.css">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.head {
|
||
|
|
height: 10%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 900px) {
|
||
|
|
.burger {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 600px) {
|
||
|
|
.burger {
|
||
|
|
display: none;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
.burger div {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0;
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu a {
|
||
|
|
-webkit-text-stroke: 1px black
|
||
|
|
}
|
||
|
|
|
||
|
|
.burger div:nth-child(2) a {
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: var(--main);
|
||
|
|
-webkit-text-stroke: unset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="bioN">
|
||
|
|
<div id="egg" style="position: absolute;
|
||
|
|
top: 2rem;
|
||
|
|
right: 5rem;
|
||
|
|
z-index: -10;
|
||
|
|
width: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;">
|
||
|
|
<img style="width: 50%;" src="../../../renzo.png" alt="">
|
||
|
|
<i style="position: absolute;
|
||
|
|
bottom: 1rem;
|
||
|
|
right: 1rem;">Giulia Rossena</i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
|
||
|
|
{{misc_content.bio}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <div> -->
|
||
|
|
<svg class="spastico" onclick="document.getElementById('bioN').style.display ='none'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"/>
|
||
|
|
</svg>
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="friends">
|
||
|
|
<a onclick="closeFriends()" id="closeMenu"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"/></svg>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
{{misc_content.amici}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="head" id="head">
|
||
|
|
<div class="menu">
|
||
|
|
<div class='site-title'>
|
||
|
|
<a href="../../../" id="name">Lorenzo Ponte</a>
|
||
|
|
<div id="toggle"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
|
||
|
|
viewBox="0 0 50 50">
|
||
|
|
<path
|
||
|
|
d="M 0 9 L 0 11 L 50 11 L 50 9 Z M 0 24 L 0 26 L 50 26 L 50 24 Z M 0 39 L 0 41 L 50 41 L 50 39 Z">
|
||
|
|
</path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="burger">
|
||
|
|
<div>
|
||
|
|
<a href="../../../en/#work" onclick="toggleMenu(false)">Works</a>
|
||
|
|
<a onclick="document.getElementById('bioN').style.display ='flex', toggleMenu(false)" >bio</a>
|
||
|
|
<!-- <a onclick="toggleMenu(false), lightingNews()">calendario</a> -->
|
||
|
|
<a onclick="openFriends(),toggleMenu(false)">friends</a>
|
||
|
|
<a id="lang" href="../">ita</a>
|
||
|
|
</div>
|
||
|
|
<div class="scrollbar">
|
||
|
|
{% for slug,contents in cms_data.projects.items() | reverse %}
|
||
|
|
<a href='../../{{slug}}/en' {% if contents.name==values.name %} class="selected" {% endif
|
||
|
|
%}>{{contents.name[1]}}</a><br>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="desktop">
|
||
|
|
<a href="../../../en/#work">Works</a>
|
||
|
|
<a onclick="document.getElementById('bioN').style.display ='flex'" >bio</a>
|
||
|
|
<!-- <a onclick="lightingNews()">calendario</a> -->
|
||
|
|
<a onclick="openFriends()">friends</a>
|
||
|
|
<a id="lang" href="../">ita</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="corpus">
|
||
|
|
|
||
|
|
<div class="index desktop">
|
||
|
|
{% for slug,contents in cms_data.projects.items() | reverse %}
|
||
|
|
<a href='../../{{slug}}/en' {% if contents.name==values.name %} class="selected" {% endif
|
||
|
|
%}>{{contents.name[1]}}</a>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content scrollbar">
|
||
|
|
<h1>{{values.name[1]}}</h1>
|
||
|
|
|
||
|
|
{{values.video_url}}
|
||
|
|
|
||
|
|
<div class="text_content">
|
||
|
|
{{values.html_content_en}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
{% for pic,caption in values.captions_en | dictsort %}
|
||
|
|
<img onclick="openModal()" class="slide" src="../assets/{{pic}}"
|
||
|
|
alt="{{caption}}">
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- </div> -->
|
||
|
|
|
||
|
|
<div id="fakeBackground"></div>
|
||
|
|
|
||
|
|
<div id="modal">
|
||
|
|
|
||
|
|
<svg id="closemodal" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
|
|
d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" />
|
||
|
|
</svg>
|
||
|
|
<div class="swiper">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
{% for pic,caption in values.captions_en | dictsort %}
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="../assets/{{pic}}" alt="{{caption}}">
|
||
|
|
<span>{{caption}}</span>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
<div class="swiper-button-next"></div>
|
||
|
|
<div class="swiper-button-prev"></div>
|
||
|
|
<!-- <div class="swiper-pagination"></div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="prefooter">
|
||
|
|
|
||
|
|
<marquee direction="left" behavior="scroll" class="marquee">
|
||
|
|
<span>Software Artisan:
|
||
|
|
<a target="_blank" href="http://federicoponi.it">Federico Poni</a>
|
||
|
|
</span>
|
||
|
|
<span>This website is built with plain <a target="_blank" href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/CSS">CSS</a> and <a href="https://en.wikipedia.org/wiki/JavaScript">plain JavaScript</a>, but we use <a target="_blank" href="https://swiperjs.com/">Swiper.JS</a> library for the galleries</span>
|
||
|
|
<span>An artisanal <a target="_blank" href="https://www.python.org/">Python</a> script is used to <a target="_blank" href="https://en.wikipedia.org/wiki/Static_site_generator">statically generate this website</a> for ecological sake</span>
|
||
|
|
<span>Fonts in use: <a target="_blank" href="https://www.collletttivo.it/typefaces/ortica">Ortica</a> and <a target="_blank" href="https://velvetyne.fr/fonts/vg5000/">VG5000</a></span>
|
||
|
|
</marquee>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<marquee direction="left" behavior="scroll" class="marquee">
|
||
|
|
|
||
|
|
|
||
|
|
{{misc_content.news}}
|
||
|
|
<!-- <span>19 - 20 Giugno: <a target="_blank" href="https://smetanovalitomysl.cz/en/udalosti/the-two-widows-a-new-view/">Two widows by Bedřich Smetana at Smetanova Litomyšl </a> </span> -->
|
||
|
|
|
||
|
|
</marquee>
|
||
|
|
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script src="../../../scripts/script.js"></script>
|
||
|
|
<script src="../../../scripts/script.work.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|