diff --git a/Site_CV.html b/Site_CV.html
new file mode 100644
index 0000000..c662ca0
--- /dev/null
+++ b/Site_CV.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ CV Responsive
+
+
+
+
+ 
+ Mathias PLACIDE--CONTRERAS
+
+
+
+
+
+
diff --git a/site_cv.css b/site_cv.css
new file mode 100644
index 0000000..bf91cf9
--- /dev/null
+++ b/site_cv.css
@@ -0,0 +1,87 @@
+
+
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ background-color: #DDFFE7;
+ color: #131212;
+}
+
+header {
+ background: #167D7F;
+ color: white;
+ padding: 1rem 0;
+ display: flex;
+
+}
+
+
+header .logo {
+ height: 8rem;
+ width: 8rem;
+ object-position: left top;
+ border-radius: 20%;
+}
+
+header h1 {
+ font-size: 2.5rem;
+ display: flex;
+ align-items: center;
+ margin: 2rem;
+}
+
+a {
+ list-style: none;
+ text-decoration: underline overline #167D7F;
+ text-decoration-style: double;
+ color: #161515;
+ font-size: 20px;
+ margin: 0 1rem;
+ cursor: pointer;
+ transition: .2s;
+}
+
+
+.container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 1rem;
+}
+
+.profile {
+ display: grid;
+ align-items: center;
+ text-align: center;
+ padding: 10rem;
+}
+
+.profile h2 {
+ border-bottom: 2px solid #98D7C2;
+ display: inline-block;
+ padding-bottom: 0.5rem;
+ margin-bottom: 1rem;
+}
+
+
+.profile div {
+ display: grid;
+ background: #98D7C2;
+ padding: 1rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+
+
+}
+
+
+@media (max-width: 768px) {
+
+ header {
+ flex-direction: column;
+ align-items: center;
+ height: auto;
+
+ }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..95aafaf
--- /dev/null
+++ b/style.css
@@ -0,0 +1,404 @@
+@import url(https://db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&family=Montserrat&family=Open+Sans:wght@300&family=Oswald&family=Playfair+Display:wght@500&display=swap');
+body{
+ padding: 0;
+ margin: 0;
+ background: rgb(255, 255, 255);
+}
+
+header a{
+
+ color: #FFFF;
+ text-decoration: none;
+}
+
+
+li{
+ list-style: none;
+}
+
+h2{
+ padding-top: 1em;
+ font-size: 3em;
+ font-family: "Montserrat", serif;
+ font-optical-sizing: auto;
+ font-weight: 800;
+ font-style: normal;
+ color: rgb(46, 52, 118)
+}
+
+.close{
+ display: none;
+}
+
+.title_page{
+ text-align: center;
+ margin: 2rem 0;
+}
+
+.main_header {
+ position: sticky;
+}
+
+header{
+ background: #003B73;
+ height: 7rem;
+ padding: 1rem 0;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ text-align: center;
+}
+
+header ul {
+ display: flex;
+ justify-content: space-evenly;
+}
+
+h1 {
+ font-family: "SoDo Sans SemiBold";
+ font-size: 2.5rem;
+}
+
+
+#disclaimer {
+ padding-left: 20%;
+ padding-right: 20%;
+ text-align: center;
+ font-family: "Montserrat", serif;
+ font-optical-sizing: auto;
+ font-weight: 500;
+ font-style: normal;
+}
+
+header .logo {
+ height: 7rem;
+ width: 7rem;
+ object-position: left top;
+}
+
+.cache {
+ display:none;
+}
+
+ul {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-family: "SoDo Sans SemiBold";
+}
+
+li {
+ padding-right:3em;
+}
+
+
+.content{
+ margin: auto;
+ box-shadow: 0 5px 10px #BFD7ED;
+ background: rgba(255, 255, 255, 0.651);
+ width: 50%;
+ height: 70rem;
+ border-radius: 1.5rem;
+}
+
+.content h3{
+ font-size: 1.5rem;
+ margin: 1rem;
+ font-family: "SoDo Sans SemiBold";
+ color: #003B73;
+}
+
+.content p{
+ margin: 1rem;
+ font-family: "SoDo Sans SemiBold";
+
+}
+
+article{
+ display: grid;
+ grid-template-columns: 30% 70%;
+ background: #BFD7ED;
+ height: 16rem;
+ margin: 20px;
+ border-radius: 20px;
+ font-size: 1.4em;
+ text-decoration: none;
+}
+
+#twt_swift {
+ background-color: red;
+ width:100%;
+}
+
+.closeBtn {
+ font-family: "SoDo Sans SemiBold";
+}
+
+
+article img{
+ height: 16rem;
+ width: 100%;
+ border-radius: 20px;
+ border-radius: 20px 0px 0px 20px ;
+}
+
+
+footer{
+ background: rgba(255, 255, 255, 0.651);
+ margin: 20px;
+ height: 100px;
+
+}
+
+form {
+ display:grid;
+ margin-left:20%;
+ width:60%;
+ padding-top: 10em;
+ grid-template-columns: 100%;
+ row-gap: 3em;
+}
+
+input {
+ border-radius: 10px;
+ box-shadow: 7px 7px rgb(190, 193, 225);
+ width:100%;
+ height:70%;
+ font-size: 1em;
+}
+
+div.nom, div.mail, div.naissance, div.sexe, div.message, div.submit {
+ display:flex;
+ justify-content: space-between;
+ gap: 1em;
+}
+
+div.sexe > input {
+ font-size: 1.5em;
+ height:50%;
+ box-shadow: none;
+}
+
+div.sexe {
+ border: 0px;
+ height: 1.5em;
+ font-size: 1.5em;
+ font-family: "Montserrat", serif;
+ font-optical-sizing: auto;
+ font-weight: 500;
+ font-style: normal;
+ display:flex;
+ align-items: center;
+}
+
+div.sexe > label {
+ font-size: 1.4em;
+}
+
+div.message > input {
+ height:5em;
+}
+
+li {
+ text-decoration: none;
+}
+
+div.submit {
+ width:50%;
+}
+
+div.submit > input {
+ height:3em;
+ border-radius: 5px;
+ border-color: rgb(98, 93, 168);
+ background-color: #003B73;
+ color: white;
+ cursor: pointer;
+ font-family: "Montserrat", serif;
+ font-optical-sizing: auto;
+ font-weight: 500;
+ font-style: normal;
+}
+
+label {
+ color: rgb(10, 16, 73);
+ font-family: "Kanit", serif;
+ font-weight: 400;
+ font-style: normal;
+ font-size:2em;
+}
+
+
+textarea {
+ width:100%;
+ height:10em;
+ font-size:1em;
+ font-family: "Montserrat", serif;
+ font-optical-sizing: auto;
+ font-weight: 500;
+ font-style: normal;
+}
+
+
+
+
+
+.radio-content {
+ display: flex;
+ font-family: "SoDo Sans SemiBold";
+}
+
+.main_header {
+ position: sticky;
+ top: 0;
+}
+
+
+@media screen and (max-width: 768px) {
+
+
+ header {
+ flex-direction: column;
+ align-items: center;
+ height: auto;
+
+ }
+
+ header li {
+ display:none;
+ }
+
+ #closeBtn {
+ font-family: "Kanit", serif;
+ font-weight: 400;
+ font-style: normal;
+ font-size:2em;
+ }
+
+
+
+ header .logo {
+ height: 8rem;
+ width: 8rem;
+ }
+
+ #openBtn {
+ width:100%;
+ margin-left:2em;
+ }
+
+ .sidenav{
+ height: 100%;
+ width: 100%;
+ position: fixed;
+ z-index: 1;
+ top: 0;
+ left: -100%;
+ background-color: #BFD7ED;
+ padding-top: 60px;
+ transition: left 0.5s ease;
+ }
+
+
+ .sidenav a {
+ padding: 8px 8px 8px 32px;
+ text-decoration: none;
+ font-size: 25px;
+ color: #0074B7;
+ display: block;
+ transition: 0.3s;
+ }
+
+ .sidenav a:hover {
+ color: #003B73;
+ }
+
+ .sidenav ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ /* Active class */
+ .sidenav.active {
+ left: 0;
+ }
+
+ /* Close btn */
+ .sidenav .close {
+ position: absolute;
+ top: 0;
+ right: 25px;
+ font-size: 36px;
+ }
+
+ /* Icône burger */
+ .burger-icon span {
+ display: block;
+ width: 35px;
+ height: 5px;
+ background-color: #537ca2;
+ margin: 6px 0;
+ }
+
+
+
+ nav {
+ height: auto;
+ justify-content: center;
+ padding: 10px;
+ }
+
+ nav ul {
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ padding: 0;
+ margin: 0;
+ display: block;
+ }
+
+ nav ul li {
+ font-size: 1rem;
+ }
+
+ .content {
+ height: auto;
+ width: 100%;
+ margin: auto;
+ padding-bottom: 1rem;
+ }
+
+ .content a{
+ width: 90%;
+ height: 16rem;
+ }
+
+ article{
+ display: flex;
+ flex-flow: column nowrap;
+ height: 30%;
+ margin: 1rem;
+ }
+
+
+
+ .image{
+ border-radius: 20px;
+ height: 90%;
+ width: 90%;
+ padding: 0.5rem;
+ margin: auto;
+ }
+
+ /* Footer */
+ footer {
+ height: auto;
+ padding: 10px;
+ text-align: center;
+ }
+}
+
+
diff --git a/style_boutique.css b/style_boutique.css
new file mode 100644
index 0000000..e9c3e18
--- /dev/null
+++ b/style_boutique.css
@@ -0,0 +1,308 @@
+@import url(https://db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&family=Montserrat&family=Open+Sans:wght@300&family=Oswald&family=Playfair+Display:wght@500&display=swap');
+body{
+
+ padding: 0;
+ margin: 0;
+ background: rgb(255, 255, 255);
+
+}
+
+
+
+header a{
+ color: #FFFF;
+ text-decoration: none;
+}
+
+li{
+ list-style: none;
+}
+
+h2{
+ font-family: "SoDo Sans SemiBold";
+}
+
+.close{
+ display: none;
+}
+
+.title_page{
+ text-align: center;
+ margin: 2rem 0;
+}
+
+header{
+ background: #003B73;
+ height: 90px;
+ padding: 1rem 0; /* 1 rem = 16 px*/
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ text-align: center;
+}
+
+header h1 {
+ font-family: "SoDo Sans SemiBold";
+ font-size: 2.5rem;
+ flex-grow: 1;
+
+}
+
+body {
+ font-size:2em;
+}
+
+
+header .logo {
+ height: 7rem;
+ width: 7rem;
+ object-position: left top;
+}
+nav li a {
+ color: #0074B7;
+ font-family: "SoDo Sans SemiBold";
+ text-decoration: none;
+}
+nav{
+ background: rgba(255, 255, 255, 0.651);
+ height: 4rem;
+ box-shadow: 0 5px 10px #BFD7ED;
+
+
+}
+
+nav ul {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 25%;
+}
+
+.content2{
+ display: flex;
+ margin: 2rem auto;
+ justify-content: space-between;
+ gap: 20px;
+ box-shadow: 0 5px 10px #BFD7ED;
+ background: rgba(255, 255, 255, 0.651);
+ width: 70%;
+ height: 22rem;
+ border-radius: 1.5rem;
+}
+
+.content2 h3{
+ font-size: 1.5rem;
+ margin: 1rem;
+ font-family: "SoDo Sans SemiBold";
+ color: #003B73;
+}
+
+.content2 p{
+ margin: 1rem;
+ font-family: "SoDo Sans SemiBold";
+
+}
+
+
+.content{
+ margin: 2rem auto;
+ box-shadow: 0 5px 10px #BFD7ED;
+ background: rgba(255, 255, 255, 0.651);
+ width: 70%;
+ height: 23rem;
+ padding-top: 1rem;
+ border-radius: 1.5rem;
+}
+
+.content h3{
+ font-size: 1.5rem;
+ margin: 1rem;
+ font-family: "SoDo Sans SemiBold";
+ color: #003B73;
+}
+
+.content p{
+ margin: 1rem;
+ font-family: "SoDo Sans SemiBold";
+
+}
+
+article{
+ flex: 1;
+ display: flex;
+ grid-template-columns: 30% 70%;
+ background: #BFD7ED;
+ height: 16rem;
+ margin: 20px;
+ border-radius: 20px;
+ text-decoration: none;
+}
+
+
+.article2{
+ flex: 1;
+ background: #BFD7ED;
+ margin: 20px;
+ border-radius: 20px;
+ text-decoration: none;
+}
+
+article img{
+ height: 16rem;
+ width: 100%;
+ border-radius: 20px;
+ border-radius: 20px 0px 0px 20px ;
+}
+
+
+footer{
+ background: rgba(255, 255, 255, 0.651);
+ margin: 20px;
+ height: 100px;
+
+}
+
+@media (max-width: 768px) {
+
+
+ header {
+ flex-direction: column;
+ align-items: center;
+ height: auto;
+
+ }
+
+ header .logo {
+ height: 8rem;
+ width: 8rem;
+ }
+
+ .sidenav{
+ height: 100%;
+ width: 100%;
+ position: fixed;
+ z-index: 1;
+ top: 0;
+ left: -100%;
+ background-color: #BFD7ED;
+ padding-top: 60px;
+ transition: left 0.5s ease;
+ }
+
+ .sidenav a {
+ padding: 8px 8px 8px 32px;
+ text-decoration: none;
+ font-size: 25px;
+ color: #0074B7;
+ display: block;
+ transition: 0.3s;
+ }
+
+ .sidenav a:hover {
+ color: #003B73;
+ }
+
+ .sidenav ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ /* Active class */
+ .sidenav.active {
+ left: 0;
+ }
+
+ /* Close btn */
+ .sidenav .close {
+ position: absolute;
+ top: 0;
+ right: 25px;
+ font-size: 36px;
+ }
+
+ /* Icône burger */
+ .burger-icon span {
+ display: block;
+ width: 35px;
+ height: 5px;
+ background-color: #003B73;
+ margin: 6px 0;
+ }
+
+
+
+ nav {
+ height: auto;
+ justify-content: center;
+ padding: 10px;
+ }
+
+ nav ul {
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ padding: 0;
+ margin: 0;
+ display: block;
+ }
+
+ nav ul li {
+ font-size: 1rem;
+ }
+
+ .content2 {
+ height: auto;
+ width: 100%;
+ margin: 2rem auto;
+ padding-bottom: 4rem;
+ }
+
+
+
+ .content {
+ height: auto;
+ width: 100%;
+ margin: 2rem auto;
+ padding-bottom: 1rem;
+ }
+
+ .content a{
+ width: 90%;
+ height: 16rem;
+ }
+
+ article{
+ display: flex;
+ flex-flow: column nowrap;
+ height: 30%;
+ margin: 1rem;
+ }
+
+ .article2{
+ display: flex;
+ height: 30%;
+ margin: auto;
+ }
+
+
+
+ .image{
+ border-radius: 20px;
+ height: 90%;
+ width: 90%;
+ padding: 0.5rem;
+ margin: auto;
+ }
+
+ /* Footer */
+ footer {
+ height: auto;
+ padding: 10px;
+ text-align: center;
+ }
+}
+
+
diff --git a/style_entre.css b/style_entre.css
new file mode 100644
index 0000000..30b297a
--- /dev/null
+++ b/style_entre.css
@@ -0,0 +1,266 @@
+@import url(https://db.onlinewebfonts.com/c/d7e8a95865396cddca89b00080d2cba6?family=SoDo+Sans+SemiBold);
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,700&family=Montserrat&family=Open+Sans:wght@300&family=Oswald&family=Playfair+Display:wght@500&display=swap');
+body{
+ padding: 0;
+ margin: 0;
+ background: rgb(255, 255, 255);
+}
+
+header a{
+ color: #FFFF;
+ text-decoration: none;
+}
+
+li{
+ list-style: none;
+}
+
+h2{
+ font-family: "SoDo Sans SemiBold";
+
+}
+
+.close{
+ display: none;
+}
+
+.title_page{
+ text-align: center;
+ margin: 2rem 0;
+ color: #003B73;
+ font-size: 2rem;
+}
+
+header{
+ background: #003B73;
+ height: 90px;
+ padding: 1rem 0; /* 1 rem = 16 px*/
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ text-align: center;
+}
+
+header h1 {
+ font-family: "SoDo Sans SemiBold";
+ font-size: 2.5rem;
+ flex-grow: 1;
+
+}
+
+#mathias {
+ height:100%;
+ width:13em;
+}
+
+#text_sw {
+ width: 100%;
+}
+
+body {
+ font-size:2em;
+}
+
+header .logo {
+ height: 7rem;
+ width: 7rem;
+ object-position: left top;
+}
+nav li a {
+ color: #0074B7;
+ font-family: "SoDo Sans SemiBold";
+ text-decoration: none;
+}
+nav{
+ background: rgba(255, 255, 255, 0.651);
+ height: 4rem;
+ box-shadow: 0 5px 10px #BFD7ED;
+
+
+}
+
+nav ul {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 25%;
+}
+
+
+.content{
+ margin: auto;
+ box-shadow: 0 5px 10px #BFD7ED;
+ background: rgba(255, 255, 255, 0.651);
+ width: 70%;
+ height: 75rem;
+ border-radius: 1.5rem;
+}
+
+.content h3{
+ font-size: 1.5rem;
+ margin: 1rem;
+ font-family: "SoDo Sans SemiBold";
+ color: #003B73;
+}
+
+.content p{
+ margin: 1rem;
+ font-family: "SoDo Sans SemiBold";
+
+}
+
+.equipe{
+ display: flex;
+ justify-content: space-evenly;
+
+}
+
+article{
+ display: grid;
+ grid-template-columns: 30% 70%;
+ background: #BFD7ED;
+ height: 16rem;
+ margin: 20px;
+ border-radius: 20px;
+ text-decoration: none;
+}
+
+article img{
+ height: 16rem;
+ width: 100%;
+ border-radius: 20px;
+ border-radius: 20px 0px 0px 20px ;
+}
+
+
+
+footer{
+ background: rgba(255, 255, 255, 0.651);
+ margin: 20px;
+ height: 100px;
+
+}
+
+@media (max-width: 1040px) {
+
+
+ header {
+ flex-direction: column;
+ align-items: center;
+ height: auto;
+
+ }
+
+
+ .sidenav{
+ height: 100%;
+ width: 100%;
+ position: fixed;
+ z-index: 1;
+ top: 0;
+ left: -100%;
+ background-color: #BFD7ED;
+ padding-top: 60px;
+ transition: left 0.5s ease;
+ }
+
+ .sidenav a {
+ padding: 8px 8px 8px 32px;
+ text-decoration: none;
+ font-size: 25px;
+ color: #0074B7;
+ display: block;
+ transition: 0.3s;
+ }
+
+ .sidenav a:hover {
+ color: #003B73;
+ }
+
+ .sidenav ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ /* Active class */
+ .sidenav.active {
+ left: 0;
+ }
+
+ /* Close btn */
+ .sidenav .close {
+ position: absolute;
+ top: 0;
+ right: 25px;
+ font-size: 36px;
+ }
+
+ /* Icône burger */
+ .burger-icon span {
+ display: block;
+ width: 35px;
+ height: 5px;
+ background-color: #003B73;
+ margin: 6px 0;
+ }
+
+
+
+ nav {
+ height: auto;
+ justify-content: center;
+ padding: 10px;
+ }
+
+ nav ul {
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 15px;
+ padding: 0;
+ margin: 0;
+ display: block;
+ }
+
+ nav ul li {
+ font-size: 1rem;
+ }
+
+ .content {
+ height: auto;
+ width: 100%;
+ margin: auto;
+ padding-bottom: 1rem;
+ }
+
+ .content a{
+ width: 90%;
+ height: 16rem;
+ }
+
+ article{
+ display: flex;
+ flex-flow: column nowrap;
+ height: 30%;
+ margin: 1rem;
+ }
+
+ .image{
+ border-radius: 20px;
+ height: 90%;
+ width: 90%;
+ padding: 0.5rem;
+ margin: auto;
+ }
+
+
+ /* Footer */
+ footer {
+ height: auto;
+ padding: 10px;
+ text-align: center;
+ }
+}
+
+