Skip to content

Instantly share code, notes, and snippets.

@Laaouatni

Laaouatni/clone-afp-patronato-san-vincenzo.markdown

Created January 2, 2022 13:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Laaouatni/5151d8a95c290458b10246c8fe4cc081 to your computer and use it in GitHub Desktop.
Save Laaouatni/5151d8a95c290458b10246c8fe4cc081 to your computer and use it in GitHub Desktop.
Download ZIP
CLONE afp patronato san vincenzo
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laaouatni</title>
<meta name="theme-color" content="#e17f37">
<link rel="stylesheet" type="text/css" href="./index.css">
<script src="index.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<div id="top"></div>
<header>
<input type="checkbox" name="checkbox" id="checkbox-menu">
<label for="checkbox-menu">
<div class="menu-div">
<svg aria-hiacdden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars menu-logo" role="img" xmlns=" http://www.w3.org/2000/svg" viewbox="0 0 448 512">
<path fill="currentColor" d="M416 224H31.1C14.33 224 0 238.3 0 256s14.33 32 31.1 32h384C433.7 288 448 273.7 448 256S433.7 224 416 224zM416 384H31.1C14.33 384 0 398.3 0 415.1S14.33 448 31.1 448h384C433.7 448 448 433.7 448 416S433.7 384 416 384zM416 64H31.1C14.33 64 0 78.33 0 95.1S14.33 128 31.1 128h384C433.7 128 448 113.7 448 96S433.7 64 416 64z "></path>
</svg>
</div>
</label>
<nav class="grid-navbar">
<a href="#first-image-large" class="nav-links">open day</a>
<a href="#storia" class="nav-links">storia</a>
<a href="#corsi" class="nav-links">corsi</a>
<a href="#top" id="afp-link">
<img src="https://laaouatni.github.io/afp/afp0.png" alt="logo patronato san vincenzo colorato" class="img-small">
</a>
<a href="#servizi" class="nav-links">servizi</a>
<a href="#contattaci" class="nav-links">contattaci</a>
<a href="#informazioni" class="nav-links">informazioni</a>
</nav>
</header>
<main>
<section class="img-section">
<img src="https://laaouatni.github.io/afp/afp1.jpg" alt="immagine di open day patronato san vincenzo" id="first-image-large" title="clicca per dettagli sul OPEN DAY!">
</section>
<section id="storia">
<div id="div-storia">
<div>
<h2 id="storia-header">LA NOSTRA STORIA</h2>
<p id="paragrafo-storia">
L’AFP Patronato San Vincenzo svolge attività di formazione professionale, di educazione, di assistenza e di promozione sociale. <br> Cura la crescita umana e professionale dei ragazzi e dei suoi lavoratori, per mantenere gli indirizzi
educativi e sociali del fondatore don Bepo Vavassori.
</p>
</div>
<img src="https://laaouatni.github.io/afp/afp2.png" id="storia-image" alt="foto di don befo con i ragazzi del patronato san vincenzo">
</div>
</section>
<section id="corsi">
<div class="center-vertical">
<h2 id="corsi-header">I NOSTRI CORSI PER RAGAZZI</h2>
</div>
<div>
<div class="center-vertical">
<span id="seleziona-sede">SELEZIONA UNA SEDE</span>
</div>
<div class="div-sedi">
<!-- 1 -->
<label for="1-radio">
<input type="radio" id="1-radio" name="radio-sedi-afp" onclick="javascript:radioCheck(1);" checked>
<span class="nome-sede-afp">BERGAMO</span>
</label>
<!-- 2 -->
<label for="2-radio">
<input type="radio" id="2-radio" onclick="javascript:radioCheck(2);" name="radio-sedi-afp">
<span class="nome-sede-afp">CLUSONE</span>
</label>
<!-- 3 -->
<label for="3-radio">
<input type="radio" id="3-radio" data="3" onclick="javascript:radioCheck(3);" name="radio-sedi-afp">
<span class="nome-sede-afp">ENDINE</span>
</label>
</div>
<div id="corsi-container">
<!-- 1 CORSI BERGAMO -->
<div id="uno-corsi-div" class="corsi-div on">
<div class="autoriparatore">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="screwdriver-wrench" class="svg-inline--fa fa-screwdriver-wrench" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M331.8 224.1c28.29 0 54.88 10.99 74.86 30.97l19.59 19.59c40.01-17.74 71.25-53.3 81.62-96.65c5.725-23.92 5.34-47.08 .2148-68.4c-2.613-10.88-16.43-14.51-24.34-6.604l-68.9 68.9h-75.6V97.2l68.9-68.9c7.912-7.912 4.275-21.73-6.604-24.34c-21.32-5.125-44.48-5.51-68.4 .2148c-55.3 13.23-98.39 60.22-107.2 116.4C224.5 128.9 224.2 137 224.3 145l82.78 82.86C315.2 225.1 323.5 224.1 331.8 224.1zM384 278.6c-23.16-23.16-57.57-27.57-85.39-13.9L191.1 158L191.1 95.99l-127.1-95.99L0 63.1l96 127.1l62.04 .0077l106.7 106.6c-13.67 27.82-9.251 62.23 13.91 85.39l117 117.1c14.62 14.5 38.21 14.5 52.71-.0016l52.75-52.75c14.5-14.5 14.5-38.08-.0016-52.71L384 278.6zM227.9 307L168.7 247.9l-148.9 148.9c-26.37 26.37-26.37 69.08 0 95.45C32.96 505.4 50.21 512 67.5 512s34.54-6.592 47.72-19.78l119.1-119.1C225.5 352.3 222.6 329.4 227.9 307zM64 472c-13.25 0-24-10.75-24-24c0-13.26 10.75-24 24-24S88 434.7 88 448C88 461.3 77.25 472 64 472z"></path>
</svg></div>
<span>AUTORIPARATORE</span>
</div>
<div class="cnc">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="gears" class="svg-inline--fa fa-gears" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M314.6 216.6L285.6 199.9C287.1 192.1 288 184.2 288 176.1C288 167.8 287.1 159.8 285.6 151.1L314.6 135.2c4.293-2.48 6.445-7.695 4.883-12.4C312.2 100.1 300.6 81.11 285.7 64.28C283.7 62.03 280.9 60.87 278 60.87c-1.861 0-3.736 .4785-5.42 1.449L243 79.41C231 69.11 217.3 61.07 202.1 55.75V21.65c0-4.943-3.418-9.348-8.258-10.36C182.9 9.002 171.6 7.67 160 7.67c-11.61 0-22.88 1.342-33.81 3.632c-4.84 1.016-8.248 5.41-8.248 10.35v34.09C102.7 61.07 88.96 69.11 76.98 79.41L47.39 62.32C45.71 61.35 43.83 60.87 41.97 60.87c-2.893 0-5.648 1.169-7.652 3.427C19.39 81.12 7.758 100.1 .5078 122.8C-1.053 127.5 1.098 132.7 5.391 135.2l29.04 16.77C32.93 159.8 32 167.8 32 176.1c0 8.137 .9434 16.04 2.395 23.75L5.391 216.6C1.098 219.1-1.053 224.3 .5078 228.1c7.25 21.83 18.79 41.69 33.71 58.52C36.22 289.8 39.08 290.9 41.97 290.9c1.861 0 3.738-.4785 5.42-1.449L76.7 272.6c12.04 10.41 25.91 18.53 41.24 23.89v33.69c0 4.941 3.419 9.279 8.258 10.29C137.1 342.7 148.4 344.1 160 344.1c11.61 0 22.88-1.411 33.81-3.7c4.84-1.016 8.247-5.343 8.247-10.28V296.5c15.34-5.365 29.2-13.49 41.24-23.9L272.6 289.5c1.68 .9707 3.559 1.449 5.42 1.449c2.891 0 5.646-1.238 7.652-3.498c14.92-16.83 26.56-36.6 33.81-58.44C321.1 224.3 318.9 219.1 314.6 216.6zM160 224.1c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48S186.5 224.1 160 224.1zM628.5 318.2c-1.016-4.84-5.412-8.248-10.36-8.248h-34.09c-5.324-15.22-13.36-28.98-23.66-40.96l17.09-29.6c.9707-1.68 1.449-3.559 1.449-5.42c0-2.893-1.167-5.648-3.425-7.652c-16.83-14.92-36.67-26.56-58.51-33.81c-4.703-1.561-9.918 .5898-12.4 4.883l-16.77 29.04C479.1 224.9 471.1 224 463.7 224c-8.137 0-16.04 .9434-23.75 2.395L423.2 197.4c-2.48-4.293-7.699-6.443-12.4-4.883c-21.83 7.25-41.69 18.79-58.52 33.71c-2.26 2.004-3.419 4.857-3.419 7.748c0 1.861 .4795 3.738 1.45 5.42l16.92 29.31c-10.41 12.04-18.53 25.91-23.89 41.24H309.6c-4.941 0-9.496 3.393-10.51 8.232C296.8 329.1 295.7 340.4 295.7 352c0 11.61 1.184 22.9 3.473 33.82C300.1 390.7 304.7 394.1 309.6 394.1h33.69c5.365 15.34 13.49 29.2 23.9 41.24l-16.92 29.31c-.9707 1.68-1.45 3.559-1.45 5.42c0 2.891 1.044 5.742 3.304 7.748c16.83 14.92 36.8 26.46 58.63 33.71c4.703 1.562 9.922-.5898 12.4-4.883l16.74-29C447.6 479.1 455.5 480 463.7 480c8.268 0 16.3-.9336 24.13-2.432l16.77 29.04c2.48 4.293 7.695 6.445 12.4 4.883c21.84-7.25 41.69-18.9 58.52-33.82c2.258-2.006 3.414-4.751 3.414-7.642c0-1.861-.4785-3.736-1.449-5.42l-17.09-29.6c10.29-11.98 18.34-25.74 23.66-40.96h34.09c4.943 0 9.35-3.418 10.37-8.258C630.8 374.9 632.1 363.6 632.1 352C632.1 340.4 630.8 329.1 628.5 318.2zM463.7 400c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48S490.2 400 463.7 400z"></path>
</svg></div>
<span>MACCHINE UTENSILI</span>
</div>
<div class="grafico">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="desktop" class="svg-inline--fa fa-desktop" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M528 0h-480C21.5 0 0 21.5 0 48v320C0 394.5 21.5 416 48 416h192L224 464H152C138.8 464 128 474.8 128 488S138.8 512 152 512h272c13.25 0 24-10.75 24-24s-10.75-24-24-24H352L336 416h192c26.5 0 48-21.5 48-48v-320C576 21.5 554.5 0 528 0zM512 288H64V64h448V288z"></path>
</svg></div>
<span>GRAFICO</span>
</div>
<div class="elettrico">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lightbulb" class="svg-inline--fa fa-lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path fill="currentColor" d="M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM191.4 .0132C89.44 .3257 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.61 288.9-.2837 191.4 .0132zM192 96.01c-44.13 0-80 35.89-80 79.1C112 184.8 104.8 192 96 192S80 184.8 80 176c0-61.76 50.25-111.1 112-111.1c8.844 0 16 7.159 16 16S200.8 96.01 192 96.01z"></path>
</svg></div>
<span>ELETTRICO</span>
</div>
<div class="carrozziere">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="car" class="svg-inline--fa fa-car" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M39.61 196.8L74.8 96.29C88.27 57.78 124.6 32 165.4 32H346.6C387.4 32 423.7 57.78 437.2 96.29L472.4 196.8C495.6 206.4 512 229.3 512 256V448C512 465.7 497.7 480 480 480H448C430.3 480 416 465.7 416 448V400H96V448C96 465.7 81.67 480 64 480H32C14.33 480 0 465.7 0 448V256C0 229.3 16.36 206.4 39.61 196.8V196.8zM109.1 192H402.9L376.8 117.4C372.3 104.6 360.2 96 346.6 96H165.4C151.8 96 139.7 104.6 135.2 117.4L109.1 192zM96 256C78.33 256 64 270.3 64 288C64 305.7 78.33 320 96 320C113.7 320 128 305.7 128 288C128 270.3 113.7 256 96 256zM416 320C433.7 320 448 305.7 448 288C448 270.3 433.7 256 416 256C398.3 256 384 270.3 384 288C384 305.7 398.3 320 416 320z"></path>
</svg></div>
<span>CARROZZIERE</span>
</div>
</div>
<!-- 2 CORSI CLUSONE -->
<div id="due-corsi-div" class="corsi-div off">
<div class="autoriparatore">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="screwdriver-wrench" class="svg-inline--fa fa-screwdriver-wrench" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M331.8 224.1c28.29 0 54.88 10.99 74.86 30.97l19.59 19.59c40.01-17.74 71.25-53.3 81.62-96.65c5.725-23.92 5.34-47.08 .2148-68.4c-2.613-10.88-16.43-14.51-24.34-6.604l-68.9 68.9h-75.6V97.2l68.9-68.9c7.912-7.912 4.275-21.73-6.604-24.34c-21.32-5.125-44.48-5.51-68.4 .2148c-55.3 13.23-98.39 60.22-107.2 116.4C224.5 128.9 224.2 137 224.3 145l82.78 82.86C315.2 225.1 323.5 224.1 331.8 224.1zM384 278.6c-23.16-23.16-57.57-27.57-85.39-13.9L191.1 158L191.1 95.99l-127.1-95.99L0 63.1l96 127.1l62.04 .0077l106.7 106.6c-13.67 27.82-9.251 62.23 13.91 85.39l117 117.1c14.62 14.5 38.21 14.5 52.71-.0016l52.75-52.75c14.5-14.5 14.5-38.08-.0016-52.71L384 278.6zM227.9 307L168.7 247.9l-148.9 148.9c-26.37 26.37-26.37 69.08 0 95.45C32.96 505.4 50.21 512 67.5 512s34.54-6.592 47.72-19.78l119.1-119.1C225.5 352.3 222.6 329.4 227.9 307zM64 472c-13.25 0-24-10.75-24-24c0-13.26 10.75-24 24-24S88 434.7 88 448C88 461.3 77.25 472 64 472z"></path>
</svg></div>
<span>AUTORIPARATORE</span>
</div>
<div class="cnc">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="gears" class="svg-inline--fa fa-gears" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M314.6 216.6L285.6 199.9C287.1 192.1 288 184.2 288 176.1C288 167.8 287.1 159.8 285.6 151.1L314.6 135.2c4.293-2.48 6.445-7.695 4.883-12.4C312.2 100.1 300.6 81.11 285.7 64.28C283.7 62.03 280.9 60.87 278 60.87c-1.861 0-3.736 .4785-5.42 1.449L243 79.41C231 69.11 217.3 61.07 202.1 55.75V21.65c0-4.943-3.418-9.348-8.258-10.36C182.9 9.002 171.6 7.67 160 7.67c-11.61 0-22.88 1.342-33.81 3.632c-4.84 1.016-8.248 5.41-8.248 10.35v34.09C102.7 61.07 88.96 69.11 76.98 79.41L47.39 62.32C45.71 61.35 43.83 60.87 41.97 60.87c-2.893 0-5.648 1.169-7.652 3.427C19.39 81.12 7.758 100.1 .5078 122.8C-1.053 127.5 1.098 132.7 5.391 135.2l29.04 16.77C32.93 159.8 32 167.8 32 176.1c0 8.137 .9434 16.04 2.395 23.75L5.391 216.6C1.098 219.1-1.053 224.3 .5078 228.1c7.25 21.83 18.79 41.69 33.71 58.52C36.22 289.8 39.08 290.9 41.97 290.9c1.861 0 3.738-.4785 5.42-1.449L76.7 272.6c12.04 10.41 25.91 18.53 41.24 23.89v33.69c0 4.941 3.419 9.279 8.258 10.29C137.1 342.7 148.4 344.1 160 344.1c11.61 0 22.88-1.411 33.81-3.7c4.84-1.016 8.247-5.343 8.247-10.28V296.5c15.34-5.365 29.2-13.49 41.24-23.9L272.6 289.5c1.68 .9707 3.559 1.449 5.42 1.449c2.891 0 5.646-1.238 7.652-3.498c14.92-16.83 26.56-36.6 33.81-58.44C321.1 224.3 318.9 219.1 314.6 216.6zM160 224.1c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48S186.5 224.1 160 224.1zM628.5 318.2c-1.016-4.84-5.412-8.248-10.36-8.248h-34.09c-5.324-15.22-13.36-28.98-23.66-40.96l17.09-29.6c.9707-1.68 1.449-3.559 1.449-5.42c0-2.893-1.167-5.648-3.425-7.652c-16.83-14.92-36.67-26.56-58.51-33.81c-4.703-1.561-9.918 .5898-12.4 4.883l-16.77 29.04C479.1 224.9 471.1 224 463.7 224c-8.137 0-16.04 .9434-23.75 2.395L423.2 197.4c-2.48-4.293-7.699-6.443-12.4-4.883c-21.83 7.25-41.69 18.79-58.52 33.71c-2.26 2.004-3.419 4.857-3.419 7.748c0 1.861 .4795 3.738 1.45 5.42l16.92 29.31c-10.41 12.04-18.53 25.91-23.89 41.24H309.6c-4.941 0-9.496 3.393-10.51 8.232C296.8 329.1 295.7 340.4 295.7 352c0 11.61 1.184 22.9 3.473 33.82C300.1 390.7 304.7 394.1 309.6 394.1h33.69c5.365 15.34 13.49 29.2 23.9 41.24l-16.92 29.31c-.9707 1.68-1.45 3.559-1.45 5.42c0 2.891 1.044 5.742 3.304 7.748c16.83 14.92 36.8 26.46 58.63 33.71c4.703 1.562 9.922-.5898 12.4-4.883l16.74-29C447.6 479.1 455.5 480 463.7 480c8.268 0 16.3-.9336 24.13-2.432l16.77 29.04c2.48 4.293 7.695 6.445 12.4 4.883c21.84-7.25 41.69-18.9 58.52-33.82c2.258-2.006 3.414-4.751 3.414-7.642c0-1.861-.4785-3.736-1.449-5.42l-17.09-29.6c10.29-11.98 18.34-25.74 23.66-40.96h34.09c4.943 0 9.35-3.418 10.37-8.258C630.8 374.9 632.1 363.6 632.1 352C632.1 340.4 630.8 329.1 628.5 318.2zM463.7 400c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48S490.2 400 463.7 400z"></path>
</svg></div>
<span>MACCHINE UTENSILI</span>
</div>
<div class="extra">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="hand" class="svg-inline--fa fa-hand" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M480 128v208c0 97.05-78.95 176-176 176h-37.72c-53.42 0-103.7-20.8-141.4-58.58l-113.1-113.1C3.906 332.5 0 322.2 0 312C0 290.7 17.15 272 40 272c10.23 0 20.47 3.906 28.28 11.72L128 343.4V64c0-17.67 14.33-32 32-32s32 14.33 32 32l.0729 176C192.1 248.8 199.2 256 208 256s16.07-7.164 16.07-16L224 32c0-17.67 14.33-32 32-32s32 14.33 32 32l.0484 208c0 8.836 7.111 16 15.95 16S320 248.8 320 240L320 64c0-17.67 14.33-32 32-32s32 14.33 32 32l.0729 176c0 8.836 7.091 16 15.93 16S416 248.8 416 240V128c0-17.67 14.33-32 32-32S480 110.3 480 128z"></path>
</svg></div>
<span>PERCORSI PERSONALIZZATI</span>
</div>
</div>
<!-- 3 CORSI ENDINE -->
<div id="tre-corsi-div" class="corsi-div off">
<div class="acconciatura">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="scissors" class="svg-inline--fa fa-scissors" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M335.7 278.3l-67.88 67.88l126.4 126.4c31.24 31.24 81.9 31.24 113.1 0c6.248-6.248 6.248-16.38 0-22.63L335.7 278.3zM507.3 62.06c6.248-6.248 6.248-16.38 0-22.63c-31.24-31.24-81.9-31.24-113.1 0L245.5 188.1l-31.17-31.17c18.01-41.03 10.46-90.55-23.13-124.1C169.3 10.94 140.7 0 111.1 0S54.67 10.94 32.8 32.8c-43.74 43.74-43.74 114.7 0 158.4C54.67 213.1 83.34 224 111.1 224c9.873 0 19.64-1.779 29.23-4.375L177.6 256L141.2 292.4C131.6 289.8 121.9 288 111.1 288c-28.66 0-57.33 10.93-79.2 32.8c-43.74 43.74-43.74 114.7 0 158.4C54.67 501.1 83.34 512 111.1 512s57.33-10.93 79.2-32.8c33.59-33.59 41.13-83.12 23.13-124.1L507.3 62.06zM112 160C85.49 160 64 138.5 64 112C64 85.49 85.46 64 112 64C138.5 64 160 85.46 160 112C160 138.5 138.5 160 112 160zM112 448C85.49 448 64 426.5 64 400C64 373.5 85.46 352 112 352C138.5 352 160 373.5 160 400C160 426.5 138.5 448 112 448z"></path>
</svg></div>
<span>ACCONCIATURA</span>
</div>
<div class="informatico">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="laptop-code" class="svg-inline--fa fa-laptop-code" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M128 96h384v256h64V80C576 53.63 554.4 32 528 32h-416C85.63 32 64 53.63 64 80V352h64V96zM624 384h-608C7.25 384 0 391.3 0 400V416c0 35.25 28.75 64 64 64h512c35.25 0 64-28.75 64-64v-16C640 391.3 632.8 384 624 384zM365.9 286.2C369.8 290.1 374.9 292 380 292s10.23-1.938 14.14-5.844l48-48c7.812-7.813 7.812-20.5 0-28.31l-48-48c-7.812-7.813-20.47-7.813-28.28 0c-7.812 7.813-7.812 20.5 0 28.31l33.86 33.84l-33.86 33.84C358 265.7 358 278.4 365.9 286.2zM274.1 161.9c-7.812-7.813-20.47-7.813-28.28 0l-48 48c-7.812 7.813-7.812 20.5 0 28.31l48 48C249.8 290.1 254.9 292 260 292s10.23-1.938 14.14-5.844c7.812-7.813 7.812-20.5 0-28.31L240.3 224l33.86-33.84C281.1 182.4 281.1 169.7 274.1 161.9z"></path>
</svg></div>
<span>AZIENDALE INFORMATICO</span>
</div>
<div class="estetica">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="paint-brush" class="svg-inline--fa fa-paint-brush" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M175.2 288.9c-24.31 2.156-46.98 12.2-64.38 29.7c-22.4 22.51-32.32 52.9-29.74 82.38c2.254 25.82-16.99 46.1-49.03 46.1C14.34 448 0 462.3 0 480C0 497.7 14.34 512 32.04 512h53.78c54.59 0 133.2-7.568 172.3-46.92c23.67-23.82 32.49-56.36 28.19-87.39L175.2 288.9zM499.5 17.46c-8.979-10.28-21.4-16.44-35.01-17.33c-13.55-1-26.72 3.578-36.92 12.59L222.3 193.7C215.8 199.4 210.1 206.2 205.7 213.1c-9.459 14.95-13.76 31.67-13.78 48.2l110.3 88.18c23.03-5.436 42.71-19.34 55.41-39.44l146.4-231.6C516.2 59.49 514.2 34.4 499.5 17.46z"></path>
</svg></div>
<span>ESTETICA</span>
</div>
<div class="falegname">
<div class="svg-corsi"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="toolbox" class="svg-inline--fa fa-toolbox" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M502.6 182.6l-45.25-45.25C451.4 131.4 443.3 128 434.8 128H384V80C384 53.5 362.5 32 336 32h-160C149.5 32 128 53.5 128 80V128H77.25c-8.5 0-16.62 3.375-22.62 9.375L9.375 182.6C3.375 188.6 0 196.8 0 205.3V304h128v-32C128 263.1 135.1 256 144 256h32C184.9 256 192 263.1 192 272v32h128v-32C320 263.1 327.1 256 336 256h32C376.9 256 384 263.1 384 272v32h128V205.3C512 196.8 508.6 188.6 502.6 182.6zM336 128h-160V80h160V128zM384 368c0 8.875-7.125 16-16 16h-32c-8.875 0-16-7.125-16-16v-32H192v32C192 376.9 184.9 384 176 384h-32C135.1 384 128 376.9 128 368v-32H0V448c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-112h-128V368z"></path>
</svg></div>
<span>OPERATORE DEL LEGNO</span>
</div>
</div>
</div>
<div id="btn-corsi-div">
<a href="http://">VEDI TUTTI I CORSI</a>
</div>
</div>
</section>
<section id="servizi">
<div>
<h2 id="servizi-header">SERVIZI PER LE AZIENDE</h2>
</div>
<div id="all-servizi-div">
<!-- 1 SERVIZI STAGE -->
<div class="card-servizio">
<div class="titolo-svg-container">
<div class="titolo-servizio">TIROCINI</div>
<div class="div-svg-servizio"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="puzzle-piece" class="svg-inline--fa fa-puzzle-piece" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M512 288c0 35.35-21.49 64-48 64c-32.43 0-31.72-32-55.64-32C394.9 320 384 330.9 384 344.4V480c0 17.67-14.33 32-32 32h-71.64C266.9 512 256 501.1 256 487.6C256 463.1 288 464.4 288 432c0-26.51-28.65-48-64-48s-64 21.49-64 48c0 32.43 32 31.72 32 55.64C192 501.1 181.1 512 167.6 512H32c-17.67 0-32-14.33-32-32v-135.6C0 330.9 10.91 320 24.36 320C48.05 320 47.6 352 80 352C106.5 352 128 323.3 128 288S106.5 223.1 80 223.1c-32.43 0-31.72 32-55.64 32C10.91 255.1 0 245.1 0 231.6v-71.64c0-17.67 14.33-31.1 32-31.1h135.6C181.1 127.1 192 117.1 192 103.6c0-23.69-32-23.24-32-55.64c0-26.51 28.65-47.1 64-47.1s64 21.49 64 47.1c0 32.43-32 31.72-32 55.64c0 13.45 10.91 24.36 24.36 24.36H352c17.67 0 32 14.33 32 31.1v71.64c0 13.45 10.91 24.36 24.36 24.36c23.69 0 23.24-32 55.64-32C490.5 223.1 512 252.7 512 288z"></path>
</svg></div>
</div>
<div class="div-paragrafo-servizio">
<p>Inserimento di tirocinanti in aziende del territorio e attivazione di progetti di alternanza scuola-lavoro per ragazzi.</p>
</div>
</div>
<!-- 2 SERVIZI FORMAZIONE -->
<div class="card-servizio">
<div class="titolo-svg-container">
<div class="titolo-servizio">FORMAZIONE AZIENDALE</div>
<div class="div-svg-servizio"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-trend-up" class="svg-inline--fa fa-arrow-trend-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M576 128v160c0 17.67-14.31 32-32 32s-32-14.33-32-32V205.3l-169.4 169.4C336.4 380.9 328.2 384 320 384s-16.38-3.125-22.62-9.375L192 269.3l-137.4 137.4C48.38 412.9 40.19 416 32 416c-18.28 0-32-14.95-32-32c0-8.188 3.125-16.38 9.375-22.62l160-160C175.6 195.1 183.8 192 192 192s16.38 3.125 22.62 9.375L320 306.8L466.8 160H384c-17.69 0-32-14.33-32-32s14.31-32 32-32h160C560.8 96 576 109.4 576 128z"></path>
</svg></div>
</div>
<div class="div-paragrafo-servizio">
<p>Corsi di formazione aziendali e interaziendali di varie tematiche.</p>
</div>
</div>
<!-- 3 SERVIZI FAB-LAB -->
<div class="card-servizio">
<div class="titolo-svg-container">
<div class="titolo-servizio">FAB-LAB</div>
<div class="div-svg-servizio"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rocket" class="svg-inline--fa fa-rocket" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M505.1 19.33C503.9 13.71 498.4 8.208 492.8 6.958C460.6 .0833 435.5 0 410.4 0c-103.2 0-165.1 55.25-211.4 128H94.86C78.49 128 59.24 139.9 51.99 154.5L2.493 253.2C.993 256.6 .1181 260.2-.0069 264c0 13.25 10.75 24 23.1 24h103.9L105.4 310.5c-11.38 11.38-12.1 32.25 0 45.25l50.87 50.87c11.12 11.13 32.12 13.13 45.25 0l22.5-22.5L223.1 488c0 13.25 10.75 24 23.1 24c3.75-.125 7.312-1 10.69-2.5l98.71-49.38c14.62-7.375 26.53-26.5 26.53-42.88l.0642-104.5c72.5-46.25 127.1-108.4 127.1-211C512.1 76.5 512.1 51.46 505.1 19.33zM383.1 168c-21.1 0-39.1-17.88-39.1-40s17.1-40 39.1-40c22.12 0 39.1 17.88 39.1 40S406.1 168 383.1 168z"></path>
</svg></div>
</div>
<div class="div-paragrafo-servizio">
<p>Il Fab-Lab è un laboratorio di fabbricazione digitale che permette di <br>condividere conoscenze, mezzi, strumenti e macchinari.</p>
</div>
</div>
<!-- 4 SERVIZI APPRENDISTATO -->
<div class="card-servizio">
<div class="titolo-svg-container">
<div class="titolo-servizio">APPRENDISTATO</div>
<div class="div-svg-servizio"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="compass-drafting" class="svg-inline--fa fa-compass-drafting" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M457 344.4c-25 20.37-52.63 37.25-82.5 49.12l54.38 94.12l53.88 23.12c9.875 4.125 21-2.25 22.25-12.87L512 439.6L457 344.4zM488.7 265.7c11.27-15.44 6.105-37.47-10.61-46.75c-13.99-7.774-31.63-3.985-41.06 8.947C395.2 285.3 328.1 319.1 256 319.1c-23.88 0-47.28-4.25-69.4-11.5l67.4-116.7h4l51.13 88.5c31.25-8.875 59.5-25.75 82.63-48.87L340 141.6c10.75-19.86 15.66-43.44 8.912-69.19c-9.697-37.01-41.5-66.32-79.4-71.5c-59-8.057-109.5 37.64-109.5 95.07c0 16.62 4.625 31.1 11.1 45.62L103.7 260C94.31 251.3 85.57 241.8 77.69 231.5C67.82 218.7 50.24 214.8 36.23 222.9c-16.53 9.603-21.45 31.76-9.806 46.91C39.67 287 54.83 302.4 71.25 316.2L0 439.6l7.003 58.27c1.277 10.63 12.41 17.07 22.25 12.85l53.88-23.12l70.85-122.6C186.1 377.2 220.6 383.1 256 383.1C348.6 383.1 434.9 339.4 488.7 265.7zM256 63.1c17.62 0 32 14.37 32 31.1s-14.38 32-32 32c-17.62 0-32-14.38-32-32S238.4 63.1 256 63.1z"></path>
</svg></div>
</div>
<div class="div-paragrafo-servizio">
<p>Accedi per avere informazioni e iscrivere i tuoi apprendisti ai percorsi di formazione.</p>
</div>
</div>
</div>
</section>
<hr>
<section id="contattaci">
<div>
<h2 id="contatti-header">CONTATTACI</h2>
</div>
<div id="form-maps-container">
<div>
<iframe class="maps-iframe" src="https://www.google.com/maps/d/embed?mid=15g88ZVpoZ-pG9shQj4pC-u85-5oMLj4C"></iframe>
</div>
<div id="form-container">
<form id="contattaci-form">
<div class="nome-cognome-div">
<div>
<label for="nome">
<span class="required">nome</span>
<input type="text" name="" id="nome" placeholder="nome">
</label>
</div>
<div>
<label for="cognome">
<span>cognome</span>
<input type="text" name="" id="cognome" placeholder="cognome">
</label>
</div>
</div>
<div>
<label for="email">
<span class="required">email</span>
<input type="email" name="" id="email" placeholder="email">
</label>
</div>
<div>
<label for="tel">
<span>telefono</span>
<input type="tel" name="" id="tel" placeholder="telefono">
</label>
</div>
<div>
<label for="messaggio">
<span class="required">Scrivi qui il tuo messaggio</span>
<textarea name="" id="messaggio" placeholder="Scrivi qui il tuo messaggio"></textarea>
</label>
</div>
<input type="submit" value="invia">
</form>
</div>
</div>
</section>
<hr>
<section id="informazioni">
<div class="sede-info">
<!-- BERGAMO -->
<div class="info-base">
<div class="nome-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="house" class="svg-inline--fa fa-house" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"></path>
</svg></div>
<span>SEDE DI BERGAMO</span>
</div>
<div class="tel-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone" class="svg-inline--fa fa-phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M511.2 387l-23.25 100.8c-3.266 14.25-15.79 24.22-30.46 24.22C205.2 512 0 306.8 0 54.5c0-14.66 9.969-27.2 24.22-30.45l100.8-23.25C139.7-2.602 154.7 5.018 160.8 18.92l46.52 108.5c5.438 12.78 1.77 27.67-8.98 36.45L144.5 207.1c33.98 69.22 90.26 125.5 159.5 159.5l44.08-53.8c8.688-10.78 23.69-14.51 36.47-8.975l108.5 46.51C506.1 357.2 514.6 372.4 511.2 387z"></path>
</svg></div>
<span>035 319361</span>
</div>
<div class="fax-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fax" class="svg-inline--fa fa-fax" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M192 64h197.5L416 90.51V160h64V77.25c0-8.484-3.375-16.62-9.375-22.62l-45.25-45.25C419.4 3.375 411.2 0 402.8 0H160C142.3 0 128 14.33 128 32v128h64V64zM64 128H32C14.38 128 0 142.4 0 160v320c0 17.62 14.38 32 32 32h32c17.62 0 32-14.38 32-32V160C96 142.4 81.63 128 64 128zM480 192H128v288c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V224C512 206.4 497.6 192 480 192zM288 432c0 8.875-7.125 16-16 16h-32C231.1 448 224 440.9 224 432v-32C224 391.1 231.1 384 240 384h32c8.875 0 16 7.125 16 16V432zM288 304c0 8.875-7.125 16-16 16h-32C231.1 320 224 312.9 224 304v-32C224 263.1 231.1 256 240 256h32C280.9 256 288 263.1 288 272V304zM416 432c0 8.875-7.125 16-16 16h-32c-8.875 0-16-7.125-16-16v-32c0-8.875 7.125-16 16-16h32c8.875 0 16 7.125 16 16V432zM416 304c0 8.875-7.125 16-16 16h-32C359.1 320 352 312.9 352 304v-32C352 263.1 359.1 256 368 256h32C408.9 256 416 263.1 416 272V304z"></path>
</svg></div>
<span>035 314188</span>
</div>
<div class="email-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelopes-bulk" class="svg-inline--fa fa-envelopes-bulk" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M191.9 448.6c-9.766 0-19.48-2.969-27.78-8.891L32 340.2V480c0 17.62 14.38 32 32 32h256c17.62 0 32-14.38 32-32v-139.8L220.2 439.5C211.7 445.6 201.8 448.6 191.9 448.6zM192 192c0-35.25 28.75-64 64-64h224V32c0-17.62-14.38-32-32-32H128C110.4 0 96 14.38 96 32v192h96V192zM320 256H64C46.38 256 32 270.4 32 288v12.18l151 113.8c5.25 3.719 12.7 3.734 18.27-.25L352 300.2V288C352 270.4 337.6 256 320 256zM576 160H256C238.4 160 224 174.4 224 192v32h96c33.25 0 60.63 25.38 63.75 57.88L384 416h192c17.62 0 32-14.38 32-32V192C608 174.4 593.6 160 576 160zM544 288h-64V224h64V288z"></path>
</svg></div>
<div>
<a href="mailto:cfpbergamo@afppatronatosv.org">cfpbergamo@afppatronatosv.org</a>
</div>
</div>
</div>
</div>
<!-- CLUSONE -->
<div class="sede-info">
<div class="info-base">
<div class="nome-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="house" class="svg-inline--fa fa-house" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"></path>
</svg></div>
<span>SEDE DI CLUSONE</span>
</div>
<div class="tel-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone" class="svg-inline--fa fa-phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M511.2 387l-23.25 100.8c-3.266 14.25-15.79 24.22-30.46 24.22C205.2 512 0 306.8 0 54.5c0-14.66 9.969-27.2 24.22-30.45l100.8-23.25C139.7-2.602 154.7 5.018 160.8 18.92l46.52 108.5c5.438 12.78 1.77 27.67-8.98 36.45L144.5 207.1c33.98 69.22 90.26 125.5 159.5 159.5l44.08-53.8c8.688-10.78 23.69-14.51 36.47-8.975l108.5 46.51C506.1 357.2 514.6 372.4 511.2 387z"></path>
</svg></div>
<span>0346 21131</span>
</div>
<div class="fax-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fax" class="svg-inline--fa fa-fax" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M192 64h197.5L416 90.51V160h64V77.25c0-8.484-3.375-16.62-9.375-22.62l-45.25-45.25C419.4 3.375 411.2 0 402.8 0H160C142.3 0 128 14.33 128 32v128h64V64zM64 128H32C14.38 128 0 142.4 0 160v320c0 17.62 14.38 32 32 32h32c17.62 0 32-14.38 32-32V160C96 142.4 81.63 128 64 128zM480 192H128v288c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V224C512 206.4 497.6 192 480 192zM288 432c0 8.875-7.125 16-16 16h-32C231.1 448 224 440.9 224 432v-32C224 391.1 231.1 384 240 384h32c8.875 0 16 7.125 16 16V432zM288 304c0 8.875-7.125 16-16 16h-32C231.1 320 224 312.9 224 304v-32C224 263.1 231.1 256 240 256h32C280.9 256 288 263.1 288 272V304zM416 432c0 8.875-7.125 16-16 16h-32c-8.875 0-16-7.125-16-16v-32c0-8.875 7.125-16 16-16h32c8.875 0 16 7.125 16 16V432zM416 304c0 8.875-7.125 16-16 16h-32C359.1 320 352 312.9 352 304v-32C352 263.1 359.1 256 368 256h32C408.9 256 416 263.1 416 272V304z"></path>
</svg></div>
<span>0346 22480</span>
</div>
<div class="email-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelopes-bulk" class="svg-inline--fa fa-envelopes-bulk" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M191.9 448.6c-9.766 0-19.48-2.969-27.78-8.891L32 340.2V480c0 17.62 14.38 32 32 32h256c17.62 0 32-14.38 32-32v-139.8L220.2 439.5C211.7 445.6 201.8 448.6 191.9 448.6zM192 192c0-35.25 28.75-64 64-64h224V32c0-17.62-14.38-32-32-32H128C110.4 0 96 14.38 96 32v192h96V192zM320 256H64C46.38 256 32 270.4 32 288v12.18l151 113.8c5.25 3.719 12.7 3.734 18.27-.25L352 300.2V288C352 270.4 337.6 256 320 256zM576 160H256C238.4 160 224 174.4 224 192v32h96c33.25 0 60.63 25.38 63.75 57.88L384 416h192c17.62 0 32-14.38 32-32V192C608 174.4 593.6 160 576 160zM544 288h-64V224h64V288z"></path>
</svg></div>
<div>
<a href="mailto:cfpclusone@afppatronatosv.org">cfpclusone@afppatronatosv.org</a>
</div>
</div>
</div>
</div>
<!-- ENDINE -->
<div class="sede-info">
<div class="info-base">
<div class="nome-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="house" class="svg-inline--fa fa-house" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"></path>
</svg></div>
<span>SEDE DI ENDINE</span>
</div>
<div class="tel-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone" class="svg-inline--fa fa-phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M511.2 387l-23.25 100.8c-3.266 14.25-15.79 24.22-30.46 24.22C205.2 512 0 306.8 0 54.5c0-14.66 9.969-27.2 24.22-30.45l100.8-23.25C139.7-2.602 154.7 5.018 160.8 18.92l46.52 108.5c5.438 12.78 1.77 27.67-8.98 36.45L144.5 207.1c33.98 69.22 90.26 125.5 159.5 159.5l44.08-53.8c8.688-10.78 23.69-14.51 36.47-8.975l108.5 46.51C506.1 357.2 514.6 372.4 511.2 387z"></path>
</svg></div>
<span>035 827513</span>
</div>
<div class="fax-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fax" class="svg-inline--fa fa-fax" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M192 64h197.5L416 90.51V160h64V77.25c0-8.484-3.375-16.62-9.375-22.62l-45.25-45.25C419.4 3.375 411.2 0 402.8 0H160C142.3 0 128 14.33 128 32v128h64V64zM64 128H32C14.38 128 0 142.4 0 160v320c0 17.62 14.38 32 32 32h32c17.62 0 32-14.38 32-32V160C96 142.4 81.63 128 64 128zM480 192H128v288c0 17.6 14.4 32 32 32h320c17.6 0 32-14.4 32-32V224C512 206.4 497.6 192 480 192zM288 432c0 8.875-7.125 16-16 16h-32C231.1 448 224 440.9 224 432v-32C224 391.1 231.1 384 240 384h32c8.875 0 16 7.125 16 16V432zM288 304c0 8.875-7.125 16-16 16h-32C231.1 320 224 312.9 224 304v-32C224 263.1 231.1 256 240 256h32C280.9 256 288 263.1 288 272V304zM416 432c0 8.875-7.125 16-16 16h-32c-8.875 0-16-7.125-16-16v-32c0-8.875 7.125-16 16-16h32c8.875 0 16 7.125 16 16V432zM416 304c0 8.875-7.125 16-16 16h-32C359.1 320 352 312.9 352 304v-32C352 263.1 359.1 256 368 256h32C408.9 256 416 263.1 416 272V304z"></path>
</svg></div>
<span>035 827938</span>
</div>
<div class="email-sede-info">
<div><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelopes-bulk" class="svg-inline--fa fa-envelopes-bulk" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M191.9 448.6c-9.766 0-19.48-2.969-27.78-8.891L32 340.2V480c0 17.62 14.38 32 32 32h256c17.62 0 32-14.38 32-32v-139.8L220.2 439.5C211.7 445.6 201.8 448.6 191.9 448.6zM192 192c0-35.25 28.75-64 64-64h224V32c0-17.62-14.38-32-32-32H128C110.4 0 96 14.38 96 32v192h96V192zM320 256H64C46.38 256 32 270.4 32 288v12.18l151 113.8c5.25 3.719 12.7 3.734 18.27-.25L352 300.2V288C352 270.4 337.6 256 320 256zM576 160H256C238.4 160 224 174.4 224 192v32h96c33.25 0 60.63 25.38 63.75 57.88L384 416h192c17.62 0 32-14.38 32-32V192C608 174.4 593.6 160 576 160zM544 288h-64V224h64V288z"></path>
</svg></div>
<div>
<a href="mailto:cfpendine@afppatronatosv.org">cfpendine@afppatronatosv.org</a>
</div>
</div>
</div>
</div>
</section>
</main>
<hr>
<footer>
<a href="https://github.com/Laaouatni/afp">
&copy laaouatni anas
</a>
</footer>
</body>
</html>
Raw
script.js
function radioCheck(radio) {
const uno = document.getElementById("uno-corsi-div");
const due = document.getElementById("due-corsi-div");
const tre = document.getElementById("tre-corsi-div");
if (radio == "1") {
uno.className = "corsi-div on";
due.className = "corsi-div off";
tre.className = "corsi-div off";
console.log("1");
} else if (radio == "2") {
uno.className = "corsi-div off";
due.className = "corsi-div on";
tre.className = "corsi-div off";
console.log("2");
} else if (radio == "3") {
uno.className = "corsi-div off";
due.className = "corsi-div off";
tre.className = "corsi-div on";
console.log("3");
} else {
alert("something go wrong");
}
}
Raw
style.css
* {
font-family: poppins, Arial, Helvetica, sans-serif, monospace;
scroll-behavior: smooth;
--afp: #e17f37;
--afp-blue: #005c85;
--afp-light-blue: #e7e7e7;
--afp-cyan: #379aa7;
--afp-black: #3c3950;
--afp-dark-blue: #212331;
}
html {
background-color: #e17e371b;
}
header {
z-index: 2;
background: var(--afp, orange);
opacity: 0.99;
width: 100%;
position: fixed;
left: 0;
top: 0;
box-shadow: var(--afp, orange) 0 0.1em 2em;
}
.img-small {
width: 4em;
height: auto;
transition-duration: 0.5s;
margin: 0.5em;
filter: drop-shadow(0 0 2em white);
}
.img-small:hover {
filter: grayscale(0.6) drop-shadow(0 0 3em rgb(255, 255, 255));
width: 5em;
transition-duration: 0.2s;
transition-timing-function: ease-out;
transform: rotate(-5deg);
}
.nav-links {
color: white;
text-decoration: none;
display: flex;
text-overflow: ellipsis;
align-items: center;
justify-content: center;
text-transform: capitalize;
transition-duration: 0.5s;
text-shadow: 0 0 1.5em white;
}
[alt] {
color: rgb(255, 0, 0);
}
.nav-links:hover {
background-color: white;
color: var(--afp, orange);
text-transform: uppercase;
transition-duration: 0.2s;
box-shadow: 0 0 1em white;
}
.grid-navbar {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto 1fr 1fr 1fr;
}
#first-image-large {
position: relative;
width: 100%;
height: auto;
top: 94px;
box-shadow: 0 0 2em white;
border-radius: 1em;
transition-duration: 1s;
max-height: 95vh;
}
#first-image-large:hover {
transform: translatey(-1em);
transition-duration: 0.5s;
}
.menu-div {
display: none;
}
#checkbox-menu {
position: absolute;
}
#checkbox-menu {
display: none;
}
#storia {
margin-top: 10vh;
}
#paragrafo-storia {
font-weight: 300;
opacity: 0.6;
font-size: 1.3em;
transition-duration: 0.2s;
}
#paragrafo-storia:hover {
opacity: 1;
transition-duration: 0.5s;
}
#storia-image {
height: 15em;
filter: drop-shadow(0 0.3em 5em rgb(255, 255, 255));
animation: img-move 1s ease-out;
transition-duration: 0.2s;
}
@keyframes img-move {
from {
transform: translatey(-15em);
}
to {
transform: translateY(0em);
}
}
#storia-image:hover {
animation: img-loop 1s ease-out infinite alternate;
transition-duration: 0.2s;
}
@keyframes img-loop {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
#div-storia {
display: flex;
align-items: center;
align-content: center;
margin: 2em 0 2em 2em;
}
#storia-header {
color: var(--afp);
font-size: 2em;
text-shadow: 0 0 2em var(--afp);
}
#corsi {
background-color: var(--afp-light-blue);
border-radius: 1vw;
box-shadow: 0 0 1em var(--afp-light-blue);
}
#corsi-header {
color: var(--afp-blue);
font-size: 3vw;
}
.center-vertical {
display: flex;
justify-content: center;
}
#seleziona-sede {
color: var(--afp-blue);
}
.div-sedi {
height: 3em;
display: flex;
align-items: center;
justify-content: space-evenly;
color: var(--afp-blue);
font-size: 1.7vw;
}
.nome-sede-afp:hover {
cursor: pointer;
}
span {
transition-duration: 0.3s;
}
input[name="radio-sedi-afp"] {
display: none;
}
input[name="radio-sedi-afp"]:checked ~ span {
font-weight: bold;
color: var(--afp-cyan);
font-size: 1.2em;
transition-duration: 0.3s;
}
.on {
display: grid !important;
animation: on 0.5s ease-out;
}
svg {
height: 3em;
aspect-ratio: auto;
margin: 0.2vw;
}
#corsi-container {
font-size: 1.5vw;
display: flex;
align-items: center;
justify-content: center;
}
.corsi-div {
margin-top: 2em;
margin-bottom: 2em;
}
.corsi-div > div {
display: flex;
margin: 0.5em;
align-items: center;
flex-direction: column;
padding: 0.5em;
border-radius: 0em;
transition-duration: 0.2s;
}
.corsi-div > div:hover {
background-color: white;
border-radius: 0.7em;
transform: scale(1.2) translateY(-1em);
z-index: 1;
box-shadow: 0 0 2em white;
transition-duration: 0.3s;
}
.corsi-div > div > div > svg {
color: var(--afp-blue);
}
.corsi-div > div > span {
color: var(--afp-cyan);
font-weight: bold;
}
#uno-corsi-div {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
#due-corsi-div {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#tre-corsi-div {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@keyframes on {
from {
opacity: 0;
transform: translateX(-50vh);
}
to {
opacity: 1;
transform: translateX(0vh);
}
}
.off {
display: none !important;
}
.corsi-div:hover div {
filter: blur(1vh);
}
.corsi-div > div:hover,
.corsi-div > div > div {
filter: blur(0) !important;
}
#btn-corsi-div {
display: grid;
place-content: center;
}
#btn-corsi-div a {
font-size: 1.3vw;
border-radius: 5vw;
border: 0.5vw solid var(--afp-blue);
padding: 1vw 3vw;
color: var(--afp-blue);
text-decoration: none;
font-weight: bold;
margin-bottom: 2em;
transition-duration: 0.2s;
}
#btn-corsi-div a:hover {
transform: scale(1.2);
transition-duration: 0.3s;
color: white;
background-color: var(--afp-blue);
animation-delay: 0.2s !important;
animation: gradient-blue 5s ease-in infinite;
}
@keyframes gradient-blue {
0% {
background: linear-gradient(250deg, transparent, var(--afp-blue));
background-size: 600% 600%;
background-position: 0% 51%;
}
50% {
background: linear-gradient(250deg, transparent, var(--afp-blue));
background-size: 600% 600%;
background-position: 100% 50%;
color: var(--afp-blue);
}
100% {
background: linear-gradient(250deg, transparent, var(--afp-blue));
background-size: 600% 600%;
background-position: 0% 51%;
}
}
#servizi {
margin: 1vw;
}
#servizi-header {
color: var(--afp);
font-size: 2em;
text-shadow: 0 0 2em var(--afp);
z-index: 1;
}
.titolo-servizio {
color: var(--afp-black);
font-size: 1.5em;
font-weight: bold;
}
.div-svg-servizio {
color: var(--afp-black);
margin: 1em;
}
.titolo-svg-container {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
}
.card-servizio div p {
font-weight: 500;
opacity: 0.7;
font-size: 1.3vw;
}
.card-servizio {
border-radius: 0.5em;
box-shadow: 0 0 2em white;
background-color: white;
margin-bottom: 1em;
padding: 0 1em;
transition-duration: 0.5s;
min-height: 20vh;
}
#all-servizi-div {
display: flex;
flex-grow: 1;
flex-direction: column;
flex-wrap: wrap;
}
#servizi div {
display: grid;
place-content: center;
}
.card-servizio:hover {
transition-duration: 0.2s;
background-color: var(--afp-cyan);
color: white;
transform: translateY(-1em);
border-radius: 1em;
box-shadow: 0 1em 5em var(--afp-cyan);
}
.card-servizio:hover > div div {
transition-duration: 0.2s;
color: white;
text-shadow: 0 0 1.5em white;
}
.card-servizio:hover > div div svg {
transition-duration: 0.2s;
color: white;
filter: drop-shadow(0 0 1.5em white);
}
.card-servizio > div div {
transition-duration: 0.2s;
}
.card-servizio:hover > div p {
transition-duration: 0.2s;
color: white;
opacity: 1;
min-width: 100%;
}
.card-servizio > div p {
transition-duration: 0.2s;
}
#all-servizi-div:hover div {
filter: blur(0.3vh);
}
#all-servizi-div > div:hover,
#all-servizi-div > div div {
filter: blur(0) !important;
}
.div-paragrafo-servizio {
display: flex !important;
align-items: flex-start;
}
hr {
opacity: 0.3;
margin: 1em 25%;
color: white;
}
#contattaci {
margin: 1em;
}
#contatti-header {
color: var(--afp);
font-size: 2em;
text-shadow: 0 0 2em var(--afp);
}
.maps-iframe {
width: 100%;
height: auto;
aspect-ratio: 1;
max-height: 50vh;
border-radius: 1em;
}
#form-maps-container {
display: flex;
flex-direction: column-reverse;
}
#contattaci-form {
margin: 1em;
}
#contattaci-form input {
width: 100%;
}
.nome-cognome-div {
display: grid;
place-content: center;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
#messaggio {
display: grid;
grid-template-rows: 1fr 1fr;
}
label span.required::after {
content: "*";
margin-left: 3px;
color: var(--afp-cyan);
}
input:hover,
textarea:hover {
transition-duration: 0.3s;
border-radius: 0.7em;
}
input[type="submit"] {
transition-duration: 0.5s;
color: var(--afp-blue);
margin-top: 1em !important;
}
input[type="submit"]:hover {
color: white;
background: linear-gradient(to left, rgba(0, 164, 228, 1), rgb(13, 0, 255));
background-repeat: no-repeat;
transition-duration: 0.5s;
border-radius: 2em;
font-weight: 500;
height: 60px;
font-size: 1.2em;
}
#contattaci-form div label,
#contattaci-form div div label {
font-weight: 400;
font-size: 1vw;
padding: 0.2em;
}
input[type],
textarea {
width: 100%;
margin: auto;
height: 3em;
overflow-x: auto;
}
input {
border-radius: 5px;
border: 2px solid #fff;
transition-duration: 0.2s;
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
textarea {
border-radius: 5px;
transition-duration: 0.2s;
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
border: 0px solid #fff;
height: 5em !important;
}
.tel-sede-info span::before {
content: "+39 ";
}
.fax-sede-info span::before {
content: "Fax: ";
}
.info-base div div svg {
margin: 1em;
height: 3vw;
aspect-ratio: 1;
}
.info-base:hover > div div svg {
transition-duration: 0.2s;
}
.info-base:hover > div div svg {
color: var(--afp-cyan);
transition-duration: 0.3s;
}
.info-base:hover > div span {
color: var(--afp-blue);
opacity: 1;
transition-duration: 0.3s;
}
#informazioni div {
background-color: white;
margin: 0.5em;
}
#informazioni {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
align-items: center;
justify-content: center;
}
#informazioni div div div {
display: grid;
grid-template-columns: auto 1fr;
place-content: center;
align-items: center;
}
#informazioni div div div span {
opacity: 0.7;
}
.email-sede-info div a {
color: var(--afp);
transition-duration: 0.3s;
}
.email-sede-info div a:hover {
color: var(--afp-black);
transition-duration: 0.2s;
}
#informazioni:hover div {
filter: blur(0.2vw);
transition-duration: 0.2s;
}
#informazioni > div:hover,
#informazioni > div div {
filter: blur(0) !important;
transition-duration: 0.3s;
}
#informazioni > div:hover {
transform: scale(1.1);
transition-duration: 0.3s;
border-radius: 1em;
box-shadow: 0 0 2em white;
border: 3px solid var(--afp);
z-index: 1;
}
footer {
display: grid;
width: 100%;
place-content: center;
margin-top: 5vh;
background-color: var(--afp-dark-blue);
color: white;
position: fixed;
bottom: 0;
left: 0;
height: 2em;
opacity: 0.8;
backdrop-filter: blur(5em);
box-shadow: 0 0 1em var(--afp-dark-blue);
z-index: 99;
}
footer a {
color: white;
text-decoration: none;
}
.sede-info {
margin: 1vh 2vw;
}
@media (min-width: 1500px) {
#all-servizi-div {
display: grid;
grid-template-columns: repeat(4, 1fr) !important;
}
.card-servizio {
display: grid;
grid-template-rows: 1fr 1fr;
}
#contattaci-form div label,
#contattaci-form div div label {
font-size: 0.6vw;
}
}
@media (min-width: 1200px) {
#form-maps-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
#contattaci {
margin-right: 0em !important;
}
#form-container {
place-content: center;
display: grid;
}
}
@media (min-width: 800px) {
#all-servizi-div {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.card-servizio {
margin: 1em;
}
}
@media (max-width: 900px) {
.nav-links {
font-size: 0.8em;
}
.card-servizio div p {
font-size: 2vw;
}
#contattaci-form div label,
#contattaci-form div div label {
font-size: 2vw;
}
}
@media (max-width: 860px) {
#div-storia {
padding-top: 1vh;
flex-wrap: wrap;
flex-direction: column-reverse;
justify-content: center;
}
#corsi-header {
font-size: 4vw;
}
}
@media (max-width: 700px) {
.img-small {
margin: 0.5em 0;
}
}
@media (max-width: 650px) {
header {
opacity: 0.99;
}
.nav-links {
padding: 0 0.6em;
transition-duration: 0.1s;
}
.nav-links:hover {
padding: 0 1.5em;
transition-duration: 0.2s;
}
.grid-navbar {
width: 100%;
display: flex;
justify-content: center;
flex-grow: 1;
flex-direction: row;
height: 100%;
}
.img-small {
width: 3em;
filter: drop-shadow(0 0 1em white);
margin: 0.3em 1em 0 1em;
}
.img-small:hover {
filter: grayscale(0.6) drop-shadow(0 0 3em rgb(255, 255, 255));
width: 3.2em;
transform: rotate(-360deg);
}
#first-image-large {
top: 75px;
}
#first-image-large:hover {
transform: translatey(-1.5em);
transition-duration: 0.5s;
}
#div-storia {
margin: 1em;
}
.card-servizio div p {
font-size: 2.5vw;
}
}
@media (max-width: 550px) {
#corsi-header {
font-size: 5vw;
}
.nav-links {
display: none;
}
.menu-div {
display: inline-flex;
position: absolute;
width: 1.7em;
height: auto;
color: white;
right: 0;
transform: translateX(-1em) translateY(0.3em);
transition-duration: 0.3s;
}
input[id="checkbox-menu"]:checked ~ nav a {
display: flex;
font-size: 1em;
padding: 1em;
}
input[id="checkbox-menu"]:checked ~ nav {
flex-direction: column;
animation: enter-active 1s ease-in-out;
}
input[id="checkbox-menu"]:checked ~ nav a img {
display: none;
}
input[id="checkbox-menu"]:checked ~ nav a#afp-link {
display: none;
}
input[id="checkbox-menu"]:checked ~ header {
animation: enter-active 0.5s ease-in-out;
}
input[id="checkbox-menu"]:checked ~ label div.menu-div {
opacity: 0.7;
color: rgb(169, 59, 0);
transition-duration: 0.3s;
}
#uno-corsi-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(5, 1fr);
}
#due-corsi-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
#tre-corsi-div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(4, 1fr);
}
#corsi-container {
font-size: 5vw;
}
.div-sedi {
font-size: 4vw;
}
#btn-corsi-div a {
font-size: 4vw;
border-width: 1vw;
}
.card-servizio div p {
font-size: 3vw;
}
#contattaci-form div label,
#contattaci-form div div label {
font-size: 2.5vw;
}
.info-base div span,
.info-base div div a {
font-size: 3vw;
}
}
@keyframes enter-active {
from {
transform: translatey(-50vh);
}
to {
transform: translatey(0);
}
}
@media (max-width: 500px) {
#div-storia {
margin: 0.5em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment