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 */
|
||||
body {
|
||||
.syncopate-regular {
|
||||
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;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
/* Style pour chaque section avec image de fond */
|
||||
.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{
|
||||
#id_1_1{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#header_wall{
|
||||
#id_1_1_1{
|
||||
width: 0vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-right: 30vw;
|
||||
background-color: rgb(73, 73, 73)
|
||||
background-color: rgb(73, 73, 73);
|
||||
}
|
||||
|
||||
#photo{
|
||||
position:relative;
|
||||
#id_1_1_1_1{
|
||||
position: relative;
|
||||
rotate: 320deg;
|
||||
transform: scaleX(-1);
|
||||
height: 100vh;
|
||||
width:auto;
|
||||
justify-self: flex-start;
|
||||
z-index:-1;
|
||||
right: -65px;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
z-index: -1;
|
||||
top: 8vh;
|
||||
right:200px;
|
||||
left: 10vh;
|
||||
}
|
||||
|
||||
.pages{
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#automobile {
|
||||
background-image: url("RS4.jpg");
|
||||
}
|
||||
|
||||
#ski {
|
||||
background-image: url("ski.jpg");
|
||||
}
|
||||
#id_1_1_1_2{
|
||||
color: white;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
#avion {
|
||||
background-image: url("avion.jpg");
|
||||
}
|
||||
|
||||
#informatique{
|
||||
background-image: url("matrix4k.jpg");
|
||||
#id_1_2{
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#gradient{
|
||||
width: 100vw;
|
||||
height: 600px;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
|
||||
align-self:flex-end;
|
||||
.conteneur_des_images_de_fond_pour_galeries_et_liens{
|
||||
width: 100%; /* Chaque div prend tt la largeur de l'écra */
|
||||
height: 90vh; /* Chaque div prend tt la hauteur de l'écran */
|
||||
display:flex;
|
||||
align-items:center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.titleBackground{
|
||||
color: rgba(255, 255, 255, 0.596);
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Ajoute un fond semi-transparent derrière le texte */
|
||||
font-size: 10vh;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
.liens_sur_images_de_fond_pour_galeries{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
justify-self: center;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.titleBackground:hover{
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.images_de_fond_pour_galeries:hover{
|
||||
filter: blur(2px);
|
||||
|
||||
#titleInformatique{
|
||||
position: absolute;
|
||||
align-self:center;
|
||||
}
|
||||
|
||||
.logo{
|
||||
height: 50px;
|
||||
width: auto;
|
||||
.images_de_fond_pour_galeries{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
justify-self: center;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
transition: filter 0.5s ease 0.3s;
|
||||
}
|
||||
|
||||
#testdiv{
|
||||
width: 100%; /* Chaque div prend tt la largeur de l'écra */
|
||||
height: 100vh; /* Chaque div prend tt la hauteur de l'écran */
|
||||
display:flex;
|
||||
align-items:flex-start;
|
||||
#id_1_2_4_2{
|
||||
position: absolute;
|
||||
align-self: flex-end;
|
||||
height: 50%;
|
||||
width: 100vw;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0,0,0,1));
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
#imgtest{
|
||||
height:100vh;
|
||||
width:100%;
|
||||
size: cover;
|
||||
overflow-x: hidden;
|
||||
object-fit: cover;
|
||||
#id_1_6{
|
||||
position: relative;
|
||||
top: 30vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
#piedPage{
|
||||
background: linear-gradient(black, rgb(73, 73, 73));
|
||||
height: 120vh;
|
||||
#id_1_6_1{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:flex-end;
|
||||
flex-direction:column;
|
||||
padding-bottom: 5vh;
|
||||
padding-top: 20vh;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.pages{
|
||||
color: rgb(73, 73, 73);
|
||||
font-size: 10vh;
|
||||
align-self: baseline;
|
||||
justify-self: space-around;
|
||||
text-decoration: none;
|
||||
#id_1_6_1_1{
|
||||
float: left;
|
||||
height: 40vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.illustrations{
|
||||
height: 30vh;
|
||||
border-radius: 20%;
|
||||
}
|
||||
.illustrations_pour_pages_de_vie{
|
||||
position: relative;
|
||||
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%);
|
||||
}
|
||||
|
||||
#cafe{
|
||||
margin-left:8vw;
|
||||
}
|
||||
|
||||
#amphi{
|
||||
margin-right:8vw;
|
||||
}
|
||||
|
||||
.divpages{
|
||||
width: 100vw;
|
||||
display:flex;
|
||||
padding-top:0;
|
||||
.paragraphes_pour_pages_de_vie{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.titleillustrations{
|
||||
color: white;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-size: 300%;
|
||||
#id_1_6_2{
|
||||
display: flex;
|
||||
margin: 5%
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#paraperso{
|
||||
height:100%;
|
||||
width:100%;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
#id_1_6_2_1{
|
||||
float: right;
|
||||
height: 40vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#paraetudes{
|
||||
height:100%;
|
||||
width:100%;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.logos_réseaux_sociaux{
|
||||
height: 10vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#asidetitle{
|
||||
display:flex;
|
||||
#id_1_6_3{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-left:2vw;
|
||||
|
||||
}
|
||||
|
||||
#id_1_6_3_1{
|
||||
color: white;
|
||||
}
|
||||
|
||||
#reseauxtitle{
|
||||
text-align: center;
|
||||
justify-content: space-around;
|
||||
#id_1_6_3_2{
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
#liens{
|
||||
#id_1_6_3_2_1{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
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