diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2024-07-10 22:31:36 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2024-07-10 22:31:36 +0200 |
| commit | 001cf3e20a80d9797b9ccf1f6cc3facd18b0d477 (patch) | |
| tree | 518b54323bd6298d8825d1abc5653416549e8fd3 | |
| parent | 0fd3c14fbbc797638ff1714d68e361b2822fad36 (diff) | |
proto: added a picture and fixed the layout a bit
| -rw-r--r-- | img/PI.jpg | bin | 0 -> 191389 bytes | |||
| -rw-r--r-- | img/PI.png | bin | 0 -> 308235 bytes | |||
| -rw-r--r-- | index.html | 33 | ||||
| -rw-r--r-- | style.css | 66 |
4 files changed, 76 insertions, 23 deletions
diff --git a/img/PI.jpg b/img/PI.jpg Binary files differnew file mode 100644 index 0000000..02fa02e --- /dev/null +++ b/img/PI.jpg diff --git a/img/PI.png b/img/PI.png Binary files differnew file mode 100644 index 0000000..6d8a593 --- /dev/null +++ b/img/PI.png @@ -8,18 +8,29 @@ <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> - <h1>Martial Simon</h1> - <section> - <h2>Qui ça ?</h2> - <p>Féru d'informatique, je suis étudiant en classe préparatoire à l’Ecole Pour l’Informatique et les -Techniques Avancées (EPITA) à Lyon. Consciencieux et travailleur, je me sers de ces compétences -pour mes études mais aussi dans mes loisirs que sont la pratique du modélisme, de la musique (guitare -et basse) et du sport (escalade, cyclisme). J’aime également le travail en équipe comme j’ai pu -l’expérimenter dès le lycée avec un projet collaboratif de ballon sonde stratosphérique, puis au cours de projets de groupe au sein de mes études supérieures (réalisation d'un jeu vidéo et logiciel d'OCR), ou encore en étant -membre actif actuellement d’un groupe de musique (voir le <a class="text-link" style="color: rgb(124, 246, 187)" href="lesrunninggags.marcellus.cc">site du groupe</a>).</p> - </section> + <header> + <h1><a href="#">Martial Simon</a></h1> + <nav> + <test> ~ </test> + <a href="skills.html"><h2>Compétences</h2></a> + <a href="contact.html"><h2>Contact</h2></a> + <test> ~ </test> + </nav> + </header> + <section id="presentation"> + <div> + <h2>Qui donc ?</h2> + <p>Féru d'informatique, je suis étudiant en classe préparatoire à l’Ecole Pour l’Informatique et les + Techniques Avancées (EPITA) à Lyon. Consciencieux et travailleur, je me sers de ces compétences + pour mes études mais aussi dans mes loisirs que sont la pratique du modélisme, de la musique (guitare + et basse) et du sport (escalade, cyclisme). J’aime également le travail en équipe comme j’ai pu + l’expérimenter dès le lycée avec un projet collaboratif de ballon sonde stratosphérique, puis au cours de projets de groupe au sein de mes études supérieures (réalisation d'un jeu vidéo et logiciel d'OCR), ou encore en étant + membre actif actuellement d’un groupe de musique (voir le <a class="text-link" style="color: rgb(124, 246, 187)" href="lesrunninggags.marcellus.cc">site du groupe</a>).</p> + </div> + <img id="id-pic" src="img/PI.png" alt="photo de moi"> +</section> <section> - <h2 id="formation">Formation</h2> + <h2 id="formation">Mon parcours</h2> <div id="timeline"> <div class="timestamp">2020</div> <div class="events"> @@ -1,19 +1,45 @@ body { background: linear-gradient(74deg, skyblue, pink 60%, salmon); - padding: 0 10vh + padding: 0 12vw; +} + +header { + display: flex; + justify-content: space-evenly; + align-content: baseline; } h1::before, h1::after { content: " - "; } -/*h2::before, h2::after { - content: " ~ "; -}*/ -h2 { +section h2 { font-style: italic; } +a { + color: black; + text-decoration: none; +} + +nav { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + position: relative; + padding: default 3vw; + height: 100%; +} + +nav a, nav test { + display: inline-block; +} + +nav test { + margin: auto 0; +} + .text-link::after { content: '<'; } @@ -22,21 +48,35 @@ h2 { content: '>'; } -section p { - max-width: 500px; +section>span>p { + padding-left: 30vw; } @media screen and (max-width: 600px) { - section p { - max-width: 90vw; + body { + padding: 10px 5vw; + } + + section>span>p { + padding-left: 10vw; } } section:nth-of-type(odd) { - justify-items: end; text-align: end; } +section#presentation { + display: flex; + flex-direction: row-reverse; + justify-content: end; + height: 50vh; +} + +#id-pic { + height: auto; +} + h1, h2 { transition-property: text-decoration; transition-duration: 0.7s; @@ -55,10 +95,12 @@ h1:hover,h2:hover { #timeline::before { position: absolute; content: ''; - width: 5px; + width: 4px; height: 100%; - background: skyblue; + background: #add8e6; left: 14px; + border: 1px solid grey; + box-shadow: 1px 1px 1px #696969; border-radius: 3px; } |
