create nav barre for phone

This commit is contained in:
Tutur33
2023-11-25 23:33:09 +01:00
parent b69e5e88b5
commit 08713671b4
30 changed files with 105 additions and 50 deletions
+1 -1
View File
@@ -53,5 +53,5 @@
"testProviders": [ "testProviders": [
"@japa/preset-adonis/TestsProvider" "@japa/preset-adonis/TestsProvider"
], ],
"lastCompiledAt": "2023-11-24T22:56:20.428Z" "lastCompiledAt": "2023-11-25T22:31:57.991Z"
} }
+2 -2
View File
@@ -2,10 +2,10 @@
"entrypoints": { "entrypoints": {
"index": { "index": {
"css": [ "css": [
"/assets/index.c6bb0e40.css" "/assets/index.f1f9732c.css"
], ],
"js": [ "js": [
"/assets/index.426cec9e.js" "/assets/index.81737fb2.js"
] ]
}, },
"form": { "form": {
-1
View File
@@ -1 +0,0 @@
(()=>{"use strict";var e=document.getElementById("toggle-btn"),t=document.querySelector("body"),o=document.getElementById("text"),d=localStorage.getItem("dark-mode"),a=function(){t.classList.add("dark-mode-theme"),e.classList.add("dark-mode-toggle"),e.style.color="rgb(177, 177, 177)",o.innerHTML="sombre",localStorage.setItem("dark-mode","enabled")};"enabled"===d&&a(),e.onclick=function(){"enabled"===(d=localStorage.getItem("dark-mode"))?(t.classList.remove("dark-mode-theme"),e.classList.remove("dark-mode-toggle"),e.style.color="rgb(83, 83, 83)",o.innerHTML="claire",localStorage.setItem("dark-mode","disabled")):a()}})();
+1
View File
@@ -0,0 +1 @@
(()=>{"use strict";var e=document.getElementById("toggle-btn"),t=document.querySelector("body"),a=document.getElementById("text"),d=document.getElementById("mini-nav"),s=document.getElementById("nav"),l=localStorage.getItem("dark-mode"),o=function(){t.classList.add("dark-mode-theme"),d.classList.add("nav-dark"),s.classList.add("nav-dark"),d.classList.remove("nav-light"),s.classList.remove("nav-light"),e.classList.add("dark-mode-toggle"),e.style.color="rgb(177, 177, 177)",a.innerHTML="sombre",localStorage.setItem("dark-mode","enabled")};"enabled"===l&&o(),e.onclick=function(){"enabled"===(l=localStorage.getItem("dark-mode"))?(t.classList.remove("dark-mode-theme"),d.classList.remove("nav-dark"),s.classList.remove("nav-dark"),d.classList.add("nav-light"),s.classList.add("nav-light"),e.classList.remove("dark-mode-toggle"),e.style.color="rgb(83, 83, 83)",a.innerHTML="claire",localStorage.setItem("dark-mode","disabled")):o()}})();
-1
View File
@@ -1 +0,0 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);*{font-family:Roboto,sans-serif;margin:0;padding:0}html{scroll-behavior:smooth}body{justify-content:space-around;margin:auto;max-width:2500px}.fixed-navbar{backdrop-filter:blur(10px);background-color:hsla(0,0%,100%,.1);border-bottom:1px solid #535353;justify-content:space-between;left:0;padding:0 50px;position:fixed;top:0;width:calc(100% - 100px);z-index:999}.fixed-navbar,.fixed-navbar ul{align-items:center;display:flex}.fixed-navbar ul{height:70px;list-style:none}.fixed-navbar li{color:#535353;font-weight:700;margin:0 10px}.fixed-navbar a{color:#535353;padding:5px 15px;text-decoration:none}.fixed-navbar a:hover{border:1px solid #535353;border-radius:5px;padding:5px 14px}.mini-nav{align-items:center;backdrop-filter:blur(10px);background-color:hsla(0,0%,100%,.1);border-bottom:1px solid #535353;display:none;height:70px;left:0;padding:0 50px;position:fixed;top:0;width:100%;z-index:999}.mini-nav img{height:30px;text-align:center;width:30px}main,section{margin:100px}h1{font-size:40px;margin-bottom:30px}h1,h2{font-weight:700}h2{font-size:28px;margin-bottom:10px}.barre-verticale{border-left:5px solid #5e5e5e;margin-bottom:10px;padding-left:15px}.citation{color:#3d3d3d;font-style:italic}.citation-auth{color:#3d3d3d;margin-bottom:40px}main{display:flex}.main-left{margin-right:40px}.main-right{margin-left:40px;min-width:40%}.div-lien div{align-items:center;background-color:#d8d8d8;border-radius:5px;color:#555;cursor:pointer;display:flex;flex-direction:row;font-weight:700;margin:5px 0;padding:20px 40px;text-align:left;text-decoration:none}.div-lien div:hover{background-color:#b1b1b1}.div-lien a{text-decoration:none}.div-lien img{padding-right:15px;width:50px}@media (max-width:800px){.main-right{display:none}main,section{margin:20px}.fixed-navbar{display:none;flex-direction:column;margin-top:70px}.mini-nav{display:flex}h1{margin-top:80px}}@media (max-width:940px){.fixed-navbar li{margin:0}.fixed-navbar a{padding:5px}}.pp{border-radius:50%;margin:auto;max-width:500px;width:100%}.formContact{background-color:#ffffff28;border:1px solid #ddd;border-radius:5px;margin:0 auto;padding:20px;width:60%}.formContact label{display:block;margin-top:10px}.formContact input[type=email],.formContact input[type=text],.formContact textarea{border:1px solid #ddd;border-radius:5px;margin-top:5px;max-width:calc(100% - 20px);min-width:calc(100% - 20px);padding:10px;width:calc(100% - 20px)}.formContact input[type=submit]{background-color:#333;border:none;border-radius:5px;color:#fff;cursor:pointer;margin-top:10px;padding:10px 20px}.formContact input[type=submit]:hover{background-color:#555}.all_projects{display:flex;flex-wrap:wrap;justify-content:center}.all_projects div{border:2px solid #000;border-radius:10px;height:300px;margin:10px;transition:transform .3s;width:300px}.all_projects div:hover{transform:scale(1.2)}.all_projects img{border-radius:7px;height:100%;width:100%}.btn_theme{background-color:hsla(0,0%,100%,0);border:none;color:#535353;cursor:pointer;display:flex;font-weight:700;padding:5px 15px;text-transform:uppercase}.btn_theme:hover{border:1px solid #535353;border-radius:5px;padding:5px 14px}#text{margin:0 0 0 8px}.dark-mode-theme{background-color:#1c1c1e;color:#fefefe}.dark-mode-theme .fixed-navbar a,.dark-mode-theme .fixed-navbar li,.dark-mode-theme .fixed-navbar ul{color:#b1b1b1}
+1
View File
@@ -0,0 +1 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);*{font-family:Roboto,sans-serif;margin:0;padding:0}html{scroll-behavior:smooth}body{justify-content:space-around;margin:auto;max-width:2500px}.fixed-navbar{backdrop-filter:blur(10px);background-color:hsla(0,0%,100%,.1);border-bottom:1px solid #535353;justify-content:space-between;left:0;padding:0 50px;position:fixed;top:0;width:calc(100% - 100px);z-index:999}.fixed-navbar,.fixed-navbar ul{align-items:center;display:flex}.fixed-navbar ul{height:70px;list-style:none}.fixed-navbar li{color:#535353;font-weight:700;margin:0 10px}.fixed-navbar a{color:#535353;padding:5px 15px;text-decoration:none}.fixed-navbar a:hover{border:1px solid #535353;border-radius:5px;padding:5px 14px}.mini-nav{align-items:center;backdrop-filter:blur(10px);background-color:hsla(0,0%,100%,.1);border-bottom:1px solid #535353;display:none;height:70px;left:0;padding:0 50px;position:fixed;top:0;width:calc(100% - 100px);z-index:999}.mini-nav img{height:30px;text-align:center;width:30px}.depli-nav{background:none;border:none;cursor:pointer}main,section{margin:100px}h1{font-size:40px;margin-bottom:30px}h1,h2{font-weight:700}h2{font-size:28px;margin-bottom:10px}.barre-verticale{border-left:5px solid #5e5e5e;margin-bottom:10px;padding-left:15px}.citation{color:#3d3d3d;font-style:italic}.citation-auth{color:#3d3d3d;margin-bottom:40px}main{display:flex}.main-left{margin-right:40px}.main-right{margin-left:40px;min-width:40%}.div-lien div{align-items:center;background-color:#d8d8d8;border-radius:5px;color:#555;cursor:pointer;display:flex;flex-direction:row;font-weight:700;margin:5px 0;padding:20px 40px;text-align:left;text-decoration:none}.div-lien div:hover{background-color:#b1b1b1}.div-lien a{text-decoration:none}.div-lien img{padding-right:15px;width:50px}@media (max-width:800px){.main-right{display:none}main,section{margin:20px}.fixed-navbar{display:none;flex-direction:column;margin-top:70px}.mini-nav{display:flex}h1{margin-top:80px}.mini-nav{justify-content:space-between}#nav a{padding:5px 15px}#nav a:hover{padding:5px 14px}#nav ul{display:flex;justify-content:space-between;width:300px}.nav-dark{background-color:#1c1c1e}.nav-light{background-color:#fefefe}}@media (max-width:940px){.fixed-navbar li{margin:0}.fixed-navbar a{padding:5px}}.pp{border-radius:50%;margin:auto;max-width:500px;width:100%}.formContact{background-color:#ffffff28;border:1px solid #ddd;border-radius:5px;margin:0 auto;padding:20px;width:60%}.formContact label{display:block;margin-top:10px}.formContact input[type=email],.formContact input[type=text],.formContact textarea{border:1px solid #ddd;border-radius:5px;margin-top:5px;max-width:calc(100% - 20px);min-width:calc(100% - 20px);padding:10px;width:calc(100% - 20px)}.formContact input[type=submit]{background-color:#333;border:none;border-radius:5px;color:#fff;cursor:pointer;margin-top:10px;padding:10px 20px}.formContact input[type=submit]:hover{background-color:#555}.all_projects{display:flex;flex-wrap:wrap;justify-content:center}.all_projects div{border:2px solid #000;border-radius:10px;height:300px;margin:10px;transition:transform .3s;width:300px}.all_projects div:hover{transform:scale(1.2)}.all_projects img{border-radius:7px;height:100%;width:100%}.btn_theme{background-color:hsla(0,0%,100%,0);border:none;color:#535353;cursor:pointer;display:flex;font-weight:700;padding:5px 15px;text-transform:uppercase}.btn_theme:hover{border:1px solid #535353;border-radius:5px;padding:4px 14px}#text{margin:0 0 0 8px}.dark-mode-theme{background-color:#1c1c1e;color:#fefefe}.dark-mode-theme .fixed-navbar a,.dark-mode-theme .fixed-navbar li,.dark-mode-theme .fixed-navbar ul{color:#b1b1b1}
+2 -2
View File
@@ -1,6 +1,6 @@
{ {
"assets/index.css": "/assets/index.c6bb0e40.css", "assets/index.css": "/assets/index.f1f9732c.css",
"assets/index.js": "/assets/index.426cec9e.js", "assets/index.js": "/assets/index.81737fb2.js",
"assets/form.css": "/assets/form.d255c0c6.css", "assets/form.css": "/assets/form.d255c0c6.css",
"assets/form.js": "/assets/form.31d6cfe0.js", "assets/form.js": "/assets/form.31d6cfe0.js",
"assets/compte.css": "/assets/compte.753baa5d.css", "assets/compte.css": "/assets/compte.753baa5d.css",
+4 -4
View File
@@ -9,7 +9,7 @@
@entryPointScripts('index') @entryPointScripts('index')
</head> </head>
<body> <body>
<nav id="nav" class="fixed-navbar"> <nav id="nav" class="fixed-navbar nav-light">
<ul class="nav-lien"> <ul class="nav-lien">
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
@@ -30,9 +30,9 @@
@end @end
</ul> </ul>
</nav> </nav>
<nav class="mini-nav"> <nav class="mini-nav nav-light" id="mini-nav">
<button id="depli-nav"> <button class="depli-nav" id="depli-nav">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"> <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 30 24">
<rect width="30" height="4" rx="2" ry="2" fill="#000" /> <rect width="30" height="4" rx="2" ry="2" fill="#000" />
<rect y="10" width="30" height="4" rx="2" ry="2" fill="#000" /> <rect y="10" width="30" height="4" rx="2" ry="2" fill="#000" />
<rect y="20" width="30" height="4" rx="2" ry="2" fill="#000" /> <rect y="20" width="30" height="4" rx="2" ry="2" fill="#000" />
View File
+1
View File
@@ -0,0 +1 @@
body,button,h1,h2,input,label,li,ul{border:0;margin:0;padding:0}body{background-color:#f5f5f5;color:#333;font-family:Arial,sans-serif;margin:0;padding:0}h1{font-size:24px}h1,ul{margin:20px}ul{background-color:#ffffff28;border-radius:5px;list-style:none;padding:20px}h2{font-size:20px}h2,li{margin-bottom:10px}form{align-items:center;display:flex;flex-direction:column}label{font-weight:700;margin-bottom:5px}input{border:1px solid #ccc;border-radius:5px;margin-bottom:10px;padding:5px}a,button{background-color:#007bff;border:none;border-radius:5px;color:#fff;cursor:pointer;padding:10px 20px;text-decoration:none}a:hover,button:hover{background-color:#0056b3}a{margin:20px}.dark-mode-theme{background-color:#1c1c1e;color:#fefefe}
+16 -16
View File
@@ -2,66 +2,66 @@
"entrypoints": { "entrypoints": {
"index": { "index": {
"css": [ "css": [
"http://localhost:8080/assets/index.css" "/assets/index.f1f9732c.css"
], ],
"js": [ "js": [
"http://localhost:8080/assets/index.js" "/assets/index.81737fb2.js"
] ]
}, },
"form": { "form": {
"css": [ "css": [
"http://localhost:8080/assets/form.css" "/assets/form.d255c0c6.css"
], ],
"js": [ "js": [
"http://localhost:8080/assets/form.js" "/assets/form.31d6cfe0.js"
] ]
}, },
"compte": { "compte": {
"css": [ "css": [
"http://localhost:8080/assets/compte.css" "/assets/compte.753baa5d.css"
], ],
"js": [ "js": [
"http://localhost:8080/assets/compte.js" "/assets/compte.31d6cfe0.js"
] ]
}, },
"terms": { "terms": {
"css": [ "css": [
"http://localhost:8080/assets/terms.css" "/assets/terms.81e389a9.css"
], ],
"js": [ "js": [
"http://localhost:8080/assets/terms.js" "/assets/terms.31d6cfe0.js"
] ]
}, },
"project-nups": { "project-nups": {
"css": [ "css": [
"http://localhost:8080/assets/project-nups.css" "/assets/project-nups.bc10365c.css"
], ],
"js": [ "js": [
"http://localhost:8080/assets/project-nups.js" "/assets/project-nups.31d6cfe0.js"
] ]
}, },
"nups": { "nups": {
"css": [ "css": [
"http://localhost:8080/assets/nups.css" "/assets/nups.1cfcc6cb.css"
], ],
"js": [ "js": [
"http://localhost:8080/assets/nups.js" "/assets/nups.31d6cfe0.js"
] ]
}, },
"my-network-project": { "my-network-project": {
"css": [ "css": [
"http://localhost:8080/assets/my-network-project.css" "/assets/my-network-project.75c72c57.css"
], ],
"js": [ "js": [
"http://localhost:8080/assets/my-network-project.js" "/assets/my-network-project.31d6cfe0.js"
] ]
}, },
"journal": { "journal": {
"css": [ "css": [
"http://localhost:8080/assets/journal.css" "/assets/journal.f506c653.css"
], ],
"js": [ "js": [
"http://localhost:8080/assets/journal.js" "/assets/journal.31d6cfe0.js"
] ]
} }
} }
View File
+1
View File
@@ -0,0 +1 @@
@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900);body{background-color:#1f2029;color:#c4c3ca;font-family:Poppins,sans-serif;font-size:15px;font-weight:300;line-height:1.7;overflow-x:hidden}a{cursor:pointer;transition:all .2s linear}a:hover{text-decoration:none}.link{color:#c4c3ca}.link:hover{color:#ffeba7}p{font-size:14px;font-weight:500;line-height:1.7}h4{font-weight:600}h6 span{font-weight:700;padding:0 20px;text-transform:uppercase}.section{display:block;position:relative;width:100%}.full-height{min-height:100vh}[type=checkbox]:checked,[type=checkbox]:not(:checked){left:-9999px;position:absolute}.checkbox:checked+label,.checkbox:not(:checked)+label{background-color:#ffeba7;border-radius:8px;cursor:pointer;display:block;height:16px;margin:10px auto;padding:0;position:relative;text-align:center;width:60px}.checkbox:checked+label:before,.checkbox:not(:checked)+label:before{background-color:#102770;border-radius:50%;color:#ffeba7;content:"\eb4f";display:block;font-family:unicons;font-size:24px;height:36px;left:-10px;line-height:36px;position:absolute;text-align:center;top:-10px;transition:all .5s ease;width:36px;z-index:20}.checkbox:checked+label:before{transform:translateX(44px) rotate(-270deg)}.card-3d-wrap{height:400px;margin-top:60px;max-width:100%;perspective:800px;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:440px}.card-3d-wrapper{transition:all .6s ease-out}.card-3d-wrapper,.card-back,.card-front{height:100%;left:0;position:absolute;top:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:100%}.card-back,.card-front{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;background-color:#2a2b38;background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg);background-position:bottom;background-repeat:no-repeat;background-size:300%;border-radius:6px}.card-back,.checkbox:checked~.card-3d-wrap .card-3d-wrapper{transform:rotateY(180deg)}.center-wrap{display:block;left:0;padding:0 35px;position:absolute;top:50%;transform:translate3d(0,-50%,35px) perspective(100px);width:100%;z-index:20}.form-group{display:block;margin:0;padding:0;position:relative}.form-style{background-color:#1f2029;border-radius:4px;color:#c4c3ca;font-size:14px;font-weight:500;height:48px;letter-spacing:.5px;line-height:22px;padding:13px 20px 13px 55px;-webkit-transition:all .2s linear;transition:all .2s linear;width:100%}.form-style,.form-style:active,.form-style:focus{border:none;box-shadow:0 4px 8px 0 hsla(0,0%,8%,.2);outline:none}.input-icon{color:#ffeba7;font-size:24px;height:48px;left:18px;line-height:48px;position:absolute;text-align:left;top:0;-webkit-transition:all .2s linear;transition:all .2s linear}.form-group input:-ms-input-placeholder{color:#c4c3ca;opacity:.7;-webkit-transition:all .2s linear;transition:all .2s linear}.form-group input:-moz-placeholder,.form-group input::-moz-placeholder{color:#c4c3ca;opacity:.7;-webkit-transition:all .2s linear;transition:all .2s linear}.form-group input::-webkit-input-placeholder{color:#c4c3ca;opacity:.7;-webkit-transition:all .2s linear;transition:all .2s linear}.form-group input:focus:-ms-input-placeholder{opacity:0;-webkit-transition:all .2s linear;transition:all .2s linear}.form-group input:focus:-moz-placeholder,.form-group input:focus::-moz-placeholder{opacity:0;-webkit-transition:all .2s linear;transition:all .2s linear}.form-group input:focus::-webkit-input-placeholder{opacity:0;-webkit-transition:all .2s linear;transition:all .2s linear}.btn{-ms-flex-pack:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;align-items:center;background-color:#ffeba7;border:none;border-radius:4px;box-shadow:0 8px 24px 0 rgba(255,235,167,.2);color:#102770;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;font-size:13px;font-weight:600;height:44px;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;justify-content:center;letter-spacing:1px;padding:0 30px;text-align:center;text-transform:uppercase;-webkit-transition:all .2s linear;transition:all .2s linear}.btn:active,.btn:focus,.btn:hover{background-color:#102770;box-shadow:0 8px 24px 0 rgba(16,39,112,.2);color:#ffeba7}.logo{display:block;position:absolute;right:30px;top:30px;transition:all .25s linear;z-index:100}.logo img{display:block;height:26px;width:auto}
Binary file not shown.

After

Width:  |  Height:  |  Size: 10 MiB

+1
View File
@@ -0,0 +1 @@
(()=>{"use strict";var e=document.getElementById("toggle-btn"),t=document.querySelector("body"),a=document.getElementById("text"),d=document.getElementById("mini-nav"),s=document.getElementById("nav"),l=localStorage.getItem("dark-mode"),o=function(){t.classList.add("dark-mode-theme"),d.classList.add("nav-dark"),s.classList.add("nav-dark"),d.classList.remove("nav-light"),s.classList.remove("nav-light"),e.classList.add("dark-mode-toggle"),e.style.color="rgb(177, 177, 177)",a.innerHTML="sombre",localStorage.setItem("dark-mode","enabled")};"enabled"===l&&o(),e.onclick=function(){"enabled"===(l=localStorage.getItem("dark-mode"))?(t.classList.remove("dark-mode-theme"),d.classList.remove("nav-dark"),s.classList.remove("nav-dark"),d.classList.add("nav-light"),s.classList.add("nav-light"),e.classList.remove("dark-mode-toggle"),e.style.color="rgb(83, 83, 83)",a.innerHTML="claire",localStorage.setItem("dark-mode","disabled")):o()}})();
+1
View File
@@ -0,0 +1 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);*{font-family:Roboto,sans-serif;margin:0;padding:0}html{scroll-behavior:smooth}body{justify-content:space-around;margin:auto;max-width:2500px}.fixed-navbar{backdrop-filter:blur(10px);background-color:hsla(0,0%,100%,.1);border-bottom:1px solid #535353;justify-content:space-between;left:0;padding:0 50px;position:fixed;top:0;width:calc(100% - 100px);z-index:999}.fixed-navbar,.fixed-navbar ul{align-items:center;display:flex}.fixed-navbar ul{height:70px;list-style:none}.fixed-navbar li{color:#535353;font-weight:700;margin:0 10px}.fixed-navbar a{color:#535353;padding:5px 15px;text-decoration:none}.fixed-navbar a:hover{border:1px solid #535353;border-radius:5px;padding:5px 14px}.mini-nav{align-items:center;backdrop-filter:blur(10px);background-color:hsla(0,0%,100%,.1);border-bottom:1px solid #535353;display:none;height:70px;left:0;padding:0 50px;position:fixed;top:0;width:calc(100% - 100px);z-index:999}.mini-nav img{height:30px;text-align:center;width:30px}.depli-nav{background:none;border:none;cursor:pointer}main,section{margin:100px}h1{font-size:40px;margin-bottom:30px}h1,h2{font-weight:700}h2{font-size:28px;margin-bottom:10px}.barre-verticale{border-left:5px solid #5e5e5e;margin-bottom:10px;padding-left:15px}.citation{color:#3d3d3d;font-style:italic}.citation-auth{color:#3d3d3d;margin-bottom:40px}main{display:flex}.main-left{margin-right:40px}.main-right{margin-left:40px;min-width:40%}.div-lien div{align-items:center;background-color:#d8d8d8;border-radius:5px;color:#555;cursor:pointer;display:flex;flex-direction:row;font-weight:700;margin:5px 0;padding:20px 40px;text-align:left;text-decoration:none}.div-lien div:hover{background-color:#b1b1b1}.div-lien a{text-decoration:none}.div-lien img{padding-right:15px;width:50px}@media (max-width:800px){.main-right{display:none}main,section{margin:20px}.fixed-navbar{display:none;flex-direction:column;margin-top:70px}.mini-nav{display:flex}h1{margin-top:80px}.mini-nav{justify-content:space-between}#nav a{padding:5px 15px}#nav a:hover{padding:5px 14px}#nav ul{display:flex;justify-content:space-between;width:300px}.nav-dark{background-color:#1c1c1e}.nav-light{background-color:#fefefe}}@media (max-width:940px){.fixed-navbar li{margin:0}.fixed-navbar a{padding:5px}}.pp{border-radius:50%;margin:auto;max-width:500px;width:100%}.formContact{background-color:#ffffff28;border:1px solid #ddd;border-radius:5px;margin:0 auto;padding:20px;width:60%}.formContact label{display:block;margin-top:10px}.formContact input[type=email],.formContact input[type=text],.formContact textarea{border:1px solid #ddd;border-radius:5px;margin-top:5px;max-width:calc(100% - 20px);min-width:calc(100% - 20px);padding:10px;width:calc(100% - 20px)}.formContact input[type=submit]{background-color:#333;border:none;border-radius:5px;color:#fff;cursor:pointer;margin-top:10px;padding:10px 20px}.formContact input[type=submit]:hover{background-color:#555}.all_projects{display:flex;flex-wrap:wrap;justify-content:center}.all_projects div{border:2px solid #000;border-radius:10px;height:300px;margin:10px;transition:transform .3s;width:300px}.all_projects div:hover{transform:scale(1.2)}.all_projects img{border-radius:7px;height:100%;width:100%}.btn_theme{background-color:hsla(0,0%,100%,0);border:none;color:#535353;cursor:pointer;display:flex;font-weight:700;padding:5px 15px;text-transform:uppercase}.btn_theme:hover{border:1px solid #535353;border-radius:5px;padding:4px 14px}#text{margin:0 0 0 8px}.dark-mode-theme{background-color:#1c1c1e;color:#fefefe}.dark-mode-theme .fixed-navbar a,.dark-mode-theme .fixed-navbar li,.dark-mode-theme .fixed-navbar ul{color:#b1b1b1}
View File
+1
View File
@@ -0,0 +1 @@
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);*{box-sizing:border-box;font-family:Inter,sans-serif;margin:0;padding:0;scroll-behavior:smooth}body{background-color:#f0f0f0}.btn{align-items:center;background-color:gray;background-image:url("data:image/svg+xml;utf8,<?xml%20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Csvg%20version=%221.1%22%20id=%22Livello_1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%20width=%221296px%22%20height=%22768px%22%20viewBox=%220%200%201296%20768%22%20enable-background=%22new%200%200%201296%20768%22%20xml:space=%22preserve%22%3E%3Cg%3E%3Cpolygon%20fill=%22#8694D1%22%20points=%22766.6,1.2%20-0.2,768%20200.7,768%20967.5,1.2%20%22/%3E%3C/g%3E%3Cg%3E%3Cpolygon%20fill=%22#8694D1%22%20points=%221094.8,1.2%20328,768%20528.9,768%201295.7,1.2%20%22/%3E%3C/g%3E%3C/svg%3E");background-position:-200px;background-repeat:no-repeat;background-size:contain;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);color:#fff;display:flex;font-size:1em;font-weight:700;padding:10px;text-decoration:none;text-transform:uppercase;transition:transform .5s cubic-bezier(.68,-.55,.265,1.55),background-position .8s cubic-bezier(.68,-.55,.265,1.55),box-shadow .5s linear;width:100%}.btn:hover{background-position:-60px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);transform:scale(1.04)}.btn:active{background-position:500px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transform:scale(.5)}.txt_lien{text-align:center;width:100%}.header{align-items:center;background-color:#fff;display:flex;flex-direction:column}.div_big_title{padding:40px;text-align:center}.big_title{color:#000;font-size:40px;font-weight:900}.sous_big_title{font-size:20px}.div_btn{position:fixed}.div_btn,.div_btn_2{align-items:center;display:flex;flex-direction:row;width:100%}.sous_title{color:#000;font-size:17px;font-weight:900;padding:25px;text-align:center}.corps{background-color:#fff;box-shadow:0 0 10px 1px gray;margin:0 150px}.inter_corps,.inter_corps_contact{padding:15px}.def_pv1_1,.def_pv1_2{padding:0 0 25px}.img_1,.img_3{border:none;border-radius:25% 10% 25% 15%;float:right;padding:0 0 15px 15px;width:30%}.img_2{border:none;border-radius:10% 25% 15% 25%;float:left;padding:0 15px 15px 0;width:30%}.id2_pv1,.id2_pv2,.id2_pv3,.id2_pv4{padding:0 0 25px}.img_carte{border:none;border-radius:5%/10%;width:100%}.clear{clear:both}.inter_corps_contact{margin-bottom:30px}.p_contact{padding:10px 0}form{display:flex;flex-direction:column}label{margin-bottom:5px}input[type=email],input[type=text],textarea{border:1px solid #ccc;margin-bottom:10px;padding:10px}.footer{background-color:#33323a;margin-top:50px}.footer2{align-items:center;display:flex;height:100px;padding:0 10%}.sources,.sources a{color:#fff;text-decoration:none}.line{border-bottom:1px solid gray;margin:0 100px}.footer1{height:100px;padding-top:40px;width:100%}.copyrights{color:#fff;float:left;margin-left:10%;text-align:left;width:40%}.conditions_generale{color:#fff;float:right;font-weight:600;margin-right:10%;text-align:right;text-decoration:none;width:40%}.id3_pv1,.id3_pv2,.id3_pv3,.id3_pv4,.id3_pv5{padding:0 0 25px}
+17 -17
View File
@@ -1,19 +1,19 @@
{ {
"assets/index.css": "http://localhost:8080/assets/index.css", "assets/index.css": "/assets/index.f1f9732c.css",
"assets/index.js": "http://localhost:8080/assets/index.js", "assets/index.js": "/assets/index.81737fb2.js",
"assets/form.css": "http://localhost:8080/assets/form.css", "assets/form.css": "/assets/form.d255c0c6.css",
"assets/form.js": "http://localhost:8080/assets/form.js", "assets/form.js": "/assets/form.31d6cfe0.js",
"assets/compte.css": "http://localhost:8080/assets/compte.css", "assets/compte.css": "/assets/compte.753baa5d.css",
"assets/compte.js": "http://localhost:8080/assets/compte.js", "assets/compte.js": "/assets/compte.31d6cfe0.js",
"assets/terms.css": "http://localhost:8080/assets/terms.css", "assets/terms.css": "/assets/terms.81e389a9.css",
"assets/terms.js": "http://localhost:8080/assets/terms.js", "assets/terms.js": "/assets/terms.31d6cfe0.js",
"assets/project-nups.css": "http://localhost:8080/assets/project-nups.css", "assets/project-nups.css": "/assets/project-nups.bc10365c.css",
"assets/project-nups.js": "http://localhost:8080/assets/project-nups.js", "assets/project-nups.js": "/assets/project-nups.31d6cfe0.js",
"assets/nups.css": "http://localhost:8080/assets/nups.css", "assets/nups.css": "/assets/nups.1cfcc6cb.css",
"assets/nups.js": "http://localhost:8080/assets/nups.js", "assets/nups.js": "/assets/nups.31d6cfe0.js",
"assets/my-network-project.css": "http://localhost:8080/assets/my-network-project.css", "assets/my-network-project.css": "/assets/my-network-project.75c72c57.css",
"assets/my-network-project.js": "http://localhost:8080/assets/my-network-project.js", "assets/my-network-project.js": "/assets/my-network-project.31d6cfe0.js",
"assets/journal.css": "http://localhost:8080/assets/journal.css", "assets/journal.css": "/assets/journal.f506c653.css",
"assets/journal.js": "http://localhost:8080/assets/journal.js", "assets/journal.js": "/assets/journal.31d6cfe0.js",
"assets/images/landing.jpg": "http://localhost:8080/assets/images/landing.6d6841c3.jpg" "assets/images/landing.jpg": "/assets/images/landing.6d6841c3.jpg"
} }
@@ -0,0 +1 @@
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);.btn{align-items:center;background-color:#222;background-image:url("data:image/svg+xml;utf8,<?xml%20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Csvg%20version=%221.1%22%20id=%22Livello_1%22%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20x=%220px%22%20y=%220px%22%20width=%221296px%22%20height=%22768px%22%20viewBox=%220%200%201296%20768%22%20enable-background=%22new%200%200%201296%20768%22%20xml:space=%22preserve%22%3E%3Cg%3E%3Cpolygon%20fill=%22#8694D1%22%20points=%22766.6,1.2%20-0.2,768%20200.7,768%20967.5,1.2%20%22/%3E%3C/g%3E%3Cg%3E%3Cpolygon%20fill=%22#8694D1%22%20points=%221094.8,1.2%20328,768%20528.9,768%201295.7,1.2%20%22/%3E%3C/g%3E%3C/svg%3E");background-position:-200px;background-repeat:no-repeat;background-size:contain;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);color:#fff;display:flex;font-family:Inter,sans-serif;font-size:1em;font-weight:700;padding:4px;text-decoration:none;text-transform:uppercase;transition:transform .5s cubic-bezier(.68,-.55,.265,1.55),background-position .8s cubic-bezier(.68,-.55,.265,1.55),box-shadow .5s linear}.btn:hover{background-position:-60px;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);transform:scale(1.04)}.btn:active{background-position:500px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transform:scale(.5)}.txt_lien{padding-right:48px;text-align:center;width:100%}*{margin:0;padding:0;scroll-behavior:smooth}body{background-color:#000}section{-webkit-box-pack:justify;display:flex;flex-direction:column;justify-content:space-between}div{padding:8px}.accueil{-webkit-box-align:center;align-items:center;padding:64px 16px 32px}.profil_img{border-radius:50%;height:100px;width:100px}h1{color:#fff;font-size:20px;margin-left:12px;margin-right:12px;margin-top:15px;max-width:100%}h1,h2{font-family:Inter,sans-serif;font-weight:900}h2{color:hsla(0,0%,100%,.6);font-size:16px;margin-top:8px;padding-left:40px;padding-right:40px}.liste_btn{margin:0 auto;max-width:680px}.lien_img{border-radius:9px;height:48px;width:48px}
+1
View File
@@ -0,0 +1 @@
*{font-family:arial,sans-serif;margin:0;padding:0;user-select:none}img{pointer-events:none}body{background:#202124}a{color:#fff;text-decoration:none}nav a:active,nav a:hover{text-decoration:underline}nav{align-items:center;display:flex;justify-content:right;width:100%}.lien_nav{margin:10px;padding:5px}.img_nav{display:flex;height:30px}.img_compte{border-radius:50%}header{align-items:center;display:flex;flex-direction:column;height:80vh;justify-content:center}.logo{max-height:400px;max-width:400px;padding:30px}.bar_recherche{align-items:center;background:#303134;border:1px solid rgba(223,225,229,0);border-radius:50px;box-shadow:0 1px 6px 0 #171717;display:flex;height:44px;margin:0 20px;max-width:600px;padding:0 10px;width:80%}.bar_recherche input{background:transparent;border:0;color:snow;flex:1;font-size:16px;outline:none;padding:10px}::placeholder{color:snow}.bar_recherche button img{width:25px}.bar_recherche button{background:#303134;border:0;border-radius:50%;cursor:pointer;height:30px;width:30px}.footer{align-items:center;background-color:#171717;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;left:0;margin-top:50px;min-height:100px;padding:0 100px;position:fixed;right:420px}#year,.copyrights{color:#9aa0a6;display:inline;padding:0}.conditions_generale{color:#9aa0a6;font-weight:600;text-decoration:none}main{display:flex}.section_gauche{bottom:0;flex:0 0 auto;left:0;position:fixed;top:0;width:calc(100% - 420px)}.separator{background-color:#303134;height:100%;position:fixed;width:2px}.section_droite,.separator{margin-left:calc(100% - 420px)}.section_droite{width:420px}.liste_favori{display:flex;justify-content:space-between;padding-top:50px}.liste_favori a{margin:0 10px;text-align:center}.liste_favori a img{border-radius:15px;height:80px;width:150px}.liste_app{display:flex;flex-wrap:wrap}.liste_app a{margin:0 20px 20px;text-align:center}.liste_app a img{border-radius:15px;height:100px;width:100px}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-thumb{background:#dadce0;background-clip:padding-box;background-color:#5f6368;border:4px solid transparent;border-radius:8px;box-shadow:none;min-height:50px}::-webkit-scrollbar-track,::-webkit-scrollbar-track:hover{background:none;border:none}
View File
+1
View File
@@ -0,0 +1 @@
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);*{margin:0;padding:0}*,html{scroll-behavior:smooth}.titre_section{font-family:Roboto,sans-serif;font-size:50px;padding:50px 0 0 60px;position:relative}.titre_section:before{background:#969696;bottom:0;box-shadow:0 2px 2px #0000001f;content:"";height:7px;position:absolute;width:50px}header{background:url(/assets/images/landing.6d6841c3.jpg);background-size:cover;min-height:100vh}nav{display:flex;list-style:none}nav li{margin:30px;overflow:hidden}nav a{color:#fff;display:block;font-family:Roboto,sans-serif;font-size:20px;font-weight:600;position:relative;text-decoration:none;transition:transform .4s}.logo{width:60px}.big_title{color:#fff;font-family:Roboto,sans-serif;font-size:150px;left:10%;position:absolute;top:40%}.explication_contenaire{padding:0 100px}.partie_1,.partie_2{box-sizing:border-box;font-family:sans-serif;font-size:1em;margin:10px auto;min-height:220px;padding:10px;width:80%}.image_parragraphe_1{border:none;border-radius:10%;float:left;width:150px}.image_parragraphe_2{border:none;border-radius:10%;float:right;width:200px}.space{height:0;margin:0,padding 0;width:0}.download_link{align-items:center;display:flex;flex-direction:column}.btn_download{background-color:#0070c0;border:2px solid #00b0f0;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;box-shadow:3px 3px 4px #444;-webkit-box-shadow:3px 3px 4px #444;-moz-box-shadow:3px 3px 4px #444;color:#fff;cursor:pointer;font-family:arial;font-size:1em;margin-bottom:10px;padding:8px;text-decoration:none;transition:transform .2s ease;width:70%}.btn_download:active{transform:scale(1.05)}.logo_download{width:30px}#version_web p{font-family:sans-serif;font-size:1em;padding:0 100px}.btn_version_web{background-color:#0070c0;border:2px solid #00b0f0;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;box-shadow:3px 3px 4px #444;-webkit-box-shadow:3px 3px 4px #444;-moz-box-shadow:3px 3px 4px #444;color:#fff;cursor:pointer;font-family:arial;font-size:1em;margin-bottom:10px;padding:8px;text-decoration:none;transition:transform .2s ease;width:40%}.btn_version_web:active{transform:scale(1.05)}.btn_version_web_contenaire{align-items:center;display:flex;height:50px;justify-content:center}#autre p{font-family:sans-serif;font-size:1em;padding:0 100px}#autre iframe{padding:20px 0 0 100px}.dark-mode-theme{background-color:#1c1c1e;color:#fefefe}
View File
+1
View File
@@ -0,0 +1 @@
*{font-family:arial,sans-serif;margin:0;padding:0}main{margin:0 100px}h1{padding:50px}h2{padding-top:20px}.dark-mode-theme{background-color:#1c1c1e;color:#fefefe}
+34 -2
View File
@@ -60,7 +60,7 @@ body {
display: none; display: none;
height: 70px; height: 70px;
position: fixed; position: fixed;
width: 100%; width: calc(100% - 100px);
top: 0; top: 0;
left: 0; left: 0;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
@@ -77,6 +77,12 @@ body {
text-align: center; text-align: center;
} }
.depli-nav {
background: none;
border: none;
cursor: pointer;
}
main, main,
section { section {
margin: 100px 100px 100px; margin: 100px 100px 100px;
@@ -174,6 +180,32 @@ main {
h1 { h1 {
margin-top: 80px; margin-top: 80px;
} }
.mini-nav {
justify-content: space-between;
}
#nav a {
padding: 5px 15px;
}
#nav a:hover {
padding: 5px 14px;
}
#nav ul {
width: 300px;
display: flex;
justify-content: space-between;
}
.nav-dark {
background-color: #1c1c1e;
}
.nav-light {
background-color: #fefefe;
}
} }
@media (max-width: 940px) { @media (max-width: 940px) {
@@ -272,7 +304,7 @@ main {
.btn_theme:hover { .btn_theme:hover {
border: 1px solid rgb(83, 83, 83); border: 1px solid rgb(83, 83, 83);
border-radius: 5px; border-radius: 5px;
padding: 5px 14px; padding: 4px 14px;
} }
#text { #text {
+14
View File
@@ -3,21 +3,35 @@ import '../css/index.css'
const toggleBtn = document.getElementById("toggle-btn"); const toggleBtn = document.getElementById("toggle-btn");
const body = document.querySelector("body"); const body = document.querySelector("body");
const text = document.getElementById("text"); const text = document.getElementById("text");
const mini_nav = document.getElementById("mini-nav");
const mini_nav_depli = document.getElementById("nav");
let darkmode = localStorage.getItem("dark-mode"); let darkmode = localStorage.getItem("dark-mode");
const enableDarkMode=() =>{ const enableDarkMode=() =>{
body.classList.add("dark-mode-theme"); body.classList.add("dark-mode-theme");
mini_nav.classList.add("nav-dark");
mini_nav_depli.classList.add("nav-dark");
mini_nav.classList.remove("nav-light");
mini_nav_depli.classList.remove("nav-light");
toggleBtn.classList.add("dark-mode-toggle"); toggleBtn.classList.add("dark-mode-toggle");
toggleBtn.style.color = "rgb(177, 177, 177)"; toggleBtn.style.color = "rgb(177, 177, 177)";
text.innerHTML="sombre"; text.innerHTML="sombre";
localStorage.setItem("dark-mode" , "enabled") localStorage.setItem("dark-mode" , "enabled")
} }
const disableDarkMode= () =>{ const disableDarkMode= () =>{
body.classList.remove("dark-mode-theme"); body.classList.remove("dark-mode-theme");
mini_nav.classList.remove("nav-dark");
mini_nav_depli.classList.remove("nav-dark");
mini_nav.classList.add("nav-light");
mini_nav_depli.classList.add("nav-light");
toggleBtn.classList.remove("dark-mode-toggle"); toggleBtn.classList.remove("dark-mode-toggle");
toggleBtn.style.color = "rgb(83, 83, 83)"; toggleBtn.style.color = "rgb(83, 83, 83)";
text.innerHTML="claire"; text.innerHTML="claire";
localStorage.setItem("dark-mode" , "disabled") localStorage.setItem("dark-mode" , "disabled")
} }
+4 -4
View File
@@ -9,7 +9,7 @@
@entryPointScripts('index') @entryPointScripts('index')
</head> </head>
<body> <body>
<nav id="nav" class="fixed-navbar"> <nav id="nav" class="fixed-navbar nav-light">
<ul class="nav-lien"> <ul class="nav-lien">
<li><a href="#">Home</a></li> <li><a href="#">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="#about">About</a></li>
@@ -30,9 +30,9 @@
@end @end
</ul> </ul>
</nav> </nav>
<nav class="mini-nav"> <nav class="mini-nav nav-light" id="mini-nav">
<button id="depli-nav"> <button class="depli-nav" id="depli-nav">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"> <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 30 24">
<rect width="30" height="4" rx="2" ry="2" fill="#000" /> <rect width="30" height="4" rx="2" ry="2" fill="#000" />
<rect y="10" width="30" height="4" rx="2" ry="2" fill="#000" /> <rect y="10" width="30" height="4" rx="2" ry="2" fill="#000" />
<rect y="20" width="30" height="4" rx="2" ry="2" fill="#000" /> <rect y="20" width="30" height="4" rx="2" ry="2" fill="#000" />