diff --git a/Style/add.css b/Style/add.css new file mode 100644 index 0000000..9826033 --- /dev/null +++ b/Style/add.css @@ -0,0 +1,116 @@ +* { box-sizing:border-box; } + +/* basic stylings ------------------------------------------ */ +body { background:url(https://scotch.io/wp-content/uploads/2014/07/61.jpg); } +.container { + font-family:'Roboto'; + width:600px; + margin:30px auto 0; + display:block; + background:#FFF; + padding:10px 50px 50px; +} +h2 { + text-align:center; + margin-bottom:50px; +} +h2 small { + font-weight:normal; + color:#888; + display:block; +} +.footer { text-align:center; } +.footer a { color:#53B2C8; } + +/* form starting stylings ------------------------------- */ +.group { + position:relative; + margin-bottom:45px; +} +input { + font-size:18px; + padding:10px 10px 10px 5px; + display:block; + width:300px; + border:none; + border-bottom:1px solid #757575; +} +input:focus { outline:none; } + +/* LABEL ======================================= */ +label { + color:#999; + font-size:18px; + font-weight:normal; + position:absolute; + pointer-events:none; + left:5px; + top:10px; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; +} + +/* active state */ +input:focus ~ label, input:valid ~ label { + top:-20px; + font-size:14px; + color:#5264AE; +} + +/* BOTTOM BARS ================================= */ +.bar { position:relative; display:block; width:300px; } +.bar:before, .bar:after { + content:''; + height:2px; + width:0; + bottom:1px; + position:absolute; + background:#5264AE; + transition:0.2s ease all; + -moz-transition:0.2s ease all; + -webkit-transition:0.2s ease all; +} +.bar:before { + left:50%; +} +.bar:after { + right:50%; +} + +/* active state */ +input:focus ~ .bar:before, input:focus ~ .bar:after { + width:50%; +} + +/* HIGHLIGHTER ================================== */ +.highlight { + position:absolute; + height:60%; + width:100px; + top:25%; + left:0; + pointer-events:none; + opacity:0.5; +} + +/* active state */ +input:focus ~ .highlight { + -webkit-animation:inputHighlighter 0.3s ease; + -moz-animation:inputHighlighter 0.3s ease; + animation:inputHighlighter 0.3s ease; +} + +/* ANIMATIONS ================ */ +@-webkit-keyframes inputHighlighter { + from { background:#5264AE; } + to { width:0; background:transparent; } +} +@-moz-keyframes inputHighlighter { + from { background:#5264AE; } + to { width:0; background:transparent; } +} +@keyframes inputHighlighter { + from { background:#5264AE; } + to { width:0; background:transparent; } +} diff --git a/Vues/addList.php b/Vues/addList.php index ba7c639..1ae9219 100644 --- a/Vues/addList.php +++ b/Vues/addList.php @@ -3,25 +3,31 @@ Ajouter une Liste - + - + + - +
+ +

Ajouter une liste

+ +
+ +
+ + + + +
+
+ +

Privée ?

+ -

Ajouter

+ +
- -
-
- Liste privee ? - -
-
- \ No newline at end of file diff --git a/index.php b/index.php index 05f46d7..e22d879 100644 --- a/index.php +++ b/index.php @@ -8,7 +8,7 @@ require_once('config/Autoload.php'); Autoload::charger(); try{ - require("Vues/accueil.php"); + require("Vues/addList.php"); } catch( PDOException $Exception ) { echo 'erreur';