simoes/SAE_WEB_2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout des fichiers

Browse Source
This commit is contained in:
Lukas SIMOES
2025-01-17 22:36:53 +01:00
parent c9b0667045
commit ae3ff19143
5 changed files with 1090 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
Site_CV.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CV Responsive</title>
<link rel="stylesheet" href="site_cv.css">
</head>
<body>
<header>
<img src="mathias_photo.png"class="logo" alt="Mathias">
<h1>Mathias PLACIDE--CONTRERAS</h1>
</header>
<div class="container">
<div class="profile">
<h2>Télécharger le CV</h2>
<div>
<a href="CV_2025-01-15_Mathias_PLACIDE--CONTRERAS-1.pdf" download="CV_2025-01-15_Mathias_PLACIDE--CONTRERAS-1.pdf">Télécharger le fichier PDF</a>
</div>
</div>
</div>
</body>
</html>

87
site_cv.css Normal file
View File

@@ -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;
}
}

404
style.css Normal file
View File

@@ -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;
}
}

308
style_boutique.css Normal file
View File

@@ -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;
}
}

266
style_entre.css Normal file
View File

@@ -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;
}
}