<head>
  <!-- Add Sheetsu Web Client script to the head -->
  <script src="//script.sheetsu.com/"></script>
</head>

<body>
  <main>
    <h1>L'intermediaire</h1>
    <h2>Sheetsu</h2>
    <ul id="list"></ul>
    <script>
      function successFunc(data) {
        data.forEach(function(item, i) {
          document.getElementById("list").innerHTML += "<li id="+item.id+" class="+item.wordpress+"><a href=" + item.url + ">" + item.name + "</a></li>";
        });
      }

      function errorFunc(e) {
        console.log(e);
      }
  Sheetsu.read("https://sheetsu.com/apis/v1.0su/0d7cc2c2151a", {}).then(successFunc, errorFunc);
    </script>
  </main>
</body>
/*COULEURS*/
$noir:        rgba(0,0,0,1);
$noirfonce:   rgba(29,31,32,1);
$noiropaque:  rgba(29,31,32,.9);
$rose:        rgba(152,38,114,1);
$bleu:        rgba(128,155,189,1);
$blanc:       rgba(255,255,255,1);
$gris:        rgba(55,55,55,1);
$gris2:       rgba(255,255,255,.8);
$gris3:       rgba(204,204,204,1);
$padding:     20px;

/*TOUS LES ELEMENTS*/
*,*:after,*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  margin: 0px auto;
  width: 640px;
  background: $noir;
  color: $blanc;
  font-size: 1em;
  padding: $padding;
}

main {
  padding: $padding;
  background: $noirfonce;
}

a {
  color: $bleu;
  text-decoration: none;
  transition: all .3s ease-in-out;
}

a:hover,a:active {
  color: $blanc
}

h1 {
  margin: 0;
  padding: 0;
  font-size: 1.4em;
  color: $bleu;
}

h2 {
  margin: 15px 0px;
  font-size: 1.3em;
  font-weight: bold;
  width: 100%;
  color: $rose;
}

h1,h2,h3 {
  font-family: 'Inconsolata', monospace;
}

ul {
  margin: 0;
  padding-left: 16px;
  color: $blanc;
  font-family: arial,'sans-serif';
  line-height: 23px;
}

.wp {
  ::after {
    content: " est un site Wordpress";
    font-weight: bold;
  }
}

.no-wp {
  ::after {
    content: " est un site HTML/CSS";
    font-weight: bold;
  }
}

/*https://lintermediaire.be*/
View Compiled
/*
Le lien "https://sheetsu.com/apis/v1.0su/0d7cc2c2151a" est lié à un document google drive, et génère des données sous une structure de type Json
[
{
id: "1",
name: "linermediaire",
url: "https://lintermediaire.be/",
},
{
id: "2",
name: "La Maison Cauchie",
url: "http://cauchie.be/",
},
{
id: "3",
name: "Toilettage Beethoven",
url: "http://toilettagebeethoven.be/",
},
{
id: "4",
name: "Equinoxe",
url: "https://arbrequinoxe.be/",
},
]

***
Apparence du fichier : https://sheetsu.com/a/t/0d7cc2c2151a
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.