Celia Sallet
Les conseils du homard
Code Js
var conseils = [
"Conseil N°1: N'essaie pas de changer pour plaire aux autres",
"Conseil N°2: Aie plus confiance en toi",
"Conseil N°3: Les erreurs que tu vas faire t'aideront à devenir une meilleure personne",
"Conseil N°4: N'écoute pas ceux qui essaieront de te décourager",
"Conseil N°5: Tu ne seras pas forever alone avec 101 chats plus tard",
"Conseil N°6: Sortir de ta zone de confort ne te tuera pas",
"Conseil N°7: Trouve le courage de dire ce que tu penses vraiment à ceux que tu aimes",
"Conseil N°8: Abuse moins des mauvaises mais bonnes choses",
"Conseil N°9: N'abandonne jamais ton passe-temps favori",
"Conseil N°10: Tu dois échouer plusieurs fois avant de pouvoir enfin réussir",
"Conseil N°11: Iel ne te méritait pas, de toute façon",
"Conseil N°12: Ose dire non plus souvent",
"Conseil N°13: Tu es responsable de ton propre bonheur",
"Conseil N°14: Écoute plus souvent les conseils de tes aînés",
"Conseil N°15: Profite encore plus de ta jeunesse",
"Conseil N°16: Ne dépense pas ton argent dans des objets inutiles",
"Conseil N°17: Prends des cours de cuisine/danse/chant/langues",
"Conseil N°18: Vis dans le présent et non dans le passé",
"Conseil N°19: Sors moins et lis plus de livres",
"Conseil N°20: Tu vas finir par t'en sortir",
];
var conseil = conseils[Math.floor(Math.random() * conseils.length)];
console.log(conseil);
document.getElementById('conseil').innerHTML = conseil;
document.addEventListener('click',peche);
function peche (){
window.print()
}
Code Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
</style>
<link rel="stylesheet" href="styles.css">
<title>Les conseils du homard</title>
</head>
<body>
<section>
<header><h1><span>Les conseils du homard</span></h1>
<h3><span>Choisis ton homard et pêche-le ! </span></h3></header>
<div><img id="homard"src="homard.png" alt="homard"></div>
<div id="conseil"> </div>
</section>
<script src="content.js"></script>
</body>
</html>
Code Css
@font-face {
font-family: 'lack';
src: url('lack-line-regular-webfont.woff2') format('woff2'),
url('lack-line-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html, body{
width: 100%;
height: 100%;
}
body{
background-image: url('gifff.png');
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
font-family: 'Raleway';
font-size: 30px;
margin: -5% 0% 0% 0.5%;
padding-right: 0%;
}
h1{
font-family: 'lack';
color: white;
font-size: 60px;
padding-top: 3%;
margin-bottom: 2%;
padding-bottom: 0%;
font-weight: lighter;
}
h3{
font-family: 'Raleway', white;
color: white;
font-weight: 600;
font-style: italic;
font-weight: lighter;
margin-top: -2%;
padding-right: 1%;
}
@media print{
@page{
size:297mm 420mm;
background-color: black;
}
section{
border:0;
width:297mm;
height:420mm;
background-color: black;
}
h1{
display: none;
}
#homard{
margin-top:10%;
width: 80%;
height: auto;
margin-left: 10%;
margin-top: 5%;
}
h3{
opacity: 0%;
}
#conseil{
margin-top: 5%;
font-family: 'lack';
font-size: 70px;
text-align: center;
margin-bottom: 0%;
}
}
@media screen{
#homard{
display: none;
}
#conseil{
display: none;
}
header{
margin:-10% 0% 3% 3%;
display: inline-block;
padding-top: 3%;
margin-top: -3%;
border-radius: 10px;
}
}
Recueil de poèmes érotique
Code Html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ether2html</title>
<!-- UNCOMMENT THE LINE BELOW IF YOU WANT TO START YOUR STYLES FROM SCRATCH, WITHOUT DEFAULT ONES FROM THE BROWSER -->
<!-- <link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet"> -->
<!-- CHANGE THE URL OF YOUR CSS PAD BELOW -->
<link href="https://pads.erg.be/p/stylescss/export/txt" rel="stylesheet" text="text/css">
<!-- PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE -->
<!-- <script src="js/showdown.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script type="text/javascript" charset="utf-8">
let $padContent;
function insertData(data) {
let converter = new showdown.Converter();
let html = converter.makeHtml(data);
$padContent.innerHTML = html;
}
function insertPagedJS(){
let $script = document.createElement('script');
// PLEASE NOTE THAT YOU CAN ALSO DOWNLOAD THE LIBRARIES FOR QUICKER OFFLINE USAGE
// $script.setAttribute('src', 'js/paged.polyfill.js');
$script.setAttribute('src', 'https://unpkg.com/pagedjs/dist/paged.polyfill.js');
document.querySelector('head').appendChild($script);
}
window.addEventListener('DOMContentLoaded', function(){
$padContent = document.getElementById('pad-content');
let request = new URL($padContent.getAttribute('data-md'));
fetch(request, {mode: 'cors'}).then(response => response.text()).then(data => {
insertData(data);
insertPagedJS();
});
});
</script>
<!-- This is the default stylesheet of paged.js -->
<style type="text/css" media="screen">:root{--color-background:whitesmoke;--color-pageBox:#666;--color-paper:white;--color-marginBox:transparent}@media screen{body{background-color:var(--color-background)}.pagedjs_pages{display:flex;width:calc(var(--pagedjs-width) * 2);flex:0;flex-wrap:wrap;margin:0 auto}.pagedjs_page{background-color:var(--color-paper);box-shadow:0 0 0 1px var(--color-pageBox);margin:0;flex-shrink:0;flex-grow:0;margin-top:10mm}.pagedjs_first_page{margin-left:var(--pagedjs-width)}.pagedjs_page:last-of-type{margin-bottom:10mm}.pagedjs_margin-bottom,.pagedjs_margin-bottom-center,.pagedjs_margin-bottom-left,.pagedjs_margin-bottom-left-corner-holder,.pagedjs_margin-bottom-right,.pagedjs_margin-bottom-right-corner-holder,.pagedjs_margin-left,.pagedjs_margin-left-bottom,.pagedjs_margin-left-middle,.pagedjs_margin-left-top,.pagedjs_margin-right,.pagedjs_margin-right-bottom,.pagedjs_margin-right-middle,.pagedjs_margin-right-top,.pagedjs_margin-top,.pagedjs_margin-top-center,.pagedjs_margin-top-left,.pagedjs_margin-top-left-corner-holder,.pagedjs_margin-top-right,.pagedjs_margin-top-right-corner-holder{box-shadow:0 0 0 1px inset var(--color-marginBox)}}</style>
<style type="text/css">
@font-face {
font-family: "fesse";
src: url(Typefesse_Pleine.woff) format("woff");
src: url(Typefesse_Pleine.woff2) format("woff2");
}
@font-face {
font-family: "compagnon1";
src: url(Compagnon-Roman.woff) format("woff");
src: url(Compagnon-Roman.woff2) format("woff2");
}
</style>
<style>
@media print {
div.pagedjs_page{
background-image: url("https://i.ibb.co/c6d7zm7/page.jpg");
background-size: cover;
}
div.pagedjs_first_page{
background-image: url("https://i.ibb.co/BsZ14Ps/cov.jpg");
background-size: cover;
}
}
</style>
</head>
<body>
<!-- CHANGE THE URL OF YOUR MARKDOWN CONTENT PAD BELOW -->
<div data-md="https://pads.erg.be/p/meremichel/export/txt" id="pad-content"></div>
</body>
</html>
</html>
Link texte : https://pads.erg.be/p/meremichel
Link style : https://pads.erg.be/p/stylescss
