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 7 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>
<header>
<div id = "header_background"></div>
<a href="Perso" class="pages">Ma vie perso</a>
<a href="Etudes" class="pages">Ma vie étudiante</a>
<div id = "header_wall">
<img src="moi3.png" alt="Ma grosse tete la" title="ça pousse" id="photo"/>
</div>
</header>
@ -32,10 +30,20 @@
<div id="gradient"></div>
</div>
<div id="piedPage">
<a href="Perso">Ma vie perso</a>
<a href="Etudes">Ma vie étudiante</a>
<aside>
<h2 id="reseaux">Réseaux sociaux</h2>
<div id="divperso" class="divpages">
<a href="Perso" class="pages" id="viePerso"><img src="cafe.jpg" alt="cafe" title="cafe" id="cafe" class="illustrations"/></a>
<div id="paraperso">
<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">
<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>
@ -44,10 +52,9 @@
</div>
</aside>
</div>
<div id="testdiv" >
<img src="matrix.jpg" alt="Ma grosse tete la" title="ça pousse" id="imgtest"/>
</div>
<footer>footer</footer>
<footer>
footer
</footer>
</body>

165
style.css
Unescape View File

@ -3,7 +3,6 @@ body {
margin: 0;
padding: 0;
overflow-x: hidden;
border: dashed purple;
display: flex;
flex-direction:column;
}
@ -25,44 +24,33 @@ body {
z-index:2;
}
#photo {
position: absolute; /* L'image reste à la même position même lors du défilement */
display:block;
right: 22vw;
bottom:0vh;
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{
display: flex;
justify-content: flex-end;
overflow: hidden;
height: 100vh;
}
header {
height: 100vh; /* Header prend aussi tout l'écran */
#header_wall{
width: 0vw;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(51, 45, 45);
border: dashed green;
padding-right: 30vw;
background-color: rgb(73, 73, 73)
}
#header_background {
position: absolute;
#photo{
position:relative;
rotate: 320deg;
transform: scaleX(-1);
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: 1;
border: dashed red;
justify-content: flex-end;
width:auto;
justify-self: flex-start;
z-index:-1;
right: -65px;
top: 8vh;
right:200px;
}
.pages{
@ -96,16 +84,12 @@ header {
.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;
}
#titleInformatique{
position: absolute;
align-self:center;
}
.titleBackground:hover{
color: white;
background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */
@ -113,15 +97,9 @@ header {
border-radius: 5px;
}
#reseaux{
text-align: center;
}
#liens{
border: dashed blue;
display: flex;
align-items: flex-start;
justify-content: space-around;
#titleInformatique{
position: absolute;
align-self:center;
}
.logo{
@ -129,11 +107,6 @@ header {
width: auto;
}
#piedPage{
background: linear-gradient(black, rgb(73, 73, 73));
height: 500px;
}
#testdiv{
width: 100%; /* Chaque div prend tt la largeur de l'écra */
height: 100vh; /* Chaque div prend tt la hauteur de l'écran */
@ -144,8 +117,96 @@ header {
#imgtest{
height:100vh;
width:100%;
background-size: cover;
size: cover;
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