Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
865837a6ac | ||
|
fdbdcae7cd | ||
|
|
0dd3454003 | ||
|
|
5589df8076 | ||
|
|
342d029ae0 | ||
|
|
a8cdb24c94 | ||
|
|
125601885d | ||
|
|
52b1983d1d | ||
|
|
d8da2a8010 | ||
|
|
7fcc418043 | ||
|
|
50060c76ad | ||
|
|
d5d2f6d21e | ||
|
|
cc5d416a2a | ||
|
|
47730caf44 | ||
|
|
3b81fae077 | ||
|
|
c0376bfe13 | ||
|
|
706ff667e7 | ||
|
|
7315d9243a | ||
|
|
2b0ff70520 |
43
README.md
43
README.md
@ -1,26 +1,35 @@
|
|||||||
# Lightbox Remastered
|
# Lightbox Remastered
|
||||||
|
|
||||||
Ceci est un projet sur temps personnel traduisant ma réflexion sur le redesign des lightbox utilisés dans One et Neo. Le travail aboutit sur des maquettes faites main.
|
> This repository serve resources and examples for my [Behance portfolio](https://www.behance.net/gallery/117643605/Lightbox-Remastered).
|
||||||
|
|
||||||
Ce project est une maquette interactive visant à mieux définir le comportement de la boite en fonction de regles de redimentionnements prenant en compte la taille d'affichage ( *Viewport* ), et les éléments contenu dans celle-ci, et adressant les problèmes actuellement rencontré à cet égards. Il sert de support de présentation.
|
This small redesign is a personal take on lightboxes (or popins) used in One and Neo platforms. I felt the current one was in dire need of a rework and a better UI.
|
||||||
|
|
||||||
Par ailleurs, ce project est aussi un exercice de conception visuel et de design original et inspiré des codes de l'application One, visant a stimuler ma créativité et à me former sur les technologies du web. Cette exercice es uniquement présenté sous forme de suggestion.
|
The project itself is a prototype in native HTML/CSS aiming to improve the box behaviour and resizing. I worked into rearranging the content panels via Flexboxs and Grids, and redefined where content could be allowed to scroll or be static. It now takes into account the viewport and the content and try to prioritize what should be resized first. I eliminated existing empties and suboptimal areas and adjusted borders and lines to create a more easy and readable component. The component have a better hierarchical reading from top to bottom and use more width.
|
||||||
|
|
||||||
## Galeries d'images
|
This work allowed me to exercise on interface design and graphical design, inspired to step in the One guidelines, and improve my HTML and CSS skills. This prototype aim to suggest improvements on the product.
|
||||||
|
|
||||||
|
* [Interactive showcase](https://khosmon.gitlab.io/Lightbox-Remastered/)
|
||||||
|
On Firefox, you can use the Adaptative View (`Ctrl / Cmd + Shift + M`) to resize it freely.
|
||||||
|
* [Before/After comparison](https://khosmon.gitlab.io/Lightbox-Remastered/juxtaposejs/)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* Polices : Microsoft, Apple
|
## Gallery
|
||||||
* Conception : Open Digital Education
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
* Fonts: Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula
|
||||||
|
* Originals Design, Assets, Codes, Graphics: Open Digital Education
|
||||||
|
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 176 KiB After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 193 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
200
lightbox-demo.html
Normal file
200
lightbox-demo.html
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link type="text/css" rel="stylesheet" href="./main.css" />
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="fake">
|
||||||
|
<img src="./assets/fake-home.jpg" />
|
||||||
|
</div>
|
||||||
|
<div id="lbmod1" class="lb-mod softener">
|
||||||
|
<div class="lb-container">
|
||||||
|
<div class="lb-header">
|
||||||
|
<h2>Importer des documents</h2>
|
||||||
|
<a href="#" class="close-button"><img src="./assets/closebutton.png"></a>
|
||||||
|
<div id="tabs-container">
|
||||||
|
<span></span>
|
||||||
|
<span><a href="#">Intégrer un contenu externe</a></span>
|
||||||
|
<span><a href="#">Filmer depuis la caméra</a></span>
|
||||||
|
<span class="active"><a href="">Parcourir son Espace Doc</a></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lb-body doc-file-browse">
|
||||||
|
<div id="doc-file-search">
|
||||||
|
<input type="search" placeholder="Rechercher" />
|
||||||
|
<button>🔍</button>
|
||||||
|
</div>
|
||||||
|
<div id="doc-file-viewmode">
|
||||||
|
<a href="#" class="active"></a>
|
||||||
|
<a href="#"></a>
|
||||||
|
<a href="#"></a>
|
||||||
|
</div>
|
||||||
|
<div id="doc-file-nav" class="list-nav scrollable">
|
||||||
|
<ul class="">
|
||||||
|
<li class="active">
|
||||||
|
<span>Mes documents</span>
|
||||||
|
<ul>
|
||||||
|
<li><span>Mes Images</span></li>
|
||||||
|
<li><span>Mes Enregistrements</span></li>
|
||||||
|
<li><span>Mes Vidéos</span></li>
|
||||||
|
<li><span>Mes Devoirs</span></li>
|
||||||
|
<li><span>Mes Archives</span></li>
|
||||||
|
<li><span>Mes Affaires</span></li>
|
||||||
|
<li><span>Mes Mots</span></li>
|
||||||
|
<li><span>Mes Classeurs</span></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><span>Documents partagés</span></li>
|
||||||
|
<li><span>Documents des applis</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="doc-file-dominos" class="domino-container scrollable">
|
||||||
|
<div class="domino-item type-folder">
|
||||||
|
<h4 class="domino-title">Mes Images</h4>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item type-folder">
|
||||||
|
<h4 class="domino-title">Mes Enregistrements</h4>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item type-folder">
|
||||||
|
<h4 class="domino-title">Mes Vidéos</h4>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item type-folder">
|
||||||
|
<h4 class="domino-title">Mes Devoirs</h4>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item type-folder">
|
||||||
|
<h4 class="domino-title">Mes Archives</h4>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item type-folder">
|
||||||
|
<h4 class="domino-title">Mes Affaires</h4>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item type-folder">
|
||||||
|
<h4 class="domino-title">Mes Mots</h4>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item type-folder">
|
||||||
|
<h4 class="domino-title">Mes Classeurs</h3>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item type-file">
|
||||||
|
<h4 class="domino-title">Consigne trigonométrie pythagore<span class="extension"> docs</span></h4>
|
||||||
|
<p class="subtitle">Fichier Word</p>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item type-file">
|
||||||
|
<h4 class="domino-title">Suivit des notes <span class="extension"> XLSX</span></h4>
|
||||||
|
<span class="subtitle">Fichier Excel</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
<div class="domino-item">
|
||||||
|
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h4>
|
||||||
|
<span class="subtitle">Fichier fichier</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lb-footer">
|
||||||
|
<button>Annuler</button>
|
||||||
|
<button>Ok</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,4 +1,6 @@
|
|||||||
/* Faking a real website */
|
/* Faking a real website */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Mallanna&display=swap');
|
||||||
|
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -9,22 +11,20 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: Calibri, "Segoe UI", sans-serif;
|
font-family: Calibri, Mallanna, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
|
||||||
button {
|
button {
|
||||||
font-family: "Chalkboard", Candara, sans-serif;
|
font-family: "Chalkboard", "Comic Neue", "Comic Sans MS", cursive;
|
||||||
letter-spacing: -0.5px;
|
/* letter-spacing: -0.5px; */
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-weight: normal;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The body of the fake website consist of a scrollable big picture */
|
/* The body of the fake website consist of a scrollable big picture */
|
||||||
|
|
||||||
#fake {
|
#fake {
|
||||||
/* background: url(./fake-home.jpg); */
|
/* background: url(./fake-home.jpg); */
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
@ -100,9 +100,10 @@ button {
|
|||||||
|
|
||||||
#tabs-container {
|
#tabs-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-family: "Chalkboard", Candara, sans-serif;
|
font-family: "Chalkboard", "Comic Neue", "Comic Sans MS", cursive;
|
||||||
letter-spacing: -0.5px;
|
/* letter-spacing: -0.5px; */
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabs-container a {
|
#tabs-container a {
|
||||||
@ -171,12 +172,7 @@ button {
|
|||||||
grid-column: central;
|
grid-column: central;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"],
|
input {
|
||||||
input[type="password"],
|
|
||||||
input[type="search"],
|
|
||||||
input[type="email"],
|
|
||||||
input[type="tel"],
|
|
||||||
input[type="date"] {
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid #c9ced5;
|
border: 1px solid #c9ced5;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
@ -185,9 +181,22 @@ input[type="date"] {
|
|||||||
height: 40px;
|
height: 40px;
|
||||||
text-transform: initial;
|
text-transform: initial;
|
||||||
font-size: initial;
|
font-size: initial;
|
||||||
font-family: Calibri, "Segoe UI", sans-serif;
|
font-family: Calibri, Mallanna, "Segoe UI", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#doc-file-viewmode a {
|
||||||
|
background-image: linear-gradient(#fff, #e9ebef);
|
||||||
|
border-radius: 15px;
|
||||||
|
height: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#doc-file-viewmode a.active {
|
||||||
|
background-image: linear-gradient(#3889c1, #43b9e7);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
/* height: 40px; */
|
/* height: 40px; */
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -217,6 +226,7 @@ button {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 3px 9px;
|
padding: 3px 9px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-nav li:not(.active) span:hover {
|
.list-nav li:not(.active) span:hover {
|
||||||
@ -233,6 +243,7 @@ button {
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.domino-item {
|
.domino-item {
|
||||||
@ -248,7 +259,9 @@ button {
|
|||||||
|
|
||||||
.domino-item h4 {
|
.domino-item h4 {
|
||||||
text-transform: initial;
|
text-transform: initial;
|
||||||
font-family: Calibri, "Segoe UI", sans-serif;
|
/* font-family: Calibri, "Segoe UI", sans-serif; */
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 11pt;
|
||||||
letter-spacing: initial;
|
letter-spacing: initial;
|
||||||
margin: 6px 0 ;
|
margin: 6px 0 ;
|
||||||
color: rgb(53, 53, 53);
|
color: rgb(53, 53, 53);
|
||||||
@ -1,124 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<link type="text/css" rel="stylesheet" href="./resize-lightbox-poc.css" />
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Document</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="fake">
|
|
||||||
<img src="./fake-home.jpg" />
|
|
||||||
</div>
|
|
||||||
<div id="lbmod1" class="lb-mod softener">
|
|
||||||
<div class="lb-container">
|
|
||||||
<div class="lb-header">
|
|
||||||
<h2>Importer des documents</h2>
|
|
||||||
<a href="" class="close-button"><img src="./assets/closebutton.png"></a>
|
|
||||||
<div id="tabs-container">
|
|
||||||
<span></span>
|
|
||||||
<span><a href="">Intégrer un contenu externe</a></span>
|
|
||||||
<span><a href="">Filmer depuis la caméra</a></span>
|
|
||||||
<span class="active"><a href="">Parcourir son Espace Doc</a></span>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lb-body doc-file-browse">
|
|
||||||
<div id="doc-file-search">
|
|
||||||
<input type="search" placeholder="Rechercher" />
|
|
||||||
<button>🔍</button>
|
|
||||||
</div>
|
|
||||||
<div id="doc-file-viewmode">
|
|
||||||
Vue :
|
|
||||||
<a href="" class="active">Mosaïque</a>
|
|
||||||
<a href="">Grille</a>
|
|
||||||
<a href="">Liste</a>
|
|
||||||
</div>
|
|
||||||
<div id="doc-file-nav" class="list-nav scrollable">
|
|
||||||
<ul class="">
|
|
||||||
<li class="active">
|
|
||||||
<span>Mes documents</span>
|
|
||||||
<ul>
|
|
||||||
<li><span>Mes Images</span></li>
|
|
||||||
<li><span>Mes Enregistrements</span></li>
|
|
||||||
<li><span>Mes Vidéos</span></li>
|
|
||||||
<li><span>Mes Devoirs</span></li>
|
|
||||||
<li><span>Mes Archives</span></li>
|
|
||||||
<li><span>Mes Affaires</span></li>
|
|
||||||
<li><span>Mes Mots</span></li>
|
|
||||||
<li><span>Mes Classeurs</span></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><span>Documents partagés</span></li>
|
|
||||||
<li><span>Documents des applications</span></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="doc-file-dominos" class="domino-container scrollable">
|
|
||||||
<div class="domino-item type-folder">
|
|
||||||
<h4 class="domino-title">Mes Images</h4>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item type-folder">
|
|
||||||
<h4 class="domino-title">Mes Enregistrements</h4>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item type-folder">
|
|
||||||
<h4 class="domino-title">Mes Vidéos</h4>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item type-folder">
|
|
||||||
<h4 class="domino-title">Mes Devoirs</h4>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item type-folder">
|
|
||||||
<h4 class="domino-title">Mes Archives</h4>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item type-folder">
|
|
||||||
<h4 class="domino-title">Mes Affaires</h4>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item type-folder">
|
|
||||||
<h4 class="domino-title">Mes Mots</h4>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item type-folder">
|
|
||||||
<h4 class="domino-title">Mes Classeurs</h3>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item type-file">
|
|
||||||
<h4 class="domino-title">Consigne trigonométrie pythagore<span class="extension"> docs</span></h3>
|
|
||||||
<p class="subtitle">Fichier Word</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="domino-item type-file">
|
|
||||||
<h4 class="domino-title">Suivit des notes <span class="extension"> XLSX</span></h3>
|
|
||||||
<span class="subtitle">Fichier Excel</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="domino-item">
|
|
||||||
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
|
|
||||||
<span class="subtitle">Fichier fichier</span>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item">
|
|
||||||
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
|
|
||||||
<span class="subtitle">Fichier fichier</span>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item">
|
|
||||||
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
|
|
||||||
<span class="subtitle">Fichier fichier</span>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item">
|
|
||||||
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
|
|
||||||
<span class="subtitle">Fichier fichier</span>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item">
|
|
||||||
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
|
|
||||||
<span class="subtitle">Fichier fichier</span>
|
|
||||||
</div>
|
|
||||||
<div class="domino-item">
|
|
||||||
<h4 class="domino-title">Dummy file <span class="extension"> file</span></h3>
|
|
||||||
<span class="subtitle">Fichier fichier</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lb-footer">
|
|
||||||
<button>Annuler</button>
|
|
||||||
<button>Ok</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user