NOTRE ARTICLE

Vous avez cliquer sur la catégorie NOTRE ARTICLE

>  TOP MENU

Pour réaliser se menu nous avons

Puis nous avont crée l'arriere plan du site grâce aux CSS, pour cela nous avons utiliser quelque attribut tels que le display: flex qui permet a ce que la page s'adapte selon la taille.

Après cela nous nous somme répartie la tâche ou chacun fait ca partie !

Nous avons ensuite crée un menu ! Qui nous a permis de relier nos pages entre elles ! Voici le code CSS de notre menu !

.topnav { background-color: #333; overflow: hidden; } .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 25px 25px; text-decoration: none; font-size: 24px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #1ed5c3; color: white; } .topnav .icon { display: none; }

Nous avons donc intégrer ce menu dans notre HTML via le code suivant :

>  Zone de Texte

On a décider de créé une zone spéciale pour pouvoir metre le texte et que se soit plus lisible

Pour ça on a utiliser la balise div et on lui attitres une classe ici : "textzone". Puis on la personalise pour nos préference avec le css :

.textzone{ max-width: 1000px; margin-left: auto; margin-right: auto; text-color: #092a28; background-color: #b4b8bb; position:relative; bottom: 6em; padding: 1em 3em 5em; border: 1px solid #686868; top:50px; }

>  Page d'accuil

Nous avons quasiment tout misés sur notre page d'accuil, qui est composer de 2 éléments

Le premiere elements est la vidéo en fond qui tourne en boucle, pour cela nous avons utiliser le code css suivant

#background-video { height: 100%; width: 100%; object-fit: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; }

Ainsi que le code HTML suivnat que nous avons intégrer en premier dans notre body :

Par la suite nous avons inscrit le nom de notre site dans une police que nous somme venu importer puis nous avons appliquer sur ce titre un gif qui viens être appliquer sur les lettres. Pour cela nous avons utiliser le code CSS suivant :

/* Message d'acceuil */ @import url("https://fonts.googleapis.com/css?family=Montserrat"); .title { font-family: "Montserrat"; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80vh; letter-spacing: 1px; } .alphaone { font-family: "Montserrat"; text-align: center; display: flex; flex-direction: column; justify-content: center; letter-spacing: 1px; } .alphaone h1 { background-image: url(https://media2.giphy.com/media/G0QoVcfBdo2QG6IKZu/giphy.webp?cid=ecf05e47enkh6mfhelxcarwx9f6ccku1fbjfzrse2yq1xiwa&rid=giphy.webp&ct=g); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; text-transform: uppercase; font-size: 75px; line-height: 0.75; margin: 10px 0; } .title h1 { background-image: url(https://media2.giphy.com/media/G0QoVcfBdo2QG6IKZu/giphy.webp?cid=ecf05e47enkh6mfhelxcarwx9f6ccku1fbjfzrse2yq1xiwa&rid=giphy.webp&ct=g); background-size: cover; color: transparent; -moz-background-clip: text; -webkit-background-clip: text; text-transform: uppercase; font-size: 120px; line-height: 0.75; margin: 10px 0; } body{ background-color: #334; }

Par la suite nous avons donc écrfit notre titre sur la page d'accueil de notre site grâce au code suivant (à savoir que ce code se trouve dans un div mais il n'apparait pas ici pour une raison obsucre):

Nous avons ensuite terminé notre page d'accuil avec un footer qui permet de naviger entre les differentes page web de chacun. Pour ce faire nous avons utiliser un code CSS :

/* footer */ footer{ background-color: rgba(51, 51, 51, 0.5); display: flex; flex-direction: column; } footer pre{ color: white; } footer a{ color: white; }

Pour le HTML on a utilisé la balise pre pour que le text s'affiche comme on la écrit (les espaces sont comprimé lors d'une balise p) et dans la balise pre on a mis la balise a pour mettre les liens