v2.0 du site (#5)

* v2.0 du site

Version 2.0 du site :
Seulement seule la page d'accueil FR est réalisée.
-- Plus modulaire pour ajouter des fonctionnalités et du contenu dessus
-- Plus joli
-- Topbar en bas qui se colle ensuite en haut ( uniquement sur la page d'accueil)
-- Ajout de padding  pour @blackdede (closed #4 )

fichiers/css/styles.css

@@ -0,0 +1,152 @@
+@font-face{
+    font-family: "dyno";
+    src: url("../fonts/dyno.ttf");
+
+        }
+
+@font-face{
+    font-family: "ciclefina";
+    src: url("../fonts/ciclefina.ttf");
+
+        }
+body{
+    font-family:"ciclefina",Arial ;
+    margin: 0;
+    padding: 0;
+    background-color: #333333;
+    color: white;
+    z-index: 1;
+    scroll-behavior: smooth;
+
+}
+a{
+    text-decoration: none;
+    color: white;
+    font-weight: bolder;
+    font-size: 22px;
+}
+
+.bloc{
+    background-color: #ea5c0d;
+    height: 100px;
+}
+.bloc a{
+    display: flex;
+    justify-content: center;
+    padding-top: 10px;
+
+}
+#skip{
+    position:absolute;
+    left:-500px;
+}
+#skip:focus{
+    position: relative;
+    left:0;
+}
+
+.top .container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: -50px;
+    height: 90vh;
+    background-repeat: no-repeat;
+    background-image: url("../medias/images/acc.jpg");
+    background-position-x: center;
+}
+.top .container .content{
+    padding-left: 15px;
+    font-family: dyno;
+    color: white;
+    font-size: 50px;
+}
+
+.bloc-navigation{
+    background-color: #ea5c0d;
+}
+.top-nav{
+    display: flex;
+    margin:0;
+    padding-top: 5px;
+    padding-left: 100px;  
+    padding-right: 100px;
+    height: 50px;
+    justify-content: space-between;
+    align-items: flex-start;
+    list-style: none;
+    flex-direction: row;
+}
+.top-nav a{
+    transition-duration: 50ms;
+}
+.top-nav a:hover{
+    border-bottom: 3px #f7af3e inset;
+
+}
+
+.sticky {
+    position: fixed;
+    top: 0;
+    width: 100%;
+  }
+
+article{
+    height: 9000px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.article-content{
+    height: 9000px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 70%;
+    background-color: #505050;
+}
+.article-content p{
+    line-height: 20px;
+    font-size: 20px;
+}
+/*
+ Marge des écrits quand la page est affichée sur un petit écran
+permet de rendre la lecture plus facile mais aussi l'affichage plus beau car il n'y a plus de marge
+ */
+ h1{
+    font-size: 60px;
+    border-bottom: 2px#f7af3e solid;
+    border-bottom-right-radius: 5px;
+}
+h2{
+    font-size: 40px;
+    border-bottom: 2px#f7af3e solid;
+    border-bottom-right-radius: 5px;
+}
+footer{
+    text-align: center;
+    margin-bottom: 5%;
+}
+
+
+
+@media screen and (max-width: 1200px) {
+.article-content{
+    background-color:  #333333;
+    width: 100%;
+    }
+.article-content p{
+    text-align: justify;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+    h1{
+        font-size: 40px;
+    }
+.top-nav{
+    padding-left: 10px;
+    padding-right: 10px;
+}
+}
+
+