Celia Sallet

De Design numérique
Aller à : navigation, rechercher

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

Récupérée de « https://designnumerique.be/w/index.php?title=Celia_Sallet&oldid=3531 »