ODE/Lightbox-Remastered
ODE/Lightbox-Remastered
1
1
Fork 0
Code Pull Requests Releases 1 Activity

Compare commits

base: ODE:d8da2a80106613b14b802d982cbda67b33b8f083
Branches Tags
ODE:master
ODE:pages
ODE:frame-only
ODE:1.0.0
ODE:0.1
..
compare: ODE:50060c76ad6855cb30c5784848034468c41b95ac
Branches Tags
ODE:pages
ODE:frame-only
ODE:master
ODE:1.0.0
ODE:0.1

No commits in common. "d8da2a80106613b14b802d982cbda67b33b8f083" and "50060c76ad6855cb30c5784848034468c41b95ac" have entirely different histories.
d8da2a8010 ... 50060c76ad

3 changed files with 14 additions and 33 deletions
Show Stats Expand all files Collapse all files

21
README.md
View File

@ -6,28 +6,21 @@ Ce project est une maquette interactive visant à mieux définir le publicportem
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. 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.
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="YzNjwjB" data-preview="true" data-user="SimonPriet" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/SimonPriet/pen/YzNjwjB">
Lightbox Remastered demo</a> by Simon (<a href="https://codepen.io/SimonPriet">@SimonPriet</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
## Galeries d'images ## Galeries d'images
![Exemple de lightbox avec beaucoup de hauteur disponible](./public/readme_assets/Lightbox%201.png) ![Exemple de lightbox avec beaucoup de hauteur disponible](./public/Lightbox%201.png)
![Exemple de lightbox avec pas mal de hauteur disponible](./public/readme_assets/Lightbox%202.png) ![Exemple de lightbox avec pas mal de hauteur disponible](./public/Lightbox%202.png)
![Exemple de lightbox avec suffisamment de hauteur disponible](./public/readme_assets/Lightbox%203.png) ![Exemple de lightbox avec suffisamment de hauteur disponible](./public/Lightbox%203.png)
![Exemple de lightbox avec peu de hauteur disponible](./public/readme_assets/Lightbox%204.png) ![Exemple de lightbox avec peu de hauteur disponible](./public/Lightbox%204.png)
![Exemple de lightbox avec étroitement peu de hauteur disponible](./public/readme_assets/Lightbox%205.png) ![Exemple de lightbox avec étroitement peu de hauteur disponible](./public/Lightbox%205.png)
![Exemple de lightbox avec insuffisamment de hauteur disponible](./public/readme_assets/Lightbox%206.png) ![Exemple de lightbox avec insuffisamment de hauteur disponible](./public/Lightbox%206.png)
* Polices : Microsoft, Apple, Graig Rozynski, Purushoth Kumar Guttula * Polices : Microsoft, Apple
* Conception : Open Digital Education * Conception : Open Digital Education

13
public/index.html
View File

@ -16,11 +16,11 @@
<div class="lb-container"> <div class="lb-container">
<div class="lb-header"> <div class="lb-header">
<h2>Importer des documents</h2> <h2>Importer des documents</h2>
<a href="#" class="close-button"><img src="./assets/closebutton.png"></a> <a href="" class="close-button"><img src="./assets/closebutton.png"></a>
<div id="tabs-container"> <div id="tabs-container">
<span></span> <span></span>
<span><a href="#">Intégrer un contenu externe</a></span> <span><a href="">Intégrer un contenu externe</a></span>
<span><a href="#">Filmer depuis la caméra</a></span> <span><a href="">Filmer depuis la caméra</a></span>
<span class="active"><a href="">Parcourir son Espace Doc</a></span> <span class="active"><a href="">Parcourir son Espace Doc</a></span>
<span></span> <span></span>
</div> </div>
@ -31,9 +31,10 @@
<button>🔍</button> <button>🔍</button>
</div> </div>
<div id="doc-file-viewmode"> <div id="doc-file-viewmode">
<a href="#" class="active"></a> Vue :
<a href="#"></a> <a href="" class="active">Mosaïque</a>
<a href="#"></a> <a href="">Grille</a>
<a href="">Liste</a>
</div> </div>
<div id="doc-file-nav" class="list-nav scrollable"> <div id="doc-file-nav" class="list-nav scrollable">
<ul class=""> <ul class="">

13
public/main.css
View File

@ -184,19 +184,6 @@ input {
font-family: Calibri, Mallanna, "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;