FICHE DE BOTTINS

Code:: <div class=asu_power_top><svg viewBox="0 0 1440 320"xmlns=http://www.w3.org/2000/svg><path d=M0,160L48,133.3C96,107,192,53,288,69.3C384,85,480,171,576,181.3C672,192,768,128,864,133.3C960,139,1056,213,1152,224C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z fill=var(--path) fill-opacity=1></path></svg></div><div class=asu_power><div class=asu_power_title>titre du bottin</div><div class=asu_power_title_icon><i class=iconsax icon-name=star-speed></i></div><div class=asu_power_title_bottom>sous phrase on sait jamais ça peut être un peu long</div><div class=asu_power_ti>☆ Premier sous titre</div><div class=asu_power_txt><h4>Titre ici ou quoi que ce soit</h4><li>Bla bla</li><div class=asu_power_txt_desc>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non lectus vitae tortor consectetur congue. Praesent fringilla lacinia mi, in gravida nisi malesuada nec. Duis venenatis ultrices nulla vel volutpat.</div><li>Bla bla</li><div class=asu_power_txt_desc>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non lectus vitae tortor consectetur congue. Praesent fringilla lacinia mi, in gravida nisi malesuada nec. Duis venenatis ultrices nulla vel volutpat.</div></div><div class=asu_power_sep><i class=iconsax icon-name=menu-meatballs></i><i class=iconsax icon-name=menu-meatballs></i><i class=iconsax icon-name=menu-meatballs></i><i class=iconsax icon-name=menu-meatballs></i></div><div class=asu_power_txt><h4 style=text-align:left>Titre ici ou quoi que ce soit</h4><li>Bla bla</li><div class=asu_power_txt_desc>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non lectus vitae tortor consectetur congue. Praesent fringilla lacinia mi, in gravida nisi malesuada nec. Duis venenatis ultrices nulla vel volutpat.</div><li>Umbramancie</li><div class=asu_power_txt_desc>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non lectus vitae tortor consectetur congue. Praesent fringilla lacinia mi, in gravida nisi malesuada nec. Duis venenatis ultrices nulla vel volutpat.</div></div></div><link href=https://iconsax.gitlab.io/i/icons.css rel=stylesheet> <style>.asu_power_top { width:600px; margin:0px auto; transform:scaleY(-1); margin-bottom:-100px; position:relative; z-index:9; } .asu_power { margin:0px auto; width:600px; border-radius:15px; display:flex; flex-wrap:wrap; justify-content:space-between; background:var(--backgroundfiche); padding:90px 20px 20px 20px; position:relative; } .asu_power_title { color:var(--path); width:100%; text-align:right; font:40px After; text-transform:uppercase; letter-spacing:0.09em; position:relative; z-inedx:9; } .asu_power_title_icon { position:absolute; left:180px; font-size:150px; top:-20px; opacity:0.3; } .asu_power_title_icon i { color:var(--path); } .asu_power_title_bottom { color:var(--yellow); width:100%; text-align:right; text-transform:uppercase; letter-spacing:3px; font:12px Arial; } .asu_power_ti { text-decoration-color:var(--path); text-decoration-line:underline; text-decoration-style:solid; text-decoration-thickness:5px; width:100%; text-align:center; padding:50px 0px 20px 0px; color:var(--yellow); font:30px After; } .asu_power_txt { width:100%; padding:20px; border-radius:15px; background:var(--grey); list-style:none; color:var(--yellow); font:14px Arial; } .asu_power_txt h4 { text-align:right; font:20px After; text-transform:lowercase; border-bottom:dotted 2px var(--yellow); letter-spacing:5px; margin-bottom:5px; } .asu_power_txt_desc { color:var(--path); text-align:justify; margin:5px 10px 10px 10px; } .asu_power_sep { margin:10px 0px; width:100%; text-align:center; font-size:50px; } .asu_power_sep i { color:var(--path); } @font-face { font-family: "After"; src: url("https://dl.dropbox.com/s/0kuxe9i5q1jb9fo/After_Disaster.ttf"); } :root { --backgroundfiche:#090909; --path:#ccc; --yellow:#c8a656; --grey:#282828; }</style>