Skip to content

Instantly share code, notes, and snippets.

@hsablonniere

hsablonniere/41Jbxj3MxTx.css

Last active March 18, 2016 22:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hsablonniere/d4a667aa095f4ff9a133 to your computer and use it in GitHub Desktop.
Save hsablonniere/d4a667aa095f4ff9a133 to your computer and use it in GitHub Desktop.
Download ZIP
CSS pour les nuls - 👽51
Raw
41Jbxj3MxTx.css
.container {
border: 1px solid #777;
box-sizing: border-box;
font-family: sans-serif;
font-weight: bold;
padding: 5px;
}
.box {
box-sizing: border-box;
font-size: 12px;
height: 50px;
text-align: center;
width: 75px;
}
.gray {
border: 3px solid gray;
color: gray;
}
.blue {
border: 6px solid blue;
color: blue;
}
.red {
border: 9px solid red;
color: red;
}
.gray .box-nb {
text-align: left;
}
.red .box-nb {
text-align: right;
}
Raw
41PginMx6g.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> display<span class="marked">:</span> ?<span class="marked">; }</span>
</div>
</div>
</body>
</html>
Raw
41vxlo3flpx.css
.main {
border: 5px solid blue;
}
.menu {
background: tomato;
}
.contents {
background: lime;
}
Raw
41Xllo3Mg6l.html
<!DOCTYPE html>
<html>
<head><link href="EJEges2Meax.css" rel="stylesheet"></head>
<body>
<div class="blue">
<div class="lime">
<div class="box">box</div>
</div>
</div>
<h1>Lorem</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa possimus dignissimos minima, a quia ut. Harum, inventore, explicabo! Quod iure, ratione quae maiores voluptatem deleniti cum veritatis labore totam qui!</div>
<div>Libero nam officia corporis fuga sint, quisquam unde incidunt dolore sequi praesentium, nobis ut magnam recusandae, dolorem consectetur itaque, mollitia quaerat a eaque esse necessitatibus laborum amet sit. Perferendis, dolor!</div>
<div>Aspernatur ab consequuntur minus ad rerum doloribus harum delectus nisi numquam tenetur totam, obcaecati cupiditate odit iste repellat debitis dolorum sint? Quo sit, aliquam quas numquam dignissimos sequi officiis facere.</div>
<div>Odio vitae recusandae excepturi, laborum! Eligendi harum ipsum illo excepturi cupiditate culpa minus facilis maxime. Recusandae optio unde doloremque. Iste adipisci sint qui nihil non in amet voluptatibus similique tempore!</div>
<div>Qui ut quo illo quaerat officiis itaque, expedita perspiciatis earum nisi, ipsum, molestiae laboriosam! Iste vel fuga beatae consectetur consequuntur nam officiis aspernatur illo ad, totam earum nesciunt temporibus quaerat.</div>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
4JarS6Mpl.svg
<svg class="logo" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Calque_1" x="0px" y="0px" width="740" height="330" viewBox="0 0 739.99997 329.99998" enable-background="new 0 0 694.46 279.709" xml:space="preserve"><metadata id="metadata341"><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><defs id="defs339"><defs id="defs119"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_23_"/></defs><clipPath id="SVGID_24_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use123" overflow="visible" xlink:href="#SVGID_23_"/></clipPath><defs id="defs109"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_21_"/></defs><clipPath id="SVGID_22_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use113" overflow="visible" xlink:href="#SVGID_21_"/></clipPath><defs id="defs99"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_19_"/></defs><clipPath id="SVGID_20_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use103" overflow="visible" xlink:href="#SVGID_19_"/></clipPath><defs id="defs89"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_17_"/></defs><clipPath id="SVGID_18_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use93" overflow="visible" xlink:href="#SVGID_17_"/></clipPath><defs id="defs79"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_15_"/></defs><clipPath id="SVGID_16_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use83" overflow="visible" xlink:href="#SVGID_15_"/></clipPath><defs id="defs69"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_13_"/></defs><clipPath id="SVGID_14_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use73" overflow="visible" xlink:href="#SVGID_13_"/></clipPath><defs id="defs59"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_11_"/></defs><clipPath id="SVGID_12_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use63" overflow="visible" xlink:href="#SVGID_11_"/></clipPath><defs id="defs49"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_9_"/></defs><clipPath id="SVGID_10_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use53" overflow="visible" xlink:href="#SVGID_9_"/></clipPath><defs id="defs39"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_7_"/></defs><clipPath id="SVGID_8_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use43" overflow="visible" xlink:href="#SVGID_7_"/></clipPath><defs id="defs29"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_5_"/></defs><clipPath id="SVGID_6_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use33" overflow="visible" xlink:href="#SVGID_5_"/></clipPath><defs id="defs19"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_3_"/></defs><clipPath id="SVGID_4_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use23" overflow="visible" xlink:href="#SVGID_3_"/></clipPath><defs id="defs9"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_1_"/></defs><clipPath id="SVGID_2_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use13" overflow="visible" xlink:href="#SVGID_1_"/></clipPath><defs id="defs131"><path d="m 61.816,-223.017 c 0,34.379 27.881,62.266 62.264,62.266 34.387,0 62.275,-27.887 62.275,-62.266 0,-34.396 -27.888,-62.277 -62.275,-62.277 -34.383,0 -62.264,27.881 -62.264,62.277" id="SVGID_25_"/></defs><clipPath id="SVGID_26_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use135" overflow="visible" xlink:href="#SVGID_25_"/></clipPath><defs id="defs143"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_27_"/></defs><clipPath id="SVGID_28_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use147" overflow="visible" xlink:href="#SVGID_27_"/></clipPath><defs id="defs155"><rect x="0" height="278.785" width="692" y="-386.02499" id="SVGID_29_"/></defs><clipPath id="SVGID_30_"><use height="279.70901" width="694.46002" y="0" x="0" style="overflow:visible" id="use159" overflow="visible" xlink:href="#SVGID_29_"/></clipPath><defs id="defs3496"><rect id="rect3498" x="0.171" width="694.28998" height="279.70901" y="0"/></defs><clipPath id="clipPath3500"><rect id="use3502" x="0.171" width="694.28998" height="279.70901" y="0"/></clipPath><defs id="defs3484"><rect id="rect3486" x="0.171" width="694.28998" height="279.70901" y="0"/></defs><clipPath id="clipPath3488"><rect id="use3490" x="0.171" width="694.28998" height="279.70901" y="0"/></clipPath><defs id="defs3472"><path id="path3474" d="m 64.858,163.551 c 0,33.019 26.779,59.806 59.804,59.806 33.028,0 59.814,-26.787 59.814,-59.806 0,-33.041 -26.786,-59.82 -59.814,-59.82 -33.025,-10e-4 -59.804,26.779 -59.804,59.82"/></defs><clipPath id="clipPath3476"><path id="use3478" d="m 64.858,163.551 c 0,33.019 26.779,59.806 59.804,59.806 33.028,0 59.814,-26.787 59.814,-59.806 0,-33.041 -26.786,-59.82 -59.814,-59.82 -33.025,-10e-4 -59.804,26.779 -59.804,59.82"/></clipPath><defs id="defs3460"><rect id="rect3462" x="0.171" width="694.28998" height="279.70901" y="0"/></defs><clipPath id="clipPath3464"><rect id="use3466" x="0.171" width="694.28998" height="279.70901" y="0"/></clipPath><defs id="defs3448"><rect id="rect3450" x="0.171" width="694.28998" height="279.70901" y="0"/></defs><clipPath id="clipPath3452"><rect id="use3454" x="0.171" width="694.28998" height="279.70901" y="0"/></clipPath><clipPath id="clipPath3452-6"><rect y="0" height="279.70901" width="694.28998" x="0.171" id="use3454-7"/></clipPath><defs id="defs3448-3"><rect y="0" height="279.70901" width="694.28998" x="0.171" id="rect3450-7"/></defs><clipPath id="clipPath3464-0"><rect y="0" height="279.70901" width="694.28998" x="0.171" id="use3466-2"/></clipPath><defs id="defs3460-1"><rect y="0" height="279.70901" width="694.28998" x="0.171" id="rect3462-0"/></defs><clipPath id="clipPath3476-5"><path d="m 64.858,163.551 c 0,33.019 26.779,59.806 59.804,59.806 33.028,0 59.814,-26.787 59.814,-59.806 0,-33.041 -26.786,-59.82 -59.814,-59.82 -33.025,-10e-4 -59.804,26.779 -59.804,59.82" id="use3478-7"/></clipPath><defs id="defs3472-0"><path d="m 64.858,163.551 c 0,33.019 26.779,59.806 59.804,59.806 33.028,0 59.814,-26.787 59.814,-59.806 0,-33.041 -26.786,-59.82 -59.814,-59.82 -33.025,-10e-4 -59.804,26.779 -59.804,59.82" id="path3474-4"/></defs><clipPath id="clipPath3488-1"><rect y="0" height="279.70901" width="694.28998" x="0.171" id="use3490-3"/></clipPath><defs id="defs3484-4"><rect y="0" height="279.70901" width="694.28998" x="0.171" id="rect3486-0"/></defs><clipPath id="clipPath3500-4"><rect y="0" height="279.70901" width="694.28998" x="0.171" id="use3502-8"/></clipPath><defs id="defs3496-3"><rect y="0" height="279.70901" width="694.28998" x="0.171" id="rect3498-4"/></defs><clipPath id="SVGID_30_-5"><use xlink:href="#SVGID_29_-3" overflow="visible" id="use159-2" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs155-3"><rect id="SVGID_29_-3" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_28_-9"><use xlink:href="#SVGID_27_-3" overflow="visible" id="use147-5" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs143-6"><rect id="SVGID_27_-3" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_26_-4"><use xlink:href="#SVGID_25_-4" overflow="visible" id="use135-7" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs131-4"><path id="SVGID_25_-4" d="m 61.816,-223.017 c 0,34.379 27.881,62.266 62.264,62.266 34.387,0 62.275,-27.887 62.275,-62.266 0,-34.396 -27.888,-62.277 -62.275,-62.277 -34.383,0 -62.264,27.881 -62.264,62.277"/></defs><clipPath id="SVGID_2_-6"><use xlink:href="#SVGID_1_-0" overflow="visible" id="use13-4" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs9-9"><rect id="SVGID_1_-0" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_4_-5"><use xlink:href="#SVGID_3_-4" overflow="visible" id="use23-1" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs19-5"><rect id="SVGID_3_-4" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_6_-3"><use xlink:href="#SVGID_5_-7" overflow="visible" id="use33-0" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs29-9"><rect id="SVGID_5_-7" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_8_-6"><use xlink:href="#SVGID_7_-9" overflow="visible" id="use43-0" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs39-5"><rect id="SVGID_7_-9" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_10_-7"><use xlink:href="#SVGID_9_-8" overflow="visible" id="use53-9" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs49-9"><rect id="SVGID_9_-8" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_12_-4"><use xlink:href="#SVGID_11_-8" overflow="visible" id="use63-8" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs59-7"><rect id="SVGID_11_-8" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_14_-7"><use xlink:href="#SVGID_13_-2" overflow="visible" id="use73-1" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs69-1"><rect id="SVGID_13_-2" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_16_-7"><use xlink:href="#SVGID_15_-4" overflow="visible" id="use83-7" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs79-5"><rect id="SVGID_15_-4" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_18_-5"><use xlink:href="#SVGID_17_-2" overflow="visible" id="use93-3" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs89-6"><rect id="SVGID_17_-2" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_20_-1"><use xlink:href="#SVGID_19_-5" overflow="visible" id="use103-3" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs99-1"><rect id="SVGID_19_-5" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_22_-1"><use xlink:href="#SVGID_21_-7" overflow="visible" id="use113-1" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs109-5"><rect id="SVGID_21_-7" y="-386.02499" width="692" height="278.785" x="0"/></defs><clipPath id="SVGID_24_-0"><use xlink:href="#SVGID_23_-7" overflow="visible" id="use123-7" style="overflow:visible" x="0" y="0" width="694.46002" height="279.70901"/></clipPath><defs id="defs119-8"><rect id="SVGID_23_-7" y="-386.02499" width="692" height="278.785" x="0"/></defs></defs><g id="g4499" transform="translate(3.9431808,-247.07412)"/><path style="fill:#1e99d5;fill-opacity:1" d="M 24.125 69.78125 L 24.125 179.40625 L 72.5 179.40625 C 76.192551 143.64932 104.74731 115.29428 140.59375 111.90625 L 140.59375 69.78125 L 24.125 69.78125 z M 223.15625 195.15625 C 219.46535 230.91499 190.87897 259.2681 155.03125 262.65625 L 155.03125 304.78125 L 271.5 304.78125 L 271.5 195.15625 L 223.15625 195.15625 z" transform="translate(0,-3.3108108e-6)" id="path4570"/><path style="fill:#335f8c;fill-opacity:1" d="M 24.125 195.15625 L 24.125 304.78125 L 140.59375 304.78125 L 140.59375 262.65625 C 104.74731 259.26822 76.192551 230.91318 72.5 195.15625 L 24.125 195.15625 z" transform="translate(0,-3.3108108e-6)" id="path3504"/><path style="fill:#dadada;fill-opacity:1;stroke:none" id="path4503" d="m 166.13104,199.25125 a 81.206688,50.188492 0 1 1 -162.4133734,0 81.206688,50.188492 0 1 1 162.4133734,0 z" transform="matrix(0.76378068,0,0,1.2358231,82.95276,-58.955308)"/><path style="fill:#1e99d5;fill-opacity:1" d="m 245.24455,73.67622 -46.354,6.888001 v 9.230999 c 0,0 6.114,-1.245999 10.315,-1.631 3.792,-0.363 8.694,0 6.706,7.785 -2.336,9.154 -22.093,74.78801 -22.093,74.78801 0,0 -3.261,11.496 3.752,16.519 8.427,4.986 14.174,3.05 20.15,-1.303 5.98,-4.359 15.215,-10.863 23.542,-24.989 l -6.881,-4.723 c 0,0 -6.7,8.349 -9.602,11.609 -2.721,3.043 -5.335,6.00599 -7.059,5.25 -1.877,-0.82601 -0.545,-5.25 0.904,-10.32101 1.447,-5.08499 26.62,-89.103 26.62,-89.103" id="path3118"/><path style="fill:#1e99d5;fill-opacity:1" d="m 237.51955,25.209221 c -7.939,0 -14.364,6.428 -14.364,14.359999 0,7.935001 6.425,14.364001 14.364,14.364001 7.939,0 14.364,-6.43 14.364,-14.364001 0,-7.931999 -6.425,-14.359999 -14.364,-14.359999" id="rect105"/><g id="g3081"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3083"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3088"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3093"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3098"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3103"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3108"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3113"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3118"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3123"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3128"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3133"/></g><g id="g3138"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3140"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3145"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3150"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3155"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3160"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3165"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3170"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3175"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3180"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3185"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3190"/></g><g id="g3195"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3197"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3202"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3207"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3212"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3217"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3222"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3227"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3232"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3237"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3242"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3247"/></g><g id="g3252"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3254"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3259"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3264"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3269"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3274"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3279"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3284"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3289"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3294"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3299"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.09090899;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3304"/></g><g id="g3309"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3311"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3316"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3321"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3326"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3331"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3336"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3341"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3346"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3351"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3356"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3361"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3366"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3371"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3376"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3381"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3386"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3391"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3396"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3401"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3406"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3411"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3416"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3421"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3426"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3431"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3436"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3441"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3446"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3451"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3456"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3461"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03125;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3466"/></g><g id="g3471"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3473"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3478"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3483"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3488"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3493"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3498"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3503"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3508"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3513"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3518"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3523"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3528"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3533"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3538"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3543"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3548"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3553"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3558"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3563"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3568"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3573"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3578"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3583"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3588"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3593"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3598"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3603"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3608"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3613"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3618"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.03225798;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3623"/></g><g id="g3628"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3630"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3635"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3640"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3645"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3650"/></g><g id="g3655"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.16666703;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3657"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.16666703;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3662"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.16666703;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3667"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.16666703;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3672"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.16666703;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3677"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.16666703;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3682"/></g><g id="g3687"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3689"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3694"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3699"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3704"/><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3709"/></g><g id="g3714"><g style="font-size:200.66384888px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;opacity:0.2;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3716"/></g><g style="font-size:215.36523438px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3297"><path d="m 276.5379,184.96851 4.3073,0 0,-62.67129 c 0,-24.55161 13.7834,-46.303523 40.2733,-46.303523 18.73676,0 35.10453,10.552922 35.10453,36.181363 l 0,72.79345 4.30731,0 0,-73.43955 c 0,-25.628436 -16.36778,-39.842567 -39.41184,-39.842567 -21.75187,0 -35.75063,12.921931 -39.84257,29.935767 l -0.43073,0 0,-27.351385 -4.3073,0 0,110.697735" style="font-variant:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3305"/><path d="m 382.06686,126.1738 c 1.50756,-31.012566 20.67509,-50.180103 44.58061,-50.180103 28.64354,0 43.9345,23.044107 43.71914,50.180103 l -88.29975,0 m 92.60705,4.3073 c 1.29219,-30.36647 -13.99877,-58.794707 -48.45717,-58.794707 -24.98235,0 -48.45718,21.105829 -48.45718,57.933247 0,32.95085 14.21414,58.36398 48.45718,57.93325 25.1977,0 44.14987,-15.50632 47.16498,-40.9194 l -4.3073,0 c -3.66121,23.90552 -20.45972,36.61209 -43.28841,36.61209 -31.4433,0 -43.28842,-23.04411 -43.71915,-52.76448 l 92.60705,0" style="font-variant:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3307"/><path d="m 566.20414,140.3879 c 0,21.75187 -15.93706,42.85768 -44.79597,42.85768 -24.12088,0 -32.30479,-12.92192 -32.30479,-25.62846 0,-23.69015 16.36778,-27.56675 33.81235,-28.85894 17.87529,-1.29219 37.04282,-0.43074 42.85768,-8.82997 l 0.43073,0 0,20.45969 m -70.20907,-31.87405 c 1.50756,-20.675044 14.86023,-32.520153 37.90428,-32.520153 29.50501,0 32.30479,17.229232 32.30479,30.581863 0,16.79847 -12.92195,16.15239 -43.28841,17.87531 -18.5214,1.2922 -38.11965,5.81489 -38.11965,33.16625 0,19.59822 15.07559,29.93577 37.04282,29.93577 22.82869,0 39.62721,-13.56803 43.93451,-27.78212 l 0.43073,0 0,14.42947 c 0,11.41435 9.90681,11.41436 18.30604,10.76827 l 0,-4.30731 c -6.03022,0.6461 -13.99874,1.50755 -13.99874,-6.89169 l 0,-70.42443 C 569.86535,79.2242 553.49757,71.686393 533.89935,71.686393 c -27.35135,0 -41.13476,15.937048 -42.21158,36.827457 l 4.3073,0" style="font-variant:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3309"/><path d="m 632.20684,78.57808 0,-4.307305 -24.98236,0 0,-34.889168 -4.30731,0 0,34.889168 -20.45969,0 0,4.307305 20.45969,0 0,85.71536 c 0,15.72165 7.96853,20.67507 18.09068,20.67507 6.67632,0 7.96852,-0.43073 10.5529,-0.6461 l 0,-4.3073 c -1.29219,0.43073 -5.16877,0.64609 -9.47607,0.64609 -6.67632,0 -14.8602,-0.64611 -14.8602,-17.22922 l 0,-84.8539 24.98236,0" style="font-variant:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3311"/></g><g style="font-size:143.22727966px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" id="text3298"><path d="m 372.11995,249.42335 c 0,20.19502 11.60143,38.52813 33.0855,38.52813 21.6273,0 33.22873,-18.33311 33.22873,-38.52813 0,-20.0518 -11.60143,-38.52814 -33.0855,-38.52814 -21.6273,0 -33.22873,18.47634 -33.22873,38.52814 m 2.86455,0 c 0,-18.33308 10.45561,-35.6636 30.36418,-35.6636 19.62212,0 30.22096,17.33052 30.22096,35.6636 0,18.61952 -10.59884,35.66359 -30.22096,35.66359 -19.90857,0 -30.36418,-17.04407 -30.36418,-35.66359" style="font-variant:normal;font-stretch:normal;letter-spacing:6.8499999px;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3292"/><path d="m 457.24814,286.23276 2.86454,0 0,-41.67914 c 0,-16.32789 9.16657,-30.79387 26.7835,-30.79387 12.46076,0 23.34605,7.01816 23.34605,24.06219 l 0,48.41082 2.86455,0 0,-48.8405 c 0,-17.04403 -10.88529,-26.49705 -26.2106,-26.49705 -14.46594,0 -23.77573,8.59365 -26.49704,19.90859 l -0.28646,0 0,-18.18986 -2.86454,0 0,73.61882" style="font-variant:normal;font-stretch:normal;letter-spacing:6.8499999px;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3294"/><path d="m 586.55746,234.38448 c 0,-16.32789 -10.31238,-23.48927 -26.64028,-23.48927 -18.33307,0 -24.92154,10.31237 -24.92154,18.47632 0,7.87749 2.86455,12.604 8.88009,15.18209 4.15359,1.86195 9.45301,3.29423 16.47114,5.01295 12.60398,3.151 25.35123,5.1562 25.35123,18.18987 0,12.60399 -13.17693,17.3305 -23.77573,17.3305 -17.04403,0 -26.92673,-7.73429 -26.92673,-24.06218 l -2.86455,0 c 0,18.4763 10.45561,26.92672 29.79128,26.92672 12.74721,0 26.64027,-5.7291 26.64027,-20.4815 0,-14.03626 -12.31756,-16.90082 -23.6325,-19.76536 -7.87749,-2.14841 -13.74982,-3.43746 -18.906,-5.44264 -5.01295,-2.00518 -8.16396,-5.58587 -8.16396,-12.89045 0,-2.57809 1.4323,-15.61178 22.057,-15.61178 14.03626,0 23.77573,5.87234 23.77573,20.62473 l 2.86455,0" style="font-variant:normal;font-stretch:normal;letter-spacing:6.8499999px;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3296"/><path d="m 607.42808,247.13171 c 1.00259,-20.62471 13.74983,-33.37196 29.64804,-33.37196 19.04921,0 29.21837,15.32534 29.07514,33.37196 l -58.72318,0 m 61.58773,2.86455 c 0.85936,-20.19503 -9.3098,-39.10105 -32.22614,-39.10105 -16.61435,0 -32.22614,14.0363 -32.22614,38.52814 0,21.91375 9.45302,38.81459 32.22614,38.52813 16.75757,0 29.36159,-10.31238 31.36677,-27.21318 l -2.86454,0 c -2.43486,15.89821 -13.60661,24.34864 -28.78869,24.34864 -20.91116,0 -28.78868,-15.32534 -29.07513,-35.09068 l 61.58773,0" style="font-variant:normal;font-stretch:normal;letter-spacing:6.8499999px;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3298"/><path d="m 690.18852,212.61394 -2.86455,0 0,73.61882 2.86455,0 0,-73.61882 m 0,-28.64546 -2.86455,0 0,14.46596 2.86455,0 0,-14.46596" style="font-variant:normal;font-stretch:normal;letter-spacing:6.8499999px;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3300"/><path d="m 712.91662,286.23276 2.86455,0 0,-102.26428 -2.86455,0 0,102.26428" style="font-variant:normal;font-stretch:normal;letter-spacing:6.8499999px;font-family:Helvetica Neue;-inkscape-font-specification:Helvetica Neue Semi-Light" id="path3302"/></g><g style="font-size:162.75006104px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#1e99d5;fill-opacity:1;stroke:none;font-family:Sans" id="text3302"><path d="m 350.13929,233.51288 c -1.73607,-6.29294 -4.71982,-11.17543 -8.95125,-14.6475 -4.23156,-3.58043 -9.60231,-5.37068 -16.11226,-5.37076 -4.99104,8e-5 -9.27679,1.03083 -12.85725,3.09226 -3.58053,2.06157 -6.51003,4.82832 -8.7885,8.30025 -2.27853,3.36356 -3.96028,7.21531 -5.04526,11.55525 -1.08502,4.23156 -1.62751,8.5173 -1.6275,12.85726 -1e-5,4.44854 0.48824,8.78853 1.46475,13.02 1.08498,4.23153 2.76673,8.02903 5.04526,11.39251 2.27847,3.36351 5.20797,6.07601 8.7885,8.1375 3.58046,1.95301 7.92046,2.92951 13.02,2.9295 7.26945,10e-6 13.0742,-2.00724 17.41426,-6.02175 4.44843,-4.01449 7.26943,-9.54798 8.463,-16.60051 l 10.41601,0 c -0.86808,4.66553 -2.27858,8.95128 -4.2315,12.85726 -1.84458,3.79751 -4.28583,7.10676 -7.32376,9.92775 -2.92957,2.71251 -6.45581,4.82826 -10.57875,6.34725 -4.12306,1.519 -8.84281,2.2785 -14.15926,2.2785 -6.72704,0 -12.53178,-1.13925 -17.41425,-3.41775 -4.88253,-2.27849 -8.89703,-5.37074 -12.04351,-9.27675 -3.14651,-4.01449 -5.47926,-8.73423 -6.99825,-14.15926 -1.51901,-5.42497 -2.27851,-11.22971 -2.2785,-17.41425 -1e-5,-5.85896 0.81374,-11.4467 2.44125,-16.76326 1.73599,-5.42494 4.23149,-10.19893 7.4865,-14.322 3.25498,-4.12293 7.26948,-7.37793 12.04351,-9.76501 4.88247,-2.49541 10.47021,-3.74316 16.76325,-3.74325 9.76495,9e-5 17.6312,2.33284 23.59876,6.99825 6.07593,4.66558 9.87343,11.93508 11.39251,21.80851 l -9.92776,0" style="font-variant:normal;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#1e99d5;font-family:Helvetica W01 Light;-inkscape-font-specification:Helvetica W01 Light" id="path3289"/></g></svg>
Raw
4k0ljhMx6x.html
<!DOCTYPE html>
<html>
<head><link href="E1yxxi2GgTx.css" rel="stylesheet"></head>
<body>
<div class="box">
<div class="inner-box">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime itaque odio laudantium quam, voluptates placeat obcaecati fuga quis cum eius excepturi optio eveniet aperiam accusamus, minus ratione sed unde, vero.</div>
<div>Minus ullam, commodi voluptas maxime officiis laborum quae delectus ad nesciunt provident perferendis voluptatibus tenetur amet culpa sit, enim eligendi architecto sed hic iste! Nulla autem, veniam voluptate illo ab.</div>
<div>Provident molestiae voluptatem quibusdam vero, in laudantium magni facere, eum sint facilis repellendus harum repellat velit ab non iusto nobis repudiandae ut, asperiores tempora, iure voluptates officiis ipsum. Magni, culpa!</div>
<div>Quod molestias, consequatur eum numquam id a voluptatibus. Necessitatibus tempore molestias suscipit vero iste cupiditate nobis amet laboriosam similique, voluptatum non ea, totam magni accusantium expedita culpa officia fuga. Facilis.</div>
<div>Minus, aut earum dolorem, neque commodi quidem pariatur reprehenderit perspiciatis nostrum assumenda et, officia est. Ea rerum ad similique nulla, iure quidem voluptatum! Est corporis dolorem, aspernatur sed dignissimos eum?</div>
<div>Aperiam sint, quam odio temporibus magnam? Perspiciatis velit aut minima qui, adipisci esse consectetur itaque placeat, accusantium, deleniti similique a, repudiandae. Officia consequuntur sit quo eveniet maiores nulla tenetur facere.</div>
<div>Delectus rerum, non voluptate quam quidem optio cum. Quo iure, necessitatibus reprehenderit provident. Illo maiores architecto quis nemo ipsum obcaecati nisi excepturi, odit quasi unde. Quibusdam facilis cum, saepe sunt.</div>
<div>Sequi quia, architecto ex quam temporibus iusto quisquam alias laudantium, dolores at assumenda facilis, nobis mollitia consectetur. Quasi id voluptatibus quaerat? Fuga ipsam natus eligendi soluta? Velit sequi id harum!</div>
<div>Nisi, sed iusto dicta laudantium enim. Eius enim praesentium nisi veritatis temporibus consequuntur doloribus officiis quasi perferendis, ipsum. Dolor ipsa eius fuga ducimus vitae voluptate beatae, totam fugit at quis.</div>
<div>Nam velit natus non dolorum tempore, voluptatum ducimus aut nemo, similique reiciendis soluta harum sed culpa quaerat neque ad ex laudantium. Sapiente soluta adipisci error nulla quibusdam deleniti quod repellendus.</div>
</div>
</div>
</body>
</html>
Raw
E1oegohGeal.html
<!DOCTYPE html>
<html>
<head><link href="VJ2xxjhMe6e.css" rel="stylesheet"></head>
<body>
<div>Accusamus adipisci suscipit unde molestiae culpa architecto magnam quia nulla.</div>
<img class="cat1" src="N1fuSazTe.jpg">
<div class="lorem-blue">Lorem ipsum 1... Lorem ipsum 11... Lorem ipsum 111...</div>
<div class="after-blue">Ut incidunt, laboriosam. Tempora in dolorem accusantium magni officia quos delectus amet incidunt dolore? Pariatur aliquid numquam magnam quas ab maiores quae odit quia, fugiat dignissimos libero earum. Aliquid, odio.</div>
<img class="cat2" src="N1fuSazTe.jpg">
<div class="lorem-green">Lorem ipsum 2... Lorem ipsum 22... Lorem ipsum 222...</div>
<div class="after-green">Dolore eius distinctio, neque excepturi voluptates, obcaecati aspernatur eveniet soluta laboriosam quod, in assumenda culpa atque laudantium! A sunt aspernatur quaerat, mollitia ipsam beatae et obcaecati sed, voluptatum, quos minima?</div>
<div>Ipsum omnis earum odio. Maiores molestiae molestias accusantium perferendis magnam eum tempore consequatur ducimus doloremque nesciunt, nihil quas harum eligendi temporibus exercitationem aperiam, labore rem assumenda reprehenderit quo voluptas. Maxime.</div>
</body>
</html>
Raw
E1Uexo2ze6x.html
<!DOCTYPE html>
<html>
<head><link href="41vxlo3flpx.css" rel="stylesheet"></head>
<body>
<div class="main">
<div class="menu">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
</div>
<div class="contents">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque necessitatibus harum et quo ea omnis aut nemo eveniet excepturi, quae dolorum enim, natus numquam, aperiam, atque nesciunt dolores. Optio, blanditiis.</div>
<div>Quibusdam saepe molestiae rerum quasi! Saepe aliquid porro nemo aut sint necessitatibus sit soluta incidunt. Odit vero, recusandae, et qui vitae nisi, necessitatibus ex consequuntur esse impedit molestias laboriosam enim!</div>
<div>Facilis, suscipit, molestiae. Unde consequuntur exercitationem maxime iusto cumque sint autem rerum velit, repellat, ex eveniet. Numquam debitis reprehenderit natus iusto vero, nihil illo placeat, cumque pariatur officiis beatae corporis!</div>
<div>Deserunt distinctio optio nulla quia eum, ipsa architecto veritatis sit. Harum illo, quod error cumque suscipit ducimus quibusdam aperiam repudiandae blanditiis totam expedita aut, quo soluta, sunt reiciendis explicabo! Non.</div>
<div>Culpa repudiandae dolore, eum fuga molestiae quibusdam, nulla id architecto debitis illo voluptate possimus illum delectus at voluptatum harum nemo qui quaerat dicta adipisci nostrum! Ea ipsa, sequi eius est.</div>
<div>Aperiam labore itaque pariatur amet error. Aliquam placeat necessitatibus inventore, nostrum officia doloribus aperiam at mollitia consequuntur autem dicta deserunt animi neque, totam esse quas. Iusto molestiae ducimus quaerat itaque.</div>
</div>
</div>
</body>
</html>
Raw
E1yxxi2GgTx.css
body {
background: aquamarine;
font-size: 10px;
margin: 0;
}
.box {
background: gold;
/* height: 120px; */
/* width: 120px; */
/* overflow: auto; */
/* margin: 10px; */
/* border: 10px solid tomato; */
/* padding: 10px 20px; */
}
.inner-box {
background: white;
}
Raw
EJEges2Meax.css
.blue,
.lime {
margin: 10px;
padding: 5px;
}
.blue {
border: 3px solid blue;
}
.lime {
border: 3px solid lime;
}
.box {
background: tomato;
height: 50px;
width: 50px;
}
Raw
EJlginMgTx.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="author">
<div class="name">Hubert<br>Sablonnière</div>
<img class="avatar" src="4kr6NTfpl.png">
<div class="links">
<div class="twitter">@hsablonniere</div>
<div class="hashtag">#CSS4newbies</div>
</div>
</div>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> css<span class="marked">:</span>
pour-les-nuls<span class="marked">; }</span>
</div>
</div>
<div class="ineat">
<img src="4JarS6Mpl.svg" alt="logo ineat" class="logo">
</div>
</body>
</html>
Raw
index.js
var fs = require('fs');
var shortid = require('shortid');
var man = require('./manifest.json');
man.sections.forEach(function (sec) {
sec.id = shortid.generate();
delete sec.uuid;
sec.files.forEach(function (file) {
var ext = file.filename.split('.')[1];
var newName = shortid.generate() + '.' + ext;
var oldName = file.filename;
file.filename = newName;
fs.rename(oldName, newName, function (err) {
if (err) console.log('ERROR: ' + err);
});
});
});
fs.writeFile('manifest.json', JSON.stringify(man), (err) => {
if (err) throw err;
console.log('It\'s saved!');
});
Raw
manifest.json
{
"name": "CSS pour les nuls",
"sections": [
{
"id": "4ylj2zx6x",
"name": "Titre",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "EJlginMgTx.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "NkMxonfxTl",
"name": "Constat",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "VkQls2zeax.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "NJEej2zeag.css"
},
{
"visible": false,
"previewVisible": false,
"filename": "N1reohGxag.js"
}
]
},
{
"id": "4y8ejnfxae",
"name": "Display",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "41PginMx6g.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "N1deihMeTx",
"name": "Display : normal flow",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "VJYgjnfepl.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "NJcgonflag.css"
}
]
},
{
"id": "NJilohfgpx",
"name": "Box-model",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "NJnxo2Mgax.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "416ljnzxTg",
"name": "Box-model interactif",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "4k0ljhMx6x.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "E1yxxi2GgTx.css"
}
]
},
{
"id": "E1llgj3Gx6x",
"name": "Position",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "Vk-lxj2flTe.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "EJMxeo2zx6l",
"name": "Position : exemples",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "41Xllo3Mg6l.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "EJEges2Meax.css"
}
]
},
{
"id": "4JHxgi3Mg6l",
"name": "Position : stretch",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "E1Uexo2ze6x.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "41vxlo3flpx.css"
}
]
},
{
"id": "Nydxlohzxal",
"name": "Float & clear",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "VJFelj2Mgpx.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
},
{
"id": "N15xgjnflpe",
"name": "Float & clear : original",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "E1oegohGeal.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJ2xxjhMe6e.css"
}
]
},
{
"id": "Nkpxxinzxpg",
"name": "Float & clear : basics",
"files": [
{
"visible": true,
"previewVisible": true,
"filename": "NkRegj2feTe.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "41Jbxj3MxTx.css"
},
{
"visible": false,
"previewVisible": false,
"filename": "NylZxonGx6e.css"
}
]
},
{
"id": "N1ZWxs3zgTx",
"name": "Merci",
"files": [
{
"visible": false,
"previewVisible": true,
"filename": "V1zZei3Gxal.html"
},
{
"visible": false,
"previewVisible": false,
"filename": "VJblo2flpe.css"
}
]
}
]
}
Raw
N1reohGxag.js
"use strict";
// foo
Raw
NJcgonflag.css
div,
span {
background: tomato;
}
div {
}
span {
}
Raw
NJEej2zeag.css
html,
body {
height: 100%;
margin: 0;
width: 100%;
}
img {
display: block;
height: 100%;
object-fit: contain;
width: 100%;
}
Raw
NJnxo2Mgax.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="title-wrapper">
<div class="title classic">Le Box Model</div>
</div>
</body>
</html>
Raw
NkRegj2feTe.html
<!DOCTYPE html>
<html>
<head>
<link href="41Jbxj3MxTx.css" rel="stylesheet">
<link href="NylZxonGx6e.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="box gray">
FORFAIT
<div class="box-nb">1</div>
</div>
<div class="box blue">
FORFAIT
<div class="box-nb">2</div>
</div>
<div class="box red">
FORFAIT
<div class="box-nb">3</div>
</div>
</div>
</body>
</html>
Raw
NylZxonGx6e.css
.container {
}
.gray {
}
.blue {
}
.red {
}
Raw
V1zZei3Gxal.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="author">
<div class="name">Hubert<br>Sablonnière</div>
<img class="avatar" src="4kr6NTfpl.png">
<div class="links">
<div class="twitter">@hsablonniere</div>
<div class="hashtag">#CSS4newbies</div>
</div>
</div>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> merci<span class="marked">:</span> beaucoup<span class="marked">; }</span>
</div>
</div>
<div class="ineat">
<img src="4JarS6Mpl.svg" alt="logo ineat" class="logo">
</div>
</body>
</html>
Raw
VJ2xxjhMe6e.css
img {
width: 80px;
}
.lorem-blue {
color: blue;
}
.lorem-green {
color: green;
}
.cat1 {
}
.after-blue {
}
.cat2 {
}
.after-green {
}
Raw
VJblo2flpe.css
html,
body {
background: #FF0;
display: flex;
flex-direction: column;
font-family: Helvetica LT Std, Arial, sans-serif;
height: 100%;
justify-content: center;
margin: 0;
}
.author {
align-items: center;
color: #333;
display: flex;
flex: 1;
font-size: 2.5vw;
justify-content: center;
margin-right: 30vw;
padding: 20px;
}
.name,
.links {
line-height: 1.3;
}
.name {
font-weight: bold;
text-align: right;
}
.links {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.avatar {
border-radius: 50%;
display: block;
height: 10vw;
margin: 0 2.5vw 0 3vw;
width: 10vw;
}
.title-wrapper {
align-items: center;
background: black;
display: flex;
justify-content: center;
flex: 3;
max-height: 30vh;
margin: 5vh 0;
outline: 5px dashed #000;
outline-offset: 10px;
transform: skewY(-5deg);
}
.title {
color: #FFF;
font-family: monospace;
font-size: 6vw;
font-weight: bold;
padding: 20px 0;
text-align: center;
}
.classic {
font-family: Helvetica LT Std, Arial, sans-serif;
}
.marked {
color: #FF0;
}
.ineat {
align-items: center;
display: flex;
justify-content: center;
flex: 1;
margin-left: 30vw;
padding: 20px;
}
.logo {
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
-webkit-animation-name: zoom;
-webkit-animation-timing-function: ease-in-out;
display: block;
height: 8vw;
width: 18vw;
}
@-webkit-keyframes zoom {
from {
transform: scale(1);
}
40% {
transform: scale(1);
}
45% {
transform: scale(1.3);
}
50% {
transform: scale(1.2);
}
55% {
transform: scale(1.3);
}
60% {
transform: scale(1);
}
to {
transform: scale(1);
}
}
Raw
VJFelj2Mgpx.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> float<span class="marked">:</span> ?<span class="marked">; </span> clear<span class="marked">:</span> ?<span class="marked">; }</span>
</div>
</div>
</body>
</html>
Raw
VJYgjnfepl.html
<!DOCTYPE html>
<html>
<head><link href="NJcgonflag.css" rel="stylesheet"></head>
<body>
<h4>3 divs</h4>
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<h4>3 spans</h4>
<span>span 1</span>
<span>span 2</span>
<span>span 3</span>
</body>
</html>
Raw
Vk-lxj2flTe.html
<!DOCTYPE html>
<html>
<head><link href="VJblo2flpe.css" rel="stylesheet"></head>
<body>
<div class="title-wrapper">
<div class="title">
<span class="marked">{</span> position<span class="marked">:</span> ?<span class="marked">; }</span>
</div>
</div>
</body>
</html>
Raw
VkQls2zeax.html
<!DOCTYPE html>
<html>
<head><link href="NJEej2zeag.css" rel="stylesheet"></head>
<body>
<img src="NyKoHpfag.png">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment