modified

2026-06-03 15:07:33 +02:00 · 2023-10-21 01:34:59 +02:00
parent eaa5238131
commit 46563a6b1b
7 changed files with 171 additions and 3 deletions
@@ -1,12 +1,58 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
-    <title>Portfolio</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,900">
+    <title>Portfolio - Arthur</title>
 </head>
 <body>
-    
+    <header>
+        <h1>Portfolio</h1>
+        <nav>
+            <ul>
+                <li><a href="#" lang="fr">Accueil</a></li>
+                <li><a href="#" lang="en">Home</a></li>
+                <li><a href="#" lang="fr">À propos</a></li>
+                <li><a href="#" lang="en">About</a></li>
+                <li><a href="#" lang="fr">Projets</a></li>
+                <li><a href="#" lang="en">Projects</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <div class="main-left">
+            <h2 lang="fr">Salut ! 👋🏻<br>Je m'appelle Arthur.</h2>
+            <h2 lang="en">Hay there! 👋🏻<br>I'm Arthur.</h2>
+            
+            <h3 lang="fr">Fondateur</h3>
+            <h3 lang="en">Founder</h3>
+
+            <div class="barre-verticale">
+                <p lang="fr">Je suis un jeune français passionné de développement, je suis un autodidacte et ma créativité ne connaît pas de limites. Chaque pixel que je modifie raconte une histoire. Passionné par la transformation d'idées en expériences visuellement captivantes, je crée des projets qui repoussent les limites de l'innovation en matière de design.</p>
+                <p lang="en">I am a young Frenchman with a passion for development, I am a self-taught learner and my creativity knows no limits. Every pixel I edit tells a story. Passionate about transforming ideas into visually captivating experiences, I create projects that push the boundaries of design innovation.</p>
+            </div>
+
+            <p class="citation" lang="fr">"Au milieu de chaque difficulté se trouve une opportunité."</p>
+            <p class="citation" lang="en">"In the middle of every difficulty lies opportunity."</p>
+            <p class="citation-auth">Albert Einstein</p>
+
+            <ul class="div-lien">
+                <a href=""><div><img src="img/logo insta.png" alt="Logo">Instagram</div></a>
+                <a href=""><div><img src="img/logo github.png" alt="Logo">Github</div></a>
+                <a href=""><div><img src="img/Logo Discord.png" alt="Logo">Discord</div></a>
+                <a href=""><div lang="fr"><img src="" alt="Logo">Autre...</div></a>
+                <a href=""><div lang="en"><img src="" alt="Logo">Other...</div></a>
+            </ul>
+        </div>
+        <div class="main-right">
+            <img src="img/pp.jpg" alt="Photo de profil" class="pp" lang="fr">
+            <img src="img/pp.jpg" alt="Profile picture" class="pp" lang="en">
+        </div>
+    </main>
+
+    <script src="script.js"></script>
 </body>
 </html>
@@ -0,0 +1,10 @@
+document.addEventListener("DOMContentLoaded", function() {
+    var userLanguage = navigator.language || navigator.userLanguage;
+    
+    // Supposons que vous preniez en charge l'anglais (en) et le français (fr)
+    if (userLanguage.startsWith("fr")) {
+        document.body.classList.add("lang-fr");
+    } else {
+        document.body.classList.add("lang-en");
+    }
+});
@@ -0,0 +1,112 @@
+[lang='en'] {
+    display: none;
+}
+
+[lang='fr'] {
+    display: block;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+}
+
+header {
+    margin: 100px 100px 100px;
+}
+
+h1 {
+    padding: 0 0 50px 0;
+    font-weight: 900;
+    font-size: 50px;
+}
+
+h2 {
+    font-size: 40px;
+    font-weight: 700;
+    margin-bottom: 30px;
+}
+
+h3 {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 10px;
+}
+
+.barre-verticale {
+    border-left: 5px solid rgb(94, 94, 94);
+    padding-left: 15px;
+    margin-bottom: 10px;
+}
+
+.citation {
+    font-style: italic;
+    color: rgb(61, 61, 61);
+}
+
+.citation-auth {
+    color: rgb(61, 61, 61);
+    margin-bottom: 40px;
+}
+
+main {
+    margin: 100px 100px 100px;
+    display: flex;
+}
+
+.main-left {
+    margin-right: 40px;
+}
+
+.main-right {
+    margin-left: 40px;
+}
+
+nav ul {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 50px 0 50px;
+}
+
+nav li {
+    list-style: none;
+    margin: 0 5px 0 5px;
+}
+
+nav a {
+    padding: 5px 10px; 
+    color: rgb(83, 83, 83); 
+    text-decoration: none; 
+    border: 2px solid rgb(83, 83, 83); 
+    border-radius: 5px; 
+    cursor: pointer; 
+    font-weight: bold;
+}
+
+nav a:hover {
+    color: gray; 
+    border-color: gray;
+}
+
+.div-lien div {
+    text-align: left;
+    text-decoration: none;
+    margin: 5px 0 5px;
+    padding: 20px 40px; 
+    color: rgb(83, 83, 83); 
+    text-decoration: none; 
+    border: 2px solid rgb(83, 83, 83); 
+    border-radius: 5px; 
+    cursor: pointer; 
+    font-weight: bold;
+}
+
+.div-lien img {
+    width: 50px;
+}
+
+.pp {
+    width: 500px;
+    border-radius: 50%;
+}