Architecture complète du site revue, ajout de la page Automobile et de son style et ajout du style de la page perso. Il reste à faire le menu, les requetes php TP7, peut etre essayer de caler un float, faire le menu TP4, mettre les liens sites a 400px de hauteur, et rajouter l'ombre derriere le mur.
parent
5fbf3173e9
commit
fe477975c4
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Galerie d'images</title>
|
||||||
|
<link rel="stylesheet" href="style_automobile.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="gallerie_images">
|
||||||
|
<img src="automobile_photos/S1.png" alt="S1" title="Audi S1">
|
||||||
|
<img src="automobile_photos/RS4.png" alt="RS4" title="Audi RS4">
|
||||||
|
<img src="automobile_photos/R8.png" alt="R8" title="Audi R8">
|
||||||
|
<img src="automobile_photos/IMPREZA.png" alt="IMPREZA" title="Subaru IMPREZA WRX STI">
|
||||||
|
<img src="automobile_photos/RS4.png" alt="RS4" title="Audi RS4">
|
||||||
|
<img src="automobile_photos/R8.png" alt="R8" title="Audi R8">
|
||||||
|
<img src="automobile_photos/IMPREZA.png" alt="IMPREZA" title="Subaru IMPREZA WRX STI">
|
||||||
|
<img src="automobile_photos/S1.png" alt="S1" title="Audi S1">
|
||||||
|
<img src="automobile_photos/R8.png" alt="R8" title="Audi R8">
|
||||||
|
<img src="automobile_photos/IMPREZA.png" alt="IMPREZA" title="Subaru IMPREZA WRX STI">
|
||||||
|
<img src="automobile_photos/S1.png" alt="S1" title="Audi S1">
|
||||||
|
<img src="automobile_photos/AMG.png" alt="AMG" title="Mercedes A35 AMG">
|
||||||
|
<img src="automobile_photos/IMPREZA.png" alt="IMPREZA" title="Subaru IMPREZA WRX STI">
|
||||||
|
<img src="automobile_photos/S1.png" alt="S1" title="Audi S1">
|
||||||
|
<img src="automobile_photos/AMG.png" alt="AMG" title="Mercedes A35 AMG">
|
||||||
|
<img src="automobile_photos/RX7.png" alt="RX7" title="Mazda RX-7">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 4.1 MiB |
|
After Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 3.2 MiB |
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 3.9 MiB |
@ -1,212 +1,181 @@
|
|||||||
/* Style global */
|
.syncopate-regular {
|
||||||
body {
|
font-family: "Syncopate", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.syncopate-bold {
|
||||||
|
font-family: "Syncopate", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
#id_1{
|
||||||
|
font-family: 'Syncopate', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction:column;
|
flex-direction:column;
|
||||||
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style pour chaque section avec image de fond */
|
#id_1_1{
|
||||||
.background {
|
|
||||||
width: 100%; /* Chaque div prend tt la largeur de l'écra */
|
|
||||||
height: 100vh; /* Chaque div prend tt la hauteur de l'écran */
|
|
||||||
background-attachment: scroll; /* Permet de "rattacher" les images au site ce qui crée un défilement d'image un peu comme apple */
|
|
||||||
background-size: cover; /* L'image de fond couvre toute et se redimensionne auto pour garder ses proportions la div */
|
|
||||||
background-position: center; /* Centre background dans la div */
|
|
||||||
display: flex; /* Aide à la mise en colonne des background mais j'en sais pas plus */
|
|
||||||
justify-content: center; /* Centrer horizontalement le txt dans une div*/
|
|
||||||
align-items: center; /* Centrer verticalement le txt dans une div*/
|
|
||||||
text-align: center; /* Grace a flexbox inutile*/
|
|
||||||
color: white; /* Couleur de la div */
|
|
||||||
font-size: 2rem; /* Après recherche, dépend des browsers mais 1 rem représente 1 * font-size de la racine qui est 16px en général */
|
|
||||||
overflow: hidden; /* Empèche de défiler horizontalement si les images dépassent sur les côtés de la fenêtre */
|
|
||||||
z-index:2;
|
|
||||||
}
|
|
||||||
|
|
||||||
header{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header_wall{
|
#id_1_1_1{
|
||||||
width: 0vw;
|
width: 0vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-right: 30vw;
|
padding-right: 30vw;
|
||||||
background-color: rgb(73, 73, 73)
|
background-color: rgb(73, 73, 73);
|
||||||
}
|
}
|
||||||
|
|
||||||
#photo{
|
#id_1_1_1_1{
|
||||||
position:relative;
|
position: relative;
|
||||||
rotate: 320deg;
|
rotate: 320deg;
|
||||||
transform: scaleX(-1);
|
transform: scaleX(-1);
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
width:auto;
|
width: auto;
|
||||||
justify-self: flex-start;
|
z-index: -1;
|
||||||
z-index:-1;
|
|
||||||
right: -65px;
|
|
||||||
top: 8vh;
|
top: 8vh;
|
||||||
right:200px;
|
left: 10vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pages{
|
#id_1_1_1_2{
|
||||||
z-index: 1;
|
color: white;
|
||||||
}
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
#automobile {
|
padding: 0;
|
||||||
background-image: url("RS4.jpg");
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
#ski {
|
|
||||||
background-image: url("ski.jpg");
|
|
||||||
}
|
|
||||||
|
|
||||||
#avion {
|
|
||||||
background-image: url("avion.jpg");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#informatique{
|
#id_1_2{
|
||||||
background-image: url("matrix4k.jpg");
|
|
||||||
display:flex;
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
#gradient{
|
.conteneur_des_images_de_fond_pour_galeries_et_liens{
|
||||||
width: 100vw;
|
width: 100%; /* Chaque div prend tt la largeur de l'écra */
|
||||||
height: 600px;
|
height: 90vh; /* Chaque div prend tt la hauteur de l'écran */
|
||||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
|
display:flex;
|
||||||
align-self:flex-end;
|
align-items:center;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleBackground{
|
.liens_sur_images_de_fond_pour_galeries{
|
||||||
color: rgba(255, 255, 255, 0.596);
|
display: flex;
|
||||||
background-color: rgba(0, 0, 0, 0.5); /* Ajoute un fond semi-transparent derrière le texte */
|
height: 100%;
|
||||||
font-size: 10vh;
|
width: 100%;
|
||||||
padding: 10px;
|
align-self: flex-start;
|
||||||
border-radius: 5px;
|
justify-self: center;
|
||||||
text-decoration: none;
|
object-fit: cover;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleBackground:hover{
|
.images_de_fond_pour_galeries:hover{
|
||||||
color: white;
|
filter: blur(2px);
|
||||||
background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#titleInformatique{
|
|
||||||
position: absolute;
|
|
||||||
align-self:center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo{
|
.images_de_fond_pour_galeries{
|
||||||
height: 50px;
|
height: 100%;
|
||||||
width: auto;
|
width: 100%;
|
||||||
|
align-self: flex-start;
|
||||||
|
justify-self: center;
|
||||||
|
object-fit: cover;
|
||||||
|
z-index: -1;
|
||||||
|
transition: filter 0.5s ease 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#testdiv{
|
#id_1_2_4_2{
|
||||||
width: 100%; /* Chaque div prend tt la largeur de l'écra */
|
position: absolute;
|
||||||
height: 100vh; /* Chaque div prend tt la hauteur de l'écran */
|
align-self: flex-end;
|
||||||
display:flex;
|
height: 50%;
|
||||||
align-items:flex-start;
|
width: 100vw;
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0,0,0,1));
|
||||||
|
z-index:1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#imgtest{
|
#id_1_6{
|
||||||
height:100vh;
|
position: relative;
|
||||||
width:100%;
|
top: 30vh;
|
||||||
size: cover;
|
display: flex;
|
||||||
overflow-x: hidden;
|
flex-direction: column;
|
||||||
object-fit: cover;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#id_1_6_1{
|
||||||
#piedPage{
|
|
||||||
background: linear-gradient(black, rgb(73, 73, 73));
|
|
||||||
height: 120vh;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items:center;
|
align-items: center;
|
||||||
justify-content:flex-end;
|
justify-content: flex-start;
|
||||||
flex-direction:column;
|
|
||||||
padding-bottom: 5vh;
|
|
||||||
padding-top: 20vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pages{
|
#id_1_6_1_1{
|
||||||
color: rgb(73, 73, 73);
|
float: left;
|
||||||
font-size: 10vh;
|
height: 40vh;
|
||||||
align-self: baseline;
|
width: auto;
|
||||||
justify-self: space-around;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.illustrations{
|
.illustrations_pour_pages_de_vie{
|
||||||
height: 30vh;
|
position: relative;
|
||||||
border-radius: 20%;
|
height: 100%;
|
||||||
}
|
padding-right: 2vw;
|
||||||
|
padding-left: 2vw;
|
||||||
|
border-radius: 60px;
|
||||||
|
|
||||||
#cafe:hover{
|
|
||||||
filter: brightness(60%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#amphi:hover{
|
.illustrations_pour_pages_de_vie:hover{
|
||||||
filter: brightness(60%);
|
filter: brightness(60%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#cafe{
|
.paragraphes_pour_pages_de_vie{
|
||||||
margin-left:8vw;
|
color: white;
|
||||||
}
|
|
||||||
|
|
||||||
#amphi{
|
|
||||||
margin-right:8vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divpages{
|
|
||||||
width: 100vw;
|
|
||||||
display:flex;
|
|
||||||
padding-top:0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleillustrations{
|
#id_1_6_2{
|
||||||
color: white;
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
font-size: 300%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 5%
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
#paraperso{
|
#id_1_6_2_1{
|
||||||
height:100%;
|
float: right;
|
||||||
width:100%;
|
height: 40vh;
|
||||||
display:flex;
|
width: auto;
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#paraetudes{
|
.logos_réseaux_sociaux{
|
||||||
height:100%;
|
height: 10vh;
|
||||||
width:100%;
|
width: auto;
|
||||||
display:flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#asidetitle{
|
#id_1_6_3{
|
||||||
display:flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-left:2vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#id_1_6_3_1{
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#reseauxtitle{
|
#id_1_6_3_2{
|
||||||
text-align: center;
|
height: 60vh;
|
||||||
justify-content: space-around;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#liens{
|
#id_1_6_3_2_1{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
width:100vw;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallerie_images{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
max-width: 1200px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallerie_images img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallerie_images img:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
body {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Syncopate', sans-serif;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 2em;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
width: 80vw;
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #fff;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue