Mon site perso

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;">ROSEBONBON</div><br> <div style="font-size: 15px; color: #666666;">du pays des fleurs roses</div><br> <div style="font-size: 10px; color: #888888;">je suis tout à fait normal</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;"> Depuis que je suis toute petite, le rose a toujours été ma couleur préférée. Que ce soit les fleurs, les vêtements etc... j'aime tout! J'ai l'impression que cette couleur rend tout plus lumineux et joyeux. Je fonds(!) pour toutes les nuances de rose, du plus pâle au plus vif. Le rose, c'est plus qu'une couleur, c'est un véritable mode de vie pour moi ! </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;">Mes loisirs sont de décorer ma chambre avec des objets rose pâle et dorés pour créer une ambiance douce et chaleureuse. Le week-end, j'adore faire du shopping. J'aime aussi peindre des toiles avec des nuances de rose. Enfin voilà, quoi!</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;">J'ai pas d'idée pour ce bloc, alors je dirai juste: Le rose, c'est trop bien... mais le violet aussi!<br><br><center>(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 quelqu'un pour vous aider si vous n'avez pas l'habitude de coder)</center> </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;">TRISTE PANDA</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;">Black is</div> <div style="font-size: 15px; color: #1f1f1f;">everything</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;">Je suis un peu comme Bourriquet, tout choupinou et un peu triste parfois. J'aime beaucoup les petites choses simples, comme un bon chocolat chaud ou un câlin tout doux, mais il m'arrive souvent de me sentir un peu tout seul. Le monde autour de moi est beau, mais parfois, j'ai l'impression que tout est un peu trop grand et que je suis trop petit. Je regarde les autres rire, courir, s'amuser, et je me demande si je vais trouver ma place. Mais même quand ça ne va pas, j'essaie de sourire, parce que, au fond, je sais que chaque jour apporte un petit rayon de soleil. :) <br><br> <center>(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) </center> </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;">Salut, Moi c'est KkulKkul. Je suis un cochon noir de l'île de Jeju.<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;">J'adore courir avec Seonghee dans la fôret.</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;">La couleur noir, Les grand-pères statues de pierre<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;">Je suis mignon.<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;"> Le jardin des lapins a ouvert ses portes. </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;"> Je prends soin du jardin des lapins avec douceur, Chaque jour, je leur prépare un coin paisible, où ils peuvent jouer et se reposer.<br> <b>J'AIME LES LAPINS!</b> </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;"> Mes lapinous </div> <div style="font-size: 12px; color: #f50f54; text-align: justify; max-width: 200px; margin-left: 50px;"> Combien en ai-je? <b>ZERO</b>! <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) </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;"> WowoW </div> <div style="font-size: 12px; color: #f50f54; text-align: justify; max-width: 200px; margin-left: 0px;"> Il est 00:37, on est le 25 décembre 2024, je n'ai pas d'idée pour cette partie. </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;">I•S•H•I•K•A</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>Choupinou, C'est moiiii!!</b><br>Ho! Ho! Ho! Comment ça va les oies?! Parfois les gens sont trop énervants! J'ai envie de leur dire STOOOP! Mais bon, je ne dis rien parce que je suis <i>POLIE</i>.<br>J'adore les objets kawaii, la couleur ROSE. Je n'aime pas l'été, ni même l'hiver.... J'aimerais partir au Sri Lanka car c'est le pays de <b>Jacqueline Fernandez</b>!!!</div> <div style="font-family: 'Arial'; color: #bc8fc6; padding: 10px; font-size: 15px; text-align: justify; overflow: auto; height: 120px;">J'aime trop ce jeu. Tu peux tout faire de la mode à la gestion de club en passant par le festivaaaal.... Voilà. J'ai perdu mon site pour mes mini pixels. Je finirai celui-ci plus tard.<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)</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: -265px; margin-top: 10;"><img src="https://xyz.crd.co/assets/images/gallery07/4ace336f.gif?v=de6feabd" style="position: absolute; margin-left: 135px; margin-top: -30px; 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 (en cours) EN COURS

Décoration de la page perso
← 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.