diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..1c33290
Binary files /dev/null and b/.DS_Store differ
diff --git a/LogoCreatyve.png b/LogoCreatyve.png
new file mode 100644
index 0000000..9fe2f57
Binary files /dev/null and b/LogoCreatyve.png differ
diff --git a/PageAcceuil.html b/PageAcceuil.html
index 4fe0af3..7d42e88 100644
--- a/PageAcceuil.html
+++ b/PageAcceuil.html
@@ -3,27 +3,58 @@
CréaTyve
+
-
-
Envie de créer votre site ?
-
Une idée, Un site, Un clic
-
+
+
+
+
Envie de créer votre site ?
+
Une idée, Un site, Un clic
+
+
-
-
-
-
Vous avez une entreprise à promouvoir ? Oubliez les années d’études ! En quelques clics et 10 secondes top chrono, devenez votre propre développeur web. Créez, lancez, rayonnez — c’est aussi simple que ça.
-
+
+
Vous avez une entreprise à promouvoir ? Oubliez les années d’études ! En quelques clics et 10 secondes top chrono, devenez votre propre développeur web. Créez, lancez, rayonnez — c’est aussi simple que ça.
+
+
+
+
diff --git a/assistant-ia.webp b/assistant-ia.webp
new file mode 100644
index 0000000..a2b083e
Binary files /dev/null and b/assistant-ia.webp differ
diff --git a/fond.mp4 b/fond.mp4
new file mode 100644
index 0000000..036aa08
Binary files /dev/null and b/fond.mp4 differ
diff --git a/list-47.png b/list-47.png
new file mode 100644
index 0000000..0a5770c
Binary files /dev/null and b/list-47.png differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..17b9cd6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,155 @@
+/* Reset margin and padding for the body */
+body {
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden; /* Prevent horizontal scrolling */
+}
+
+/* Ensure the video covers the entire viewport */
+.video-header {
+ position: relative;
+ height: 100vh; /* Full viewport height */
+ width: 100vw; /* Full viewport width */
+ overflow: hidden;
+}
+
+.backVideo {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover; /* Ensures the video covers the entire area */
+ z-index: -1; /* Places the video behind the content */
+}
+
+.header-content {
+ position: relative;
+ z-index: 1; /* Places the text above the video */
+ color: white; /* Makes the text visible over the video */
+ text-align: center;
+ padding: 20px;
+}
+
+.header-content h1{
+ font-family: "Corbel", sans-serif;
+ font-size: calc(1.5vw + 1.2rem); /* adapte à la taille de fenètre*/
+ font-weight: bold;
+ color: black;
+ position: relative;
+ top: 90px;
+ text-align: center;
+}
+.header-content h2 {
+
+ font-family: "Corbel", sans-serif;
+ font-size: calc(0.8vw + 0.8rem); /* adapte à la taille de fenètre*/
+ font-weight: lighter;
+ position: relative;
+ top: 20px;
+ color: black;
+ margin: 0;
+}
+
+nav ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+nav ul li {
+
+
+
+}
+
+nav ul li a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+/* Navigation Panel Styling */
+.navigation-panel {
+ position: absolute;
+ top: 20px; /* Position at the top-left */
+ left: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f3e8ff; /* Pastel light purple */
+ border-radius: 50px; /* Full circles on left and right */
+ padding: 10px 20px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+ width: auto;
+ max-width: 90%; /* Adapt to window size */
+ font-size: calc(0.8vw + 0.5rem); /* Responsive size */
+}
+
+.navigation-panel ul {
+ list-style: none;
+ display: flex;
+ gap: 15px; /* Space between items */
+ padding: 0;
+ margin: 0;
+}
+
+.navigation-panel li {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.3s ease, transform 0.3s ease;
+ border-radius: 50px; /* Rounded corners for each item */
+ padding: 10px;
+}
+
+.navigation-panel li:hover {
+ background-color: #d8b4ff; /* Darker pastel purple on hover */
+ transform: scale(1.05); /* Slightly enlarge on hover */
+}
+
+.navigation-panel li.active {
+ background-color: #d8b4ff; /* Darker pastel purple for active item */
+}
+
+.navigation-panel a {
+ text-decoration: none;
+ color: #4a4a4a; /* Light text color */
+ font-family: "Corbel", sans-serif;
+ font-size: 0.9rem;
+ font-weight: lighter; /* Light font weight */
+ text-align: center;
+ transition: color 0.3s ease;
+}
+
+.navigation-panel a:hover {
+ color: #000; /* Darker text on hover */
+}
+
+.navigation-panel .icon {
+ width: 30px; /* Adjust icon size */
+ height: 30px;
+ margin-bottom: 5px;
+}
+
+.navigation-panel .text {
+ font-size: 0.8rem; /* Text size */
+}
+
+/* Ensure responsiveness */
+@media (max-width: 768px) {
+ .navigation-panel {
+ padding: 5px 10px;
+ font-size: calc(0.6vw + 0.5rem);
+ }
+
+ .navigation-panel .icon {
+ width: 25px;
+ height: 25px;
+ }
+
+ .navigation-panel .text {
+ font-size: 0.7rem;
+ }
+}
\ No newline at end of file