esteban.jacques
/
site_portfolio_qui_marche
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Premiere version qui marche XD

Browse Source
master
Esteban JACQUES 8 months ago
parent db236780b7
commit 5fbf3173e9
5 changed files with 174 additions and 63 deletions
Show Stats Download Patch File Download Diff File

BIN
amphi
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 225 KiB

BIN
cafe.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

29
main
Unescape View File

@ -12,9 +12,7 @@
<body> <body>
<header> <header>
<div id = "header_background"></div> <div id = "header_wall">
<a href="Perso" class="pages">Ma vie perso</a>
<a href="Etudes" class="pages">Ma vie étudiante</a>
<img src="moi3.png" alt="Ma grosse tete la" title="ça pousse" id="photo"/> <img src="moi3.png" alt="Ma grosse tete la" title="ça pousse" id="photo"/>
</div> </div>
</header> </header>
@ -32,10 +30,20 @@
<div id="gradient"></div> <div id="gradient"></div>
</div> </div>
<div id="piedPage"> <div id="piedPage">
<a href="Perso">Ma vie perso</a> <div id="divperso" class="divpages">
<a href="Etudes">Ma vie étudiante</a> <a href="Perso" class="pages" id="viePerso"><img src="cafe.jpg" alt="cafe" title="cafe" id="cafe" class="illustrations"/></a>
<aside> <div id="paraperso">
<h2 id="reseaux">Réseaux sociaux</h2> <h2 class="titleillustrations">Vie perso</h2>
</div>
</div>
<div id="divetudes" class="divpages">
<div id="paraetudes">
<h2 class="titleillustrations">Vie étudiante</h2>
</div>
<a href="Etudes" class="pages" id="etudes"><img src="amphi" alt="amphi" title="amphi" id="amphi" class="illustrations"/></a>
</div>
<aside id="asidetitle">
<h2 id="reseauxtitle">Réseaux sociaux</h2>
<div id="liens"> <div id="liens">
<a href="http://instagram.com"><img src="insta.png" id="insta" class="logo"></a> <a href="http://instagram.com"><img src="insta.png" id="insta" class="logo"></a>
<a href="http://x.com"><img src="x.png" id="x" class="logo"></a> <a href="http://x.com"><img src="x.png" id="x" class="logo"></a>
@ -44,10 +52,9 @@
</div> </div>
</aside> </aside>
</div> </div>
<div id="testdiv" > <footer>
<img src="matrix.jpg" alt="Ma grosse tete la" title="ça pousse" id="imgtest"/> footer
</div> </footer>
<footer>footer</footer>
</body> </body>

165
style.css
Unescape View File

@ -3,7 +3,6 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: hidden; overflow-x: hidden;
border: dashed purple;
display: flex; display: flex;
flex-direction:column; flex-direction:column;
} }
@ -25,44 +24,33 @@ body {
z-index:2; z-index:2;
} }
#photo { header{
position: absolute; /* L'image reste à la même position même lors du défilement */ display: flex;
display:block; justify-content: flex-end;
right: 22vw; overflow: hidden;
bottom:0vh; height: 100vh;
height: 85vh; /* L'image prend toute la hauteur de la fenêtre */
width: auto; /* Laisse la largeur s'adapter automatiquement à la hauteur */
rotate: 320deg;
transform: scaleX(-1);
z-index:0;
}
#a{
margin-left:95%;
z-index:2;
} }
header { #header_wall{
height: 100vh; /* Header prend aussi tout l'écran */ width: 0vw;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgb(51, 45, 45); padding-right: 30vw;
border: dashed green; background-color: rgb(73, 73, 73)
} }
#header_background { #photo{
position: absolute; position:relative;
rotate: 320deg;
transform: scaleX(-1);
height: 100vh; height: 100vh;
width: 30vw; width:auto;
display: flex; justify-self: flex-start;
right: 0vw; z-index:-1;
background-color:rgb(73, 73, 73); right: -65px;
box-shadow: -30px 0 15px rgba(0, 0, 0, 0.5); /* Ombre de 25px à droite */ top: 8vh;
z-index: 1; right:200px;
border: dashed red;
justify-content: flex-end;
} }
.pages{ .pages{
@ -96,16 +84,12 @@ header {
.titleBackground{ .titleBackground{
color: rgba(255, 255, 255, 0.596); color: rgba(255, 255, 255, 0.596);
background-color: rgba(0, 0, 0, 0.5); /* Ajoute un fond semi-transparent derrière le texte */ background-color: rgba(0, 0, 0, 0.5); /* Ajoute un fond semi-transparent derrière le texte */
font-size: 10vh;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
text-decoration: none; text-decoration: none;
} }
#titleInformatique{
position: absolute;
align-self:center;
}
.titleBackground:hover{ .titleBackground:hover{
color: white; color: white;
background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */ background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */
@ -113,15 +97,9 @@ header {
border-radius: 5px; border-radius: 5px;
} }
#reseaux{ #titleInformatique{
text-align: center; position: absolute;
} align-self:center;
#liens{
border: dashed blue;
display: flex;
align-items: flex-start;
justify-content: space-around;
} }
.logo{ .logo{
@ -129,11 +107,6 @@ header {
width: auto; width: auto;
} }
#piedPage{
background: linear-gradient(black, rgb(73, 73, 73));
height: 500px;
}
#testdiv{ #testdiv{
width: 100%; /* Chaque div prend tt la largeur de l'écra */ width: 100%; /* Chaque div prend tt la largeur de l'écra */
height: 100vh; /* Chaque div prend tt la hauteur de l'écran */ height: 100vh; /* Chaque div prend tt la hauteur de l'écran */
@ -144,8 +117,96 @@ header {
#imgtest{ #imgtest{
height:100vh; height:100vh;
width:100%; width:100%;
background-size: cover; size: cover;
overflow-x: hidden; overflow-x: hidden;
object-fit: contain; object-fit: cover;
}
#piedPage{
background: linear-gradient(black, rgb(73, 73, 73));
height: 120vh;
display: flex;
align-items:center;
justify-content:flex-end;
flex-direction:column;
padding-bottom: 5vh;
padding-top: 20vh;
}
.pages{
color: rgb(73, 73, 73);
font-size: 10vh;
align-self: baseline;
justify-self: space-around;
text-decoration: none;
}
.illustrations{
height: 30vh;
border-radius: 20%;
}
#cafe:hover{
filter: brightness(60%);
}
#amphi:hover{
filter: brightness(60%);
}
#cafe{
margin-left:8vw;
}
#amphi{
margin-right:8vw;
}
.divpages{
width: 100vw;
display:flex;
padding-top:0;
}
.titleillustrations{
color: white;
margin:0;
padding:0;
font-size: 300%;
display: flex;
margin: 5%
}
#paraperso{
height:100%;
width:100%;
display:flex;
align-items: center;
}
#paraetudes{
height:100%;
width:100%;
display:flex;
align-items: center;
justify-content: flex-end;
}
#asidetitle{
display:flex;
flex-direction: column;
}
#reseauxtitle{
text-align: center;
justify-content: space-around;
}
#liens{
display: flex;
align-items: flex-start;
justify-content: space-around;
width:100vw;
} }

43
test.txt
Unescape View File

@ -0,0 +1,43 @@
#photo {
height: 85vh; /* L'image prend toute la hauteur de la fenêtre */
width: auto; /* Laisse la largeur s'adapter automatiquement à la hauteur */
rotate: 320deg;
transform: scaleX(-1);
z-index:0;
}
#a{
margin-left:95%;
z-index:2;
}
header {
height: 100vh; /* Header prend aussi tout l'écran */
display: flex;
justify-content: flex-end;
align-items: center;
background-color: rgb(51, 45, 45);
border: dashed green;
flex-wrap: wrap;
}
#header_wall{
height: 100vh;
width: 30vw;
display: flex;
right: 0vw;
background-color:rgb(73, 73, 73);
box-shadow: -30px 0 15px rgba(0, 0, 0, 0.5); /* Ombre de 25px à droite */
z-index: 3;
border: dashed red;
justify-content: flex-start;
}
<a href="Perso" class="pages">Ma vie perso</a>
<a href="Etudes" class="pages">Ma vie étudiante</a>
Write Preview
Loading…
Cancel
Save