Utopia

Code by Sun

Code:

<link href="https://fonts.googleapis.com/css?family=Boogaloo|Rock+Salt" rel="stylesheet"><img src="http://nevsedni-svet.cz/wp-content/uploads/2014/06/monsters-submarine-octopus-fantasy-art-sharks-creatures-underwater-1920x1184-wallpaper_www.animalhi.com_78.jpg" style="width: 430px; border: 3px solid #1EAFF8; box-shadow: 0px 0px 10px #1EAFF8; border-radius: 7px; -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); margin-top: 25px; display: block; margin: auto;"/><h1 style="font-size: 40px; color: #1EAFF8; text-shadow: 2px 2px 5px #1EAFF8; padding: 8px; margin-top: 20px; font-family: 'Rock Salt', cursive; text-align: center;">TITRE</h1><div style="width: 470px; margin: auto; border: 3px solid #1EAFF8; box-shadow: 0px 0px 10px #1EAFF8; border-radius: 8px; background-color: #0D78AE;">
<p style="font-family: 'Boogaloo', cursive; font-size: 14px; color: #92D7F9; padding: 10px; text-align: justify;">TEXTE</p></div>
<div style="font-size: 10px; font-family: 'Boogaloo', cursive; color: #1EAFF8; margin-top: -10px; text-align: center;"> Code by Sun</div>

Titre ici du blabla sur deux ou cinq lignes

Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse, cum senatu dimisso domum reductus ad vesperum est a patribus conscriptis, populo Romano, sociis et Latinis, pridie quam excessit e vita, ut ex tam alto dignitatis gradu ad superos videatur deos potius quam ad inferos pervenisse.

Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.

Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.

Intellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M. Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre. Ille quidem fructum omnis ante actae vitae hodierno die maximum cepit, cum summo consensu senatus, tum iudicio tuo gravissimo et maximo. Ex quo profecto intellegis quanta in dato beneficio sit laus, cum in accepto sit tanta gloria.

Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias, ne necesse sit unum sollicitum esse pro pluribus; satis superque esse sibi suarum cuique rerum, alienis nimis implicari molestum esse; commodissimum esse quam laxissimas habenas habere amicitiae, quas vel adducas, cum velis, vel remittas; caput enim esse ad beate vivendum securitatem, qua frui non possit animus, si tamquam parturiat unus pro pluribus.

Code by Sun

Code:

<center><link href="https://fonts.googleapis.com/css?family=Eagle+Lake|Niconne|Ruthie" rel="stylesheet">
<div style="width: 500px; background-color: #EA0F0F; box-shadow: 0px 0px 20px #FF0000; border-radius: 150px 150px 60px 60px;">
<style type="text/css">.rose{width: 242px; height: 242px; margin-top: -20px; padding: 5px; border-radius: 100%; background-color: #F83535; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; opacity: 0;}.rose:hover{opacity: 2; transform: rotate(360deg); transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s;}</style>
<div style="width: 252px; height: 252px; background-image: url(http://zupimages.net/up/17/09/k0io.png); border-radius: 98%; margin-top: -20px;"><div class="rose" style="position: center;">
<h1 style="font-size: 30px; color: #A71717; text-shadow: 2px 2px 5px #D71414; font-family: 'Ruthie', cursive; margin-top: 60px;">TITRE</h1></div></div><p style="width: 450px; margin-top: 10px; color: #F5AEAE; font-family: 'Eagle Lake', cursive; font-size: 13px; text-align: justify;">TEXTE
</p>
<div style="font-size: 10px; color: #590000; font-family: 'Niconne', cursive;"> Code by Sun</div></div></center>

Code:

<link href="https://www.aht.li/3227697/f1.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Aclonica|Averia+Libre" rel="stylesheet"><div class="fiche1-kayl"><h1>TITRE</h1><div class="kayl-fiche1"><p>TEXTE
</p>
 <div class="kayl-copyright">(c) Kayl</div></div></div>

Nom à Rallonge

Nom à Rallonge

Titre ici on met ce qu'on veut

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia justo ex, at tempus dolor commodo at. Nunc sollicitudin nunc eu leo ornare vulputate. Proin ultrices ullamcorper magna accumsan luctus. Morbi pellentesque vitae arcu non maximus. Vivamus at risus a lorem auctor pharetra vel ac arcu. Mauris sem metus, posuere vel viverra vel, facilisis in sem. Morbi fringilla cursus sodales. Mauris efficitur a felis ut placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean fringilla justo orci, et pellentesque nisl consequat quis. Curabitur vel lacus ut tellus vehicula tincidunt quis ut neque.



Phasellus sed nibh et neque maximus fermentum. Pellentesque id orci et velit sodales auctor. Nam eu euismod eros, eget porta est. Fusce ac tristique magna. Pellentesque nisl mauris, fringilla sit amet ipsum vel, facilisis volutpat neque. Nullam at odio sed nibh cursus posuere. Integer vitae mi viverra, dapibus sem vel, dapibus augue. Aliquam maximus enim sed magna placerat commodo. Aliquam rhoncus, dolor vitae feugiat vehicula, eros justo gravida risus, vel ultricies mi erat vel nunc.



Fusce porttitor ullamcorper sem, nec rutrum risus scelerisque sit amet. Phasellus egestas luctus sapien ac facilisis. Sed semper ex ipsum. Nunc tincidunt ut sapien et malesuada. Cras vitae turpis aliquet, aliquam risus vitae, eleifend diam. Proin nec sodales quam, ac dictum nunc. Vestibulum vitae finibus turpis. Nulla volutpat ligula a consequat feugiat. Nulla eu bibendum magna, congue fermentum quam. In hac habitasse platea dictumst. Nam aliquam sodales velit vitae ornare.

Code:

<link href="https://www.aht.li/3228011/f4.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Crimson+Text|Lobster" rel="stylesheet"><img src="http://uicn.fr/wp-content/uploads/2012/03/image-bandeau-lr-papillon-1.jpg" class="fiche4-kayl" /><div class="fiche4-kayl-block1"><div class="fiche4-kayl-ft">Ft Gens<img src="http://uicn.fr/wp-content/uploads/2012/03/image-bandeau-lr-papillon-1.jpg" /></div><div class="fiche4-kayl-ft">Ft Gens<img src="http://uicn.fr/wp-content/uploads/2012/03/image-bandeau-lr-papillon-1.jpg" /></div><h1>TITRE</h1><img src="http://www.reponsesbio.com/wp-content/uploads/2015/04/separateur8.png" /><p>TEXTE</p></div><div class="kayl-copyright">(c) Kayl</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar elit venenatis lacus rutrum congue. Duis aliquet, ex at porttitor porttitor, mi justo ullamcorper leo, eget blandit sem sem vel risus. Vestibulum lobortis placerat dolor in malesuada. Duis venenatis ipsum eget euismod lobortis. Morbi sit amet volutpat dui. Suspendisse varius bibendum fermentum. Donec libero nisi, laoreet quis urna nec, sollicitudin tincidunt diam. Fusce dictum, nibh at egestas varius, quam est ullamcorper nibh, a ultricies purus risus ut nibh. Morbi lobortis diam id pretium suscipit. Duis et mi enim. Curabitur ultrices lorem nisi, non facilisis sapien venenatis non. Morbi tincidunt est pulvinar lorem eleifend, ac consectetur erat facilisis.

Cras non blandit tellus. Sed metus lorem, elementum at purus at, pharetra consectetur turpis. Aenean ac purus diam. Integer consectetur tristique magna, eget pulvinar augue. Phasellus non purus sit amet erat pellentesque facilisis a sed lectus. Maecenas placerat semper sem. Suspendisse ut augue aliquam, pretium metus sed, vulputate dolor. Praesent consectetur sed sem eu mattis. Vivamus ac lorem eu lacus hendrerit commodo. Suspendisse in egestas elit. Donec vel elementum turpis.

Nunc sit amet fermentum urna. Phasellus semper ut tellus et bibendum. Donec interdum ultricies dolor, eu aliquet justo pharetra a. Mauris vulputate sem dapibus sapien consectetur, quis bibendum nunc elementum. Nunc neque nisi, aliquam eget tristique eget, posuere eget tortor. Donec a est at risus elementum eleifend. In condimentum consequat venenatis. Mauris quis lectus nec tellus sagittis venenatis sed sed ante. Mauris eget diam non nulla fermentum accumsan id nec magna. Nam vitae ante pulvinar, auctor lacus et, semper orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Code:

<link href="https://www.aht.li/3228049/f5.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Fascinate|Roboto+Slab" rel="stylesheet"><div class="fiche5-kayl"><div class="fiche5-kayl-title"><h1>TITRE</h1><div class="fiche5-kayl-separator"></div></div></div><p class="fiche5-kayl-block2">TEXTE</p><div class="kayl-copyright">(c) Kayl</div>

Code:

<link href="https://www.aht.li/3228145/f6.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Londrina+Shadow|Merriweather" rel="stylesheet"><img src="https://zupimages.net/up/18/19/0n9z.png" class="fiche6-kayl" /><div class="fiche6-kayl-block1"><h1>TITRE</h1><h3>« Citation » ou Ft Gens</h3></div><div class="fiche6-kayl-block2"><p>TEXTE</p></div><div class="kayl-copyright">(c) Kayl</div>

Feat machin truc bidule blabla bla

Title here, et on blablate pour tester un titre long

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc ligula, consequat a turpis quis, porttitor ullamcorper odio. Vivamus lobortis vel purus at aliquet. Morbi neque nulla, ornare eu dapibus sed, dapibus eget mi. In eu tellus sodales nisl sodales placerat ornare ut elit. Vivamus non pellentesque ante. Sed a magna eget felis tristique dignissim et nec sem. Cras pharetra mattis lorem, vel posuere turpis faucibus eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc fringilla nisi non tellus laoreet, eget mollis risus sagittis. Suspendisse quis tempor risus. Nunc in tempus diam. Nullam ut imperdiet tortor. Phasellus efficitur magna luctus enim laoreet, eget pulvinar lorem tempus. Morbi eu maximus augue. Vestibulum auctor sagittis nibh, quis sodales ante posuere vitae. Maecenas justo massa, porta sit amet tempus quis, ornare nec leo.

Praesent et justo at elit sodales mollis. Curabitur in scelerisque nibh. Duis ullamcorper, quam a suscipit placerat, massa nisl viverra nibh, non fringilla sapien lacus at dolor. Donec posuere luctus justo, ac rutrum ligula aliquam a. Sed congue, quam a tincidunt tempus, erat urna efficitur urna, sed sagittis quam lorem nec lectus. Aliquam dictum lobortis pellentesque. Aliquam lectus sem, viverra quis aliquam et, vestibulum a nisl. Nullam fringilla eu ante non convallis. Duis tincidunt luctus nisi sed congue. Integer vitae viverra diam. Suspendisse vitae diam elementum, tristique nisi sit amet, varius arcu.

Vestibulum mollis condimentum nibh ac consectetur. Nullam porttitor, nibh eget iaculis aliquet, tellus dolor luctus ex, id hendrerit leo quam et mi. Proin fringilla est tincidunt, imperdiet odio vel, auctor tellus. Aliquam volutpat lectus mauris, a luctus nunc pharetra id. Donec sodales ex non magna consequat iaculis. Pellentesque ut lacinia mi. Aliquam mollis justo sit amet neque efficitur efficitur. Quisque nec euismod quam. Suspendisse in malesuada odio, in rhoncus massa. Sed placerat vehicula vestibulum. Nullam maximus maximus neque ultricies convallis. Sed varius ipsum id eleifend ultrices.

(c) Sun

Code:

<link href="https://fonts.googleapis.com/css?family=Alice|Pacifico|Pangolin" rel="stylesheet"><div style="margin-top: -50px;"><div style="width: 150px; min-height: 40px; background-color: rgba(199, 199, 199, 0.4); margin: auto; position: relative; z-index: 2; top: 100px; left: -176px;"><p style="color: #9DC4F7; font-size: 14px; padding: 5px; font-family: 'Pangolin', cursive;">Feat machin</p></div>
<img src="https://66.media.tumblr.com/4b1c1642e86b31ad732cdffe2c5d211c/tumblr_nsvgnp1g4o1uv4yg3o3_500.gif" style="width: 500px; display: block; margin: auto; box-shadow: #000000 0px 0px 3px 2px;"/>
<h1 style="width: 500px; margin: auto; text-align: center; text-shadow: #4F5A7A 0px 0px 5px; font-size: 36px; color: #2F468B; font-family: 'Pacifico', cursive; line-height: 50px;">Title here</h1>
<div style="width: 500px; height: auto; margin: auto; background-color: #4F5A7A; box-shadow: #000000 0px 0px 3px 2px;"><p style="color: #F3F4CB; font-size : 14px; text-align: justify; padding: 10px; font-family: 'Alice', serif;">Le texte ici</p></div></div>
<p style="color: #000; font-size: 11px; text-align: center; margin-top: -20px;">(c) Sun</p>

Titre ici et on peut mettre un texte long si on veut pour tester ça fonctionne

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed sapien non nisl venenatis interdum non in lorem. Praesent mollis leo lectus, ut volutpat tellus blandit tempor. Integer fringilla elementum ex et porttitor. Mauris placerat pharetra convallis. Nunc non urna malesuada, vestibulum velit eget, rhoncus ante. Duis non eros condimentum, iaculis diam nec, volutpat justo. Donec suscipit enim quis tellus viverra, nec sodales libero interdum. Morbi ultrices lorem lorem, rutrum mattis tortor ullamcorper in. Nulla euismod mi nunc. Nulla vel quam at arcu consequat vulputate. Praesent suscipit fermentum maximus. Fusce ultricies est id lacinia hendrerit. Proin tempus condimentum fermentum. Aenean porta mauris non ipsum aliquam, nec mattis nisl sodales. Suspendisse interdum id metus eu maximus. Aenean vel velit a nisi porta accumsan eget ut tortor. Praesent quis dolor ut dolor euismod luctus. Nunc leo arcu, ultricies non ligula at, consequat pharetra ante. Nam id bibendum enim, a accumsan ligula. Pellentesque facilisis, tellus ac dignissim hendrerit, metus enim fermentum massa, et egestas turpis est at mi. Proin facilisis ultricies mattis. Morbi libero lacus, tincidunt sed dolor id, lacinia imperdiet lacus. Sed vel nibh et odio porttitor commodo. Quisque ut condimentum ligula. Cras non augue luctus, volutpat nibh vitae, tincidunt ipsum. Nunc et risus ante. Donec sit amet cursus nisi. Praesent rutrum non velit eget tristique. Sed a leo at eros porta mollis. Pellentesque ut interdum purus. Nunc gravida sem odio, vel feugiat ex suscipit id. Sed rutrum metus nec erat bibendum venenatis. Sed eget porttitor mauris, id dignissim sem. Etiam ac ipsum quis leo placerat pulvinar eu id augue. Cras tincidunt tellus euismod, venenatis dolor nec, maximus dolor. Sed purus libero, suscipit eu ex eget, tempus varius nunc. Fusce at lorem venenatis, pellentesque purus eu, posuere leo. Sed ultricies sem volutpat euismod varius. Mauris ultrices quam consequat scelerisque egestas. Phasellus congue velit vitae velit elementum, at feugiat dolor vulputate. Maecenas cursus rutrum nulla ac venenatis. Aenean sit amet lacus cursus, pharetra sem at, blandit sem. Curabitur quis nisi nec risus pulvinar pulvinar. Sed nec suscipit diam, ut blandit velit. Nullam blandit dignissim fringilla. Proin eget lobortis nisi, sit amet pharetra purus. Phasellus vitae pellentesque nulla. Proin sed pulvinar dolor. Curabitur sollicitudin tincidunt hendrerit. Mauris turpis ante, placerat vel volutpat sed, facilisis non sapien. Curabitur malesuada turpis in tellus cursus maximus. Ut eros purus, faucibus non volutpat vel, tincidunt quis nulla. Sed sed augue semper, aliquet tortor id, lacinia elit. Praesent in imperdiet diam. Nam ullamcorper augue eu enim interdum ultrices vel ac eros. Maecenas tristique metus vel velit posuere consequat.

Code:

<link href="https://www.aht.li/3228487/f3.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Crimson+Text" rel="stylesheet"><div class="fiche3-kayl"><h3 class="fiche3-kayl-block1">« Une citation » ou un Ft Gens</h3></div><h1 class="fiche3-kayl-block2">TITRE</h1><div class="fiche3-kayl-triangle"></div><p class="fiche3-kayl-block3">TEXTE</p><div class="kayl-copyright">(c) Kayl</div>

Code:

<link href="https://www.aht.li/3228589/f8.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Cinzel|Karla" rel="stylesheet"><img src="https://image.noelshack.com/fichiers/2018/20/1/1526298061-green-background.png" class="fiche8-kayl" /><div class="fiche8-kayl"><h1>TITRE</h1><p>TEXTE</p></div><div class="kayl-copyright">(c) Kayl</div>

Code:

<link href="https://www.aht.li/3228637/f9.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Alike|Anton" rel="stylesheet"><div class="fiche9-kayl-block1"><h1>TITRE</h1></div><div class="fiche9-kayl-block2"><p>TEXTE</p></div><div class="kayl-copyright">(c) Kayl</div>