2019 - https://jobalcony.top
<!doctype html>
<html lang:"fr">
<head>
<meta charset="utf-8">
<title>JO BALCONY</title>
<meta name="description"
content="Bonjour et bienvenue sur le site de Jo Balcony,
en suivant ce lien vous trouverez un gros smiley jaune.
Un clik sur son œil gauche pour accéder à une collection d'idées,
et un clik sur son œil droit pour lui faire tirer la langue et
entrer en communication avec Jo Balcony - à propos du design par exemple." />
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" href="style.css">
<!--<script src="script.js"></script> -->
</head>
<!--------------------------------------
--- schémas généraux des divs du site --
----------------------------------------
----------- en mode ACCUEIL ------------
(I) . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . B
. . . . . . . . _ _ _ _ . . . . . . . . I
. . . . . . _ / \ _ . . . . . . E
. . . . _ / \ _ . . . . N
. . . / ___ ___ \ . . . V
. . ./ / \ / \ \. . . E
. . / ) + ( ) @ ( \ . . N
. ./ \___/ \___/ \. . U
. |#A #B #C | . E
. | | .
. | _ _ _ _ _ _ _ _ _ _ _ _#D | . W
. | | titre | | . E
. .\ \ _ _ _ _ / / . L
. . \ \ | | / / . . C
. . .\ \ _| mail |_ / /. . . O
. . . \ | | / . . . M
. . . .\_ _ \_____/#E _ _/. . . . E
. . . . . .\_ _ _ _/. . . . . .
. . . . . . . .\_ _ _ _/. . . . . . . . (:
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . :)
#A : div mère formant fond et contenant les autres
> hoover sur #C tire la langue #E
> clik sur #B déploie le mode galerie (II) :
------------ en mode GALERIE ------------
(II). . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . .
. .___________________________________. .
. | ._____________. ._______________. | .
. | | titre | | | | .
. | |_#D__________| | | | .
. | ._____________. | | | .
. | | | | | | .
. | | | | cadre | | .
. | | | | | | .
. | | | | | | .
. | | | | de la | | .
. | | liste | | | | .
. | | des | | | | .
. | | trucs | | galerie | | .
. | | | | | | .
. | | | | | | .
. | | | | (i-frame) | | .
. | | | | | | .
. | | | | | | .
. | | | | | | .
. | |_#C__________| |_#B____________| | .
. |_________#A________________________| .
. . . . . . . . . . . . . . . . . . . . .
> clik sur #D déploie la mode accueil (I)
-------------------------------------->
<body>
<!-------------------------------------------------------------------------------
#A : DIVISION MÈRE FORMANT FOND
#A-I > tete = de couleur jaune, elle forme la face du smiley du mode ACCUEIL.
#A-II > fond = de couleur gris clair, il forme le fond du mode GALERIE.
----------------------------------------------------------------------------------->
<div id="contetener" class="t-1s">
<!-------------------------------------------------------------------------------
#B : ŒIL + <> CADRE GALERIE
#B-I > oeil gauche "+"
#B-II > cadre galerie
------------------------------------------------------------------------------------
Cette div change de forme lors du passage du mode accueil au mode galerie.
Cette div contient deux div qui s'affichent ou non selon le mode accueil ou galerie.
-->
<div id="oeil-col" class="t-1s">
<!-- contenu #B-I ----------------------------->
<div id="oeil-col-ouvert" class="t-05s"
onclick="document.getElementById('contetener').id='fondtainer',
document.getElementById('oeil-col').id='cadre-visu',
document.getElementById('oeil-mail').id='cadre-liste',
document.getElementById('oeil-mail-ouvert').id='oeil-mail-ferme',
document.getElementById('oeil-col-ouvert').id='oeil-col-ferme',
document.getElementById('divliste-off').id='divliste-on',
document.getElementById('divimage-off').id='divimage-on',
document.getElementById('bouche-titre').id='courtitre',
document.getElementById('tirlalangue').id='mail'"
onmouseover="document.getElementById('oeil-col-ouvert').style=
'background-color: lime'"
onmouseleave="document.getElementById('oeil-col-ouvert').style=
'background-color: none'">
<h1>+</h1>
</div>
<!-- contenu #B-II ---------------------------->
<div id="divimage-off" class="t-1s">
<iframe id="frame" src="" name="framax" title="Jo Balcony's gallery" >
<p>Your browser does not support iframes.
Better find another computer, sorry.</p>
</iframe>
</div>
</div>
<!-------------------------------------------------------------------------------
#C : ŒIL @ <> CADRE LISTE TRUCS
#C-I > oeil droit "@"
#C-II > cadre liste collection
----------------------------------------------------------------------------------->
<div id="oeil-mail" class="t-1s">
<!-- contenu #C-I ---------------------------->
<div id="oeil-mail-ouvert" class="t-05s"
onclick="document.getElementById('mail').id='tirlalangue'"
onmouseover="document.getElementById('oeil-mail-ouvert').style=
'background-color:lime'"
onmouseleave="document.getElementById('oeil-mail-ouvert').style=
'background-color:none'">
<h1>@</h1>
</div>
<!-- contenu #C-II ---------------------------->
<div id="divliste-off" class="t-1s">
<div>
<!--------------------------->
<p id="intro">
Bonjour et bienvenue sur le site de Jo Balcony
<a id="apropos" href="a_propos.html" target="framax">(qui ça ?)</a>,
vous trouverez ici une collection d'idées ou de réalisations
plus ou moins abouties mais présentées sans hiérarchie sinon chronologique.
Pour les découvrir vous pouvez cliquer sur les titres ci-dessous.
</p>
<!--------------------------->
<a href="21-01_BON2021.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
BON 2021
</p>
</a>
<a href="20-10_open_space_carton.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Open Space Carton
</p>
</a>
<a href="20-09_tabouret_monoxyle.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Tabouret monoxyle
</p>
</a>
<a href="20-08_abat_jour_de_survie.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Abat-jour de survie
</p>
</a>
<a href="20-04_fagotou.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Fagotou - Édition numérique
</p>
</a>
<a href="20-04_pokezine.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Pokézine / système de feuilletage en gif animé
</p>
</a>
<a href="20-01_BON2020.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
BON 2020
</p>
</a>
<a href="19-10_poignee_pain_sec.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Poignée pain sec
</p>
</a>
<a href="19-09_protege_livre_boite_cereales.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Protège livre en boîte de céréales
</p>
</a>
<a href="19-09_store_en_brindille.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Store en brindille
</p>
</a>
<a href="19-09_chausson_carton.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Chaussons en carton
</p>
</a>
<a href="19-08_peigne_en_bois.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Peigne en bois
</p>
</a>
<a href="19-08_attelle_pour_semelle.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Attelle pour semelle
</p>
</a>
<a href="19-07_chalons_sous_eclairs.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Châlons-sur-Saône-sous-éclairs
</p>
</a>
<a href="19-05_systeme_affichage_mural_scotch_pince_a_linge.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Système d'affichage mural scotch-pince-à-linge
</p>
</a>
<a href="19-05_deux_longues_cuilleres.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Deux longues cuillères
</p>
<a href="19-05_https://jobalconytop.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
https://jobalcony.top
</p>
</a>
<a href="19-04_abat_jour_solitaire.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Abat-jour solitaire
</p>
</a>
<a href="19-04_deux_petites_cuilleres_en_bois.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Deux petites cuillères en bois
</p>
</a>
<a href="19-04_abat_jour_prise_terre.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Abat-jour prise terre
</p>
</a>
<a href="19-03_porte_plume_de_becasse.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Porte-plume de bécasse
</p>
</a>
<a href="19-03_couteau_en_bois.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Couteau en bois
</p>
</a>
<a href="19-03_couteau_a_beurre.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Couteau à beurre en bois
</p>
</a>
<a href="19-03_carnet-temps_A5-v2-17semaines.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Carnet-Temps A5-v2-17semaines
</p>
</a>
<a href="19-02_tretaux_pour_becherel.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Trétaux pour Bécherel
</p>
</a>
<a href="19-01_BON2019.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Bon 2019
</p>
</a>
<a href="18-08_porte_bagages_velo_bois_ficelle.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Porte-bagages bois-ficelle
</p>
</a>
<a href="18-04_lampe_pixar_murale.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Lampe Pixar murale
</p>
</a>
<a href="18-04_table_basse_carree_en_carton.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Table basse carrée en carton
</p>
</a>
<a href="18-04_etagere_haute_en_carton.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Étagère haute en carton
</p>
</a>
<a href="18-04_desserte_a_chaussures_en_carton.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Desserte à chaussures
</p>
</a>
<a href="18-04_meuble_miroir_tiroir.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Meuble miroir-tiroir
</p>
</a>
<a href="18-04_bureau_petit_en_carton.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Petit bureau en carton
</p>
</a>
<a href="18-04_bureau_en_carton.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Bureau en carton
</p>
</a>
<a href="18-04_banquette_tiroir_en_carton.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Banquette en cagettes
</p>
</a>
<a href="18-02_cuillere_infinie.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Cuillère infinie
</p>
</a>
<a href="18-01_BON2018.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Bon 2018
</p>
</a>
<a href="17-10_lot_de_cuilleres_en_bois.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Lot de cuillères en bois
</p>
</a>
<a href="17-09_systeme_affichage_mural_scotch_trombonne.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Système d'affichage mural scotch-trombonne
</p>
</a>
<a href="17-09_systeme_affichage_mural_scotch_aimant.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Système d'affichage mural scotch-aimant
</p>
</a>
<a href="17-06_gif_tournicube.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Gif TourniCube
</p>
</a>
<a href="17-05_cocon_de_survie.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Cocon de survie
</p>
</a>
<a href="17-03_gif_tarte_aux_pommes.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Gif tarte aux pommes
</p>
</a>
<a href="17-02_porte_clefs_mural_en_carton.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Porte-clefs mural en carton
</p>
</a>
<a href="17-02_poubelle_pied.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Poubelle pied
</p>
</a>
<a href="15_le_son_produit_par_la_machine_qui_produit_du_son.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Le son produit par la machine qui produit du son
</p>
</a>
<a href="15_etagere_suspendue.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Double étagère suspendue
</p>
</a>
<a href="12_porte_brosse_a_dent_entaille.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Porte brosse-à-dent-à-entaille
</p>
</a>
<a href="12_table_basse_deux_pots.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Table basse à deux-pots
</p>
</a>
<a href="08_chaise_faisant_de_la_ville_son_pied.html" target="framax">
<p class="lien" onclick="this.style='text-decoration:line-through'">
Chaise faisant de la ville son pied
</p>
</a>
<!--------------------------->
<p id="merci">
MERCI !
</p>
</div>
</div>
</div>
<!-------------------------------------------------------------------------------
#D : TITRE DYNAMIQUE
bouche-titre <-> courtitre
#D-I > "bouche-titre" = bouche contant titre dynamique
#D-II > "courtitre" = div rectangulaire contenant titre dynamique
----------------------------------------------------------------------------------->
<div id="bouche-titre" class="t-1s">
<!--
depuis le mode galerie, cliker sur #D-II "courtitre"
rebascule vers la disposition smiley d'accueil
-->
<a onclick="document.getElementById('fondtainer').id='contetener',
document.getElementById('courtitre').id='bouche-titre',
document.getElementById('cadre-liste').id='oeil-mail',
document.getElementById('cadre-visu').id='oeil-col',
document.getElementById('divimage-on').id='divimage-off',
document.getElementById('divliste-on').id='divliste-off',
document.getElementById('oeil-mail-ferme').id='oeil-mail-ouvert',
document.getElementById('oeil-col-ferme').id='oeil-col-ouvert',
document.getElementById('oeil-col-ouvert').style='background-color: none',
document.getElementById('frame').src=''">
<!-- tout le bordel pour faire bouger les mots du titre
(mais le vrai bordel est dans le css) -->
<div class="messagedefilant">
<div data-text="BALCONY">
<span>BALCONY</span>
</div>
<div id="vertical-jo">
<p id="horizontal-jo">JO</p>
</div>
</div>
<div id="horizontal-balcony">
<p>BALCONY</p>
</div>
</a>
</div>
<!-------------------------------------------------------------------------------
#E : LANGUE CONTACT COURRIEL
#E > s'ettire et affiche @mail onCLIK sur #C = "oeil-mail"
----------------------------------------------------------------------------------->
<div id="mail" class="t-05s">
<h2>
<!-- href="mailto:adresse@mail.fr?subject=blabla&body=blabla"-->
<a href="mailto:info@jobalcony.top
?subject=Pour moi le design c'est ...">INFO@JOBALCONY.TOP</a>
</h2>
</div>
</div>
</body>
</html>
<!--
LISTE DE TRUCS QUE J'AIMERAIS FAIRE PLUS TARD
> faire un curseur "pointeur" propre au site.
> envoyer un lien vers le code source de cette page directe sur le net.
> rassembler les textes dans un fichiers plutôt que dans le html.
> revoir le texte apropos
> proposer une image à l'ouverture de la galerie
-->