Share
Le site de portefeuille au design unique et gagnant de Paul J Noble a attiré l'attention de nombreuses personnes, et pas seulement de ses clients. Aujourd'hui, il va suivre la phase de conception de ce tutoriel et montrer comment il est codé..
Pour ce tutoriel, l'excellent site web ROA (Sweden) est utilisé comme exemple d'élément de portefeuille. Ce site a été présenté récemment dans Creattica et l'auteur n'est pas affilié à ROA. N'hésitez pas à utiliser votre propre travail comme élément de portefeuille.
Nous allons créer un site de portfolio en ligne avec une grille d'images, un en-tête fixe, du texte et des éléments d'interface. La balise sera stylée de manière à ce que le contenu tienne sans faire défiler l'affichage de presque tous les affichages des utilisateurs et s'adapte bien aux écrans de grande taille tout en se dégradant avec élégance à des résolutions inférieures. La grille d’images ne montrera que l’image active en cours mais contiendra beaucoup plus d’images cachées pouvant être visualisées via une navigation au niveau de la page..
La création du modèle HTML et CSS nous préparera à la prochaine partie de ce didacticiel, dans laquelle nous ajouterons la couche d'interaction à l'aide de Javascript et donnerons vie à la conception..
Créez un nouveau document HTML dans votre éditeur de texte préféré. Joignez jQuery (1.4.2+) et un nouveau fichier CSS vierge.
La première balise que nous créerons sera une div contenant tout notre contenu. Nous définirons ultérieurement les valeurs minimales de hauteur et de largeur pour cette div ('#page') afin de nous assurer que la conception est adaptée aux résolutions basses. Créez quelques divs supplémentaires pour les principaux éléments de la page illustrée ci-dessous.
Votre nom - Portefeuille numérique
Pour les sites dans lesquels aucun défilement vertical n'est requis, il est souvent moins gênant de placer des éléments de navigation et d’en-tête en bas de l’écran. Cela libère de l'espace supplémentaire dans l'espace plus fréquemment affiché près du haut de la fenêtre. Nous aimerions que cet élément étire toute la largeur de l'écran de l'utilisateur et soit toujours placé au bas de l'écran..
Bien que cela soit placé visuellement au bas de l'écran, il apparaîtra en haut du balisage du document. Nous allons créer un div avec l'ID 'header', puis un div imbriqué avec la classe 'inner'. Un emballage interne simplifiera le positionnement des éléments internes.
Dans le wrapper, nous allons créer trois divs; '#logo', '#social' et '#nav'.
Pour le logo, nous allons imbriquer un fichier image appelé "images_26 / construire-un-portefeuille-innovant-site-utilisant-alternative-uiux.png" et ajouter du texte alternatif. Créez le fichier image du logo en découpant votre logo dans le fichier PSD. Comme cela va être positionné de manière absolue, la taille exacte n’est pas critique. Assurez-vous toutefois que l’image de votre logo tient dans la barre de navigation du motif..
Pour les boutons sociaux, nous aurons besoin de trois ancres - une pour Facebook, Flickr et LinkedIn. Celles-ci auront des images d'arrière-plan appliquées en tant que graphiques, mais nous continuerons d'utiliser du texte à des fins sémantiques et de le cacher avec CSS. Pour ces liens externes, nous utiliserons l'attribut target = "_ blank" afin que les pages s'ouvrent dans un nouvel onglet ou une nouvelle fenêtre..
Pour la navigation, nous utiliserons encore trois ancres et leur assignerons leurs propres classes et valeurs id.
Retrouvez moi sur Facebook Voir mon Flickr Retrouvez moi sur LinkedInA propos de la photographie
Nos objets graphiques pour les articles restants ne seront pas aussi simples que le logo. Comme ils sont interactifs, ils nécessitent des états de survol et les boutons de navigation nécessitent des états actifs..
Pour les boutons de navigation, nous allons créer une image-objet. Revenez dans Photoshop et créez une sélection autour des boutons du PSD. Sélectionnez Edition> Copier avec fusion.
Ensuite, sélectionnez Fichier> Nouveau. Une boîte de dialogue apparaît avec la largeur et la hauteur par défaut du rectangle précédemment sélectionné. Changez la hauteur à 3 fois la valeur par défaut. Cela créera un nouveau canevas qui conviendra à trois versions du graphique de navigation, une pour chaque état requis; actif, stationnaire et éteint.
Maintenant, déplacez le dossier des boutons du PSD et clonez ce groupe deux fois pour créer trois groupes. Ajustez légèrement les couleurs du texte pour que chaque groupe soit uniforme afin de créer les différents états de bouton. Vous trouverez ci-dessous un exemple de graphique final. Enregistrez la version finale au format PNG (24 bits) dans 'img / icons / nav.png' en vous assurant que l'arrière-plan est transparent..
Pour les boutons de médias sociaux, nous n’aurons besoin que de deux états ("hover" et "off"). Répétez le processus ci-dessus pour créer une image-objet image de boutons de médias sociaux. Enregistrez l'image sous 'img / icons / social-media.png'.
Enfin, créez une nouvelle image 'img / bg / header.png'.
Maintenant que nous avons développé la structure et les ressources d’image, créons du CSS pour commencer à styliser cette page..
En haut du fichier CSS, nous incluons une réinitialisation CSS pour nous assurer qu'aucune valeur par défaut propre au navigateur ne va gâcher notre présentation..
html, corps, div, span, applet, objet, iframe, h1, h2, h4, h4, h5, h6, p, blockquote, pre, un, abbr, acronyme, adresse, gros, citer, code, del, dfn, em, font, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, centre, dl, dt, dd, ol, ul, li, champs, forme, étiquette, légende margin: 0; rembourrage: 0; bordure: 0; contour: 0; taille de police: 100%; alignement vertical: ligne de base; fond: transparent; body line-height: 1.2em; famille de polices: arial, sans-serif; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none;: focus contour: 0; ins text-decoration: aucune; del text-decoration: line -à travers;
Ensuite, nous allons créer des styles de base pour les principaux éléments de la page..
corps, html hauteur: 100%; body background: # 0f1219; #page height: 100%; hauteur min .: 700px; position: relative; largeur minimale: 1100px; débordement caché; h1, h2, p, li, div font-family: "arial", "helvetica", sans-serif; li taille de la police: 12px;
Ensuite, nous allons styliser l'en-tête. Nous utiliserons le positionnement absolu du logo et d'autres éléments pour faciliter le contrôle du design..
Remarque: nous allons styliser nos ancres en tant qu'éléments de niveau bloc ('display: block') et avec un retrait de texte négatif pour garantir des éléments accessibles mais graphiques. Les largeurs et les hauteurs peuvent être ajustées si les dimensions de vos fichiers d'image-objet personnalisés sont différentes..
Accentsconagua
#header background: url ('? /img/bg/header.png') repeat; hauteur: 60px; z-index: 1200; débordement caché; position: absolue; en bas: 0; largeur: 100%; #logo position: absolute; en haut: 0px; à gauche: 30px; #header .inner width: auto; rembourrage: 0 30px; position: relative; hauteur: 70px; #nav position: absolute; à droite: 30px; en haut: 14px; hauteur: 31px; largeur: 290px; #nav a background: url ('? /img/icons/nav.png') no-repeat 0 0; retrait du texte: -9999px; Flotter à droite; bloc de visualisation; contour: aucun; hauteur: 31px; Nous allons maintenant définir les styles individuels pour chaque bouton de navigation en mappant les différents emplacements des images-objets sur la classe de chaque bouton..
#nav a.work width: 95px; #nav a.work:hover position-d’arrière-plan: 0 -62px; #nav a.about width: 93px; background-position: -188px 0; #nav a.about: survol background-position: -188px -62px; #nav a.workActive width: 95px; position d'arrière-plan: -0px -31px; curseur: par défaut; #nav a.aboutActive width: 93px; position d'arrière-plan: -188px -31px; curseur: défaut; #nav a.photos width: 93px; position d'arrière-plan: -95px 0; #nav a.photos:hover background-position: -95px -62px; #nav a.photosActive width: 93px; position d'arrière-plan: -95px -31px; curseur: par défaut;
Ensuite, nous ferons de même pour les boutons de médias sociaux.
#social width: 88px; hauteur: 26px; position: absolue; en haut: 17px; à droite: 330px; #social a display: block; background: url ('? /img/icons/social-media.png') no-repeat 0 0; float: gauche; hauteur: 26px; largeur: 26px; contour: aucun; float: gauche; marge droite: 4px; retrait du texte: -9999px; débordement caché; #social a.fb background-position: 0 0; #social a.fb: survol background-position: 0 -26px; #social a.flickr background-position: -30px 0; #social a .flickr: hover background-position: -30px -26px; #social a.linkedin background-position: -60px 0; margin-right: 0; #social a.linkedin: hover background-position: -60px -26px; OK, actualisez maintenant la page et vous devriez voir quelque chose de similaire à l'image ci-dessous. Passez votre curseur sur les boutons pour voir les différents états. S'il y a des problèmes dans les états de survol, essayez d'ajuster la propriété background-position dans votre CSS.
Essayez de redimensionner la fenêtre de votre navigateur pour simuler des affichages à basse résolution. Les barres de défilement doivent apparaître une fois la fenêtre réduite en dessous des valeurs min-height et min-width définies pour la div '#page'..
Nous allons utiliser un effet de lumière pour focaliser l'attention visuelle sur l'image active tout en faisant allusion au contenu environnant. Pour créer une séparation plus nette entre l'arrière-plan et l'avant-plan, nous appliquerons également un motif de texture subtil à l'arrière-plan..
Pour ce faire, nous devrons ajouter une certaine marge. Créez les nouveaux div suivants imbriqués dans le div '#main'.
Commençons par créer l’image Spotlight ('images_26 / site-innovante-portfolio-utilisant-alternative-uiux_2.png') qui superposera la galerie. De retour dans Photoshop, sélectionnez le calque dans le groupe "vignette". Allez à Select> All et copiez la région sélectionnée. Créez un nouveau document (au moins 1 400 x 900) et collez le presse-papiers dans le canevas..
Nous allons maintenant devoir ajuster notre image. Tout d'abord, développez la taille de la zone de travail de sorte qu'elle soit 100 pixels plus haute.
Ensuite, agrandissez le bord gauche de 50 pixels.
Enfin, développez les bords inférieur et droit afin que la taille totale de la toile soit de 1600 x 1600..
Maintenant, prenons l'outil de compartiment et avec l'anti-aliasing 'off' et la tolérance définie sur '0', remplissez la zone transparente autour des bords avec la couleur d'arrière-plan de la page (# 0f1219). Le résultat final devrait ressembler à l'image ci-dessous.
Sélectionnez Fichier> Enregistrer pour le Web et enregistrez cette image au format PNG 24 bits ("images_26 / construire-un-portefeuille-innovant-site-utilisant-alternative-uiux_2.png") avec la transparence activée..
Maintenant, revenant à notre image source originale, sélectionnez le calque Motif Remplissage 1 (c’est le calque des lignes diagonales). Faites un clic droit et sélectionnez "Rasterize layer". Ensuite, effectuez un zoom avant et sélectionnez une région du calque comme ci-dessous. Copiez ceci (seulement les lignes - ne copiez pas l'arrière-plan) et collez-le dans un nouveau document. Enregistrez pour le Web à nouveau un fichier PNG 24 bits avec transparence avec le chemin "img / bg / lines.png".
Ajoutons maintenant le CSS qui intégrera nos nouvelles images?
#horizon min-height: 700px; largeur: 100%; débordement caché; #main background: # 0f1219; largeur: 1300px; marge: auto; marge supérieure: -190px; hauteur: 1000px; débordement caché; position: relative; #main .inner width: 9000px; hauteur: 9000px; débordement caché; position: absolue; en haut: 0; gauche: 0; .glowBg background: # 282d3f; hauteur: 100%; largeur: 100%; position: absolue; #glowTexture background: url ('? /img/bg/lines.png') repeat; hauteur: 900px; largeur: 1300px; position: absolue; en haut: 0; gauche: 0; #glowShadow height: 1600px; position: absolue; largeur: 1500px; en haut: 00px; débordement caché; z-index: 200; #glowShadow img display: block; position: relative; à gauche: -100px; Enregistrez, actualisez et vous devriez maintenant voir la couleur d’arrière-plan, la texture et les projecteurs. Ensuite, nous allons commencer à ajouter des images.
Pour les images de la galerie, nous allons placer les images par projet dans des colonnes. Chaque projet peut avoir plusieurs images disposées verticalement. On accède à différents projets en déplaçant les colonnes latéralement.
Créez une nouvelle image 640x480 et collez un instantané d'un site Web ou recadrez un travail que vous souhaitez présenter. Le style plus sombre de cette conception fonctionne généralement mieux avec des images ayant principalement un fond clair..
Pour commencer, nous allons ajouter un peu de balisage.
Vous remarquerez que nous avons ajouté des styles en ligne sur les balises. Ceci simule ce que notre couche d'interaction appliquera automatiquement plus tard (nous verrons comment cela se fera dans la suite de ce didacticiel). Pour le moment, cependant, nous allons simplement coder en dur les styles. Remarque: l'attribut d'opacité ne fonctionnera pas dans Internet Explorer 8 et inférieur..
Ajoutez le CSS suivant pour les images de la galerie:
#gallery left: 285px; position: absolue; largeur: 100%; hauteur: 900px; #gallery .col position: absolute; en haut: 80px; largeur: 640px; .item height: 480px; largeur: 640px; arrière-plan: # 181a22; position: absolue; marge: auto; en haut: 320 pixels; z-index: 100; débordement caché;
La propriété la plus importante ici est le positionnement absolu des colonnes (ce sont les divs avec la classe 'col'). Avec le positionnement absolu, nous pouvons déplacer chaque colonne indépendamment ou synchroniser toutes les colonnes, ce qui nous permettra de naviguer dans la grille des images une fois la couche d'interaction appliquée..
Actualisez la page et vous devriez maintenant voir la galerie avec des images. Vous noterez cependant que la galerie est positionnée verticalement de manière statique. Idéalement, nous aimerions que le contenu se centre en fonction de la taille de la fenêtre. Pour ce faire, nous devrons ajouter un peu de script.
Créez une nouvelle balise de script juste avant la balise de fermeture et insérez le code suivant:
Assurez-vous que jQuery a été ajouté dans l'en-tête de page, sinon ce script ne fonctionnera pas..
Ce script fait quelques choses. La fonction arrange () détecte la hauteur de la fenêtre, puis ajuste les propriétés CSS des éléments '#main' pour centrer verticalement le contenu. Cela se produit lorsque la fenêtre de l'utilisateur a une hauteur supérieure à 760 pixels (voir conditionnel à la ligne 541). Pour les hauteurs de fenêtre inférieures, les propriétés CSS par défaut sont appliquées. L'écouteur $ (window) .resize () (ligne 25) appelle la fonction adjust () chaque fois que la fenêtre de l'utilisateur est redimensionnée..
A ce stade, nous ajouterons du contenu textuel relatif au projet actif. Pour cela, nous avons besoin d'un titre, d'un sous-titre et d'un paragraphe de texte pour élaborer sur le projet actif..
Ajoutez la balise suivante au div '#leftCol':
Projet de démonstration
SITE WEB 2011
Projet de démonstration
SITE WEB 2011
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Nunc non tellus eget adipiscing neque tempor. Etiam neque augue, tristique eget malesuada et, luctus sed felis. Dans dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Nunc non tellus eget adipiscing neque tempor.
Lien vers le projet ici
Bien sûr, si vous utilisez un vrai travail que vous avez fait, n'hésitez pas à utiliser des en-têtes et un corps de texte décrivant votre travail avec précision..
Maintenant, nous allons styler ce contenu avec du CSS supplémentaire:
#leftCol padding-top: 30px; largeur: 200px; hauteur: 480px; à gauche: 30px; position: absolue; z-index: 10001; en haut: 270 pixels; #projectInfo top: 50px; position: absolue; hauteur: 350px; largeur: 200px; #leftCol h1 color: #fff; taille de police: 28px; marge inférieure: 6px; en haut: 50 px; poids de la police: 300; hauteur de ligne: 30px; #leftCol p.sub color: # 338966; taille de police: 11px; text-transform: majuscule; espacement des lettres: 2px; poids de police: gras; #leftCol p.body, #leftCol p.link color: # 8c8f95; font-family: 'lucida grande', 'arial'; taille de police: 12px; hauteur de ligne: 19px; rembourrage en haut: 30px; marge inférieure: 10px; #leftCol p.link padding-top: 10px; #leftCol p.link a color: # 8c8f95; texte-décoration: souligné; #leftCol p.link a: hover color: #fff; texte-décoration: souligné;
Encore une fois, la considération la plus importante ici est le positionnement absolu de l'élément '#leftCol'. Comme cet élément est placé en dehors de la balise '#gallery' à l'intérieur de la balise '#main', sa position sera relative par rapport à la balise '#main' centrée et indépendante du mouvement dans la galerie. Cela signifie que le texte peut être actualisé lorsque le projet actif change sans changer de position. L'indice z très élevé pour '#leftCol' (10001) place ce contenu au-dessus de tout autre contenu de la page. Cela signifie que notre texte ne sera pas perturbé par l'effet Spotlight. Les autres propriétés sont principalement des styles de texte et une mise en forme qui peuvent être ajustés à volonté.
Maintenant, actualisez votre page et du texte bien formaté doit apparaître à gauche de l'image active, comme illustré ci-dessous..
Maintenant que nous avons développé une structure pour le contenu statique, nous allons appliquer un balisage qui ajoutera des éléments permettant à nos utilisateurs d'interagir avec le site..
En retournant au div '#leftCol', ajoutez le code suivant:
Haut bas Gauche Droite
L'élément '#grid' est vide; cela sera renseigné par Javascript dans la version de travail finale. Pour le moment, cependant, nous allons simplement coder en dur certains éléments enfants pour avoir une idée de son apparence..
Nous allons maintenant utiliser à nouveau une image de sprites, cette fois pour nos touches de direction. Pour revenir à Photoshop, allez dans le groupe 'clavier' et utilisez l'outil Règle pour noter les dimensions totales..
Encore une fois, nous devrons permettre deux fois la hauteur du groupe pour l'inclusion d'un état «par défaut» et d'un état «survol». Créez un nouveau document avec un arrière-plan transparent égal à la largeur du groupe "clavier" et à deux fois la hauteur. Dans l'exemple du tutoriel, cela équivaut à 70 x 92.
Faites glisser le groupe "clavier" dans le nouveau document. Dupliquer ce groupe et positionner l'un immédiatement au-dessus de l'autre. Le groupe ci-dessous sera notre état "survol". Effectuez quelques ajustements mineurs pour le survol en éclaircissant la superposition de couleurs, les flèches et les contours. Des ajustements fins sont souvent suffisants pour les états de vol stationnaire et des changements mineurs de luminosité sont généralement facilement visibles..
Pour l'exemple de tutoriel, changer la couleur de fond de # 262a34 en # 2b2f3a et la couleur de fond de traits / flèches de # 32343f à # 4b4d56 créera un effet idéal..
L'image finale devrait ressembler à quelque chose comme ci-dessous:
Enregistrez cette image sous 'img / icons / keys.png'.
Nous allons maintenant ajouter des CSS pour mapper l'image sur les différentes classes..
#leftCol #controls width: 200px; hauteur: 55px; position: absolue; en bas: 18px; #grid .line width: 5px; arrière-plan: # 666; débordement caché; float: gauche; marge droite: 2px; position: relative; curseur: par défaut; #grid height: 55px; largeur: 200px; #tracker height: 10px; background: #fff; largeur: 5px; position: absolue; z-index: 10000; curseur: par défaut; #grid .line width: 5px; arrière-plan: # 3d424f; débordement caché; float: gauche; marge droite: 2px; position: relative; curseur: par défaut; #keys width: 92px; hauteur: 46px; position: absolue; à gauche: 86px; en bas: 0; #keys a text-indent: -999px; largeur: 22px; hauteur: 22px; fond: url ('? /img/icons/keys.png') no-repeat 0 0; débordement caché; position: absolue; Les éléments '.line' de l’enfant formeront une grille représentant les hauteurs relatives des colonnes. Cette abstraction constituera un moyen idéal pour informer l'utilisateur de la taille du folio, de ses parties et de leur position actuelle, ce qui est en quelque sorte équivalent au fil d'Ariane d'un site de contenu traditionnel..
Quoi qu'il en soit, la tâche suivante consiste à mapper les classes clés sur l'image-objet de l'image:
#keys a.kup left: 24px; retrait du texte: -999px; en haut: 0; position d'arrière-plan: -24px 0; #keys a.kup: survolez, #keys a.hoveru background-position: -24px -46px; #keys a.kdown left: 24px; en haut: 24px; position d'arrière-plan: -24px -24px; #keys a.kdown: survolez, #keys a.hoverd background-position: -24px -70px; #keys a.kleft left: 0px; en haut: 24px; position d'arrière-plan: 0px -24px; #keys a.kleft: survolez, #keys a.hoverl background-position: 0px -70px; #keys a.kright left: 46px; en haut: 24px; position d'arrière-plan: -46px -24px; largeur: 24px; #keys a.kright: survolez, #keys a.hoverr background-position: -46px -70px;
Essayez d'actualiser votre navigateur et de survoler les éléments que vous venez de créer. Les nouvelles clés et la nouvelle grille doivent ressembler à l'illustration ci-dessous:
Enfin, nous ajouterons la navigation dynamique à attacher au projet actif. Insérez la balise suivante immédiatement après la balise ouverte de l'élément '#leftCol':
Nous avons utilisé ici le style en ligne pour simuler ce qui sera réalisé automatiquement lorsque nous avons ajouté une interactivité Javascript complète..
Une autre image-objet sera utilisée pour ces ancres. En revenant à notre fichier Photoshop, ouvrez le groupe "boutons" et sélectionnez le calque d'angle droit. Comme nous voudrions un peu de rembourrage sur notre ancre, nous les nommerons aux dimensions 44 x 44.
Créez un nouveau document 88 x 176 avec un arrière-plan transparent pour accueillir 2 ensembles de 4 icônes. Créez un nouveau calque noir pour nous aider à voir les flèches translucides. Faites glisser un repère vertical sur 44 pixels sur l’axe des x. (faites glisser les guides lorsque les règles sont activées et assurez-vous que Fenêtre> Info est visible pour voir l'emplacement actuel). Ensuite, faites glisser trois guides horizontaux situés à 44, 88 et 132 pixels sur l'axe des ordonnées..
Maintenant, revenant au fichier PSD d'origine, faites glisser la flèche d'angle dans le nouveau document et créez 4 copies dans le côté gauche. Ce sera notre état "par défaut". Faire l'opacité pour chaque calque 12%. Utilisez Édition> Transformer pour faire pivoter les guides de manière à ce que l’ordre soit le suivant:
Copiez ces calques et déplacez chacun exactement 44 pixels vers la droite. Ajustez l'opacité de chaque nouveau calque à 20%. Désactivez l'arrière-plan noir pour que le canevas apparaisse presque entièrement transparent et sélectionnez Enregistrer pour le Web. Exporter au format PNG 24 bits avec transparence activée vers 'img / icons / movers.png'.
Nous allons maintenant ajouter des CSS pour mapper cette image:
a.mover background: url ('? /img/icons/movers.png') no-repeat -44px 0; hauteur: 44px; largeur: 44px; contour: aucun! important; #up, #right, #down, #left display: block; z-index: 300; position: absolue; en haut: 10 px; à gauche: 10px; #right background-position: 0px -44px; #right: hover background-position: -44px -44px; #down position d'arrière-plan: 0 -88px; #down: survol position-d'arrière-plan: -44px -88px; #up position-d'arrière-plan: 0px -132px; 44px -132px; Actualisez votre navigateur et vous devriez maintenant voir quelque chose de similaire à ci-dessous.
Et c'est tout! Pour la dernière partie de ce tutoriel, nous allons écrire le Javascript qui gérera automatiquement la mise en page des images et introduira une navigation dynamique à l’aide du clavier ou de la souris..
Au cas où vous auriez manqué quelque chose, voici le balisage HTML final:
Votre nom - Portefeuille numérique Retrouvez moi sur Facebook Voir mon Flickr Retrouvez moi sur LinkedInA propos de la photographie
Projet de démonstration
SITE WEB 2011
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Nunc non tellus eget adipiscing neque tempor. Etiam neque augue, tristique eget malesuada et, luctus sed felis. Dans dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Nunc non tellus eget adipiscing neque tempor.
Lien vers le projet ici
Haut bas Gauche Droite
