Skip to content

Commit

Permalink
Fine , i'll do it myself .
Browse files Browse the repository at this point in the history
  • Loading branch information
c3k4ah committed May 25, 2024
1 parent 93c35d1 commit fa3f86a
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 2 deletions.
40 changes: 40 additions & 0 deletions assets/css/cover_style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
.cover {
background-size: cover;
background-position: center;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-align: center;
font-size: 2rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.cover-text {
position: relative;
width: 100%;
height: 200px;

}
.cover-text-citation {
font-size: 1.5rem;
font-weight: bold;


}
.cover-text-bigtitle {
-webkit-text-stroke: 3px#f29f54;
font-size: 13rem;
color: #212226;
}
.layer-one {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.layer-two {
margin: 0 20%;
z-index: 2;
}
48 changes: 48 additions & 0 deletions assets/css/header_style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
position: fixed;
/* height: 100px; */
width: 100%;
z-index: 1000;
}


.header-logo {
font-size: 24px;
color: #007bff;
text-decoration: none;
}


.header-right {
display: flex;
}

.header-home-item,
.header-apropos-item,
.header-projets-item,
.header-experience-item {
margin-left: 15px;
color: #fefcfb;
font-size: 16px;
font-weight: 700;
text-decoration: none;
}


/* .header-home-item:hover,
.header-apropos-item:hover,
.header-projets-item:hover,
.header-experience-item:hover {
color: #007bff;
} */
26 changes: 26 additions & 0 deletions assets/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
@font-face {
font-family: 'Nunito';
src:
url('../fonts/Nunito/NunitoSans_7pt_Condensed-Regular.ttf'),
url('../fonts/Nunito/NunitoSans_7pt_Expanded-Regular.ttf'),
url('../fonts/Nunito/NunitoSans_7pt-Regular.ttf'),
url('../fonts/Nunito/NunitoSans_10pt_Condensed-Regular.ttf'),
url('../fonts/Nunito/NunitoSans_10pt_Expanded-Regular.ttf'),
url('../fonts/Nunito/NunitoSans_10pt-Regular.ttf');
}
@font-face {
font-family: 'Releway';
src:
url('../fonts/Releway/Raleway-Black.ttf'),
url('../fonts/Releway/Raleway-BlackItalic.ttf'),
url('../fonts/Releway/Raleway-Bold.ttf'),
url('../fonts/Releway/Raleway-BoldItalic.ttf'),
url('../fonts/Releway/Raleway-ExtraBold.ttf');
}

body {
font-family: 'Nunito', sans-serif;
font-size: 16px;
line-height: 1.6;
background-color: #212226;
}
11 changes: 11 additions & 0 deletions assets/js/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
window.onload = function() {
var headerPlaceholder = document.getElementById('header-placeholder');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'components/header.html', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
headerPlaceholder.innerHTML = xhr.responseText;
}
};
xhr.send();
};
9 changes: 9 additions & 0 deletions components/header.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<div class="header">
<a class="header-logo">Logo</a>
<div class="header-right">
<a class="header-home-item" >Acceuil</a>
<a class="header-apropos-item">A-propos</a>
<a class="header-projets-item">Contact</a>
<a class="header-experience-item">Experiences</a>
</div>
</div>
28 changes: 26 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,33 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - Phoenix</title>
<link rel="stylesheet" href="assets/css/header_style.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/cover_style.css">
<title>Portfolio - Phenix</title>
</head>
<body>
<div id="root"></div>
<!-- <div class="header">
<a class="header-logo">Logo</a>
<div class="header-right">
<a class="header-home-item" >Acceuil</a>
<a class="header-apropos-item">A-propos</a>
<a class="header-projets-item">Contact</a>
<a class="header-experience-item">Experiences</a>
</div>
</div>
<br> -->
<div class ="cover">
<div class="cover-text">
<div class="layer-one"><h1 class="cover-text-bigtitle">Phenix</h1></div>
<div class="layer-two"><p class="cover-text-citation">"Comme le Phénix, nous portons en nous la capacité de renaître et de transformer notre existence."</p>
</div>

</div>
</div>

</body>
</html>
<!-- <script src="assets/js/script.js"></script> -->
</html>

0 comments on commit fa3f86a

Please sign in to comment.