diff --git a/public/logo_calendrier.jpg b/public/logo_calendrier.jpg new file mode 100644 index 0000000..7283283 Binary files /dev/null and b/public/logo_calendrier.jpg differ diff --git a/public/logo_calendrier.png b/public/logo_calendrier.png new file mode 100644 index 0000000..828cca8 Binary files /dev/null and b/public/logo_calendrier.png differ diff --git a/public/logo_graphique.jpg b/public/logo_graphique.jpg new file mode 100644 index 0000000..c82a3ff Binary files /dev/null and b/public/logo_graphique.jpg differ diff --git a/public/logo_graphique.png b/public/logo_graphique.png new file mode 100644 index 0000000..840bfcb Binary files /dev/null and b/public/logo_graphique.png differ diff --git a/public/logo_groupe.png b/public/logo_groupe.png new file mode 100644 index 0000000..6edb604 Binary files /dev/null and b/public/logo_groupe.png differ diff --git a/public/logo_parametre.png b/public/logo_parametre.png new file mode 100644 index 0000000..837d6e5 Binary files /dev/null and b/public/logo_parametre.png differ diff --git a/public/logo_person.png b/public/logo_person.png new file mode 100644 index 0000000..0ac515d Binary files /dev/null and b/public/logo_person.png differ diff --git a/public/logo_stats.png b/public/logo_stats.png new file mode 100644 index 0000000..b9415e9 Binary files /dev/null and b/public/logo_stats.png differ diff --git a/src/pages/Compte.js b/src/pages/Compte.js index dc7fa2b..8a3704c 100644 --- a/src/pages/Compte.js +++ b/src/pages/Compte.js @@ -4,18 +4,31 @@ import React from 'react'; const Compte = () => { return ( + + +
{/* Create an account page */}

Mon Compte

- - +
+ + + + +
+
-

nav-bar

+ + + + + +

Compte

diff --git a/src/styles/components/_compte.scss b/src/styles/components/_compte.scss index acb136f..1f312ed 100644 --- a/src/styles/components/_compte.scss +++ b/src/styles/components/_compte.scss @@ -26,8 +26,8 @@ body { -webkit-backdrop-filter: blur(15px); .titre { - font-size: 40px; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-size: 40px; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } .rechLogo { @@ -35,9 +35,47 @@ body { flex-direction: row; justify-content: space-between; - .search { + .input_box { display: flex; - background-color: lightgrey; + justify-content: center; + align-items: center; + position: relative; + height: 40px; + max-width: 350px; + width: 100%; + margin: 30px 30px; + border-radius: 25px; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + + input { + position: relative; + width: 100%; + height: 100%; + padding: 0 15px 0 65px; + outline: none; + border: none; + border-radius: 25px; + font-size: 16px; + font-weight: 400; + color: #333; + } + + .search { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 60px; + border-radius: 25px 0 0 25px; + + .search-icon { + font-size: 30px; + color: black; + } + } } .logo { @@ -58,8 +96,7 @@ body { .nav_bar_verticale { display: flex; flex-direction: column; - background-color: blueviolet; - width: 7%; + width: 5%; height: auto; background: rgba(255, 255, 255, 0.3); @@ -72,8 +109,7 @@ body { .Compte { display: flex; flex-direction: column; - background-color: lightblue; - width: 92%; + width: 94.3%; height: auto; background: rgba(255, 255, 255, 0.3);