izanic/SAE_WEB_S1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

retouche

Browse Source
This commit is contained in:
Hugo IZANIC 2024-01-18 15:28:25 +01:00
parent 70c6cce8ae
commit c56ba963f6
7 changed files with 90 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
CSS/accueil.css
View File

@ -16,30 +16,14 @@ header{
}
#img_gauche_txt_droite{
display: flex;
flex-direction: row-reverse;
justify-content: space-around;
align-items: center;
padding-bottom: 20vh;
a{
outline: none;
}
#img_gauche_txt_droite p{
background-color: rgba(250,250,250,0.2);
backdrop-filter: blur(10px);
border-radius: 30px;
width: 40%;
padding: 1%;
}
#img_droite_txt_gauche{
#img-txt div{
display: inline-flex;
flex-direction: row;
justify-content: space-around;
@ -48,39 +32,34 @@ header{
}
#img_droite_txt_gauche p{
background-color: rgba(250,250,250,0.2);
#img-txt p{
backdrop-filter: blur(10px);
border-radius: 30px;
padding: 1%;
width: 40%;
}
.img_main{
backdrop-filter: blur(10px);
height: 22rem;
width: 35rem;
height: 18rem;
width: 30rem;
border-radius: 15px;
transition: transform ease 0.4s;
filter: saturate(0.2);
}
.img_txt:hover .img_main{
#img-txt div:hover .img_main{
box-shadow: 0 40px 60px rgba(150,0,0,0.7);
transform: scale(1.2,1.2);
transition: transform ease 0.8s;
filter: saturate(1);
}
#img_gauche_txt_droite:not(:hover) p{
#img-txt div:not(:hover) p{
background-color: rgba(150,150,150,0.4);
}
#img_droite_txt_gauche:not(:hover) p{
background-color: rgba(150,150,150,0.4);
}
@ -100,7 +79,7 @@ header{
#fond_2 video{
margin: 1%;
}
#
@media only screen and (max-width: 800px){
body{

6
CSS/partenaire.css
View File

@ -57,8 +57,8 @@
}
#ligne-colonne img{
width: 20vw;
height: 30vh;
width: 15vw;
height: 25vh;
}
#ligne-colonne ul{
color: black;
@ -67,7 +67,7 @@
}
aside{
width: 50vw;
width: 40vw;
}
#btn-contact{

3
CSS/print.css
View File

@ -0,0 +1,3 @@
nav,footer{
display: none;
}

10
CSS/propos.css Normal file
View File

@ -0,0 +1,10 @@
#cv-1-2{
display: flex;
justify-content: space-between;
}
#cv-1{
display: flex;
flex-direction: column;
}

16
CSS/styles.css
View File

@ -2,13 +2,17 @@ body{
margin: 0;
}
p{
font-family:sans-serif ;
}
header{
margin-bottom: 10vh;
}
.txt_rouge{color: red;font-weight: bold;}
.txt_jaune{color: gold;font-weight: bold;}
.txt_rouge{color: red;}
.txt_jaune{color: gold;}
ul{
margin: 0;
@ -40,8 +44,9 @@ h3{
font-size: 2em;
}
p {
margin: 0;
a{
text-decoration: none;
}
nav{
@ -159,6 +164,9 @@ nav li{
main p{
font-weight: 100;
margin: 0;
text-align: justify;
font-size: 25px;
}

20
HTML/page_4.html
View File

@ -4,6 +4,7 @@
<title> Casino du coeur </title>
<meta charset="utf-8">
<link rel = "stylesheet" type = "text/css" href = "../CSS/styles.css">
<link rel = "stylesheet" type = "text/css" href = "../CSS/propos.css">
<link rel = "stylesheet" type = "text/css" href = "../CSS/print.css" media="print">
<meta name="keywords" content="casino">
<link rel = "icon" type = "/image/png" href = "../img/icon.png">
@ -26,6 +27,25 @@
</nav>
</div>
</header>
<main>
<div id="cv-1-2">
<div id="cv-1">
<h2> NOM </h2>
<div class="parcours-scolaire">
<ul>
<li> BUT Informatique </li>
<li> Baccalauréat général </li>
</ul>
</div>
</div>
<div id="cv-2">
<h2> NOM2 </h2>
</div>
</div>
</main>
<footer>
<div id="reseaux">

55
index.html
View File

@ -55,30 +55,39 @@
<h2>
Qui sommes-nous ?
</h2>
<div id="img_gauche_txt_droite" class="img_txt">
<div id="img-txt">
<div id="img_gauche_txt_droite">
<p>
ipsum <a href="HTML/page_4.html"><span class="txt_rouge"> dolor</span></a> sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<p>
ipsum <a href="HTML/page_4.html"><span class="txt_rouge"> <strong>dolor</strong></span></a> sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<img class="img_main" src="img/casion_background.jpeg">
</div>
<h2>
Nos valeurs
</h2>
<div id="img_droite_txt_gauche">
<img class="img_main" src="img/casion_background.jpeg">
<p>
ipsum dolor sit amet,<a href="HTML/page_3.html"><span class="txt_rouge"><strong> dolor</strong> </span></a>adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<img class="img_main" src="img/casion_background.jpeg">
</div>
<h2>
Nos valeurs
</h2>
<div id="img_droite_txt_gauche" class="img_txt">
<p>
ipsum dolor sit amet,<a href="HTML/page_3.html"><span class="txt_rouge"> dolor </span></a>adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<img class="img_main" src="img/casion_background.jpeg">
</div>
</div>
@ -87,7 +96,7 @@
Notre devise : <span class="txt_rouge">Tout</span> le monde est <span class="txt_jaune">Gagnant</span> !
</h3>
<video id="video-presentation" controls>
<video id="video-presentation" controls autoplay muted loop>
<source src="img/video_presentation.mp4" type="video/mp4">
</video>