beta #4
38
src/thsf/static/css/tooltip.css
Normal file
38
src/thsf/static/css/tooltip.css
Normal file
@ -0,0 +1,38 @@
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: var(--main-color);
|
||||
color: var(--alt-color);
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: var(--alt-color) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
@ -6,6 +6,8 @@
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/tooltip.css') }}">
|
||||
<link rel="icon"
|
||||
type="image/png"
|
||||
href="{{ url_for('static', filename='images/favicon.png') }}" />
|
||||
|
@ -34,35 +34,55 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="navbar_wrapper">
|
||||
<i class="button black fa-regular fa-calendar"
|
||||
<i class="button tooltip black fa-regular fa-calendar"
|
||||
title="Programme"
|
||||
alt="Programme"></i>
|
||||
<i class="button black fa-solid fa-map-location-dot"
|
||||
alt="Programme">
|
||||
<span class="tooltiptext">Programme</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-map-location-dot"
|
||||
title="Le Lieu"
|
||||
alt="Le Lieu"></i>
|
||||
<i class="button black fa-solid fa-burger"
|
||||
alt="Le Lieu">
|
||||
<span class="tooltiptext">Le lieu</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-burger"
|
||||
title="Restauration"
|
||||
alt="Restauration"></i>
|
||||
<i class="button black fa-solid fa-shirt"
|
||||
alt="Restauration">
|
||||
<span class="tooltiptext">Restauration</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-shirt"
|
||||
title="T-shirt et goodies"
|
||||
alt="T-shirt et goodies"></i>
|
||||
<i class="button black fa-solid fa-guitar"
|
||||
alt="T-shirt et goodies">
|
||||
<span class="tooltiptext">Goodies</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-guitar"
|
||||
title="Concerts et DJ sets"
|
||||
alt="Concerts et DJ sets"></i>
|
||||
<i class="button black fa-solid fa-screwdriver-wrench"
|
||||
alt="Concerts et DJ sets">
|
||||
<span class="tooltiptext">Concerts et DJ sets</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-screwdriver-wrench"
|
||||
title="Ateliers"
|
||||
alt="Ateliers"></i>
|
||||
<i class="button black fa-solid fa-film"
|
||||
alt="Ateliers">
|
||||
<span class="tooltiptext">Ateliers</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-film"
|
||||
title="Projections"
|
||||
alt="Projections"></i>
|
||||
<i class="button black fa-solid fa-users-line"
|
||||
alt="Projections">
|
||||
<span class="tooltiptext">Projections</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-users-line"
|
||||
title="Tables rondes"
|
||||
alt="Tables rondes"></i>
|
||||
<i class="button black fa-solid fa-palette"
|
||||
alt="Tables rondes">
|
||||
<span class="tooltiptext">Tables rondes</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-palette"
|
||||
title="Expositions"
|
||||
alt="Expositions"></i>
|
||||
<i class="button black fa-solid fa-person-chalkboard"
|
||||
alt="Expositions">
|
||||
<span class="tooltiptext">Expositions</span>
|
||||
</i>
|
||||
<i class="button tooltip black fa-solid fa-person-chalkboard"
|
||||
title="Conférences"
|
||||
alt="Conférences"></i>
|
||||
alt="Conférences">
|
||||
<span class="tooltiptext">Conférences</span>
|
||||
</i>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
Loading…
Reference in New Issue
Block a user