diff options
| -rw-r--r-- | index.html | 52 | ||||
| -rw-r--r-- | index.xhtml | 59 | ||||
| -rw-r--r-- | style.css | 81 |
3 files changed, 107 insertions, 85 deletions
diff --git a/index.html b/index.html deleted file mode 100644 index d127f0e..0000000 --- a/index.html +++ /dev/null @@ -1,52 +0,0 @@ -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> - <head> - <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/> - <link rel="stylesheet" type="text/css" href="style.css"/> - <title>MaiLÖVE</title> - </head> - <body> - - <div id="bandeau"> - <center><img src="mailove.png" alt="À finir"/></center> - </div> - <br/> - - <aside> - <nav> - <ul> - <li><a href="index.html">Accueil</a></li> - <li><a href="installation.html">Installation</a></li> - <li><a href="aide.html">Aide</a></li> - </ul> - </nav> - <br/> - <div id="screenshots"> - Images IG - </div> - </aside> - - - <section> - <br/> - <article> - <header>Présentation:</header><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet tellus at massa laoreet tempor. Duis aliquam elit ornare imperdiet lacinia. In ac est sit amet neque mollis feugiat. Nullam auctor convallis ante in congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin a luctus sapien. Suspendisse id molestie lectus. Nam euismod arcu porta libero pretium, at porttitor nibh mattis. Nulla facilisi. Praesent eget sem at nulla vehicula mattis. Sed est leo, convallis ac libero a, gravida bibendum mauris. Duis tempor velit vitae convallis tempus. Sed et tortor pellentesque, tempus libero a, tincidunt purus. Integer vehicula, massa in vehicula hendrerit, mi elit congue dui, a feugiat nunc nisi ut dolor.</p><div id="time">Publié le <time datetime="2014-03-16" pubdate>16 mars 2014</time></div> - </article><br/> - <article> - <header>Test:</header><p> Cras at massa convallis, dapibus arcu vestibulum, tincidunt mauris. Morbi scelerisque porta nunc. Morbi et tincidunt lectus, vel consectetur nibh. Nullam gravida, leo ut tempus aliquet, lorem sapien scelerisque eros, at tristique lorem lorem et urna. Pellentesque non iaculis nisl. Maecenas non est a tortor eleifend iaculis. Donec commodo felis ut scelerisque hendrerit. Ut et massa rhoncus, interdum massa pellentesque, rhoncus enim. Phasellus nec congue lacus. Duis eget fringilla mi.</p><div id="time">Publié le <time datetime="2014-03-16" pubdate>16 mars 2014</time></div> - </article><br/> - <article> - <header>Miaou:</header><p> Donec imperdiet libero vel accumsan congue. Integer elit velit, pellentesque vitae iaculis ut, posuere ut dui. Suspendisse potenti. Donec sollicitudin, lectus eget rutrum iaculis, lectus lorem cursus lectus, sed condimentum turpis risus non enim. Praesent purus nisl, viverra sed facilisis eget, tempus in nisl. Nunc a diam sit amet odio dictum pretium. Donec eleifend sapien nulla, id lobortis felis ultricies ac. Mauris malesuada dapibus vestibulum. Integer rhoncus, risus egestas euismod lobortis, orci augue lobortis leo, posuere volutpat magna massa eu dolor. In fringilla scelerisque justo, vel vehicula sem hendrerit vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p><div id="time">Publié le <time datetime="2014-03-16" pubdate>16 mars 2014</time></div> - </article><br/> - </section> - <br/> - <br/> - <footer> - <center>Un jeu par <a href="http://piernov.org">piernov</a><br/>Lui payer une bière ? <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> - <input type="hidden" name="cmd" value="_s-xclick"> - <input type="hidden" name="hosted_button_id" value="4B4WWYAYE35WC"> - <input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !"> - <img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1"> -</form></center> - </footer> - </body> -</html> diff --git a/index.xhtml b/index.xhtml new file mode 100644 index 0000000..8e3e6e5 --- /dev/null +++ b/index.xhtml @@ -0,0 +1,59 @@ +<?xml version="1.0" encoding="UTF-8"?> +<?xml-stylesheet type="text/css" href="style.css"?> + +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> + <head> + <title>MaiLÖVE</title> + </head> + <body> + + <header id="bandeau"> + <img src="mailove.png" alt="À finir"/> + </header> + + <aside> + <nav> + <ul> + <li><a href="index.html">Accueil</a></li> + <li><a href="installation.html">Installation</a></li> + <li><a href="aide.html">Aide</a></li> + </ul> + </nav> + + <div id="screenshots"> + Images IG + </div> + </aside> + + <section> + <article> + <header><h2>Présentation:</h2></header> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet tellus at massa laoreet tempor. Duis aliquam elit ornare imperdiet lacinia. In ac est sit amet neque mollis feugiat. Nullam auctor convallis ante in congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin a luctus sapien. Suspendisse id molestie lectus. Nam euismod arcu porta libero pretium, at porttitor nibh mattis. Nulla facilisi. Praesent eget sem at nulla vehicula mattis. Sed est leo, convallis ac libero a, gravida bibendum mauris. Duis tempor velit vitae convallis tempus. Sed et tortor pellentesque, tempus libero a, tincidunt purus. Integer vehicula, massa in vehicula hendrerit, mi elit congue dui, a feugiat nunc nisi ut dolor.</p> + <footer>Publié le <time datetime="2014-03-16" pubdate="true">16 mars 2014</time></footer> + </article> + <article> + <header><h2>Test:</h2></header> + <p> Cras at massa convallis, dapibus arcu vestibulum, tincidunt mauris. Morbi scelerisque porta nunc. Morbi et tincidunt lectus, vel consectetur nibh. Nullam gravida, leo ut tempus aliquet, lorem sapien scelerisque eros, at tristique lorem lorem et urna. Pellentesque non iaculis nisl. Maecenas non est a tortor eleifend iaculis. Donec commodo felis ut scelerisque hendrerit. Ut et massa rhoncus, interdum massa pellentesque, rhoncus enim. Phasellus nec congue lacus. Duis eget fringilla mi.</p> + <footer>Publié le <time datetime="2014-03-16" pubdate="true">16 mars 2014</time></footer> + </article> + <article> + <header><h2>Miaou:</h2></header> + <p> Donec imperdiet libero vel accumsan congue. Integer elit velit, pellentesque vitae iaculis ut, posuere ut dui. Suspendisse potenti. Donec sollicitudin, lectus eget rutrum iaculis, lectus lorem cursus lectus, sed condimentum turpis risus non enim. Praesent purus nisl, viverra sed facilisis eget, tempus in nisl. Nunc a diam sit amet odio dictum pretium. Donec eleifend sapien nulla, id lobortis felis ultricies ac. Mauris malesuada dapibus vestibulum. Integer rhoncus, risus egestas euismod lobortis, orci augue lobortis leo, posuere volutpat magna massa eu dolor. In fringilla scelerisque justo, vel vehicula sem hendrerit vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> + <footer>Publié le <time datetime="2014-03-16" pubdate="true">16 mars 2014</time></footer> + </article> + </section> + + <footer> + <p>Un jeu par <a href="http://piernov.org">piernov</a><br/> + Lui payer une bière ? + </p> + <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> + <input type="hidden" name="cmd" value="_s-xclick" /> + <input type="hidden" name="hosted_button_id" value="4B4WWYAYE35WC" /> + <input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_donate_LG.gif" style="border: 0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !" /> + <img alt="" style="border: 0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1" /> + </form> + </footer> + </body> +</html> @@ -3,63 +3,78 @@ body{ color: #FF69B4; } - -header{ - font-size: 1.8em; - text-decoration: underline; - color: #FE2FA5; -} - -div#bandeau{ - margin-left: 20em; - width: 70%; - height: 6em; - border: solid black 1px; - border-radius: 1em; +body>header +{ + margin-left: 20em; + width: 70%; + height: 6em; + border: solid black 1px; + border-radius: 1em; + text-align:center; } aside{ - position: fixed; - float: left; - width: 13em; + position: fixed; + float: left; + width: 13em; } nav{ - width: 13em; - border: solid black 1px; + width: 13em; + border: solid black 1px; border-radius: 1em; - padding: 0.5em; + padding: 0.5em; } -div#screenshots{ +div#screenshots +{ width: 13em; border: solid black 1px; border-radius: 0.5em; padding: 0.25em; + margin-top: 1em; } -section{ - margin-left: 15em; - } +section +{ + margin: 2em 0 0 15em; +} -article{ +article +{ border: solid black 1px; border-radius: 1em; - margin-left: 2em; - margin-right: 2em; + margin: 1em 2em; padding: 1em; } -footer{ - margin-left: 20%; - margin-right: 20%; +article>header +{ + text-decoration: underline; + color: #FE2FA5; +} + +article>header>h2 +{ + margin: 0; +} + +article>footer +{ + font-size: 0.8em; + text-align: right; +} + +body>footer +{ + text-align: center; + margin: 1em 20% 0 17em; border: solid black 1px; border-radius: 2em; color: black; } -div#time{ - font-size:.8em; - text-align: right; +body>footer>p +{ + margin: 0 } - |