Color:
diff --git a/pages/promotions.html b/pages/promotions.html
new file mode 100644
index 0000000..36bc48b
--- /dev/null
+++ b/pages/promotions.html
@@ -0,0 +1,192 @@
+
+
+
+
+
+
+
Promotions – E-Shop
+
+
+
+
+
+
+
+
+
+
+
+
+ Offre à durée limitée
+
+
+ 00
+ Jours
+
+
+ 00
+ Heures
+
+
+ 00
+ Minutes
+
+
+ 00
+ Secondes
+
+
+
+
+
+ Produits en promotion
+
+
+
+
+
+
Iphone 16 Pro Max
+
1.200. 000 FCFA
+
800.000 FCFA
+
+
+
+
+
+
Headset Logitech 3X
+
38.000 FCFA
+
20.000FCFA
+
+
+
+
+
+
Samsung Galaxy S25
+
1000.000FCFA
+
600. 000 FCFA
+
+
+
+
+
+
Laptop Asus V pro
+
700.000FCFA
+
400.000 FCFA
+
+
+
+
+
+
+
+
+
+
+
E-Shop
+
Contact
+
Address: National Advanced School of Engineering of Yaounde (NASEY), Melen
+
Phone: +237 696 696 696
+
Hours: 8:00 - 17:45, Mon - Fri
+
+
Follow Us
+
+
+
+
+
Install App
+
From App Store or Google Play
+
+
+
+
+
Secured Payment Gateways
+
+
+
2025, 4GI – HTML CSS E-commerce site
+
+
+
+
+
diff --git a/pages/register-page.html b/pages/register-page.html
new file mode 100644
index 0000000..8fc2db5
--- /dev/null
+++ b/pages/register-page.html
@@ -0,0 +1,64 @@
+
+
+
+
+
Title
+
+
+
+
+
Bienvenue sur notre Page D'enregistrement
+
+
+
+
Notre application est une solution technologique blablabla
+
+
Enregistrez Vous!
+
+ Connexion
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/styles/blog.css b/styles/blog.css
new file mode 100644
index 0000000..c27a937
--- /dev/null
+++ b/styles/blog.css
@@ -0,0 +1,278 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+
+body {
+ background-color: #fff;
+ color: #222;
+}
+
+h1, h2 {
+ color: #222;
+}
+h1 {
+ font-size: 48px;
+ margin-bottom: 10px;
+}
+h2 {
+ font-size: 24px;
+ margin-bottom: 10px;
+}
+
+/* ========== Header / Navbar ========== */
+header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#navbar-container {
+ display: flex;
+ flex-direction: row;
+ background-color: #f0f0f0;
+ max-width: 1200px;
+ justify-content: space-between;
+ align-items: center;
+ margin: 50px auto 0;
+ box-shadow: 0 2px 12px rgba(0,0,0,0.07);
+ border-radius: 10px;
+ height: 70px;
+ width: 70%;
+ box-sizing: border-box;
+ padding: 0 20px;
+}
+
+#navbar {
+ list-style: none;
+ display: flex;
+ align-items: center;
+ gap: 18px;
+ margin: 0;
+ padding: 0;
+ flex: 1 1 auto;
+ justify-content: flex-end;
+}
+
+#navbar > li {
+ position: relative;
+ white-space: nowrap;
+}
+
+.dropdown {
+ display: none;
+ position: absolute;
+ background: #fff;
+ min-width: 160px;
+ box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+ z-index: 1;
+}
+
+#navbar li:hover > .dropdown {
+ display: block;
+}
+
+.dropdown li {
+ padding: 10px 20px;
+}
+
+.dropdown li a {
+ color: #222;
+ text-decoration: none;
+}
+
+.dropdown li a:hover {
+ background: #f0f0f0;
+}
+
+.no-underline {
+ text-decoration: none;
+ color: #000;
+}
+
+.user-login {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ margin-right: 10px;
+}
+
+.login-text {
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ line-height: 1.2;
+}
+
+.login-text strong {
+ font-size: 15px;
+ color: #222;
+ font-weight: bold;
+ margin-left: 2px;
+}
+
+#navbar .options {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+}
+
+#navbar .options::after {
+ content: "";
+ display: block;
+ left: 30px;
+ right: 30%;
+ height: 4px;
+ background: #222;
+ border-radius: 2px;
+ opacity: 0;
+ transition: opacity 0.2s, left 0.2s, right 0.2s;
+}
+
+#navbar .options:hover::after {
+ opacity: 1;
+ left: 15%;
+ right: 15%;
+}
+
+#navbar .options:hover {
+ color: hsl(216, 82%, 36%);
+}
+
+/* ========== Blog Hero ========== */
+.blog-hero {
+ background-color: #f5f5f5;
+ padding: 60px 20px;
+ text-align: center;
+}
+.blog-hero .hero-text h1 {
+ font-size: 52px;
+ margin-bottom: 10px;
+}
+.blog-hero .hero-text p {
+ font-size: 18px;
+}
+
+/* ========== Liste des articles ========== */
+.blog-list {
+ padding: 60px 20px;
+ max-width: 1000px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 40px;
+}
+
+.blog-card {
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 0 2px 12px rgba(0,0,0,0.07);
+ overflow: hidden;
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.blog-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+}
+
+.blog-card img {
+ width: 100%;
+ height: auto;
+ object-fit: cover;
+ max-height: 16rem;
+}
+
+.blog-info {
+ padding: 20px;
+}
+
+.blog-info h2 {
+ margin-bottom: 12px;
+ font-size: 22px;
+}
+
+.blog-info p {
+ font-size: 16px;
+ margin-bottom: 15px;
+ color: #555;
+}
+
+.blog-info .date {
+ font-size: 14px;
+ color: #999;
+}
+
+/* ========== Footer ========== */
+footer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding-top: 20px;
+}
+footer .col {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-bottom: 20px;
+}
+footer h4 {
+ font-size: 14px;
+ padding-bottom: 20px;
+}
+footer p {
+ font-size: 13px;
+ margin: 0 0 8px 0;
+}
+footer a {
+ font-size: 13px;
+ text-decoration: none;
+ color: #222;
+ margin-bottom: 10px;
+}
+footer .follow i {
+ color: #465b52;
+ padding-right: 4px;
+ cursor: pointer;
+}
+footer .install .row img {
+ border: 1px solid #8f253c;
+ border-radius: 6px;
+}
+footer .install img {
+ margin: 10px 0 15px 0;
+}
+footer .follow i:hover, footer a:hover {
+ color: #8f253c;
+}
+footer .copyright {
+ text-align: center;
+ width: 100%;
+ padding: 10px 0;
+}
+
+/* ========== Responsive ========== */
+@media (max-width: 900px) {
+ #navbar-container {
+ width: 95%;
+ padding: 0 10px;
+ }
+ #navbar {
+ gap: 10px;
+ }
+ .blog-list {
+ gap: 20px;
+ }
+}
+#brand-name {
+ text-decoration: none;
+ font-size: 20px;
+ color:#222;
+ font-weight: bold;
+ margin-right: 40px;
+ margin-left: 10px;
+}
diff --git a/styles/login-page.css b/styles/login-page.css
new file mode 100644
index 0000000..cb33ca2
--- /dev/null
+++ b/styles/login-page.css
@@ -0,0 +1,203 @@
+/*
+VAriables #776f73,#cccccc,#8f253c
+ */
+
+:root {
+ --couleur-1: #776f73;
+ --couleur-2: #cccccc;
+ --couleur-3: #8f253c;
+}
+
+
+/* === STYLES GLOBAUX === */
+body {
+ margin: 0;
+ font-family: 'Inter', 'Roboto', sans-serif;
+ background: linear-gradient(135deg, var(--couleur-1), var(--couleur-2));
+ color: var(--couleur-3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+}
+
+/* === PAGE CONTAINER === */
+.login-page {
+ width: 90%;
+ max-width: 1100px;
+ background: var(--couleur-2);
+ border-radius: 20px;
+ box-shadow: 0 10px 30px var(--couleur-3);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ animation: fadeIn 1s ease;
+}
+
+/* === HEADER === */
+.login-page h1 {
+ text-align: center;
+ padding: 2rem 1rem;
+ color: var(--couleur-3);
+ font-size: 1.8rem;
+ border-bottom: 1px solid var(--couleur-2);
+ background: var(--couleur-2);
+}
+
+/* === MAIN CONTENT === */
+.container {
+ display: flex;
+ flex-direction: row;
+ padding: 2rem;
+ gap: 2rem;
+}
+
+.login-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+ gap: 2rem;
+}
+
+/* === SECTION GAUCHE : PRÉSENTATION === */
+.presentation-login {
+ background: linear-gradient(135deg, #dbeafe, #eff6ff);
+ border-radius: 16px;
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ text-align: center;
+ box-shadow: inset 0 0 15px var(--couleur-3);
+}
+
+.presentation-login .descrition {
+ font-size: 1rem;
+ line-height: 1.6;
+ color: var(--couleur-3);
+ margin-bottom: 2rem;
+ display: block;
+}
+
+.presentation-login div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.7rem;
+ font-weight: 600;
+ color: var(--couleur-3);
+ font-size: 1.1rem;
+}
+
+.presentation-login svg {
+ stroke: var(--couleur-3);
+ transition: transform 0.3s ease;
+}
+
+.presentation-login div:hover svg {
+ transform: translateX(5px);
+}
+
+/* === FORMULAIRE === */
+.login-form {
+ background: var(--couleur-2);
+ border-radius: 16px;
+ padding: 2rem 2.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0 2px 10px rgba(0, 50, 150, 0.05);
+}
+
+.login-form h3 {
+ color: var(--couleur-3);
+ text-align: center;
+ margin-bottom: 1.5rem;
+ font-size: 1.4rem;
+}
+
+.formGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+}
+
+mat-form-field, input {
+ width: 100%;
+}
+
+input {
+ border: 1px solid #cbd5e1;
+ border-radius: 10px;
+ padding: 0.8rem 1rem;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+ outline: none;
+}
+
+input:focus {
+ border-color: var(--couleur-3);
+ box-shadow: 0 0 0 3px var(--couleur-1);
+}
+
+/* === BOUTONS === */
+button {
+ padding: 0.8rem 1rem;
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+}
+
+button[type="submit"] {
+ background: var(--couleur-3);
+ color: var(--couleur-1);
+ margin-top: 1rem;
+}
+
+button[type="submit"]:hover {
+ background: var(--couleur-3);
+}
+
+.google-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.8rem;
+ background: var(--couleur-2);
+ color: var(--couleur-1);
+ border: 1px solid var(--couleur-1);
+ margin-top: 1rem;
+}
+
+.google-btn:hover {
+ background: var(--couleur-2);
+}
+
+.google-icon {
+ width: 20px;
+ height: 20px;
+}
+
+/* === ANIMATIONS === */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ .login-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .presentation-login {
+ order: 2;
+ }
+
+ .login-form {
+ order: 1;
+ }
+}
diff --git a/styles/mon-compte.css b/styles/mon-compte.css
new file mode 100644
index 0000000..baa8d53
--- /dev/null
+++ b/styles/mon-compte.css
@@ -0,0 +1,111 @@
+/* Reset */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* Couleurs principales */
+:root {
+ --primary: #776f73;
+ --secondary: #8f253c;
+ --light: #cccccc;
+ --white: #fff;
+}
+
+/* Global */
+body {
+ font-family: Arial, sans-serif;
+ display: flex;
+ background-color: var(--light);
+}
+
+/* Header */
+header {
+ position: fixed;
+ top: 0;
+ left: 200px;
+ right: 0;
+ background: var(--primary);
+ color: var(--white);
+ padding: 1rem;
+ text-align: center;
+ z-index: 10;
+}
+
+/* Sidebar */
+.sidebar {
+ width: 200px;
+ background: var(--secondary);
+ min-height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ padding-top: 5rem;
+}
+
+.sidebar ul {
+ list-style: none;
+}
+
+.sidebar li {
+ margin: 1rem 0;
+}
+
+.sidebar a {
+ color: var(--white);
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ display: block;
+}
+
+.sidebar a:hover {
+ background: var(--primary);
+}
+
+/* Main */
+main {
+ margin-left: 200px;
+ padding: 7rem 2rem 2rem 2rem;
+ width: 100%;
+}
+
+.card {
+ background: var(--white);
+ padding: 1.5rem;
+ margin-bottom: 1.5rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.card h2 {
+ margin-bottom: 1rem;
+ color: var(--secondary);
+}
+
+/* Table */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 1rem;
+}
+
+table th, table td {
+ padding: 0.8rem;
+ border: 1px solid var(--light);
+ text-align: left;
+}
+
+table th {
+ background: var(--primary);
+ color: var(--white);
+}
+
+/* Footer */
+footer {
+ background: var(--primary);
+ color: var(--white);
+ text-align: center;
+ padding: 1rem;
+ margin-left: 200px;
+}
diff --git a/styles/paiement.css b/styles/paiement.css
new file mode 100644
index 0000000..acbf525
--- /dev/null
+++ b/styles/paiement.css
@@ -0,0 +1,213 @@
+body {
+font-family: "Poppins", sans-serif;
+background-color: #cccccc;
+color: #333;
+margin: 0;
+padding: 0;
+}
+
+/* HEADER */
+.main-header {
+background-color: #8f253c;
+color: white;
+display: flex;
+justify-content: space-between;
+align-items: center;
+padding: 15px 50px;
+}
+
+.main-header a {
+color: white;
+text-decoration: none;
+font-weight: bold;
+}
+
+.main-header ul {
+list-style: none;
+display: flex;
+gap: 25px;
+}
+
+.main-header ul li a:hover {
+text-decoration: underline;
+}
+
+/* MAIN LAYOUT */
+.payment-container {
+display: flex;
+justify-content: space-between;
+margin: 40px auto;
+width: 90%;
+max-width: 1200px;
+gap: 40px;
+}
+
+/* FORM SECTION */
+.payment-form {
+flex: 2;
+background: white;
+padding: 30px;
+border-radius: 10px;
+box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.payment-form h1 {
+color: #8f253c;
+text-align: center;
+margin-bottom: 20px;
+}
+
+.payment-form h2 {
+color: #776f73;
+margin-top: 25px;
+border-bottom: 2px solid #cccccc;
+padding-bottom: 5px;
+}
+
+.form-group {
+margin-top: 15px;
+display: flex;
+flex-direction: column;
+}
+
+.form-group label {
+font-weight: 600;
+margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group select {
+padding: 10px;
+border: 1px solid #aaa;
+border-radius: 5px;
+}
+
+.form-inline {
+display: flex;
+gap: 20px;
+}
+
+.btn-validate {
+display: block;
+width: 100%;
+background-color: #8f253c;
+color: white;
+border: none;
+padding: 15px;
+border-radius: 8px;
+font-size: 16px;
+margin-top: 25px;
+cursor: pointer;
+}
+
+.btn-validate:hover {
+background-color: #776f73;
+}
+
+/* ORDER SUMMARY */
+.order-summary {
+flex: 1;
+background: white;
+padding: 20px;
+border-radius: 10px;
+box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.order-summary h2 {
+color: #8f253c;
+margin-bottom: 15px;
+text-align: center;
+}
+
+.order-summary table {
+width: 100%;
+border-collapse: collapse;
+}
+
+.order-summary th,
+.order-summary td {
+border-bottom: 1px solid #ccc;
+padding: 10px;
+text-align: center;
+}
+
+.order-summary .total {
+font-weight: bold;
+color: #8f253c;
+}
+
+/* FOOTER */
+.main-footer {
+background-color: #776f73;
+color: white;
+text-align: center;
+padding: 20px;
+margin-top: 40px;
+}
+
+@media screen and (max-width: 900px) {
+.payment-container {
+flex-direction: column;
+}
+}
+/* PAGE DE CONFIRMATION */
+.success-container {
+display: flex;
+justify-content: center;
+align-items: center;
+height: 70vh;
+}
+
+.success-box {
+background-color: white;
+border-radius: 10px;
+padding: 50px;
+text-align: center;
+box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+max-width: 600px;
+}
+
+.success-box h1 {
+color: #8f253c;
+margin-bottom: 20px;
+}
+
+.success-box p {
+color: #333;
+font-size: 18px;
+margin-bottom: 30px;
+}
+
+.btn-return {
+display: inline-block;
+background-color: #8f253c;
+color: white;
+padding: 12px 25px;
+border-radius: 8px;
+text-decoration: none;
+font-weight: bold;
+}
+
+.btn-return:hover {
+background-color: #776f73;
+}
+
+/* ANIMATION DE CONFIRMATION */
+@keyframes fadePop {
+0% {
+opacity: 0;
+transform: scale(0.8);
+}
+60% {
+opacity: 1;
+transform: scale(1.05);
+}
+100% {
+opacity: 1;
+transform: scale(1);
+}
+}
+
+.success-box {
+animation: fadePop 0.8s ease-out;
+}
diff --git a/styles/prodDetails.css b/styles/prodDetails.css
index 7822d2b..25680e7 100644
--- a/styles/prodDetails.css
+++ b/styles/prodDetails.css
@@ -1,36 +1,41 @@
/* Container */
+body{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
.productDetailContainer {
display: flex;
flex-direction: column;
-
-
-
- max-width: 1200px;
-
+ align-items: center;
+ width: 100%;
background-color:#cccccc;
- border-radius: 12px;
+ position: relative;
+
}
.mainProductSection{
display: flex;
gap: 2rem;
flex: 1;
+
}
/* Image Section */
.imageSection {
flex: 1;
- background-image: url("../assets/images/iphone.webp"); /* default */
+ background-image: url("../assets/images/Services\ \(10\).png"); /* default */
background-size: cover;
background-position: center;
- border-radius: 12px;
+ z-index: 0;
border: 2px solid #cccccc;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
- padding: 1rem;
- min-height: 500px;
+
+
+ min-height:500px;
}
.thumbnailImages {
@@ -54,6 +59,7 @@
display: flex;
gap: 2rem;
justify-content: center;
+ width: 100%;
background-color: #333;
}
@@ -62,28 +68,43 @@
display: flex;
flex-direction: column;
align-items: center;
+ padding-top: 10px;
+ bottom: 0;
}
.infoButtons{
display: flex;
- gap: 4rem;
+ gap: 1rem;
flex-direction: row;
align-items: center;
}
-
-.thumbnail:hover {
- border: 2px solid #8f253c;
+.infoButtons button{
+ background-color: #ffffff95;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ padding: 0.5rem 1rem;
+ border: none;
+ color: #000000;
+ font-size: 1rem;
+ cursor: pointer;
+
}
-
-.thumbnail.active {
- border: 2px solid #776f73;
+.infoButtons button:hover{
+ background-color: #333;
+ color: #fff;
+}
+.infoButtons button.active{
+ background-color: #333;
+ color: #fff;
}
+
/* Info Section */
.productInfoSection {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
+ background-color: #cccccc;
}
.productTitle {
diff --git a/styles/promotions.css b/styles/promotions.css
new file mode 100644
index 0000000..416db7f
--- /dev/null
+++ b/styles/promotions.css
@@ -0,0 +1,330 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Poppins', sans-serif;
+}
+
+body {
+ width: 100%;
+ background-color: #fff;
+ color: #222;
+}
+
+h1, h2, h3 {
+ color: #222;
+}
+
+h1 {
+ font-size: 48px;
+ margin-bottom: 10px;
+}
+h2 {
+ font-size: 36px;
+ margin-bottom: 20px;
+}
+h3 {
+ font-size: 20px;
+ margin-bottom: 8px;
+}
+
+/* ========== Header et Navbar ========== */
+header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#navbar-container {
+ display: flex;
+ flex-direction: row;
+ background-color: #f0f0f0;
+ max-width: 1200px;
+ justify-content: space-between;
+ align-items: center;
+ margin: 50px auto 0;
+ box-shadow: 0 2px 12px rgba(0,0,0,0.07);
+ border-radius: 10px;
+ height: 70px;
+ width: 70%;
+ box-sizing: border-box;
+ padding: 0 20px;
+}
+
+#navbar {
+ list-style: none;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 18px;
+ margin: 0;
+ padding: 0;
+ flex: 1 1 auto;
+ justify-content: flex-end;
+ flex-wrap: wrap;
+}
+
+#navbar > li {
+ display: inline-block;
+ position: relative;
+ white-space: nowrap;
+}
+
+.dropdown {
+ display: none;
+ position: absolute;
+ background: #fff;
+ min-width: 160px;
+ box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+ z-index: 1;
+}
+
+#navbar li:hover > .dropdown {
+ display: block;
+}
+
+.dropdown li {
+ display: block;
+ padding: 10px 20px;
+}
+
+.dropdown li a {
+ color: #222;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown li a:hover {
+ background: #f0f0f0;
+}
+
+.no-underline {
+ text-decoration: none;
+ color: #000;
+}
+
+.user-login {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ margin-right: 10px;
+}
+
+.login-text {
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ line-height: 1.2;
+ color: #000;
+}
+
+.login-text strong {
+ font-size: 15px;
+ color: #222;
+ font-weight: bold;
+ margin-left: 2px;
+}
+#brand-name {
+ text-decoration: none;
+ font-size: 20px;
+ color:#222;
+ font-weight: bold;
+ margin-right: 40px;
+ margin-left: 10px;
+}
+
+#navbar .options {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+}
+
+#navbar .options::after {
+ content: "";
+ display: block;
+ left: 30px;
+ right: 30%;
+ height: 4px;
+ background: #222;
+ border-radius: 2px;
+ opacity: 0;
+ transition: opacity 0.2s, left 0.2s, right 0.2s;
+}
+
+#navbar .options:hover::after {
+ opacity: 1;
+ left: 15%;
+ right: 15%;
+}
+
+#navbar .options:hover {
+ color: hsl(216, 82%, 36%);
+}
+
+/* ========== Section promo-hero ========== */
+.promo-hero {
+ background-color: #f0f0f0;
+ padding: 60px 20px;
+ text-align: center;
+}
+.promo-hero .promo-banner h1 {
+ font-size: 52px;
+ margin-bottom: 10px;
+}
+.promo-hero .promo-banner p {
+ font-size: 18px;
+}
+
+/* ========== Offres limitées (compte à rebours) ========== */
+.limited-offer {
+ padding: 40px 20px;
+ text-align: center;
+ background-color: #fff;
+}
+.limited-offer h2 {
+ margin-bottom: 30px;
+}
+.countdown-container {
+ display: flex;
+ justify-content: center;
+ gap: 30px;
+ flex-wrap: wrap;
+}
+.time-box {
+ background: #f5f5f5;
+ padding: 20px;
+ border-radius: 8px;
+ min-width: 80px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.time-box .time {
+ font-size: 32px;
+ font-weight: 700;
+}
+.time-box .label {
+ font-size: 14px;
+ margin-top: 5px;
+ color: #555;
+}
+
+/* ========== Grille de produits en promo ========== */
+.sale-grid {
+ padding: 60px 20px;
+ background-color: #fafafa;
+ text-align: center;
+}
+.sale-grid h2 {
+ margin-bottom: 40px;
+}
+.products-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 30px;
+ max-width: 1000px;
+ margin: 0 auto;
+}
+.product-card {
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 0 2px 12px rgba(0,0,0,0.07);
+ overflow: hidden;
+ transition: transform 0.2s, box-shadow 0.2s;
+}
+.product-card:hover {
+ transform: translateY(-6px);
+ box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+}
+.product-card img {
+ width: 100%;
+ height: auto;
+ max-height: 9rem;
+ object-fit: cover;
+}
+.product-info {
+ padding: 16px;
+}
+.product-info h3 {
+ margin-bottom: 10px;
+}
+.original-price {
+ text-decoration: line-through;
+ color: #999;
+ margin-bottom: 8px;
+}
+.promo-price {
+ color: #8f253c;
+ font-size: 1.25rem;
+ font-weight: bold;
+}
+
+
+/* ========== Footer ========== */
+/* Tu peux simplement copier les styles du footer de ta home page ici */
+footer {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding-top: 20px;
+}
+footer .col {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-bottom: 20px;
+}
+footer h4 {
+ font-size: 14px;
+ padding-bottom: 20px;
+}
+footer p {
+ font-size: 13px;
+ margin: 0 0 8px 0;
+}
+footer a {
+ font-size: 13px;
+ text-decoration: none;
+ color: #222;
+ margin-bottom: 10px;
+}
+footer .follow i {
+ color: #465b52;
+ padding-right: 4px;
+ cursor: pointer;
+}
+footer .install .row img {
+ border: 1px solid #8f253c;
+ border-radius: 6px;
+}
+footer .install img {
+ margin: 10px 0 15px 0;
+}
+footer .follow i:hover, footer a:hover {
+ color: #8f253c;
+}
+footer .copyright {
+ text-align: center;
+ width: 100%;
+ padding: 10px 0;
+}
+
+/* ========== Adaptations responsive ========== */
+@media (max-width: 900px) {
+ #navbar-container {
+ width: 95%;
+ padding: 0 10px;
+ }
+ #navbar {
+ gap: 10px;
+ }
+ .countdown-container {
+ gap: 15px;
+ }
+ .products-container, .top-deals-container {
+ gap: 20px;
+ }
+}
diff --git a/styles/register-page.css b/styles/register-page.css
new file mode 100644
index 0000000..cb33ca2
--- /dev/null
+++ b/styles/register-page.css
@@ -0,0 +1,203 @@
+/*
+VAriables #776f73,#cccccc,#8f253c
+ */
+
+:root {
+ --couleur-1: #776f73;
+ --couleur-2: #cccccc;
+ --couleur-3: #8f253c;
+}
+
+
+/* === STYLES GLOBAUX === */
+body {
+ margin: 0;
+ font-family: 'Inter', 'Roboto', sans-serif;
+ background: linear-gradient(135deg, var(--couleur-1), var(--couleur-2));
+ color: var(--couleur-3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+}
+
+/* === PAGE CONTAINER === */
+.login-page {
+ width: 90%;
+ max-width: 1100px;
+ background: var(--couleur-2);
+ border-radius: 20px;
+ box-shadow: 0 10px 30px var(--couleur-3);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ animation: fadeIn 1s ease;
+}
+
+/* === HEADER === */
+.login-page h1 {
+ text-align: center;
+ padding: 2rem 1rem;
+ color: var(--couleur-3);
+ font-size: 1.8rem;
+ border-bottom: 1px solid var(--couleur-2);
+ background: var(--couleur-2);
+}
+
+/* === MAIN CONTENT === */
+.container {
+ display: flex;
+ flex-direction: row;
+ padding: 2rem;
+ gap: 2rem;
+}
+
+.login-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+ gap: 2rem;
+}
+
+/* === SECTION GAUCHE : PRÉSENTATION === */
+.presentation-login {
+ background: linear-gradient(135deg, #dbeafe, #eff6ff);
+ border-radius: 16px;
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ text-align: center;
+ box-shadow: inset 0 0 15px var(--couleur-3);
+}
+
+.presentation-login .descrition {
+ font-size: 1rem;
+ line-height: 1.6;
+ color: var(--couleur-3);
+ margin-bottom: 2rem;
+ display: block;
+}
+
+.presentation-login div {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.7rem;
+ font-weight: 600;
+ color: var(--couleur-3);
+ font-size: 1.1rem;
+}
+
+.presentation-login svg {
+ stroke: var(--couleur-3);
+ transition: transform 0.3s ease;
+}
+
+.presentation-login div:hover svg {
+ transform: translateX(5px);
+}
+
+/* === FORMULAIRE === */
+.login-form {
+ background: var(--couleur-2);
+ border-radius: 16px;
+ padding: 2rem 2.5rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ box-shadow: 0 2px 10px rgba(0, 50, 150, 0.05);
+}
+
+.login-form h3 {
+ color: var(--couleur-3);
+ text-align: center;
+ margin-bottom: 1.5rem;
+ font-size: 1.4rem;
+}
+
+.formGroup {
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+}
+
+mat-form-field, input {
+ width: 100%;
+}
+
+input {
+ border: 1px solid #cbd5e1;
+ border-radius: 10px;
+ padding: 0.8rem 1rem;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+ outline: none;
+}
+
+input:focus {
+ border-color: var(--couleur-3);
+ box-shadow: 0 0 0 3px var(--couleur-1);
+}
+
+/* === BOUTONS === */
+button {
+ padding: 0.8rem 1rem;
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+}
+
+button[type="submit"] {
+ background: var(--couleur-3);
+ color: var(--couleur-1);
+ margin-top: 1rem;
+}
+
+button[type="submit"]:hover {
+ background: var(--couleur-3);
+}
+
+.google-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.8rem;
+ background: var(--couleur-2);
+ color: var(--couleur-1);
+ border: 1px solid var(--couleur-1);
+ margin-top: 1rem;
+}
+
+.google-btn:hover {
+ background: var(--couleur-2);
+}
+
+.google-icon {
+ width: 20px;
+ height: 20px;
+}
+
+/* === ANIMATIONS === */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+ .login-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .presentation-login {
+ order: 2;
+ }
+
+ .login-form {
+ order: 1;
+ }
+}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+