KOCCILY — Sailorfuku

theme du club <div style="width: 650px; height: 1010px; position: relative; overflow: hidden; border: 0px solid #ff0000; margin: auto"> <div style="background-color: #A59D84; width: 250px; height: 30px; clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%)"><div style="font-size: 18px; font-family: cursive; margin-left: 10px; color: ECEBDE">Le paradis du HTML</div></div> <div style="position: relative; width: auto; height: 50px; background-color: #D7D3BF"> <div style="position: absolute; width: 400px; height: 35px; background-color: #ECEBDE; border-radius: 20px; margin-left: 90px; margin-top: 7px;"> <div style="font-size: 18px; margin-left: 50px; padding: 7px; color: #A59D84">https://leparadisduhtml</div> </div> </div> <div style="width: auto; position: relative; height: 110px; background-color: #C1BAA1"><img src="https://wallpapers.com/images/featured/brown-pastel-aesthetic-379r48zf0xa66b3k.jpg" style="opacity: 0.2; width: 650px; overflow: hidden"></div> <div style="background-color: #C1BAA1; position: relative; height: 650px; margin: auto"> <table style="position: relative; border: 0px solid #000000; margin: auto; width: auto"> <tbody> <tr> <td> <div style="position: relative; background-color: #D7D3BF; height: 50px; opacity: 0.99; text-align: center; display: flex; justify-content: center; align-items: center; overflow: auto; width: 645px"> <a href="#Menu" style="color: #A59D84; font-size: 20px; margin: 0 15px;">MENU</a> <span style="color: #A59D84;">⋅</span> <a href="#Design" style="color: #A59D84; font-size: 20px; margin: 0 15px;">DESIGN</a> <span style="color: #A59D84;">⋅</span> <a href="#Aide" style="color: #A59D84; font-size: 20px; margin: 0 15px;">AIDE</a> <span style="color: #A59D84;">⋅</span> <a href="#Credit" style="color: #A59D84; font-size: 20px; margin: 0 15px;">CREDIT</a> </div> </td> </tr> <tr> <td> <div style="opacity: 0.99; width: 645px; height: 600px; text-align: center; overflow:hidden"> <table style="background-color: #ECEBDE; width: 650px; height: 600px; text-align: center; color: #A59D84; margin: auto; padding: 8px"> <tbody> <tr> <td> <div style="width: 610px; height: 600px; text-align: justify; overflow: auto;"> <a name="Menu"></a><br> <strong><span style="font-size: 20px">Bonjour</span></strong><br> <span style="font-size: 15px;">Bienvenue dans le paradis du HTML!</span> </div> </td> </tr> <tr> <td> <div style="width: 610px; height: 600px; text-align: justify; overflow: auto;"> <a name="Design"></a><br> <strong><span style="font-size: 20px">Liste complète</span></strong><br> <span style="font-size: 15px;">Tous les designs que j'ai fait sont listés ici. Les codes html sont tous présents sur mon <a href="https://koccily.neocities.org/htmlsf">site internet neocities.</a></span> </div> </td> </tr> <tr> <td> <div style="width: 610px; height: 600px; text-align: justify; overflow: auto;"> <a name="Aide"></a><br> <strong><span style="font-size: 20px">Questions d'HTML</span></strong><br> <span style="font-size: 15px;"><i>Cette section est vide pour le moment.</i> </span> </div> </td> </tr> <tr> <td> <div style="width: 610px; height: 600px; text-align: justify; overflow: auto;"> <a name="Credit"></a><br> <strong><span style="font-size: 20px">Et moi?</span></strong><br> <span style="font-size: 15px;">Vous pourrez le remarquer, je n'ai pas mis de ligne <i>codage par</i> ou <i>html de</i> en bas des designs car je ne trouve pas ça jolie.</span> </div> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </div> <div style="position: absolute; width: auto; height: 110px; background-color: #C1BAA1; overflow: hidden;"><img src="https://wallpapers.com/images/featured/brown-pastel-aesthetic-379r48zf0xa66b3k.jpg" style="opacity: 0.2; width: 650px; object-fit: contain"></div> <div style="position: absolute; width: auto; height: 60px; background-color: #A59D84; margin-top: 110px"> <div style="font-size: 13px; font-family: cursive;padding: 10px; color: ECEBDE; text-align: end">Le paradis du HTML a pour but de vous montrer que tout le monde peut réussir. @Koccily<img src="https://i.ibb.co/0ZQg5gd/blinkies-Cafe-ng.gif" alt="blinkies-Cafe-ng" border="0"> </div></div> </div>
THEME 1 <div style="padding: 20px; border: 3px solid #d09edb; opacity: 0.99; width: 580px; height: 850px; text-align: center; box-shadow: 0px 0px 2px #d09edb; overflow: auto; margin: auto; border-radius:40px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://i.pinimg.com/736x/a1/d4/45/a1d445c91a42da85d780fa50908acc2c.jpg" alt="image" /> <div style="border: 3px solid #d09edb; background-color: #ffffff; opacity: 0.8; width: 580px; height: 130px; box-shadow: 6px 6px 10px #d09edb; overflow: auto; margin: auto; border-radius: 15px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;"> <div style="font-size: medium; font-family: 'Arial', sans-serif; color: #333333; line-height: 0.8; text-align: left; margin-right: 20px;"> <div style="font-size: 30px; color: #d09edb;">PSEUDO</div><br> <div style="font-size: 15px; color: #666666;">info</div><br> <div style="font-size: 10px; color: #888888;">info2</div> </div> <div style= "margin-left: -10px; padding-bottom: 70px;" ><img src="https://64.media.tumblr.com/834dc326da3df1ec502451dd6812ee97/tumblr_inline_p7gi2p7qIQ1qfc9y0_75sq.gifv" alt="Image"></div> </div> <img src="https://www.fancyparts.com/fancyparts/cg/line/line_dot02a/line_dot01a_27.gif" alt="" style="width: 250px; margin-bottom: 15px; margin-top: 15px" /><br> <img src="https://www.fancyparts.com/fancyparts/cg/line/line_dot02a/line_dot01a_27.gif" alt="" style="width: 200px; margin-bottom: 20px;" > <table style="margin: auto;" border="0"> <tr> <td> <div style="border: 5px double #efdecd; background-color: #ffffff; opacity: 0.9; width: 190px; height: 380px; box-shadow: 0px 0px 10px #d09edb; overflow: auto; margin: 2px; border-top-left-radius: 50px; object-fit: cover; z-index: -1;"> <div style="text-align: center;"> <div style="font-size: medium; font-family: 'Arial', sans-serif; color: #333333; margin: 10px;"> <br><br> <div style="font-size: 13px; color: #666666; text-align: justify;"> Blablabla </div><br> <br> <img src="https://artwork.neocities.org/photos/valentines/2f374960.gif" alt="Image"> </div> </div> </div> </td> <td> <div style="border: 5px double #efdecd; background-color: #ffffff; opacity: 0.8; width: 315px; height: 380px; text-align: center; box-shadow: 0px 0px 10px #d09edb; overflow: auto;border-top-right-radius: 50px;"> <div style="text-align: center;"> <div style="font-size: medium; font-family: 'Arial', sans-serif; color: #333333; line-height: 1.3; text-align: left; margin: 10px;"> <img src="https://artwork.neocities.org/pixels/kaoanis/7home.gif"> <img src="https://artwork.neocities.org/pixels/kaoanis/ab17.gif" alt="Image"> <br><br> <div style="font-size: 13px; color: #666666; text-align: justify;">Blabla</div> </div></div> </div> </td> </tr> </table> <div style="border: 5px double #efdecd; background-color: #ffffff; width: 450px; height: 220px; box-shadow: 0px 0px 10px #d09edb; overflow: auto; margin: auto;"> <div style="font-family: 'Arial', sans-serif; opacity: 0.8; color: #333333; line-height: 1.3; margin: 10px;font-size: 13px; text-align: justify;">Blablabla </div> </div> <br> </div>	THEME 2 <div style="border: 0px solid #ffffff; opacity: 0.99; width: 650px; height: 800px; text-align: center; box-shadow: 0px 0px 30px #828282; overflow: hidden; margin: auto; border-radius:5px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://i.gifer.com/origin/3e/3ed745e14423d28ea25b5770489b3878_w200.gif" alt="image" /> <table style=" position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%)" border="0"> <tr> <td> <div style="border: 5px double #828282; background-color: #ffffff; opacity: 0.35; width: 260px; height: 130px; box-shadow: 0px 0px 0px #828282; border-radius: 3px; box-sizing: content-box; display: flex; align-items: center;"> <div style="margin-right: 20px; padding-left: 10px;"> <img src="https://images14.fotki.com/v1668/photos/7/803707/14785795/s_u_01_12080_01_01-vi.gif" alt="Image" style="object-fit: contain;"> </div> <div style="font-size: medium; font-family: 'Arial', sans-serif; color: #333333;"> <div style="font-size: 30px; color: #1f1f1f;">PSEUDO</div> </div> </div> </td> <td> <div style="border: 5px double #828282; background-color: #ffffff; opacity: 0.35; width: 220px; height: 130px; box-shadow: 0px 0px 0px #828282; margin: auto; border-radius: 3px; box-sizing: content-box; display: flex; align-items: center;margin-left: 90px;"> <div style= "padding-right: 20px; margin-left: 10px;" ><img src="https://images49.fotki.com/v1659/photos/7/803707/14558146/s_u_01_260486_01_03-vi.gif" alt="Image" style="object-fit: contain;"> </div> <div style="font-size: medium; font-family: 'Arial', sans-serif; color: #333333; text-align: center;"> <div style="font-size: 23px; color: #1f1f1f;">Info</div> <div style="font-size: 15px; color: #1f1f1f;">info</div> </div></div></tr> </table> <div style="border: 8px double #828282; background-color: #ffffff; width: 450px; height: 460px; box-shadow: 0px 0px 0px #d09edb;box-sizing: content-box; overflow: auto; opacity: 0.65; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);"> <div style="font-family: 'Arial', sans-serif;; color: #333333; line-height: 1.3; margin: 10px;font-size: 13px; text-align: justify;">Blablabla </div> </div> <img style="position: absolute; bottom: 0; right: 0; width: 430px; object-fit: contain;" src="https://www.stickers-garage.com/imgtransform.php?f=1&filename=https://www.stickers-garage.com/resize/720x720/zc/3/f/0/src/sites/stickers/files/products/b95dafea2f21493f4fa724753571cdef.png"> </div>
THEME 3 <table><tr><td> <div style="border: 10px double #7da2b0; opacity: 0.70; width: 130px; height: 130px; overflow: auto; margin: auto; border-radius:200px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://media.istockphoto.com/id/1490797933/fr/photo/savoureux-bonbons-color%C3%A9s-%C3%A0-la-gel%C3%A9e-en-arri%C3%A8re-plan-vue-ci-dessus.jpg?s=612x612&w=0&k=20&c=7iy9BEsbVEuBpgRM7NjWc1vPJUwbIlCVKIoEmmfnWWY=" alt="image" /> </div></td> <td> <div style="border: 10px double #7da2b0; opacity: 0.70; width: 130px; height: 130px; overflow: auto; margin: auto; border-radius:200px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://media.istockphoto.com/id/529664572/fr/photo/fond-de-fruits.jpg?s=612x612&w=0&k=20&c=f6OuESBnyeD_zI9Em2--Nfh2ym07jUeMs0Vwotr35aM=" alt="image" /> </div></td> <td> <div style="border: 10px double #7da2b0; opacity: 0.70; width: 130px; height: 130px; overflow: auto; margin: auto; border-radius:200px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9qrGcHmBrVOjXohvTeUyR4dW_wERo_mkgugyFDBUROGf-VIYZySbWHb0jnAFg1maREVI&usqp=CAU" alt="image" /><div style="font-size: 25px; color: #ffffff;margin-top: 25px;margin-left: 20px; text-decoration:underline;">on peut écrire ici!</div> </div></td> <td> <div style="border: 10px double #7da2b0; opacity: 0.70; width: 200px; height: 130px; overflow: auto; margin: auto; border-radius:200px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://saharpaint.ir/wp-content/uploads/2024/03/1e92aaaa-1272-4cf6-aaac-f81e90aafbae.jpg" alt="image" /> </div></td></tr></table> <div style="border: 5px dotted #7da2b0; opacity: 0.99; width: 635px; height: 520px; overflow: auto; border-radius:20px; margin-top: 10px; margin-bottom: 10px; padding: 20px;"> <table> <tr><td> <div style="border: 3px solid #7da2b0; opacity: 0.90; width: 200px; height: 310px; overflow: auto; border-radius:10px; text-align: justify; padding: 10px;margin-right: 3px; margin-bottom: 3px"> <div style="font-size: 15px; color: #000000"><p>Presentation<br>Un jour, je suis sortie pour aller au lac Juliette. J'y ai rencontré un petit garçon qui s'appelle... j'ai oublié.</p></div> </div></td> <td><div style="border: 3px solid #7da2b0; opacity: 0.90; width: 370px; height: 310px; overflow: auto; margin: auto; border-radius:10px; padding: 10px; text-align: justify;"> <div style="font-size: 15px; color: #000000;"><p>Descriptif<br>Le garçon se promenait avec un gros toutou. Le chien s'appelle PRINCESSE. Si je me souviens bien, il était à la recherche de sa petite soeur. Il avait sa peluche avec lui. Je me demande s'il l'a retrouvé. J'espère qu'elle va bien. :'( <br>ps: je crois que c'est Matt. </p></div></div> </td></tr></table> <table><tr><td><div style="border: 3px solid #7da2b0; opacity: 0.90; width: 600px; height: 130px; overflow: auto; border-radius:10px; padding: 10px;"> <div style="font-size: 15px; color: #000000;margin-top: 25px;margin-left: 20px;"><p>Finalement<br>J'ai rencontré une vieille dame et elle m'a parlé de sa fille. J'avais faim. J'ai mangé des bonbons! C'EST BON LES BONBONS!!!! <br><br> (Ce texte a été créé pour vous donner une idée de ce que ça donne. N'hésitez pas à ajouter des images (png/jpg/gif) pour égayer tout ça. J'en ai mis quelques-unes pour vous aider si vous n'avez pas l'habitude de coder)</p></div> </div></td></tr></table> </div> <table> <tr><td> <div style="border: 10px double #7da2b0; opacity: 0.70; width: 200px; height: 130px; overflow: auto; margin: auto; border-radius:200px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://media.istockphoto.com/id/1490797933/fr/photo/savoureux-bonbons-color%C3%A9s-%C3%A0-la-gel%C3%A9e-en-arri%C3%A8re-plan-vue-ci-dessus.jpg?s=612x612&w=0&k=20&c=7iy9BEsbVEuBpgRM7NjWc1vPJUwbIlCVKIoEmmfnWWY=" alt="image" /> </div></td> <td> <div style="border: 10px double #7da2b0; opacity: 0.70; width: 130px; height: 130px; overflow: auto; margin: auto; border-radius:200px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://media.istockphoto.com/id/529664572/fr/photo/fond-de-fruits.jpg?s=612x612&w=0&k=20&c=f6OuESBnyeD_zI9Em2--Nfh2ym07jUeMs0Vwotr35aM=" alt="image" /> </div></td> <td> <div style="border: 10px double #7da2b0; opacity: 0.70; width: 130px; height: 130px; overflow: auto; margin: auto; border-radius:200px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9qrGcHmBrVOjXohvTeUyR4dW_wERo_mkgugyFDBUROGf-VIYZySbWHb0jnAFg1maREVI&usqp=CAU" alt="image" /> </div></td> <td> <div style="border: 10px double #7da2b0; opacity: 0.70; width: 130px; height: 130px; overflow: auto; margin: auto; border-radius:200px;position: relative;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://saharpaint.ir/wp-content/uploads/2024/03/1e92aaaa-1272-4cf6-aaac-f81e90aafbae.jpg" alt="image" /> </div></td></tr></table>	THEME 4 <div style="background-color: #a3c45c; border: 0px solid #000000; opacity: 0.99; width: 98%; height: 620px; overflow: auto; position: relative; display: flex; justify-content: center; align-items: center"> <div style="background-color: #ffffff; border: 10px solid #ffffff; opacity: 0.70; width: 180px; height: 40px; overflow: auto; border-radius:20px; position: absolute; top:0; left: 0; z-index: 2; margin: 20px; font-size: 30px; text-align: center; max-width: 50%;">Mon potager</div> <div style="font-size: 30px; color: #ffffff;position:absolute; z-index: 1; padding: 10%; max-width: 50%; text-align: center; transform: rotate(-30deg)">plus la rotation (-30deg) est grande, plus il faudra agrandir la taille (height: 620px) générale</div> <div style=" opacity: 0.99; width: 50%; height: 100%; position: absolute; top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); overflow: hidden; "> <img style="position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://wallpapers.com/images/featured/cute-orange-background-eqqi7gr2inc4phi0.jpg" alt="image" /></div> <div style=" opacity: 0.99; width: 50%; height: 100%; position: absolute; bottom: 0; right: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%); overflow: hidden"> <img style="position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://wallpapers.com/images/featured/cute-orange-background-eqqi7gr2inc4phi0.jpg" alt="image" /></div> </div>
THEME 5 <div style="border: 0px solid #d09edb; opacity: 0.99; width: 650px; height: 400px; text-align: center;position: relative; align-content: center; padding: 20px;"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://img.freepik.com/photos-gratuite/conception-fond-texture-abstrait-colore_53876-108265.jpg" alt="image" /> <table style="margin: 15px; border:0px solid #000000; margin: auto"> <tbody> <tr> <td> <div style="border: 0px dashed #060020; opacity: 0.9; text-align: center; "><img src="https://64.media.tumblr.com/c14be946ed0ae8b1b21b7d82021f2758/tumblr_inline_mmjr9cbUvC1qz4rgp.gif" alt="" width="100%" height=auto;></div> </td> <td> <div style="opacity: 0.99; text-align: center; overflow: auto; x;"><br><span style="font-size: medium;"><strong><span style="color: #000000;"><a href="#1"><span style="color: #432a96;">HOME</span></a> / <span style="color: #000000;"><a href="#2">Lien2</a></span> / <span style="color: #432a96;"><a href="#3">Lien3</a></span> / <span style="color: #432a96;"> </span><a href="#4">Lien4</a></span></strong></span></div> </td> </tr> <tr> <td> <div style="border: 0px dashed #060020; opacity: 0.99;text-align: center; overflow: auto; bottom: 0; "><img style="vertical-align: middle;" src="https://64.media.tumblr.com/tumblr_lumg4z0C8n1qibcty.gif" alt="" width="330px" height="auto"></div> </td> <td> <div style=" opacity: 0.99; width: 270px; height: 270px; text-align: center; overflow: hidden;"> <table style="margin: auto;" border="0"> <tbody> <tr> <td> <div style="0.99; width: 270px; height: 270px; text-align: center; color: #649ed1; overflow: auto"><a name="1"></a><br><strong><span style="font-size: medium; text-decoration: underline;">HOME</span><br><span style="font-size: small;">Blablabla</span></strong></div> </td> </tr> <tr> <td> <div style="0.99; width: 270px; height: 270px; text-align: center; color: #649ed1; overflow: auto"><a name="2"></a><br><strong><span style="font-size: medium; text-decoration: underline;">Lien2</span><br><span style="font-size: small;">Blablabla</span></strong></div> </td> </tr> <tr> <td> <div style="0.99; width: 270px; height: 270px; text-align: center; color: #649ed1; overflow: auto"><a name="3"></a><br><strong><span style="font-size: medium; text-decoration: underline;">Lien3</span><br><span style="font-size: small;">Blablabla</span></strong></div> </td> </tr> <tr> <td> <div style="0.99; width: 270px; height: 270px; text-align: center; color: #649ed1; overflow: auto"><a name="4"></a><br><strong><span style="font-size: medium; text-decoration: underline;">Lien4</span><br><span style="font-size: small;">Blablabla</span></strong></div> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </div>	THEME 6 <div style="border: 5px solid darkred; opacity: 0.99; align-items: center; overflow: auto; position: relative; padding: 10px; width: 620px; border-radius: 10px;"><img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://static.vecteezy.com/system/resources/previews/001/882/512/non_2x/hand-drawn-abstract-background-free-vector.jpg" alt="image" /> <div style="margin: auto; border: 3px solid darkred; background-color: #ffeebd; opacity: 0.9; width: 600px; height: 90px; border-radius: 45px; text-align: center;"><span style="color: #6d4422;"><br><span style="font-size: medium;"><br><strong>PRESENTATION</strong></span><br></span></div> <table style=" text-align: center; margin: auto"> <tbody> <tr> <td> <div style="border: 3px solid darkred; background-color: #ffeebd; opacity: 0.9; width: 250px; height: 250px; border-radius: 45px; text-align: center; overflow: auto; margin: 5px;"><span style="color: #6d4422;"><br><strong><span style="font-size: medium;"><span style="text-decoration: underline;">Info</span></span></strong><br><br><span style="font-size: small;">Blablabla1<br></span><br><br><br></span></div> </td> <td> <div style="border: 3px solid darkred; background-color: #ffeebd; opacity: 0.9; width: 250px; height: 250px; border-radius: 45px; text-align: center; overflow: auto; "><span style="color: #6d4422;"><br><strong><span style="font-size: medium;"><span style="text-decoration: underline;">Loisirs</span></span></strong><br><br><span style="font-size: small;">Blablabla2</span></span></div> </td> </tr> <tr> <td> <div style="border: 3px solid darkred; background-color: #ffeebd; opacity: 0.9; width: 250px; height: 250px; border-radius: 45px; text-align: center; overflow: auto; "><span style="color: #6d4422;"><br><strong><span style="font-size: medium;"><span style="text-decoration: underline;">Preference</span></span></strong><br><br><span style="font-size: small;">Blablabla3<br></span><br><br><br></span></div> <strong> </strong></td> <td> <div style="border: 3px solid darkred; background-color: #ffeebd; opacity: 0.9; width: 250px; height: 250px; border-radius: 45px; text-align: center; overflow: auto; "><span style="color: #6d4422;"><br><strong><span style="font-size: medium;"><span style="text-decoration: underline;">Autre</span></span></strong><br><br><span style="font-size: small;">Blablabla4<br></span><br><br><br></span></div> <strong><strong> </strong></strong></td> </tr> </tbody> </table> </div>
THEME 7 <div style="border: 4px solid #b5144f; background: linear-gradient(180deg, #ffcccb 80%, #f0738c); align-items: center; overflow: auto; position: relative; padding: 10px; width: 570px; height: 800px; border-top-left-radius: 200px; border-top-right-radius: 200px; margin: auto; text-align: center; overflow: visible"> <div style="font-size: 70px; color: #f50f54; margin-top: 40px; font-family: 'Lucida Handwriting'; text-shadow: 2px 2px 10px #e30940;"> Bienvenue </div> <div style="width: 220px; height: 20px; background-color: #faede6; border: 2px solid #b5144f; margin-top: 5px; margin-left: 420px; color; display: flex; overflow: hidden; padding: 3px;"><div style="font-size: 15px; color: #f50f54; margin-left: 5px;"> SAILOR : nom, prenom, age </div></div> <table style="margin-top: 10px;"><tbody><tr><td> <div style="width: 110px; height: 120px; background-color: #faede6; border: 2px solid #b5144f; border-radius: 30px; margin-left: -50px; display: flex; justify-content: center; align-items: center;overflow: hidden"> <img style="object-fit: contain; width: 100%; height: 100%;" src="https://giffiles.alphacoders.com/427/4270.gif" alt="Image"> </div> </td> <td> <div style="width: 130px; height: 120px; background-color: lightpink; border: 2px solid #b5144f; border-radius: 30px; margin-left: 5px; color; display: flex; justify-content: center; align-items: center;overflow: hidden"><img style="object-fit: contain; width: 60%; height: 100%;" src="https://66.media.tumblr.com/46a346ebb12ffe4b4f9e145619b3b5bd/tumblr_mfi0vlMZ3o1rfjowdo1_500.gif" alt="Image"> </div> </td> <td> <div style="width: 110px; height: 120px; background-color: hotpink; border: 2px solid #b5144f; border-radius: 30px; margin-left: 5px; color; display: flex; justify-content: center; align-items: center;overflow: hidden"> <img style="object-fit: contain; width: 200%; height: 100%;" src="https://66.media.tumblr.com/11d4d09e5a7600817f888598d0d53ff9/tumblr_mjokv173Y51rfjowdo1_500.gif" alt="Image"></div></td> <td><div style="width: 180px; height: 100px; background-color: #faede6; border: 3px solid #b5144f; border-radius: 30px;margin-left: 20px; color; display: flex; overflow: hidden"><img src="https://64.media.tumblr.com/0f06364ccb98581d4359bf11cb94e64c/45fc2c3a4781297e-69/s100x200/7b55626a03ff60c2d636881e1ec778bfeb310013.gifv" alt="Image"><div style="font-size: 14px; color: #f50f54; margin-top: 10px; margin-left: 5px;"> info 1 </div> </div> </td> </tr></tbody></table> <div style="display: flex; position: relative; width: 600px; margin-top: 40px;"> <div style="width: 30px; height: 150px; background-color: deeppink; margin-left: 20px; border: 3px solid #b5144f"><img src="https://cinni.net/images/creatures/hamham/mini-hamu-a.gif" style="margin-top: 120px"></div><div style="width: 25px; height: 150px; background-color: hotpink; margin-top: 30px;margin-left: 15px; border: 3px solid #b5144f"><img src="https://cinni.net/images/creatures/mini-kaeru-a.gif" style="margin-top: 120px"></div> <div style="width: 300px; height: 150px; background-color: #faede6; border: 3px solid #b5144f; border-radius: 30px; padding: 15px; overflow: hidden; z-index: 1; margin-left: 30px;"> <div style="font-size: 23px; font-family: 'Papyrus'; color: #f50f54; max-width: 200px; padding-bottom: 5px;"> Qui suis-je ? </div> <div style="font-size: 12px; color: #f50f54; text-align: justify; max-width: 200px;"> Blablabla1 </div> </div> <img style="margin-left: -80px; width: 180px; height: 180px; object-fit: contain; border: 3px solid #b5144f; border-radius: 30px; z-index: 1; background-color: #ffffff" src="https://i.pinimg.com/originals/ee/ae/cd/eeaecdbf1145185110f697a34828c6a5.gif"> </div> <div style="display: flex; position: relative; width: 600px; margin-left: 60px; margin-top: 50px; "> <div style="width: 230px; height: 120px; background-color: #faede6; border: 3px solid #b5144f; border-radius: 30px; padding: 15px; overflow:auto; z-index: 1;"> <div style="font-size: 23px; font-family: 'Papyrus'; color: #f50f54; max-width: 200px; padding-bottom: 5px; margin-left: 50px;"> Info 2 </div> <div style="font-size: 12px; color: #f50f54; text-align: justify; max-width: 200px; margin-left: 50px;"> Blablabla2 </div> </div> <img style="margin-left: -365px; width: 150px; height: 150px; object-fit: contain; border: 3px solid #b5144f; border-radius: 30px; z-index: 1; background-color: #ffffff " src="https://64.media.tumblr.com/48d9f71fa5b451dbc7ebd3373e5aadbc/9cd7c663e33f0456-b1/s100x200/bbeb2b56021e19704befd49a00529f2c2d8997b4.gifv"> <div style="width: 190px; height: 200px; background-color: #faede6; border: 3px solid #b5144f; border-radius: 30px; padding: 15px; overflow:auto; margin-left: 225px; margin-top: -30px"><div style="font-size: 23px; font-family: 'Papyrus'; color: #f50f54; max-width: 200px; padding-bottom: 5px;"> Moi </div> <div style="font-size: 12px; color: #f50f54; text-align: justify; max-width: 200px; margin-left: 0px;"> Blablabla. </div></div></div> </div>	THEME 8 <div style="border: 0px solid midnightblue; background: linear-gradient(to bottom, #0a0f23, #1e2a47); opacity: 0.99; overflow: hidden; position: relative; height: 400px; width: 400px;margin: auto"> <img style="filter: brightness(60%);margin-left: -200px; margin-top: -180px;" src="https://wallpapersmug.com/download/1024x768/95afc8/dark-night-river-forest-minimal-art.jpg" alt="image"> </div> <div style="border: 0px solid midnightblue; background: linear-gradient(to bottom, #070d12, #07121e); opacity: 0.99; overflow: hidden; position: relative; height: 400px; width: 400px;margin: auto"> <table style="position: absolute; margin: 5px; border: 0px solid #000000; margin: auto;"> <tbody> <tr> <td style="padding: 10 10px; color: aliceblue;"> <div style="background-color: #092350; height: 40px; opacity: 0.99; text-align: center; display: flex; justify-content: center; align-items: center; border-radius: 8px; box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); overflow: auto;"> <a href="#Profil1" style="color: #a5c2e1; font-size: 20px; margin: 0 15px; text-shadow: 0 0 10px #fff, 0 0 20px #001aff;">Bonjour!</a> <span style="color: #a5c2e1;">⋅</span> <a href="#Profil2" style="color: #a5c2e1; font-size: 20px; margin: 0 15px; text-shadow: 0 0 10px #fff, 0 0 20px #001aff;">Lien</a> <span style="color: #a5c2e1;">⋅</span> <a href="#Profil3" style="color: #a5c2e1; font-size: 20px; margin: 0 15px; text-shadow: 0 0 10px #fff, 0 0 20px #001aff;">Lien3</a> <span style="color: #a5c2e1;">⋅</span> <a href="#Profil4" style="color: #a5c2e1; font-size: 20px; margin: 0 15px; text-shadow: 0 0 10px #fff, 0 0 20px #001aff;">Lien4</a> </div> </td> </tr> <tr> <td> <div style="opacity: 0.99; width: 400px; height: 300px; text-align: center; overflow: hidden; border: 0px solid #000000; margin-top: 10px;"> <table style="background-color: #092350; width: 300px; height: 400px; margin: 5px; text-align: center; color: #fff; border-radius: 8px; margin: auto;" border="0"> <tbody> <tr> <td> <div style="width: 290px; height: 400px; text-align: center; overflow: auto; text-shadow: 0 0 10px #fff;"> <a name="Profil1"></a><br> <strong><span style="font-size: medium; text-decoration: underline; color: #a5c2e1;">HOME</span><br> <span style="font-size: small; color: #d6e3e8;">Blablabla</span></strong> </div> </td> </tr> <tr> <td> <div style="width: 290px; height: 400px; text-align: center; overflow: auto; text-shadow: 0 0 10px #fff;"> <a name="Profil2"></a><br> <strong><span style="font-size: medium; text-decoration: underline; color: #a5c2e1;">Lien2</span><br> <span style="font-size: small; color: #d6e3e8;">Blablabla</span></strong> </div> </td> </tr> <tr> <td> <div style="width: 290px; height: 400px; text-align: center; overflow: auto; text-shadow: 0 0 10px #fff;"> <a name="Profil3"></a><br> <strong><span style="font-size: medium; text-decoration: underline; color: #a5c2e1;">Lien3</span><br> <span style="font-size: small; color: #d6e3e8;">Blablabla</span></strong> </div> </td> </tr> <tr> <td> <div style="width: 290px; height: 400px; text-align: center; overflow: auto; text-shadow: 0 0 10px #fff;"> <a name="Profil4"></a><br> <strong><span style="font-size: medium; text-decoration: underline; color: #a5c2e1;">Lien4</span><br> <span style="font-size: small; color: #d6e3e8;">Blablabla</span></strong> </div> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </div>
THEME 9 <div style="background: linear-gradient(#bc8fc6 50%, #f6f0e6 50%); align-items: benter; position: relative; padding: 10px; width: 570px; height: 500px; border-radius: 20px; margin: auto; text-align: center; overflow: hidden"> <div style="width: 550px; height: 40px; background: #f6f0e6; border-radius: 15px; margin: auto; "><img src="https://xyz.crd.co/assets/images/gallery15/15e201e7.gif?v=de6feabd" style="position: absolute; margin-left: -250px; margin-top: 10px"> <div style="font-family: 'Arial'; color: #687580; padding: 10px; margin-left: 100px; font-size: 20px; text-align: justify; position: absolute;">P•S•E•U•D•O</div><img src="https://xyz.crd.co/assets/images/gallery20/e52553e4.gif?v=de6feabd" style="position: absolute; margin-top: 10px; margin-left: 50px;"></div> <table style="margin-top: 30px"><td> <div style="width: 250px; height: 340px; background: #ffffff; border-radius: 15px; overflow: hidden"><img src="https://images.indianexpress.com/2018/06/jacqueline-fernandez-bollywood-759.jpg" alt="" style="width:250%; margin-left: -130px"><img src="https://img1.picmix.com/output/stamp/normal/0/6/5/1/1821560_a0ba2.gif" style="margin-top: -350px; margin-left: -150px; opacity: 30%"> </div></td> <td><div style="width: 305px; height: 340px; color: #ffffff;text-align: justify; margin-top: -5px;"> <div style="font-family: 'Arial'; color: #f6f0e6; padding: 10px; font-size: 15px; text-align: justify; height: 156px; overflow: auto"><b>Sailor</b><br>Blablabla</div> <div style="font-family: 'Arial'; color: #bc8fc6; padding: 10px; font-size: 15px; text-align: justify; overflow: auto; height: 120px;">Suite du blabla</div></div> </td> </table> <div style="position: relative"><img src="https://xyz.crd.co/assets/images/gallery16/f35bccdc.gif?v=de6feabd" style="filter: hue-rotate(284deg); position: absolute; margin-left: -266px; margin-top: -20;"><img src="https://64.media.tumblr.com/tumblr_m79scbMHen1rnr4eb.gif" style="position: absolute; margin-left: 245px; margin-top: 52px; transform: scale(1.5);"></div> </div>	THEME 10 <div style=" padding: 20px; border: 0px solid #ff9090; border-radius: 120px; width: 580px; height: 600px; text-align: center; overflow: auto; margin: auto; ;position: relative;"> <div style="margin-top: 10; position: relative" alt="lignehaut"> <div style="position: absolute; height: 280px; width: 280px; background-color: #fff; overflow: hidden; border-radius: 100% 10% 0% 0%; box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.9);"> <img src="https://i.pinimg.com/originals/52/c6/a2/52c6a266bc2d3ed79000dccf5b3c733f.jpg" alt="Image" style=" object-fit: cover; width: 130%" /> </div> <div style="position: absolute; height: 280px; width: 280px; background-color: #fff; overflow: hidden; border-radius: 10% 100% 10% 0%; box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.9); margin-left: 300px;"> <img src="https://st5.depositphotos.com/2864025/73170/i/450/depositphotos_731708840-stock-photo-nasi-lemak-dan-teh-tarik.jpg" alt="Image" style=" object-fit: cover;" /> </div></div> <div style="margin: auto; margin-top: 300px; position: absolute" alt="lignebas"> <div style="position: absolute; height: 280px; width: 280px; background-color: #fff; overflow: hidden; border-radius: 10% 0 10% 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);"> <img src="https://i.pinimg.com/236x/4c/db/f1/4cdbf1f72705cfad2214082be7e9f37e.jpg" alt="Image" style="object-fit: cover; width: 100%;" /> </div> <div style="position: absolute; height: 280px; width: 280px; background-color: #fff; overflow: hidden; border-radius: 0 10% 100% 10%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9); margin-left: 300px;"> <img src="https://img.freepik.com/premium-photo/cute-bunny-pink-background-with-clouds-stars_257043-37791.jpg" alt="Image" style=" object-fit: cover; height: 100% " /> </div> </div> <div style="position: relative; width: 300px; height: 300px; background-color: #f792a1; border-radius: 50%; margin-top: 110px; margin-left: 110px; padding: 25px; box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.9); overflow: hidden"><div style="position: absolute; font-size: 16px; color: #000000; text-align: center; top: 47%; left: 30%; transform: translate(-22%, -50%);"><div style="font-family: cursive; font-size: 20px;">Pseudo</div><br><div style="font-family: monospace; font-size: 12px; text-align: justify; overflow: auto; height: 220px"><img src="https://64.media.tumblr.com/tumblr_m64d9v1iNX1qbs47q.gif" style="transform: scale(0.9)">Il y a quelques soucis avec les dimensions alors, si vous l'utilisez, ne changez pas la largeur et taille des objets! (ou alors, faites-le que si vous êtes à l'aise).<br> <img src="https://64.media.tumblr.com/tumblr_m64d9v1iNX1qbs47q.gif" style="transform: scale(0.9)">(Ce texte a été créé pour vous donner une idée de ce que ça donne. N'hésitez pas à ajouter des images (png/jpg/gif) pour égayer tout ça. J'en ai mis quelques-unes pour vous aider si vous n'avez pas l'habitude de coder) <br><br>PS: OUI! vous pouvez mettre les images que vous voulez sur les contours. </div> </div> <img src="https://64.media.tumblr.com/tumblr_m9w4ornEZo1roozkr.gif" style="margin-top: -10px; margin-left: -85px; position: absolute; filter:hue-rotate(270deg)"><img src="https://64.media.tumblr.com/tumblr_m9w4ocZxzu1roozkr.gif" style="margin-top: -10px; margin-left: 30px; filter: hue-rotate(290deg); position: absolute"></div> </div>
THEME 11 <div style="border: 4px solid #3e4d66; position: relative; width: 600px; height: 600px; overflow: hidden; margin: auto; background-color: #c6d9f7; filter: sepia(60%)"><img src="https://images.pexels.com/photos/2310713/pexels-photo-2310713.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="height: 90%;z-index: -1; margin-left: 280px;"> <div style="border: 6px solid #3e4d66; position: relative; width: 600px; height: 700px; background-color: #3e4d66; margin-top: -640px; overflow: hidden; border-radius: 0% 100% 0% 0%; z-index: 1"> <div style="position: absolute; height: 150px; width: 400px; background-color: #fff; overflow: hidden; border-radius: 0% 0% 0% 0%;"> <img src="https://c4.wallpaperflare.com/wallpaper/544/417/139/anime-detective-conan-conan-edogawa-shinichi-kudo-wallpaper-preview.jpg" alt="Image" style="object-fit: cover; width: 100%;" /> </div> <div style="position: absolute; height: 150px; width: 400px; background-color: #fff; overflow: hidden; margin-top: 160px; margin-left: 100px;"> <img src="https://www.detectiveconanworld.com/wiki/images/thumb/9/92/Ran_Mouri_Profile.jpg/275px-Ran_Mouri_Profile.jpg" alt="Image" style="object-fit: cover; width: 80%;margin-top: -17px; margin-left: 90px; filter: brightness(80%)" /> </div> <div style="position: absolute; height: 150px; width: 400px; background-color: #fff; overflow: hidden; margin-top: 320px; margin-left: 200px;"> <img src="https://i.pinimg.com/originals/44/d8/82/44d88240d961c1b919847dadb6ba6351.jpg" alt="Image" style="object-fit: cover; width: 100%;" /> </div> <div style="position: absolute; height: 150px; width: 400px; background-color: #fff; overflow: hidden; margin-top: 480px; margin-left: 300px;"> <img src="https://black-org.fr/img/character/Kaito_Kid.jpg" style="object-fit: cover; width: 80%;margin-left: 10px; margin-top: -5px" /> </div> <div style="position: absolute; height: 150px; width: 400px; background-color: #fff; overflow: hidden; margin-top: 640px; margin-left: 300px;"> <img src="https://www.detectiveconanworld.com/wiki/images/thumb/6/66/Juzo_Megure_Profile2.png/275px-Juzo_Megure_Profile2.png" alt="Image" style="object-fit: cover; width: 68%; margin-top: -15px; margin-left: 43px" /> </div> </div> <div style="border: 5px solid #3e4d66; position: absolute; width: 400px; height: 610px; background-color: #c6d9f7; border-radius: 0 100% 0% 0%; bottom: 0; overflow: hidden; z-index: 2; margin: -5px "><img src="https://images.pexels.com/photos/2310713/pexels-photo-2310713.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="height: 100%;"> <div style="font-family: cursive; position: absolute; margin-top:-470px; margin-left: 32px; overflow: auto; height: 400px; width: 300px; text-align: justify"><div style="font-size: 50px;">Pseudo</div><br><img src="https://gifcity.carrd.co/assets/images/gallery07/36b46c8e.gif?v=47652796" style="font-size: 10px; margin-right: 5px;margin-bottom: 5px">blablabla<br> <img src="https://gifcity.carrd.co/assets/images/gallery07/36b46c8e.gif?v=47652796" style="font-size: 10px; margin-right: 5px; margin-bottom: 5px">blablabla<br> <img src="https://gifcity.carrd.co/assets/images/gallery07/36b46c8e.gif?v=47652796" style="font-size: 10px; margin-right: 5px; margin-bottom: 5px;">blablabla<br> Blablabla</div> </div> </div>	THEME 12 <div style="background-color: #727D73; width: 630px; height: 600px; border-radius: 40px; padding: 15px; border: 10px double #F0F0D7; z-index: 0"> <div style="margin-left: -10px; position:absolute; height: 600px; width: 260px; overflow: hidden" alt="gauche"> <div style="position: absolute; margin-left: 20px; margin-top: 45px; transform: rotate(-10deg); width: 100px; height: 150px;padding: 10px; background-color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: inline-block; text-align: center; border-radius: 10px; overflow: hidden;z-index: 2"> <div style="max-width: 110px; max-height: 133px; overflow: hidden; border-radius: 5px; margin-bottom: 6px"><img src="https://img.freepik.com/free-photo/shiny-pink-glitter-festive-background_53876-101395.jpg" style="margin-left: -166px; margin-top: -138px; transform: scale(0.63);"></div> <div style="margin-bottom: 10px; font-size: 11px;">petit mot 1 </div> </div> <div style="margin-left: 110px; margin-top: 30px; transform: rotate(16deg); width: 100px; height: 150px; padding: 10px; background-color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: inline-block; text-align: center; border-radius: 10px; overflow: hidden;"> <div style="max-width: 110px; max-height: 133px; overflow: hidden; border-radius: 5px; margin-bottom: 6px"> <img src="https://img.freepik.com/vecteurs-libre/fond-paillettes-bleu-marine-realiste_23-2150019245.jpg" style="margin-left: -232px; margin-top: -175px; transform: scale(0.60);"></div> <div style="margin-bottom: 10px; font-size: 11px;">petit mot 2</div> </div> <div style="position: absolute; margin-left: 86px; margin-top: -185px; width: 90px; height: 40px; text-align: left; overflow: auto; border-radius: 5px; z-index: 3;"><a href="#menucache"><img src="https://pixels.crd.co/assets/images/gallery05/26e6812d.gif?v=99d3974e" style="pointer-events: none; margin-top: 5px; margin-left: 20px; margin-top: 10px; transform: scale(1.7)"></a></div> <div style="position: absolute; font-size: 13px; color: #F0F0D7; margin-top: 30px; margin-left: 70px; font-style: italic; background-color: #AAB99A; padding: 8px; border-radius: 5px;">Only you~</div> </div> <table style="position: absolute; margin-top: 300px; height: 230px; margin-left: 10px;" alt="sommaire"> <tbody> <tr> <td> <div style="padding: 3px; background-color: #F0F0D7; width: 150px; height: 20px; text-align: left; overflow: auto; border-radius: 5px"><span style="font-family: book antiqua, palatino;"><span style="font-size: small;"><strong><a style="color: #AAB99A; margin-left: 5px" href="#menu0">HOME</a></strong></span></span></div> </td> </tr> <tr> <td> <div style="margin-left: 44px; padding: 3px; background-color: #F0F0D7; width: 150px; height: 20px; text-align: left; overflow: auto; border-radius: 5px"><span style="font-family: book antiqua, palatino;"><span style="font-size: small;"><strong><a style="color: #AAB99A; margin-left: 5px" href="#menu1">menu1</a></strong></span></span></div> </td> </tr> <tr> <td> <div style="padding: 3px; background-color: #F0F0D7; width: 150px; height: 20px; text-align: left; overflow: auto; border-radius: 5px"><span style="font-family: book antiqua, palatino;"><span style="font-size: small;"><strong><a style="color: #AAB99A; margin-left: 5px" href="#menu2">menu2</a></strong></span></span></div> </td> </tr> <tr> <td> <div style="margin-left: 44px; padding: 3px; background-color: #F0F0D7; width: 150px; height: 20px; text-align: left; overflow: auto; border-radius: 5px"><span style="font-family: book antiqua, palatino;"><span style="font-size: small;"><strong><a style="color: #AAB99A; margin-left: 5px" href="#menu3">menu3</a></strong></span></span></div> </td> </tr> <tr> <td> <div style="padding: 3px; background-color: #F0F0D7; width: 150px; height: 20px; text-align: left; overflow: auto; border-radius: 5px"><span style="font-family: book antiqua, palatino;"><span style="font-size: small;"><strong><a style="color: #AAB99A; margin-left: 5px" href="#menu4">menu4</a></strong></span></span></div> </td> </tr> </tbody> </table> <div style="margin-left: 230px; position: absolute; height: 600px; z-index: 1" alt="droite"> <div style="height: 530px; width: 340px; background-color: #AAB99A; z-index: 1; margin-left: 22px; margin-top: 20px; border-radius: 10px; padding: 20px;" alt="bloc fond droit"> <div style="color: #D0DDD0; font-family: cursive; text-align: center"><span style="font-size: 20px">PSEUDO</span><br><span style="font-size: 14px">info</span> <img src="https://pixelsafari.neocities.org/dividers/bow/blue14.gif" style="filter: hue-rotate(230deg); transform: scale(0.7); margin-left: -36px; margin-top: 10px;"></div></div> </div> <div style="position: absolute; border: 0px solid #dadada; background-color: #AAB99A; width: 360px; height: 446px; overflow: hidden; margin-left: 260px; margin-top: 135px; z-index: 2"> <table style="margin: auto;" border="0"> <tbody> <tr> <td> <div style="width: 350px; height: 445px; overflow: auto; margin: auto;"><span style="color: #F0F0D7;"><a name="menu0"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 25px; margin-left: 130px"><strong>HOME</strong><br><br></span><span style="font-size: 15px; text-align: justify">Blabla</span></span></span></div> </td> </tr> <tr> <td> <div style="width: 350px; height: 445px; overflow: auto; margin: auto;"><span style="color: #F0F0D7;"><a name="menu1"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 25px; margin-left: 130px"><strong>Menu 1</strong><br><br></span><span style="text-align: justify; font-size: 15px">Blablabla</span></span></span></div> </td> </tr> <tr> <td> <div style="width: 350px; height: 445px; overflow: auto; margin: auto;"><span style="color: #F0F0D7;"><a name="menu2"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 25px; margin-left: 130px"><strong>Menu 2</strong><br><br></span><span style="text-align: justify; font-size: 15px">blablabla</span></span></span></div> </td> </tr> <tr> <td> <div style="width: 350px; height: 445px; overflow: auto; margin: auto;"><span style="color: #F0F0D7;"><a name="menu3"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 25px; margin-left: 130px; text-align: center"><strong>Menu 3</strong><br><br></span><span style="text-align: justify; font-size: 15px">Blablabla</span></span></span></div> </td> </tr> <tr> <td> <div style="width: 350px; height: 445px; overflow: auto; margin: auto;"><span style="color: #F0F0D7;"><a name="menu4"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 25px; margin-left: 130px; text-align: center"><strong>Menu 4</strong><br><br></span><span style="text-align: justify; font-size: 15px">Blablabla</span></span></span></div> </td> </tr> <tr> <td> <div style="width: 350px; height: 445px; overflow: auto; margin: auto;"><span style="color: #F0F0D7;"><a name="menucache"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 25px; margin-left: 130px;"><strong>Menu caché</strong><br></span><span style="text-align: justify; font-size: 15px">Blablabla</span></span></span></div> </td> </tr> </tbody> </table> </div> </div>
THEME 13 <div style="padding: 10px; border: 2px solid #d09edb; width: 630px; height: 730px; box-shadow: 0px 0px 2px #d09edb; overflow: auto; margin: auto; border-radius:10px; position: relative; filter:grayscale(70%)" alt="cadre/contour - effet gris de 70% possible de supprimer"> <img style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" src="https://img.freepik.com/free-vector/cherry-blossom-frame-card_53876-93701.jpg" alt="image de fond - rose" /> <div style="border: 0px solid #d09edb; background-color: #000000; width: 200px; height: 200px; text-align-last: center; margin-left: 30px; margin-top: 22px; padding: 30px; border-radius: 3px" alt="Cadre haut gauche"> <div style="font-size: medium; font-family: 'Arial', sans-serif; color: #333333; line-height: 0.6; text-align: left;"> <div style="font-size: 10px; color: #d09edb; margin-top: 6px;">petite ligne du cadre à gauche</div><br> <div style="font-size: 20px; color: #666666; margin-top: 8px">ligne une</div><br> <div style="font-size: 20px; color: #888888; margin-top: 15px">ligne deux</div> </div> </div> <div style="border: 0px solid #d09edb; background-color: #ff0fff; width: 260px; height: 260px; overflow: hidden; border-radius: 500px; margin-left: 30px; margin-top: -130px;"><img src="https://t4.ftcdn.net/jpg/09/71/37/89/360_F_971378911_KQaSHl4NQrH0FFL18WC7J9QE7P7xFV8W.jpg" alt="Image ciel"> </div> <div style="border: 0px solid #d09edb; background-color: #000000; width: 260px; height: 100px; overflow: hidden; border-radius: 50px; margin-left: 315px; margin-top: -390px; padding: 20px"> <div style="position: absolute; border: 0px solid #d09edb; background-color: #ff0fff; width: 50px; height: 50px; overflow: hidden; border-radius: 30px; margin-left: 12px;"> <img src="https://images.stockcake.com/public/0/c/6/0c657e14-b821-4ec2-a817-3c6c0c5b6c78_medium/sunset-cotton-sky-stockcake.jpg" style="transform: scale(0.3); margin: -100px;" alt="Image ciel petit rond"> </div> <div style="font-size: 10px; color: #d09edb; margin-top: 7px; margin-left: 85px;">petite ligne à droite</div><br> <div style="font-size: 10px; color: #666666; margin-top: -13px; margin-left: 80px">ligne une à droite</div><br> <div style="font-size: 15px; color: #888888; margin-top: 10px; text-align: center">ligne deux à droite qui peut continuer sur la deuxième ligne</div> </div> <div style="border: 0px solid #d09edb; background-color: #000000; width: 260px; height: 198px; overflow: auto; border-radius: 50px; text-align: center; margin-left: 315px; margin-top: 12px; padding: 20px;"> <div style="font-size: 30px; color: #d09edb; margin-top: 10px;">TITRE</div> <div style="font-size: 13px; color: #666666; margin-top: -5px">sous-titre</div><br> <div style="font-size: 18px; color: #888888; text-align: justify">gros paragraphe qui peut faire plusieurs lignes sans problème. Je peux écrire autant que je veux. Il y a un système d'overflow qui permet de voir le texte même s'il est plus grand que le cadre initial. (curseur qui permet de descendre).</div> </div> <div style="border: 0px solid #d09edb; background-color: #000000; width: 480px; height: 170px; overflow: auto; border-top-left-radius: 80px; border-bottom-right-radius: 80px; margin-left: 30px; margin-top: 18px; padding: 20px;"> <div style="font-size: 18px; color: #d09edb; margin-top: 16px; margin-left: 5px;">Titre du cadre en bas</div> <div style="font-size: 12px; color: #f7f7f7; margin-top: -13px; margin-left: 360px;">petite info à droite</div> <div style="font-size: 13px; color: #666666; margin-top: 5px">sous-titre</div><br> <div style="font-size: 16px; color: #888888; margin-top: -6px; text-align: justify">petit paragraphe qui peut faire jusqu'à trois lignes sans problème. Je peux écrire autant que je veux sur ce que j'aime ou bien sur ce qui m'intéresse en ce moment. </div> </div> <div style="position: absolute; border: 0px solid #d09edb; background-color: #ff8fff; width: 180px; height: 15px; overflow: hidden; border-radius: 500px; text-align: center; margin-left: 480px; margin-top: -128px; padding: 7px; transform: rotate(-90deg)" alt="infor vertical"> <div style="font-size: 13px; color: #000000">Texte écrit sur le côté</div> </div> <div style="position: absolute; border: 0px solid #d09edb; background-color: #ff0fff; width: 410px; height: 130px; overflow: hidden; border-radius: 30px; margin-left: 90px; margin-top: -60px;"> <img src="https://images.photowall.com/products/71600/fluffy-sky-pink.jpg?h=699&q=85" alt="Image du bas"> </div> </div>	THEME 14 <div style="width: 350px; height: 350px; border: 2px solid #ff0000; background-color: #f1f1f1;margin: 130px; padding: 30px; position: relative;"> <img src="https://i.ibb.co/bBr30T5/Noir-brillant.gif" style="z-index: 1;margin-left: -130px; margin-top: -125px; position: absolute; pointer-events: none"> <div style="font-size: 26px;">Pseudo</div> <div style="font-size: 13px; font-style: italic">info en-dessous du pseudo</div> <img src="https://i.ibb.co/wcXTLgF/black8.gif" style="position: absolute; margin-left: 300px; margin-top: -35px; transform: scale(1.6)" alt="noeud noir rose"> <div style="font-size: 18px; margin-left: -5px; margin-top: 30px; overflow: auto; text-align: justify; height: 285px; width: 363px">Gros paragraphe possible à rédiger ici. <br>Ce texte a la possibilité d'être très long<br><br>petite<br><br>démonstration<br><br>pour<br><br>vous<br>montrer<br><br>(la balise br sert à sauter des lignes.<br> Pensez à l'enlever si vous prenez celui-ci)<br><br>seulement la partie paragraphe descend. Le haut reste visble.</div> </div>
THEME 15 <div style="background-color: #ffffff; width: 600px; height: 500px; padding: 10px; border: 20px solid #6F7399; border-image:linear-gradient(to bottom,#8f8ed1,#c5defa,#fab8af) 10; margin: auto; overflow: hidden"> <img style="position: relative; width: 630px; height:200px; margin-top: -80px; margin-left: -20px;" src="https://img.freepik.com/free-vector/purple-blue-watercolor-background-banner_41066-3707.jpg"><img src="https://stickerdise.com/wp-content/uploads/2022/06/KOREA36STICKER.webp" style="position: absolute; margin-top: -570px; margin-left: -200px; transform: scale(0.3);"><img src="https://64.media.tumblr.com/1a66b1ffa2300e276b3142e27fc7bb5f/tumblr_inline_plahkdZLKz1t9c3fn_100.gifv" style="position: absolute; margin-top:-120px; margin-left: 50px;"><img src="https://64.media.tumblr.com/1a66b1ffa2300e276b3142e27fc7bb5f/tumblr_inline_plahkdZLKz1t9c3fn_100.gifv" style="position: absolute; margin-top: -120px; margin-left: 470px"> <div style="position: absolute; width: 595px; height: 60px; border: 0px solid; margin-top: 320px; margin-left: 5px;"> <div style="padding: 5px; background-color: #0F7399; width: 130px; height: 25px; text-align: center; overflow: auto; border-radius: 10px"><span style="font-family: cursive; font-size: 16px"><strong><a style="color: #f1f1f1;" href="#page01">menu</a></strong></span> </div> <div style="padding: 5px; background-color: #3F7399; width: 130px; height: 25px; text-align: center; overflow: auto; border-radius: 10px; margin-top: -35px; margin-left: 150px"><span style="font-family: cursive; font-size: 16px"><strong><a style="color: #f1f1f1;" href="#page02">menu 2</a></strong></span> </div> <div style="padding: 5px; background-color: #6F7399; width: 130px; height: 25px; text-align: center; overflow: auto; border-radius: 10px; margin-top: -35px; margin-left: 300px"><span style="font-family: cursive; font-size: 16px"><strong><a style="color: #f1f1f1;" href="#page03">menu 3</a></strong></span> </div> <div style="padding: 5px; background-color: #9F7399; width: 130px; height: 25px; text-align: center; overflow: auto; border-radius: 10px; margin-top: -35px; margin-left: 450px"><span style="font-family: cursive; font-size: 16px"><strong><a style="color: #f1f1f1;" href="#page04">menu 4</a></strong></span> </div> </div> <div style="position: absolute; border: 0px solid #dadada; background-color: #ffffff; width: 590px; height: 310px; overflow: hidden; z-index: 2"> <table style="margin: auto;" border="0"> <tbody> <tr> <td> <div style="width: 550px; height: 310px; overflow: auto; margin: auto;"><span style="color: #000000;"><a name="page01"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 15px; text-align: justify">Blabla du menu </span></span></span></div> </td> </tr> <tr> <td> <div style="width: 550px; height: 310px; overflow: auto; margin: auto;"><span style="color: #000000;"><a name="page02"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 25px; margin-left: 100px"><strong>Titre 2</strong><br><br></span><span style="text-align: justify; font-size: 15px">Blabla du menu 2<br></span></span></span></div> </td> </tr> <tr> <td> <div style="width: 550px; height: 310px; overflow: auto; margin: auto;"><span style="color: #000000;"><a name="page03"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 25px; margin-left: 100px"><strong>Titre 3</strong><br><br></span><span style="text-align: justify; font-size: 15px">Blabla du menu 3</span></span></span></div> </td> </tr> <tr> <td> <div style="width: 550px; height: 310px; overflow: auto; margin: auto;"><span style="color: #000000;"><a name="page04"></a><br><br><span style="font-family: book antiqua, palatino;"><span style="font-size: 25px; margin-left: 100px; text-align: center"><strong>Titre 4</strong><br><br></span><span style="text-align: justify; font-size: 15px">Blabla du menu 4</span></span></span></div> </td> </tr> </tbody> </table> </div> </div>	THEME 16

Les petits coeurs

← Correspond à la base. Permet de placer votre image / texte / gif en haut.

← Correspond à l'ajout de l'image des coeurs en haut de la page sans arranger les détails.

← Correspond à l'ajout des coeurs en haut de l'image bien positionnée.

← Correspond à l'ajout de trois images de coeurs et à la redisposition au centre de la page.

Les images sur les côtés

← Correspond à l'ajout de l'image de gauche

← Coprrespond à l'ajout des deux images

Je neviendrais plus sur SF, mais je veux bien continuer à vous en faire (me contacter par mail.)