diff --git a/css/styles.css b/css/styles.css
index e69de29..b7a2d34 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -0,0 +1,577 @@
+body {
+  width: 400px;
+  margin: auto;
+}
+
+header {
+  background: #FF7900;
+}
+
+.container-imgheader {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 105px 0 15px 30px;
+}
+
+header img {
+  width: 250px;
+  height: auto;
+
+}
+
+.title-aviano {
+  text-align: center;
+  font-family: aviano-future, sans-serif;
+  font-weight: 800;
+  font-style: italic;
+  margin: 0px 20px;
+  font-size: 50px;
+}
+
+.description {
+  text-align: center;
+  font-family: 'Cairo', sans-serif;
+  font-size: 20px;
+  margin: 0px 30px 0px 30px;
+  background: #FF7900;
+  padding: 1px;
+}
+
+.description strong {
+  font-family: aviano-future, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-size: 20px;
+}
+
+.description-font {
+  background-color: black;
+}
+
+.title-description-font {
+  font-family: 'Cairo', sans-serif;
+  color: #FF7900;
+  font-size: 20px;
+  text-align: center;
+  padding-top: 50px;
+  margin: 0;
+}
+
+.description-font-content {
+  text-align: center;
+  font-family: 'Cairo', sans-serif;
+  color: white;
+  padding: 15px 40px 50px 40px;
+  margin: 0;
+}
+
+.container-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  justify-content: space-evenly;
+  position: fixed;
+  width: 400px;
+  height: 50px;
+  text-align: center;
+  background-color: black;
+}
+
+nav a {
+  text-decoration: none;
+  color: white;
+}
+
+.button-nav:hover {
+  background: #d06b12;
+}
+
+.button-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: #FF7900;
+  color: white;
+  border-radius: 40px;
+  height: 25px;
+  padding: 0 40px;
+  font-family: 'Cairo', sans-serif;
+  font-size: 10px;
+}
+
+.button-nav:hover {
+  background: #d06b12;
+} 
+
+.button-text:hover {
+  background: #d06b12;
+} 
+
+.change-box {
+  background: #FF7900;
+  padding: 50px 0 20px 0;
+  cursor: pointer;
+}
+
+.change-box p {
+  text-align: center;
+}
+
+.title-fats {
+  font-family: 'Cairo', sans-serif;
+  margin: 10px 10px 5px 157px;
+  padding: 1px 10px;
+  color: #FF7900;
+  background: black;
+  font-size: 20px;
+  display: inline-block;
+}
+
+.explanation {
+  font-family: 'Cairo', sans-serif;
+  font-size: 10px;
+  margin: 0;
+  padding: 5px 0px 10px 8px;
+}
+
+.heavy-fast {
+  font-family: aviano-future, sans-serif;
+  font-weight: 900;
+  font-style: italic;
+  font-size: 30px;
+  margin: auto;
+}
+
+
+.heavy-fast:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  font-size: 30px;
+  margin: auto;
+}
+
+.black-fast {
+  font-family: aviano-future, sans-serif;
+  font-weight: 800;
+  font-style: italic;
+  font-size: 30px;
+  margin: auto;
+}
+
+.black-fast:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 800;
+  font-style: normal;
+  font-size: 30px;
+  margin: auto;
+}
+
+.bold-fast {
+  font-family: aviano-future, sans-serif;
+  font-weight: 700;
+  font-style: italic;
+  font-size: 30px;
+  margin: auto;
+}
+
+.bold-fast:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-size: 30px;
+  margin: auto;
+}
+
+.regular-fast {
+  font-family: aviano-future, sans-serif;
+  font-weight: 400;
+  font-style: italic;
+  font-size: 30px;
+  margin: auto;
+}
+
+.regular-fast:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 30px;
+  margin: auto;
+}
+
+.light-fast {
+  font-family: aviano-future, sans-serif;
+  font-weight: 300;
+  font-style: italic;
+  font-size: 30px;
+  margin: auto;
+}
+
+.light-fast:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  font-size: 30px;
+  margin: auto;
+}
+
+.thin-fast {
+  font-family: aviano-future, sans-serif;
+  font-weight: 100;
+  font-style: italic;
+  font-size: 30px;
+  margin: auto;
+}
+
+.thin-fast:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 100;
+  font-style: normal;
+  font-size: 30px;
+  margin: auto;
+}
+
+
+.presentation-box {
+  background: #FF7900;
+  margin: 0;
+}
+
+.presentation-box img {
+  height: 100px;
+  margin: 30px 20px 0px 20px;
+  /* max-width: 100%; */
+  height: auto;
+}
+
+.presentation-diagram {
+  background: #FF7900;
+  padding-top: 15px;
+  margin: 0;
+}
+
+.presentation-diagram img {
+  background: #FF7900;
+}
+
+.glyphs-box {
+  background: white;
+  padding: 50px 0 20px 0;
+}
+
+.title-glyphs {
+  font-family: 'Cairo', sans-serif;
+  margin: 10px 10px 10px 157px;
+  padding: 1px 10px;
+  color: white;
+  background: #FF7900;
+  font-size: 20px;
+  display: inline-block;
+}
+
+.explanation-glhyps {
+  font-family: 'Cairo', sans-serif;
+  font-size: 10px;
+  margin: 0;
+  padding: 0 0 10px 155px;
+}
+
+.thin-text {
+  font-family: aviano-future, sans-serif;
+  font-weight: 100;
+  font-style: normal;
+  font-size: 35px;
+  margin: 0 40px 0 40px;
+}
+
+.thin-text:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 100;
+  font-style: italic;
+}
+
+.light-text {
+  font-family: aviano-future, sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  font-size: 35px;
+  margin: 30px 40px 0 40px;
+}
+
+.light-text:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 300;
+  font-style: italic;
+}
+
+.regular-text {
+  font-family: aviano-future, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 35px;
+  margin: 30px 40px 0 40px;
+}
+
+.regular-text:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.bold-text {
+  font-family: aviano-future, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-size: 35px;
+  margin: 30px 40px 0 40px;
+}
+
+.bold-text:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.black-text {
+  font-family: aviano-future, sans-serif;
+  font-weight: 800;
+  font-style: normal;
+  font-size: 35px;
+  margin: 30px 40px 0 40px;
+}
+
+.black-text:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.heavy-text {
+  font-family: aviano-future, sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  font-size: 35px;
+  margin: 30px 40px 0 40px;
+}
+
+.heavy-text:hover {
+  font-family: aviano-future, sans-serif;
+  font-weight: 900;
+  font-style: italic;
+}
+
+.textarea-box {
+  background: black;
+  padding: 50px 0 20px 0;
+}
+
+.title-textarea {
+  font-family: 'Cairo', sans-serif;
+  margin: 10px 10px 10px 157px;
+  padding: 1px 10px;
+  color: black;
+  background: #FF7900;
+  font-size: 20px;
+  display: inline-block;
+}
+
+.heavy-zone {
+  margin: 5px 0 45px 0;
+}
+
+.heavy-zone .text-test {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 10px 28px 5px 10px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 900;
+  font-style: normal;
+}
+
+.heavy-zone .text-fast {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 0 28px 0 3px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 900;
+  font-style: italic;
+}
+
+.black-zone {
+  margin: 5px 0 45px 0;
+}
+
+.black-zone .text-test {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 10px 28px 5px 15px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 800;
+  font-style: normal;
+}
+
+.black-zone .text-fast {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 0 28px 0 11px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 800;
+  font-style: italic;
+}
+
+.bold-zone {
+  margin: 5px 0 45px 0;
+}
+
+.bold-zone .text-test {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 10px 28px 5px 20px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.bold-zone .text-fast {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 0 28px 0 15px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 700;
+  font-style: italic;
+}
+
+.regular-zone {
+  margin: 5px 0 45px 0;
+}
+
+.regular-zone .text-test {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 10px 28px 5px 25px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.regular-zone .text-fast {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 0 28px 0 25px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.light-zone {
+  margin: 5px 0 45px 0;
+}
+
+.light-zone .text-test {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 10px 28px 5px 28px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+.light-zone .text-fast {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 0 28px 0 25px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 300;
+  font-style: italic;
+}
+
+.thin-zone {
+  margin: 5px 0 15px 0;
+}
+
+.thin-zone .text-test {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 10px 28px 5px 30px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 100;
+  font-style: normal;
+}
+
+.thin-zone .text-fast {
+  text-align: center;
+  color: white;
+  background: none;
+  margin: 0 28px 0 30px;
+  border-color: #FF7900;
+  font-size: 20px;
+  font-family: aviano-future, sans-serif;
+  font-weight: 100;
+  font-style: italic;
+}
+
+footer {
+  background: #FF7900;
+  font-family: 'Cairo', sans-serif;
+}
+
+footer h1 {
+  margin: 0;
+  text-align: center;
+  font-size: 25px;
+}
+
+footer img {
+  height: 70px;
+  margin-left: 300px;
+}
+
+footer a {
+  color: gold;
+}
+
+.contact-box {
+  display: flex;
+  justify-content: space-around;
+}
+
diff --git a/img/alien.jpg b/img/alien.jpg
new file mode 100644
index 0000000..baa65e8
Binary files /dev/null and b/img/alien.jpg differ
diff --git a/img/aviano-logo.svg b/img/aviano-logo.svg
new file mode 100644
index 0000000..c97f9fd
--- /dev/null
+++ b/img/aviano-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 195.24 214.5"><defs><style>.cls-1,.cls-2{fill:#a3a3a3;}.cls-2{stroke:#a3a3a3;}.cls-2,.cls-4,.cls-5{stroke-miterlimit:10;}.cls-2,.cls-5{stroke-width:0.75px;}.cls-3,.cls-5{fill:#090909;}.cls-4{fill:#cd6621;}.cls-4,.cls-5{stroke:#090909;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="tracée"><path class="cls-1" d="M12.78,138.66,193.37.05,172.93,33.87,70,108.19l88.81-58.71L138,80.69l-76.92,45,65.77-34.93-18.2,25.81-52.77,25.1,47.19-19.32L170,74.74l-29.73,41.79-39.76,23.24,58.71-30.1-31.58,32L93.78,155.38l-40.5,43.47-.71.79,3.51,3.84-.26,11L53,205.19l-5-3.67-9.57,1.37-4,11.54L36,200.32l10.69-1.19L43,195.19l-6.58-.08-7.18,5.64,7-8.38,10.08-.25,3.25,4,2.82-6.66s-16.41-12.14-46,9.06c0,0,4-9.75,10.69-9.66,0,0-2.74-3.93-16.16-2.82,0,0,2.65-15.39,23.51-16.42l8.72-7.26L13.59,154Z"/><path class="cls-2" d="M11,188.16s-7.11-.94-10-.11c0,0-2.35,6.37,2.62,9.74A9.16,9.16,0,0,1,11,188.16Z"/><path class="cls-3" d="M14.54,138.68,195.24,0,174.79,33.83,71.8,108.2l88.87-58.75L139.84,80.68l-77,45,65.81-34.95-18.22,25.83-52.8,25.11,47.22-19.33,66.93-47.6-29.74,41.82L102.29,139.8,161,109.68l-31.61,32L95.6,155.42l-40.53,43.5-.7.78,3.5,3.85-.25,10.95-2.83-9.24-5-3.68L40.25,203l-4,11.55,1.54-14.11,10.69-1.2-3.67-3.94-6.59-.08L31,200.81l7-8.38,10.09-.26,3.25,4,2.83-6.67s-16.43-12.14-46,9.07c0,0,4-9.75,10.69-9.67,0,0-2.74-3.93-16.17-2.82,0,0,2.66-15.39,23.53-16.42L35,162.41,15.36,154Z"/><path class="cls-4" d="M8.78,183.19l4.53-4.79s2.4-.08,1.63,3-4.54,2.73-4.54,2.73S8.78,183.9,8.78,183.19Z"/><path class="cls-5" d="M12.73,188.22s-7.1-.95-10-.11c0,0-2.35,6.37,2.63,9.75A9.15,9.15,0,0,1,12.73,188.22Z"/></g></g></svg>
\ No newline at end of file
diff --git a/img/blade.jpg b/img/blade.jpg
new file mode 100644
index 0000000..fe280b1
Binary files /dev/null and b/img/blade.jpg differ
diff --git a/img/fleche.svg b/img/fleche.svg
new file mode 100644
index 0000000..0a93b60
--- /dev/null
+++ b/img/fleche.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.88 67.85"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="texte"><path class="cls-1" d="M47.88,13.26,46,18.35,24,10.06,1.81,18.65,0,13.58,23.85,0Z"/><path class="cls-1" d="M20.9,67.8V20.48h5.69V67.85Z"/></g></g></svg>
\ No newline at end of file
diff --git a/img/future.jpg b/img/future.jpg
new file mode 100644
index 0000000..15d50c9
Binary files /dev/null and b/img/future.jpg differ
diff --git a/img/oblivion.jpg b/img/oblivion.jpg
new file mode 100644
index 0000000..3dbe399
Binary files /dev/null and b/img/oblivion.jpg differ
diff --git a/img/weight.svg b/img/weight.svg
new file mode 100644
index 0000000..89d763e
--- /dev/null
+++ b/img/weight.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377.58 214.23"><defs><style>.cls-1{fill:#ff7900;}.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-9{font-size:99.7px;}.cls-2{font-family:AvianoFutureThin, Aviano Future;}.cls-3{font-family:AvianoFutureLight, Aviano Future;}.cls-4{font-family:AvianoFutureRegular, Aviano Future;}.cls-5{font-family:AvianoFutureBold, Aviano Future;}.cls-6{font-family:AvianoFutureBlack, Aviano Future;}.cls-7{font-family:AvianoFutureHeavy, Aviano Future;}.cls-8{font-size:16.62px;fill:#fff;font-family:Cairo-Light, Cairo;font-weight:300;}.cls-9{font-family:AvianoFutureThinFast, Aviano Future;}.cls-10{font-family:AvianoFutureLightFast, Aviano Future;}.cls-11{font-family:AvianoFutureRegularFast, Aviano Future;}.cls-12{font-family:AvianoFutureBoldFast, Aviano Future;}.cls-13{font-family:AvianoFutureBlackFast, Aviano Future;}.cls-14{font-family:AvianoFutureHeavyFast, Aviano Future;}.cls-15{letter-spacing:0em;}.cls-16{letter-spacing:-0.01em;}.cls-17{letter-spacing:0em;}.cls-18{letter-spacing:-0.04em;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="texte"><rect class="cls-1" width="111.65" height="108.24"/><text class="cls-2" transform="translate(10.92 82.34)">c</text><rect class="cls-1" x="43.6" y="0.15" width="111.65" height="108.24"/><text class="cls-3" transform="translate(54.41 82.39)">c</text><rect class="cls-1" x="99.87" y="0.15" width="111.65" height="108.24"/><text class="cls-4" transform="translate(110.83 82.66)">c</text><rect class="cls-1" x="151.86" y="0.15" width="111.65" height="108.24"/><text class="cls-5" transform="translate(165.05 82.19)">c</text><rect class="cls-1" x="206.62" y="0.43" width="111.65" height="108.24"/><text class="cls-6" transform="translate(219.92 81.66)">c</text><rect class="cls-1" x="263.96" y="0.26" width="111.65" height="108.24"/><text class="cls-7" transform="translate(278.09 85.17)">c</text><text class="cls-8" transform="translate(2.83 15.63)">100</text><text class="cls-8" transform="translate(55.17 15.63)">300</text><text class="cls-8" transform="translate(110.66 14.79)">400</text><text class="cls-8" transform="translate(161.18 14.79)">700</text><text class="cls-8" transform="translate(216.82 14.79)">800</text><text class="cls-8" transform="translate(267.94 15.06)">900</text><text class="cls-8" transform="translate(111.27 118.35) scale(0.99 1)">400</text><text class="cls-8" transform="translate(161.35 118.35) scale(0.99 1)">700</text><text class="cls-8" transform="translate(216.52 118.35) scale(0.99 1)">800</text><text class="cls-8" transform="translate(267.19 118.62) scale(0.99 1)">900</text><rect class="cls-1" y="105.3" width="111.68" height="108.24"/><text class="cls-9" transform="translate(10.92 187.64)">c</text><rect class="cls-1" x="43.61" y="105.45" width="111.68" height="108.24"/><text class="cls-10" transform="translate(54.43 187.69)">c</text><rect class="cls-1" x="99.9" y="105.45" width="111.68" height="108.24"/><text class="cls-11" transform="translate(110.87 187.96)">c</text><rect class="cls-1" x="151.9" y="105.45" width="111.68" height="108.24"/><text class="cls-12" transform="translate(165.09 187.49)">c</text><rect class="cls-1" x="206.68" y="105.72" width="111.68" height="108.24"/><text class="cls-13" transform="translate(219.98 186.96)">c</text><rect class="cls-1" x="264.03" y="105.55" width="111.68" height="108.24"/><text class="cls-14" transform="translate(278.17 190.47)">c</text><text class="cls-8" transform="translate(1.49 207.9)">Thin</text><text class="cls-8" transform="translate(51.15 207.4)">Lig<tspan class="cls-15" x="19.91" y="0">h</tspan><tspan x="28.7" y="0">t</tspan></text><text class="cls-8" transform="translate(99 207.09)"><tspan class="cls-16">R</tspan><tspan x="10.07" y="0">egular</tspan></text><text class="cls-8" transform="translate(161.44 207.45)">Bold</text><text class="cls-8" transform="translate(212.79 207.65)">Black</text><text class="cls-8" transform="translate(264.29 207.84)"><tspan class="cls-17">H</tspan><tspan x="11.13" y="0">e</tspan><tspan class="cls-15" x="19.51" y="0">a</tspan><tspan x="27.73" y="0">vy</tspan></text><text class="cls-8" transform="translate(329.55 119.56)">(<tspan class="cls-18" x="4.19" y="0">F</tspan><tspan x="12.3" y="0">ast)</tspan></text></g></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 7520850..796acb2 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,144 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
+    <link rel="stylesheet" href="https://use.typekit.net/zzt0lwm.css">
+    <link rel="stylesheet" href="css/styles.css">
+    <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=Cairo&display=swap" rel="stylesheet">
+    <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=Cairo:wght@700&display=swap" rel="stylesheet">
+    <title>Aviano site</title>
   </head>
-  <body></body>
+    <body>
+      <nav class="container-nav">
+        <div class="button-nav"><a href="#fats"><strong>Graisses</strong></a></div>
+        <div class="button-nav"><a href="#glyphs"><strong>Glyphes</strong></a></div>
+        <div class="button-nav"><a href="#textarea"><strong>Text area</strong></a></div>
+      </nav>
+      <header>
+        <div>
+          <div class="container-imgheader">
+          <img src="img/aviano-logo.svg" alt="aigle-svg" id="top">
+        </div>
+          <h1 class="title-aviano">Aviano Future</h1>
+        </div>
+        <div class="description">
+          <p>The font <br><strong>Aviano Future</strong></br> offer strength and authority.</p>
+        </div>
+      </header>
+        <div class="description-font">
+          <p class="title-description-font"><strong>à propos</strong></p>
+          <p class="description-font-content">
+            Aviano Future est un nouvel ajout polyvalent à la série de titrages Aviano. 
+            Elle est disponible en six graisses différentes avec des Fasts "rapides" 
+            et regorge de fonctionnalités OpenType. 
+            Elle est créée par Insigne Design qui propose une vaste gamme de polices de caractères de qualité,
+            notamment des caractères sans sérif, des scripts, des émoticônes et des formes expérimentales. 
+            Insigne est la fonderie de Jeremy Dooley.
+          </p>
+        </div>
+      <main>
+        <div class="change-box">
+          <h1 class="title-fats"  id="fats"><strong><em>Graisses</strong></em></h1>
+          <p class="explanation"><strong><em> Toucher pour changer</strong></em></p>
+          <p class="heavy-fast">Aviano future</p>
+          <p class="black-fast">Aviano future</p>
+          <p class="bold-fast">Aviano future</p>
+          <p class="regular-fast">Aviano future</p>
+          <p class="light-fast">Aviano future</p>
+          <p class="thin-fast">Aviano future</p>
+        </div>
+        <div class="presentation-box">
+          <img src="img/future.jpg" alt="minimalist-poster">
+          <img src="img/oblivion.jpg" alt="minimalist-poster">
+          <img src="img/alien.jpg" alt="minimalist-poster">
+          <img src="img/blade.jpg" alt="minimalist-poster">
+        </div>
+        <div class="presentation-diagram">
+          <img src="img/weight.svg" alt="diagram">
+        </div>
+        <div class="glyphs-box">
+          <h1 class="title-glyphs" id="glyphs"><strong><em>Glyphes</strong></em></h1>
+          <p class="explanation-glhyps"><strong><em>Toucher pour changer</strong></em></p>
+          <p class="thin-text">
+            a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 
+            8 9 ! " # $ % & ( ) {} Ï ß ª ® + , - . : ; ? @ © ½ ¾ Æ î ď č Ğ Ġ Ĥ ŋ Ś Š 
+            Ů Ÿ Ź 
+          </p>
+          <p class="light-text">
+            a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 
+            8 9 ! " # $ % & ( ) {} Ï ß ª ® + , - . : ; ? @ © ½ ¾ Æ î ď č Ğ Ġ Ĥ ŋ Ś Š 
+            Ů Ÿ Ź 
+          </p>
+          <p class="regular-text">
+            a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 
+            8 9 ! " # $ % & ( ) {} Ï ß ª ® + , - . : ; ? @ © ½ ¾ Æ î ď č Ğ Ġ Ĥ ŋ Ś Š 
+            Ů Ÿ Ź 
+          </p>
+          <p class="bold-text">
+            a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 
+            8 9 ! " # $ % & ( ) {} Ï ß ª ® + , - . : ; ? @ © ½ ¾ Æ î ď č Ğ Ġ Ĥ ŋ Ś Š 
+            Ů Ÿ Ź 
+          </p>
+          <p class="black-text">
+            a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 
+            8 9 ! " # $ % & ( ) {} Ï ß ª ® + , - . : ; ? @ © ½ ¾ Æ î ď č Ğ Ġ Ĥ ŋ Ś Š 
+            Ů Ÿ Ź 
+          </p>
+          <p class="heavy-text">
+            a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 
+            8 9 ! " # $ % & ( ) {} Ï ß ª ® + , - . : ; ? @ © ½ ¾ Æ î ď č Ğ Ġ Ĥ ŋ Ś Š 
+            Ů Ÿ Ź 
+          </p>
+        </div>
+        <div class="textarea-box">
+          <h1 class="title-textarea" id="textarea"><strong><em>Text area</strong></em></h1>
+            <div class="heavy-zone">
+              <textarea class="text-test">heavy</textarea>
+              <br><textarea class="text-fast">heavy fast</textarea></br>
+            </div>
+            <div class="black-zone">
+              <textarea class="text-test">black</textarea>
+              <br><textarea class="text-fast">black fast</textarea></br>
+            </div>
+            <div class="bold-zone">
+              <textarea class="text-test">bold</textarea>
+              <br><textarea class="text-fast">bold fast</textarea></br>
+            </div>
+            <div class="regular-zone">
+              <textarea class="text-test">regular</textarea>
+              <br><textarea class="text-fast">regular fast</textarea></br>
+            </div>
+            <div class="light-zone">
+              <textarea class="text-test">light</textarea>
+              <br><textarea class="text-fast">light fast</textarea></br>
+            </div>
+            <div class="thin-zone">
+              <textarea class="text-test">thin</textarea>
+              <br><textarea class="text-fast">thin fast</textarea></br>
+            </div>
+        </div>
+      </main>
+      <footer>
+        <h1><strong>contact</strong></h1>
+        <a href="#top"><img src="img/fleche.svg" alt="fleche" ></a>
+      <div class="contact-box">
+        <p>
+          <strong>
+            Aviano Future 
+            <br>by</br>
+            <a href="https://insignedesign.com/">Insigne Design</a>
+          </strong>
+        </p>
+        <p>
+          <strong>
+            Raphaël Dousse
+            <br><a href="https://insignedesign.com/">Contact</a></br>
+          </strong>
+        </p>
+      </div>
+      </footer>
+    </body>
 </html>