jminguely · Raphael-dousse · Mar 30, 2022 · Apr 6, 2022 · Apr 9, 2022 · Apr 11, 2022
diff --git a/css/styles.css b/css/styles.css
diff --git a/img/alien.jpg b/img/alien.jpg
diff --git a/img/aviano-logo.svg b/img/aviano-logo.svg
diff --git a/img/blade.jpg b/img/blade.jpg
diff --git a/img/fleche.svg b/img/fleche.svg
diff --git a/img/future.jpg b/img/future.jpg
diff --git a/img/oblivion.jpg b/img/oblivion.jpg
diff --git a/img/weight.svg b/img/weight.svg
diff --git 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>