[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t\t<title>One Page Scroll<\/title>\n\t\t<link rel=\"stylesheet\" href=\"\">\n\t\t<style>\n\t\t\tbody{\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-family: Helvetica, sans-serif;\n\t\t\t}\n\t\t\th2{\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t\t#en-tete{\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\tposition: fixed;\n\t\t\t\twidth: 100%;\n\t\t\t\tbackground-color: darkorange;\n\t\t\t\tpadding:10px;\n\t\t\t\tbox-shadow: 10px 0 10px grey;\n\t\t\t\tz-index: 99;\n\t\t\t}\n\t\t\t#en-tete img{\n\t\t\t\twidth: 60px;\n\t\t\t}\n\t\t\t#menu ul{\n\t\t\t\tpadding: 0;\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t#menu ul li{\n\t\t\t\tlist-style-type: none;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t#menu ul li a{\n\t\t\t\ttext-decoration: none;\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 100px;\n\t\t\t\tcolor: grey;\n\t\t\t}\n\t\t\t#menu ul li a:hover{\n\t\t\t\tcolor: white;\n\t\t\t}\n\t\t\t.projets{\n\t\t\t\tbackground-color: palegoldenrod;\n\t\t\t\theight: 600px;\n\t\t\t\tpadding: 110px 50px 50px 50px;\n\t\t\t}\n\t\t\t.projet{\n\t\t\t\twidth: 300px;\n\t\t\t\theight: 300px;\n\t\t\t\tbackground-color: white;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmargin-right: 10px;\n\t\t\t}\n\t\t\t.philo{\n\t\t\t\tbackground-color: #22FF55;\n\t\t\t\tpadding: 50px;\n\t\t\t}\n\t\t\t.photo{\n\t\t\t\tbackground-color: white;\n\t\t\t}\n\t\t\t.photo img{\n\t\t\t\twidth: 100%;\n\t\t\t\tvertical-align: bottom;\n\t\t\t}\n\t\t\t.equipe{\n\t\t\t\tbackground-color: yellowgreen;\n\t\t\t\theight: 400px;\n\t\t\t\tpadding: 50px;\n\t\t\t}\n\t\t\t.formulaire{\n\t\t\t\tbackground-color: cadetblue;\n\t\t\t\theight: 600px;\n\t\t\t\tpadding: 50px;\n\t\t\t}\n\t\t\t#pied{\n\t\t\t\tbackground-color: lightblue;\n\t\t\t\tpadding: 50px;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\n\t<body>\n\n\t\t<div id=\"wrap\">\n\t\t\t<header id=\"en-tete\">\n\t\t\t\t<img src=\"img_scroll\/logo.png\" alt=\"logo\">\n\t\t\t\t<nav id=\"menu\">\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li> <a href=\"#\">Projets<\/a> <\/li>\n\t\t\t\t\t\t<li> <a href=\"#qui\">CV<\/a> <\/li>\n\t\t\t\t\t\t<li> <a href=\"#contact\">Contact<\/a> <\/li>\n\t\t\t\t\t<\/ul>\n\t\t\t\t<\/nav>\n\t\t\t<\/header>\n\n\t\t\t<main id=\"contenu\">\n\t\t\t\t<section class=\"projets\">\n\t\t\t\t\t<h4>Les projets<\/h4>\n\n\t\t\t\t\t<article class=\"projet\"><\/article>\n\t\t\t\t\t<article class=\"projet\"><\/article>\n\t\t\t\t\t<article class=\"projet\"><\/article>\n\t\t\t\t<\/section>\n\t\t\t\t<section class=\"philo\">\n\t\t\t\t\t<h4>Notre philosophie<\/h4>\n\t\t\t\t<\/section>\n\t\t\t\t<section class=\"photo\">\n\t\t\t\t\t<img src=\"img_scroll\/table.jpg\" alt=\"\">\n\t\t\t\t<\/section>\n\t\t\t\t<section id=\"qui\" class=\"equipe\">\n\t\t\t\t\t<h4>Qui sommes-nous?<\/h4>\n\t\t\t\t<\/section>\n\t\t\t\t<section id=\"contact\" class=\"formulaire\">\n\t\t\t\t\t<h4>Contact<\/h4>\n\t\t\t\t<\/section>\n\t\t\t<\/main>\n\n\t\t\t<footer id=\"pied\">\n\t\t\t\t<p>Copyright<\/p>\n\t\t\t<\/footer>\n\t\t<\/div>\n\n\t<\/body>\n<\/html><\/code><\/pre>\n[\/pcsh]<\/p>\n\n\n\n
Menu avec affichage d’images centr\u00e9es en arri\u00e8re plan de la fen\u00eatre<\/h4>\n\n\n
[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t\t<title><\/title>\n\t\t<link rel=\"stylesheet\" href=\"\">\n\t\t<style>\n\t\t\t#contenu{\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\tjustify-content: space-around;\n\t\t\t\theight: 600px;\n\t\t\t}\n\t\t\t.titre_projet{\n\n\t\t\t}\n\t\t\t.titre_projet a{\n\t\t\t\tcolor: black;\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t\t.titre_projet a:hover .post_img{\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\t.post_img{\n\t\t\t\t\/*width: 800px;\n\t\t\t\theight: 535px;*\/\n\t\t\t\tposition: absolute;\n\t\t\t\topacity: 0;\n\t\t\t\tz-index: -1000;\n\t\t\t\ttop: 5%;\n\t\t\t\tright: 25%;\n\t\t\t\tbottom: 25%;\n\t\t\t\tleft: 25%;\n\n\t\t\t\t-webkit-transition: all 300ms ease-out;\n\t\t\t\t-moz-transition: all 300ms ease-out;\n\t\t\t\t-ms-transition: all 300ms ease-out;\n\t\t\t\t-o-transition: all 300ms ease-out;\n\t\t\t\ttransition: all 300ms ease-out;\n\t\t\t}\n\t\t\t.pink{\n\t\t\t\tbackground-color: pink;\n\t\t\t\tbackground-image: url(\"img_fondCentre\/rain_pink.jpg\");\n\t\t\t\tbackground-size: cover;\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t}\n\t\t\t.black{\n\t\t\t\tbackground-color: black;\n\t\t\t\tbackground-image: url(\"img_fondCentre\/rain_black.jpg\");\n\t\t\t\tbackground-size: cover;\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t}\n\t\t\t.gold{\n\t\t\t\tbackground-color: gold;\n\t\t\t\tbackground-image: url(\"img_fondCentre\/rain_gold.jpg\");\n\t\t\t\tbackground-size: cover;\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\n\t<body>\n\t\t<div id=\"wrap\">\n\t\t\t<header id=\"en-tete\"><p>ici le header<\/p><\/header>\n\t\t\t<main id=\"contenu\">\n\t\t\t\t<article class=\"projet\">\n\t\t\t\t\t<h2 class=\"titre_projet\"> <a href=\"#\">Pink \u2014<div class=\"post_img pink\"><\/div><\/a> <\/h2>\n\t\t\t\t\t\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"projet\">\n\t\t\t\t\t<h2 class=\"titre_projet\"> <a href=\"#\">Black \u2014<div class=\"post_img black\"><\/div><\/a> <\/h2>\n\t\t\t\t\t\n\t\t\t\t<\/article>\n\t\t\t\t<article class=\"projet\">\n\t\t\t\t\t<h2 class=\"titre_projet\"> <a href=\"#\">Gold \u2014<div class=\"post_img gold\"><\/div><\/a> <\/h2>\n\t\t\t\t\t\n\t\t\t\t<\/article>\n\t\t\t<\/main>\n\t\t\t<footer id=\"pied\"><p>ici le footer<\/p><\/footer>\n\t\t<\/div>\n\t<\/body>\n<\/html><\/code><\/pre>\n[\/pcsh]<\/p>\n\n\n\n
Rotation d’un \u00e9l\u00e9ment au survol<\/h4>\n\n\n\n
Utiliser le site http:\/\/css3generator.com\/<\/a><\/p>\n\n\n[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t\t<title>Rotation anim\u00e9e sur hover<\/title>\n\t\t<link rel=\"stylesheet\" href=\"\">\n\t\t<style>\n\t\t\t#en-tete{\n\t\t\t\theight: 200px;\n\t\t\t\tborder-bottom: 1px solid black;\n\t\t\t\tfont-family: Helvetica, sans-serif;\n\t\t\t\tpadding-left: 30px;\n\t\t\t}\n\t\t\t#contenu{\n\t\t\t\tpadding: 30px;\n\t\t\t}\n\t\t\t.projet img{\n\t\t\t\twidth: 300px;\n\n\t\t\t\t-moz-transform: rotate(0deg);\n\t\t\t\t-webkit-transform: rotate(0deg);\n\t\t\t\t-o-transform: rotate(0deg);\n\t\t\t\t-ms-transform: rotate(0deg);\n\t\t\t\ttransform: rotate(0deg);\n\n\t\t\t\t-webkit-transition: all 300ms ease-out;\n\t\t\t\t-moz-transition: all 300ms ease-out;\n\t\t\t\t-ms-transition: all 300ms ease-out;\n\t\t\t\t-o-transition: all 300ms ease-out;\n\t\t\t\ttransition: all 300ms ease-out;\n\t\t\t}\n\t\t\t.projet a:hover img{\n\t\t\t\twidth: 320px;\n\n\t\t\t\t-moz-transform: rotate(30deg);\n\t\t\t\t-webkit-transform: rotate(30deg);\n\t\t\t\t-o-transform: rotate(30deg);\n\t\t\t\t-ms-transform: rotate(30deg);\n\t\t\t\ttransform: rotate(30deg);\n\t\t\t}\n\n\t\t<\/style>\n\t<\/head>\n\n\t<body>\n\n\t\t<div id=\"wrap\">\n\t\t\t<header id=\"en-tete\">\n\t\t\t\t<h1>HEADER<\/h1>\n\t\t\t<\/header>\n\n\t\t\t<main id=\"contenu\">\n\t\t\t\t<article class=\"projet\">\n\t\t\t\t\t<a href=\"#\">\n\t\t\t\t\t\t<img src=\"img_rotation\/mickey.jpg\" alt=\"\">\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/article>\n\t\t\t<\/main>\n\n\t\t<\/div>\n\n\t<\/body>\n<\/html><\/code><\/pre>\n[\/pcsh]<\/p>\n\n\n\n
Affichage de contenu en accord\u00e9on (avec JS)<\/h4>\n\n\n
[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t\t<title>test_accordion_css<\/title>\n\t\t<link rel=\"stylesheet\" href=\"accordion.css\">\n\t<\/head>\n\n\t<body>\n\t\t<div id=\"wrap\">\n\t\t\t<div class=\"menu_button\">\n\t\t\t\t<a href=\"#\">\n\t\t\t\t\t<img class=\"menuButton_img_titre\" src=\"img_accordion\/news_2x.png\" width=\"450\" height=\"35\" border=\"0\">\n\t\t\t\t<\/a>\n\t\t\t\t\t<div class=\"firstLevel\">\n\t\t\t\t\t\t<p>Ut est proident pariatur quis cupidatat dolore adipisicing sed duis culpa adipisicing dolor sunt anim sed duis aliqua adipisicing pariatur ex. Lorem ipsum qui proident veniam voluptate et reprehenderit adipisicing nulla amet ad officia dolore commodo fugiat ad sint dolor pariatur incididunt ut tempor nisi officia aliquip in aliqua pariatur magna in enim sed amet anim mollit pariatur pariatur sunt sed eu consequat nostrud tempor id exercitation commodo fugiat veniam nisi voluptate consequat cillum ea aute deserunt reprehenderit ullamco velit sit culpa minim ullamco dolore dolor labore consectetur nulla adipisicing sed tempor cupidatat ullamco voluptate eu elit dolor amet officia cupidatat amet nostrud elit ad sunt id aute ullamco commodo anim magna cillum exercitation sint incididunt minim labore qui adipisicing commodo sed in culpa excepteur tempor enim nulla aute cupidatat adipisicing magna ea qui aute laboris reprehenderit reprehenderit est tempor dolor esse nostrud exercitation quis est ullamco fugiat exercitation nisi ut veniam id amet quis tempor ut esse in aliquip eu adipisicing nisi<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<script type=\"text\/javascript\" src=\"js\/jquery-3.3.1.js\"><\/script>\n\t\t<script type=\"text\/javascript\">\n\t\t\tvar etat = false;\n\t\t\t$(document).ready(function(){\n\t\t\t\t\t\n\t\t\t\t$('.menu_button')\n\t\t\t\t\t.click(function(){\n\t\t\t\t\t\tif(etat == false) {\n\t\t\t\t\t \t$('.firstLevel').css('display','block');\n\t\t\t\t\t \tetat = true;\n\t\t\t\t\t \n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t $('.firstLevel').css('display','none');\n\t\t\t\t\t\t etat = false;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t});\n\t\t<\/script>\n\t<\/body>\n<\/html><\/code><\/pre>\n[\/pcsh]<\/p>\n\n\n\n
et les CSS :<\/p>\n\n\n
[pcsh lang=\u00a0\u00bbcss\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
#wrap {\nmargin-top: 30px;\n}\n\n.menu_button {\ndisplay: block;\nborder-bottom-width: 1px;\nborder-bottom-style: solid;\nborder-bottom-color: #999999;\npadding-bottom: 6px;\nmargin-right: 25px;\nmargin-left: 25px;\noverflow: hidden;\npadding-top: 6px;\n}\n\n.firstLevel {\ndisplay: none;\n}<\/code><\/pre>\n[\/pcsh]<\/p>\n\n\n\n
Un menu d\u00e9roulant vertical basique<\/h4>\n\n\n
[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t\t<title>Menu d\u00e9roulant vertical<\/title>\n\t\t<link rel=\"stylesheet\" href=\"\">\n\t\t<style>\n\t\t\tbody{\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-family: Helvetica, sans-serif;\n\t\t\t}\n\t\t\t#wrap{\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: 100vh;\n\t\t\t}\n\t\t\t#en-tete{\n\t\t\t\twidth: 200px;\n\t\t\t\tpadding: 20px;\n\t\t\t\tborder-right: 1px solid black;\n\t\t\t}\n\t\t\t.menu{\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin-left: 20px;\n\t\t\t}\n\t\t\t.menu li{\n\t\t\t\tlist-style-type: none;\n\t\t\t}\n\t\t\t.menu li a{\n\t\t\t\tcolor: black;\n\t\t\t\ttext-decoration: none;\n\t\t\t\tdisplay: block;\n\t\t\t\tpadding: 3px;\n\t\t\t\twidth: 150px;\n\t\t\t}\n\t\t\t.menu li a:hover{\n\t\t\t\tcolor: white;\n\t\t\t\tbackground-color: #FFAACC;\n\t\t\t}\n\t\t\t.subMenu{\n\t\t\t\tdisplay: none;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\t.menu li:hover .subMenu{\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t\t.subMenu li{\n\t\t\t\tlist-style-type: none;\n\t\t\t\tmargin-left: 20px;\n\t\t\t}\n\t\t\t.subMenu li a{\n\t\t\t\t\n\t\t\t}\n\t\t\t#contenu{\n\t\t\t\tbackground-color: #FFAACC;\n\t\t\t\tpadding: 0 20px;\n\t\t\t\tflex: 1;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\n\t<body>\n\n\t\t<div id=\"wrap\">\n\n\t\t\t<header id=\"en-tete\">\n\t\t\t\t<img src=\"img_sousMenu\/logo.png\" alt=\"\">\n\t\t\t\t<nav id=\"topMenu\">\n\t\t\t\t\t<ul class=\"menu\">\n\t\t\t\t\t\t<li> <a href=\"#\">Projets<\/a> \n\t\t\t\t\t\t\t<ul class=\"subMenu\">\n\t\t\t\t\t\t\t\t<li><a href=\"\">Projet 1<\/a><\/li>\n\t\t\t\t\t\t\t\t<li><a href=\"\">Projet 2<\/a><\/li>\n\t\t\t\t\t\t\t\t<li><a href=\"\">Projet 3<\/a><\/li>\n\t\t\t\t\t\t\t\t<li><a href=\"\">Projet 4<\/a><\/li>\n\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/li>\n\n\t\t\t\t\t\t<li> <a href=\"#\">CV<\/a> <\/li>\n\t\t\t\t\t\t<li> <a href=\"#\">Contact<\/a> <\/li>\n\t\t\t\t\t<\/ul>\n\t\t\t\t<\/nav>\n\t\t\t<\/header>\n\n\t\t\t<main id=\"contenu\">\n\t\t\t\t<h4>Contenu<\/h4>\n\t\t\t<\/main>\n\n\t\t<\/div>\n\n\t<\/body>\n<\/html><\/code><\/pre>\n[\/pcsh]<\/p>\n\n\n\n
Une mosa\u00efque type Pinterest<\/h4>\n\n\n
[pcsh lang=\u00a0\u00bbxml\u00a0\u00bb tab_size=\u00a0\u00bb4″ message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n
<!DOCTYPE html>\n\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t\t<title><\/title>\n\t\t<link rel=\"stylesheet\" href=\"\">\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tmargin: 15px;\n\t\t\t}\n\t\t\t#wrap {\n\t\t\t\t\/*width: 720px;*\/\n\t\t\t}\n\t\t\t#tete h1 {\n\t\t\t\tmargin-bottom: 30px;\n\t\t\t}\n\t\t\t#contenu{\n\t\t\t\twidth: 100%;\n\t\t\t\tcolumn-count: 4;\n\t\t\t}\n\t\t\tarticle {\n\t display: inline-block;\n\t width: 100%;\n\t text-align: center;\n\t\t\t}\n\t\t\t#contenu img {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t\t#contenu h4 {\n\t\t\t\tdisplay: none;\n\t\t\t\tmargin-top: 2px;\n\t\t\t}\n\t\t\t@media only screen and (max-width:768px) {\n\t\t\t\t#contenu{\n\t\t\t\t\tcolumn-count: 2;\n\t\t\t\t}\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\n\t<body>\n\t\t<div id=\"wrap\">\n\n\t\t\t<header id = \"tete\">\n\t\t\t\t<h1>Des chats<\/h1>\n\t\t\t<\/header>\n\n\n\t\t\t<main id=\"contenu\">\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat1.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 1<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat2.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 2<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat3.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 3<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat4.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 4<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat5.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 5<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat6.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 6<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat7.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 7<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat8.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 8<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat9.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 9<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat10.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 10<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat11.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 11<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat12.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 12<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat13.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 13<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat14.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 14\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t<article>\n\t\t\t\t\t<img src=\"img_cols\/chat15.jpg\" alt=\"\">\n\t\t\t\t\t<h4>Chat 15<\/h4>\n\t\t\t\t<\/article>\n\t\t\t\t\n\t\t\t<\/main>\n\n\t\t<\/div>\n\t<\/body>\n<\/html><\/code><\/pre>\n[\/pcsh]<\/p>\n\n\n\n
Ins\u00e9rer un slider (avec JS)<\/h4>\n\n\n\n
Voir ce lien : https:\/\/www.w3schools.com\/w3css\/w3css_slideshow.asp<\/a><\/p>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Cr\u00e9er un site One Page en scroll Menu avec affichage d’images centr\u00e9es en arri\u00e8re plan de la fen\u00eatre Rotation d’un \u00e9l\u00e9ment au survol Utiliser le site http:\/\/css3generator.com\/ Affichage de contenu en accord\u00e9on (avec JS) et les CSS : Un menu d\u00e9roulant vertical basique Une mosa\u00efque type Pinterest Ins\u00e9rer un slider (avec JS) Voir ce lien … Continuer la lecture de Session 2018<\/span>