diff --git a/resources/css/style.css b/resources/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..742493f4e05fb3e8d2f4b9c7b39723a759fc51ee
--- /dev/null
+++ b/resources/css/style.css
@@ -0,0 +1,332 @@
+/* Global styles */
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body{
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 16px;
+ line-height: 1.5;
+ background-color: #FEFAE0;
+ /* color: #333; */
+}
+
+/* Header styles */
+header{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 50px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 999;
+ background-color: #A9B388;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+
+.logo h1{
+ font-size: 24px;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+nav ul{
+ display: flex;
+ list-style: none;
+}
+
+
+nav li{
+ margin-right: 20px;
+}
+
+nav a{
+ display: block;
+ padding: 10px;
+ color: #333;
+ font-weight: 600;
+ text-decoration: none;
+ transition: color 0.3s ease-in-out;
+}
+
+nav a:hover{
+ color: #506b1a;
+}
+
+.results-button a{
+ text-decoration: none;
+ font-weight: 700;
+ border-radius: 25px;
+ padding: 10px 20px;
+ border: 2px solid #007bff;
+ font-size: 1rem;
+ background-color: transparent;
+ transition: all 0.3s ease-in-out;
+
+ opacity: 0;
+}
+
+.results-button a:hover{
+ color: #fff;
+ background-color: #007bff;
+ opacity: 0;
+}
+
+
+
+.results-button button{
+ text-decoration: none;
+ color: #333;
+ font-weight: 200;
+ border-radius: 10px;
+ padding: 5px 10px;
+ border: 1px solid #5F6F52;
+ /* font-size: 1rem; */
+ background-color: transparent;
+ transition: all 0.3s ease-in-out;
+}
+
+.results-button button:hover{
+ color: #fff;
+ background-color: #5F6F52;
+}
+
+
+/* Main section styles */
+
+.main{
+ background-color: #FEFAE0;
+ color: #fff;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ background: linear-gradient #007bff #00c8ff;
+ background-size: cover;
+
+}
+
+.container{
+ display: flex;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.main-content{
+ max-width: 62%;
+ padding: 0 50px;
+ /* Text over the background-image */
+ position: absolute;
+ background-color: rgba(80, 107, 26, 0.5);
+ margin-left: 20px;
+ margin-top: 150px;
+
+
+}
+
+.main-content .animated-title{
+ font-size: 4ren;
+ font-weight: 700;
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
+ margin-bottom: 20px;
+ line-height: 1.2;
+ position: relative;
+ animation: slide-up 0.6s cubic-bezier(0.65, 0.05, 0.36, 1.0) 0.5s forwards;
+}
+
+.animated-title span{
+ display: inline-block;
+ transform: translateY(50px);
+ opacity: 0;
+ animation: slide-up 0.4s cubic-bezier(0.65, 0.05, 0.36, 1.0) 1s forwards;
+}
+
+.animated-title span:nth-child(1){
+ animation-delay: 1.5s;
+}
+
+.animated-text{
+ font-size: 1.5rem;
+ font-weight: 400;
+ opacity: 0;
+ margin-bottom: 20px;
+ transform: translateY(50px);
+ animation: slide-up 0.4s cubic-bezier(0.65, 0.05, 0.36, 1.0) 1.5s forwards;
+}
+
+.test-button{
+ color: #fff;
+ background-color: transparent;
+ border: 2px solid #fff;
+ padding: 10px 30px;
+ border-radius: 5px;
+ font-size: 1rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ text-decoration: none;
+ transition: all 0.2s ease-in-out;
+ transform: translateY(50px);
+ animation: slide-up 0.4s cubic-bezier(0.65, 0.05, 0.36, 1.0) 2s forwards;
+}
+
+.test-button:hover{
+ color: #123;
+ background-color: #fff;
+
+}
+
+.main-image{
+ max-width: 38%;
+ position: relative;
+ margin-top: 6rem;
+ animation: slide-right 0.6s cubic-bezier(0.65, 0.05, 0.36, 1.0) 0.5s forwards;
+
+}
+
+.main-image img{
+ max-width: 100%;
+ height: auto;
+ display: block;
+}
+
+.centered-image{
+ text-align: center;
+ margin: 20px auto;
+ /* margin-bottom: 120px; */
+ max-width: 1000px;
+ background-color: #fff;
+ padding: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.centered-image img{
+ max-width: 100%;
+ height: auto;
+ display: block;
+ margin: 0 auto;
+
+}
+
+@keyframes slide-right{
+ from{
+ transform: translateX(-50px);
+ opacity: 0;
+ }
+ to{
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slide-up {
+ from{
+ transform: translateY(50px);
+ opacity: 0;
+ }
+ to{
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+.contact-page {
+ max-width: 600px;
+ margin: 200px auto;
+ padding: 20px;
+ background-color: #FFFBF5;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+}
+
+.contact-page img{
+ width: 50%;
+ height: auto;
+}
+
+.about-page {
+ max-width: 1200px;
+ margin: 200px auto;
+ padding: 20px;
+ background-color: #FFFBF5;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+}
+
+.imgTextleft{
+ float: left;
+ margin-right: 10px;
+ width: 30%;
+ height: auto;
+}
+
+.imgTextright {
+ float: right;
+ margin-left: 10px;
+ width: 30%;
+ height: auto;
+}
+
+.data-page {
+ max-width: 1500px;
+ margin: 200px auto;
+ padding: 20px;
+ background-color: #FFFBF5;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ overflow: auto;
+
+
+}
+
+footer{
+ background-color: #A9B388;
+ color: #555;
+ text-align: center;
+ padding: 10px;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ font-size: small;
+}
+
+
+/* DATA TABLE SECTION */
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 20px 0;
+ font-size: 16px;
+ text-align: left;
+ }
+
+ th, td {
+ padding: 12px;
+ border-bottom: 1px solid #ddd;
+ min-width: 150px;
+ }
+
+ th {
+ background-color: #f2f2f2;
+ }
+
+ td.contentInformations {
+ min-width: 400px;
+ }
+
+ tr:hover {
+ background-color: rgba(169, 179, 136, 0.15);;
+ /* background-color: #A9B388; */
+ /* background-color: #f5f5f5; */
+ }
\ No newline at end of file