<script src="https://kit.fontawesome.com/0dbc7de96f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<a href="https://www.toppoint.one">
<script>
var val = 0;
function cambiaOpacita(){
var immagine = document.getElementById("im");
immagine.style.opacity = val/100;
immagine.style.filter = 'alpha(opacity = ' + val + ')';
}
function aumentaOpacita()
{
val += 2;
cambiaOpacita();
if(val<100)
{
setTimeout("aumentaOpacita();", 100);
}
}
function cambia(){
var immagine = document.getElementById("im");
immagine.style.display = "none";
}
setTimeout("cambia();", 20000);
</script>
<img id="im" style="width:20%; max-width:100px" src="https://toppoint.one/LogoMarco/Icona_Logo_APP_Nero.png" align="center" Hspace="135" Vspace="10"
Border="0" onLoad="aumentaOpacita();">
</a>
<nav class="menu">
<input checked="checked" class="menu-toggler" type="checkbox">
<label for="menu-toggler"></label>
<ul>
<li class="menu-item">
<a class="fa-regular fa-user"
a href="uspapp://#!section=58391081">
<span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:14;top:45"
aria-hidden="true">PROFILO<a>
<li class="menu-item">
<a class="las fa-shop"
a href="uspapp://#!section=58637134">
<span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:13;top:45"
aria-hidden="true">SHOWROOM<a>
<li class="menu-item">
<a class="fa-regular fa-address-card"
a href="uspapp://#!section=58391085">
<span style="font-family:Trebuchet MS,Helvetica;Italic;font-size:10px;color: #000000;position:absolute;left:14;top:45"
aria-hidden="true">FIDELITY<a>
<li class="menu-item">
<a class="fa-regular fa-life-ring"
a href="uspapp://#!section=58393206">
<span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:18;top:45"
aria-hidden="true">SERVIZI<a>
<li class="menu-item">
<a class="fa-regular fa-handshake"
a href="uspapp://#!section=58391269">
<span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:12;top:45"
aria-hidden="true">MARCHI<a>
<li class="menu-item">
<a class="fa-solid fa-globe"
a href="https://www.uspitaly.it">
<span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:10;top:45"
aria-hidden="true">WEB<a>
<li class="menu-item">
<a class="las la-info"
a href="uspapp://#!section=58390993">
<span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:12;top:45"
aria-hidden="true">CONTATTI<a>
<li class="menu-item">
<a class="las la-share-alt"
a href="uspapp://#!section=57978438">
<span style="font-family: Trebuchet MS, Helvetica; Italic; font-size: 10px; color: #000000;position:absolute;left:12;top:45"
aria-hidden="true">CONDIVIDI<a>
<html>
<style type="text/css">
body {background: white;}
p {color: black;}
body {
background-image: url(https://toppoint.one/images/SFONDO_USP_ULTIMO.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: 0px 0px;
}
.menu-toggler {
position: absolute;
display: block;
top:00;
bottom:-270;
right:0;
left:0;
margin:auto;
width:40px;
height:40px;
z-index:2;
opacity:0;
cursor:pointer;
}
.menu-toggler:hover + label,
.menu-toggler:hover + label:before,
.menu-toggler:hover + label:after,{
background: black;
}
.menu-toggler:checked + label {
background: transparent;
}
.menu-toggler:checked + label:before,
.menu-toggler:checked + label:after,{
top:0;
width:40px;
transform-origin: 50% 50%;
}
.menu-toggler:checked + label:before {
transform: rotate(45deg) translateY(-15px) translateX(-15px);
}
.menu-toggler:checked + label:after {
transform: rotate(-45deg);
}
.menu-toggler:checked ~ ul .menu-item {
opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
transform: rotate(0deg) translate(-130px);
transform: translate(-130px, 0px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
transform: rotate(40deg) translateX(-130px);
transform: translate(-90px,-90px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
transform: rotate(80deg) translateX(-130px);
transform: translate(0px,-130px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
transform: rotate(120deg) translateX(-130px);
transform: translate(90px,-90px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
transform: rotate(160deg) translateX(-130px);
transform: translate(130px,0px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
transform: rotate(200deg) translateX(-130px);
transform: translate(90px,90px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(7) {
transform: rotate(240deg) translateX(-130px);
transform: translate(0px,130px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(8) {
transform: rotate(280deg) translateX(-130px);
transform: translate(-90px,90px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item:nth-child(9) {
transform: rotate(280deg) translateX(-130px);
transform: translate(0px,250px) scale(1) rotate(0deg)
}
.menu-toggler:checked ~ ul .menu-item a {
pointer-events:auto;
}
.menu-toggler + label {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(230, 239, 250, 0.9);
transition: transform 0.5s top 0.5s;
position: absolute;
display: block;
top: 0;
bottom: -300;
left: 0;
right: 0;
margin: auto;
}
.menu-toggler + label:before,
.menu-toggler + label:after {
width: 40px;
height: 5px;
display: block;
z-index: 1;
border-radius: 2.5px;
background: rgba(0, 0, 0, 1);
transition: transform 0.5s top 0.5s;
content: "";
position: absolute;
display: block;
left: 0;
}
.menu-toggler + label:before {
top: 10px;
}
.menu-toggler + label:after {
top: -10px;
}
.menu-item:nth-child(1) a {
transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
transform: rotate(0deg);
}
.menu-item:nth-child(3) a {
transform: rotate(0deg);
}
.menu-item:nth-child(4) a {
transform: rotate(0deg);
}
.menu-item:nth-child(5) a {
transform: rotate(0deg);
}
.menu-item:nth-child(6) a {
transform: rotate(0deg);
}
.menu-item:nth-child(7) a {
transform: rotate(0deg);
}
.menu-item:nth-child(8) a {
transform: rotate(0deg);
}
.menu-item:nth-child(9) a {
transform: rotate(0deg);
}
.menu-item {
position: absolute;
display: block;
top: 0;
bottom: -270;
left: 0;
right: 0;
margin: auto;
width: 70px;
height: 60px;
opacity: 0;
transition: 0.5s;
}
.menu-item a {
width: 70px;
height: 70px;
line-height: 70px;
color: rgba(255,255,255,1);
background: rgba(0, 0, 0, 1);
border-radius: 50%;
text-align: center;
text-decoration: none;
font-size: 35px;
transition: 0s;
}
});