Partagez|

[HTML CSS] Relations #3

Voir le sujet précédent Voir le sujet suivant Aller en bas

avatar

I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 20

MessageSujet: [HTML CSS] Relations #3 Ven 16 Mai - 23:08

FIRST VERSION
InfosInfosInfosInfosInfosInfos
Nom Prénom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mauris dui, semper et hendrerit at, fringilla non erat. Donec a scelerisque turpis. Maecenas congue quam et ligula ultricies, ut suscipit orci aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec placerat rutrum varius. Suspendisse potenti. Vestibulum vestibulum metus luctus massa tempus, vel tristique mauris vestibulum. Sed sodales a metus sit amet accumsan. Praesent dapibus pretium mauris. Curabitur ornare eros risus, non bibendum lectus suscipit sed. Nam mauris dolor, iaculis non finibus sed, varius et ipsum.

Cras congue ipsum ac mi bibendum, non pulvinar odio laoreet. Quisque cursus aliquet nisl, at sodales lorem. Morbi eu suscipit sapien. Integer sollicitudin nisl et mauris condimentum, quis accumsan tortor fringilla. Etiam id consequat nulla, a sagittis dui. Integer varius ultricies ultrices. Sed iaculis nunc eget mauris ultricies hendrerit. Quisque a maximus augue, vel sodales enim. Maecenas in aliquam libero, nec interdum elit. Aliquam tristique molestie magna nec fringilla. Vestibulum vel ornare arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur non turpis sed sem venenatis egestas at at erat.
Wanted
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, sem eu egestas volutpat, nisi justo commodo libero, quis eleifend tellus nulla at sapien. Donec vulputate arcu mollis nunc elementum, ut tincidunt ligula eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut condimentum id quam in imperdiet. Suspendisse molestie laoreet dui pharetra gravida. Ut sit amet viverra nunc. Nunc varius eleifend orci, in fermentum libero ullamcorper id. Duis libero lorem, molestie vitae mi ac, mattis euismod orci. Praesent leo dolor, egestas id massa vitae, ultrices dapibus neque. Aliquam iaculis sit amet mi sit amet iaculis. Fusce magna lorem, fermentum sit amet venenatis non, porttitor porttitor nisl. Sed pulvinar fermentum quam at imperdiet. Proin suscipit velit id nisi lacinia, ac tempor tellus consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, sem eu egestas volutpat, nisi justo commodo libero, quis eleifend tellus nulla at sapien. Donec vulputate arcu mollis nunc elementum, ut tincidunt ligula eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut condimentum id quam in imperdiet. Suspendisse molestie laoreet dui pharetra gravida. Ut sit amet viverra nunc. Nunc varius eleifend orci, in fermentum libero ullamcorper id. Duis libero lorem, molestie vitae mi ac, mattis euismod orci. Praesent leo dolor, egestas id massa vitae, ultrices dapibus neque. Aliquam iaculis sit amet mi sit amet iaculis. Fusce magna lorem, fermentum sit amet venenatis non, porttitor porttitor nisl. Sed pulvinar fermentum quam at imperdiet. Proin suscipit velit id nisi lacinia, ac tempor tellus consectetur.
© PYPHI(LIA)


Code:
<link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'><div style="font-size:10px;font-family:arial;color:rgba(0,0,0,0.5);text-align:center;;width:480px;height:auto;background:#F3E2A9;margin:auto;padding:7px 12px;position:relative;overflow:hidden;"><div style="background:url(http://img15.hostingpics.net/pics/285267Photo0036.jpg) center center;opacity:0.2;position:absolute;top:0;left:0;width:510px;height:100%;z-index:0;"></div><div class="infos"><img width="285" src="http://img15.hostingpics.net/pics/707880nuest.gif" style="float:right;position:relative;z-index:1;"/><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><div style="float:right;font-family: 'Parisienne', cursive; font-size:45px; text-align:right; letter-spacing:-2px; margin-top:-15px; text-shadow:1.5px -1px 3px white; height:30px;color:#610B0B; margin-right:10px;position:relative;z-index:1;">Nom Prénom</div></div><br/><div style="display:inline-block; vertical-align:top; background:url(http://img15.hostingpics.net/pics/160762Photo0037.jpg) -80px center;width:67px;height:185px;"></div><div style="width:83%; display:inline-block; vertical-align:top; background:rgba(255,255,255,0.6);overflow:auto; height:170px;padding:7px;text-align:justify;font-family:arial;font-size:12px;position:relative;z-index:1;">Story, little things~</div><span style="font-family:georgia;font-size:34px;height:30px;display:block;text-align:center;margin:10px 0 -28px;color:#610B0B;font-family: 'Parisienne', cursive; ">Wanted</span><div style="width:96%;padding:7px;text-align:justify;background:rgba(255,255,255,0.6);margin:10px auto;"><img src="http://img11.hostingpics.net/pics/585389ys3.png" style="width:55px;float:left;margin:3px;border:double 1px rgba(0,0,0,0.2);"/><div style="height:55px;font-family:arial;font-size:11px;padding:0 5px 2px;overflow:auto;position:relative;z-index:1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, sem eu egestas volutpat, nisi justo commodo libero, quis eleifend tellus nulla at sapien. Donec vulputate arcu mollis nunc elementum, ut tincidunt ligula eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut condimentum id quam in imperdiet. Suspendisse molestie laoreet dui pharetra gravida. Ut sit amet viverra nunc. Nunc varius eleifend orci, in fermentum libero ullamcorper id. Duis libero lorem, molestie vitae mi ac, mattis euismod orci. Praesent leo dolor, egestas id massa vitae, ultrices dapibus neque. Aliquam iaculis sit amet mi sit amet iaculis. Fusce magna lorem, fermentum sit amet venenatis non, porttitor porttitor nisl. Sed pulvinar fermentum quam at imperdiet. Proin suscipit velit id nisi lacinia, ac tempor tellus consectetur. </div><br/><img src="http://img11.hostingpics.net/pics/585389ys3.png" style="width:55px;float:right;margin:3px;border:double 1px rgba(0,0,0,0.2);"/><div style="height:55px;font-family:arial;font-size:11px;padding:0 5px 2px;overflow:auto;position:relative;z-index:1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, sem eu egestas volutpat, nisi justo commodo libero, quis eleifend tellus nulla at sapien. Donec vulputate arcu mollis nunc elementum, ut tincidunt ligula eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut condimentum id quam in imperdiet. Suspendisse molestie laoreet dui pharetra gravida. Ut sit amet viverra nunc. Nunc varius eleifend orci, in fermentum libero ullamcorper id. Duis libero lorem, molestie vitae mi ac, mattis euismod orci. Praesent leo dolor, egestas id massa vitae, ultrices dapibus neque. Aliquam iaculis sit amet mi sit amet iaculis. Fusce magna lorem, fermentum sit amet venenatis non, porttitor porttitor nisl. Sed pulvinar fermentum quam at imperdiet. Proin suscipit velit id nisi lacinia, ac tempor tellus consectetur. </div></div><a href="http://creaphy.olympe.in">© PYPHI(LIA)</a></div>


Dernière édition par Pyphilia le Jeu 1 Oct - 19:51, édité 4 fois
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

avatar

I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 20

MessageSujet: Re: [HTML CSS] Relations #3 Ven 16 Mai - 23:25

SECOND VERSION
InfosInfosInfosInfosInfosInfos
Nom Prénom

Story, little things~
Wanted
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, sem eu egestas volutpat, nisi justo commodo libero, quis eleifend tellus nulla at sapien. Donec vulputate arcu mollis nunc elementum, ut tincidunt ligula eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut condimentum id quam in imperdiet. Suspendisse molestie laoreet dui pharetra gravida. Ut sit amet viverra nunc. Nunc varius eleifend orci, in fermentum libero ullamcorper id. Duis libero lorem, molestie vitae mi ac, mattis euismod orci. Praesent leo dolor, egestas id massa vitae, ultrices dapibus neque. Aliquam iaculis sit amet mi sit amet iaculis. Fusce magna lorem, fermentum sit amet venenatis non, porttitor porttitor nisl. Sed pulvinar fermentum quam at imperdiet. Proin suscipit velit id nisi lacinia, ac tempor tellus consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, sem eu egestas volutpat, nisi justo commodo libero, quis eleifend tellus nulla at sapien. Donec vulputate arcu mollis nunc elementum, ut tincidunt ligula eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut condimentum id quam in imperdiet. Suspendisse molestie laoreet dui pharetra gravida. Ut sit amet viverra nunc. Nunc varius eleifend orci, in fermentum libero ullamcorper id. Duis libero lorem, molestie vitae mi ac, mattis euismod orci. Praesent leo dolor, egestas id massa vitae, ultrices dapibus neque. Aliquam iaculis sit amet mi sit amet iaculis. Fusce magna lorem, fermentum sit amet venenatis non, porttitor porttitor nisl. Sed pulvinar fermentum quam at imperdiet. Proin suscipit velit id nisi lacinia, ac tempor tellus consectetur.
© PYPHI(LIA)


Code:

<link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'><div style="font-size:10px;font-family:arial;color:rgba(0,0,0,0.5);text-align:center;;width:480px;height:auto;background:#ccc;margin:auto;padding:7px 12px;position:relative;overflow:hidden;"><div style="background:url(http://img15.hostingpics.net/pics/286952Photo0037.jpg) center center;opacity:0.2;position:absolute;top:0;left:0;width:510px;height:100%;z-index:0;"></div><div class="infos"><img width="285" src="http://i.imgur.com/jAV3ym2.gif" style="float:right;position:relative;z-index:1;"/><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><span style="display:block;width:37%;background:white;margin:4px 2px;padding:2px;text-align:center;font-family:courier new;text-transform:uppercase;font-size:12px;">Infos</span><div style="float:right;font-family: 'Parisienne', cursive; font-size:45px; text-align:right; letter-spacing:-2px; margin-top:-15px; text-shadow:1.5px -1px 2px white; height:30px;color:black; margin-right:10px;position:relative;z-index:1;">Nom Prénom</div></div><br/><div style="display:inline-block; vertical-align:top; background:url(http://img15.hostingpics.net/pics/323083Photo0036.jpg) -50px 0;width:67px;height:185px;"></div><div style="width:83%; display:inline-block; vertical-align:top; background:rgba(255,255,255,0.6);overflow:auto; height:170px;padding:7px;text-align:justify;font-family:arial;font-size:12px;position:relative;z-index:1;">Story, little things~</div><span style="font-family:georgia;font-size:34px;height:30px;display:block;text-align:center;margin:10px 0 -28px;color:#000;font-family: 'Parisienne', cursive; ">Wanted</span><div style="width:96%;padding:7px;text-align:justify;background:rgba(255,255,255,0.6);margin:10px auto;"><img src="http://img15.hostingpics.net/pics/716353jh4.png" style="width:55px;float:left;margin:3px;border:double 1px rgba(0,0,0,0.2);"/><div style="height:55px;font-family:arial;font-size:11px;padding:0 5px 2px;overflow:auto;position:relative;z-index:1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, sem eu egestas volutpat, nisi justo commodo libero, quis eleifend tellus nulla at sapien. Donec vulputate arcu mollis nunc elementum, ut tincidunt ligula eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut condimentum id quam in imperdiet. Suspendisse molestie laoreet dui pharetra gravida. Ut sit amet viverra nunc. Nunc varius eleifend orci, in fermentum libero ullamcorper id. Duis libero lorem, molestie vitae mi ac, mattis euismod orci. Praesent leo dolor, egestas id massa vitae, ultrices dapibus neque. Aliquam iaculis sit amet mi sit amet iaculis. Fusce magna lorem, fermentum sit amet venenatis non, porttitor porttitor nisl. Sed pulvinar fermentum quam at imperdiet. Proin suscipit velit id nisi lacinia, ac tempor tellus consectetur. </div><br/><img src="http://img15.hostingpics.net/pics/716353jh4.png" style="width:55px;float:right;margin:3px;border:double 1px rgba(0,0,0,0.2);"/><div style="height:55px;font-family:arial;font-size:11px;padding:0 5px 2px;overflow:auto;position:relative;z-index:1;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, sem eu egestas volutpat, nisi justo commodo libero, quis eleifend tellus nulla at sapien. Donec vulputate arcu mollis nunc elementum, ut tincidunt ligula eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut condimentum id quam in imperdiet. Suspendisse molestie laoreet dui pharetra gravida. Ut sit amet viverra nunc. Nunc varius eleifend orci, in fermentum libero ullamcorper id. Duis libero lorem, molestie vitae mi ac, mattis euismod orci. Praesent leo dolor, egestas id massa vitae, ultrices dapibus neque. Aliquam iaculis sit amet mi sit amet iaculis. Fusce magna lorem, fermentum sit amet venenatis non, porttitor porttitor nisl. Sed pulvinar fermentum quam at imperdiet. Proin suscipit velit id nisi lacinia, ac tempor tellus consectetur. </div></div><a href="http://creaphy.olympe.in">© PYPHI(LIA)</a></div>
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[HTML CSS] Relations #3

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Fiche de présentation HTML qui ne veux pas se poster
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» besion d'aide language html lecteur de musique !! (Résolu)
» Xhtml/css: integrer une video avec html

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Essai-Fond-Pyphilia :: Créaphy :: Codages-