now it looks like something

This commit is contained in:
Phuntsok Drak-pa 2019-02-10 17:07:46 +01:00
parent 560ba8f018
commit b502ab2216
No known key found for this signature in database
GPG Key ID: 9CB34B6827C66D22
2 changed files with 374 additions and 86 deletions

View File

@ -19,8 +19,18 @@
<body> <body>
<div class="ribbon"> <div class="ribbon">
<h1>Lucien Cartier-Tilet</h1> <div>
<h2>Étudiant Informatique</h2> <div class="header-container">
<h1>Lucien Cartier-Tilet</h1>
<div class="highlight-h1"></div>
</div>
</div>
<div>
<div class="header-container">
<h2>Étudiant Informatique</h2>
<div class="highlight-h2"></div>
</div>
</div>
<ul class="ribbon-links"> <ul class="ribbon-links">
<li><a href="#cont-xp">Expérience</a></li> <li><a href="#cont-xp">Expérience</a></li>
<li><a href="#cont-skills">Compétences</a></li> <li><a href="#cont-skills">Compétences</a></li>
@ -32,24 +42,45 @@
<div class="sidebar"> <div class="sidebar">
<img class="side-picture center" src="https://cdn.phundrak.fr/img/photo.jpg" /> <img class="side-picture center" src="https://cdn.phundrak.fr/img/photo.jpg" />
<div class="side-card"> <div class="side-card">
<h4>Contact</h4> <div>
<div class="header-container">
<h4>Contact</h4>
<div class="highlight-h4"></div>
</div>
</div>
<div class="side-content"> <div class="side-content">
<a href="mailto:phundrak@phundrak.fr">phundrak@phundrak.fr</a> <a href="mailto:phundrak@phundrak.fr">phundrak@phundrak.fr</a>
<p>+33.(0)6.83.90.56.89</p>
</div> </div>
</div> </div>
<div class="side-card"> <div class="side-card">
<h4>Situation Professionnelle</h4> <div>
<div class="header-container">
<h4>Situation Pro</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p class="side-content">Étudiant, tuteur</p> <p class="side-content">Étudiant, tuteur</p>
<p class="side-content">Ouvert aux opportunités</p> <p class="side-content">Ouvert aux opportunités</p>
</div> </div>
<div class="side-card"> <div class="side-card">
<h4>Présentation</h4> <div>
<div class="header-container">
<h4>Présentation</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p class="side-content">Actuellement étudiant depuis Septembre 2016 en licence dinformatique à lUniversité Vincennes Saint-Denis (Paris VIII), je fût également directeur technique et développeur de voix de synthèse chez VoxWave de Septembre 2012 à Juillet 2018.</p> <p class="side-content">Actuellement étudiant depuis Septembre 2016 en licence dinformatique à lUniversité Vincennes Saint-Denis (Paris VIII), je fût également directeur technique et développeur de voix de synthèse chez VoxWave de Septembre 2012 à Juillet 2018.</p>
<p class="side-content">Mes centres dintérêt sont variés, allant de la programmation à laudio en passant par la linguistique ; je parle par ailleurs courrament en anglais en plus du français (ma langue maternelle).</p> <p class="side-content">Mes centres dintérêt sont variés, allant de la programmation à laudio en passant par la linguistique ; je parle par ailleurs courrament en anglais en plus du français (ma langue maternelle).</p>
</div> </div>
<div class="side-card"> <div class="side-card">
<h4>Mes liens</h4> <div>
<ul> <div class="header-container">
<h4>Mes liens</h4>
<div class="highlight-h4"></div>
</div>
</div>
<ul class="side-links">
<li><a href="https://labs.phundrak.fr/phundrak">GitLab</a></li> <li><a href="https://labs.phundrak.fr/phundrak">GitLab</a></li>
<li><a href="https://github.com/phundrak">Github</a></li> <li><a href="https://github.com/phundrak">Github</a></li>
<li><a href="https://langue.phundrak.fr/">Site de linguistique</a></li> <li><a href="https://langue.phundrak.fr/">Site de linguistique</a></li>
@ -57,32 +88,55 @@
<li><a href="https://youtube.com/phundrak">YouTube</a></li> <li><a href="https://youtube.com/phundrak">YouTube</a></li>
<li><a href="https://instagram.com/phundrak">Instagram</a></li> <li><a href="https://instagram.com/phundrak">Instagram</a></li>
</ul> </ul>
<br/>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div id="cont-xp"> <div id="cont-xp" class="card">
<div class="xp"> <div>
<h3>Expériences Professionnelles</h3> <div class="header-container">
<ul> <h3>Expériences Professionnelles</h3>
<li class="list-lvl1"> <div class="highlight-h3"></div>
<h5>Directeur Technique, Développeur</h5> </div>
<p>VoxWave</p>
<p>Septembre 2012 à Juillet 2018</p>
<ul>
<li>Programmation de voix de synthèse</li>
<li>Recherches linguistiques</li>
<li>Support utilisateur</li>
<li>Formation de recrues</li>
</ul>
</li>
</ul>
</div> </div>
<ul class="card card-lvl2">
<li class="list-lvl1">
<div>
<div class="header-container">
<h4>Directeur Technique, Développeur</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>VoxWave</p>
<p>Septembre 2012 à Juillet 2018</p>
<ul class="two-col-ul">
<li>Programmation de voix de synthèse</li>
<li>Recherches linguistiques</li>
<li>Support utilisateur</li>
<li>Formation de recrues</li>
</ul>
</li>
</ul>
</div> </div>
<div> <div id="cont-skills" class="card">
<h3>Compétences</h3>
<ul> <div>
<div class="header-container">
<h3>Compétences</h3>
<div class="highlight-h3"></div>
</div>
</div>
<ul class="card card-lvl2">
<li class="list-lvl1" id="skills-cs"> <li class="list-lvl1" id="skills-cs">
<h4>Informatique</h4> <div>
<div class="header-container">
<h4>Informatique</h4>
<div class="highlight-h4"></div>
</div>
</div>
<ul> <ul>
<li> <li>
<p class="skill-name">Programmation</p> <p class="skill-name">Programmation</p>
@ -92,7 +146,7 @@
</li> </li>
<li> <li>
<p class="skill-name">Outils de développement</p> <p class="skill-name">Outils de développement</p>
<ul class="skill-list"> <ul class="skill-list two-col-ul">
<li>Emacs</li> <li>Emacs</li>
<li>Git</li> <li>Git</li>
<li>JetBrains CLion</li> <li>JetBrains CLion</li>
@ -106,19 +160,21 @@
</li> </li>
<li> <li>
<p class="skill-name">Systèmes dexploitation</p> <p class="skill-name">Systèmes dexploitation</p>
<ul class="skill-list"> <ul class="skill-list two-col-ul">
<li>GNU/Linux (Arch Linux, Debian, Ubuntu)</li> <li>GNU/Linux (Arch Linux, Debian, Ubuntu)</li>
<li>Microsoft Windows XP/7/8.1/10</li> <li>Microsoft Windows XP/7/8.1/10</li>
</ul> </ul>
</li> </li>
<li> <li>
<p class="skill-name">Synthèse vocale</p> <p class="skill-name">Synthèse vocale</p>
<p class="skill-description">Développement de banques vocales pour VOCALOID3, Alter/Ego, Chipspeech, UTAU</p> <ul class="skill-list two-col-ul">
<p class="skill-description">Utilisation de VOCALOID2/3/4, Alter/Ego, Chipspeech, UTAU, CeVIO Creative Studio</p> <li>Développement de banques vocales pour VOCALOID3, Alter/Ego, Chipspeech, UTAU</li>
<li>Utilisation de VOCALOID2/3/4, Alter/Ego, Chipspeech, UTAU, CeVIO Creative Studio</li>
</ul>
</li> </li>
<li> <li>
<p class="skill-name">Son</p> <p class="skill-name">Son</p>
<ul class="skill-list"> <ul class="skill-list two-col-ul">
<li>FL Studio</li> <li>FL Studio</li>
<li>iZotope RX 4/5/6</li> <li>iZotope RX 4/5/6</li>
<li>T-RackS CS</li> <li>T-RackS CS</li>
@ -137,8 +193,14 @@
</ul> </ul>
</li> </li>
<li class="list-lvl1" id="skills-lang"> <li class="list-lvl1" id="skills-lang">
<h4>Langues Parlées</h4> <div>
<ul> <div class="header-container">
<h4>Langues Parlées</h4>
<div class="highlight-h4"></div>
</div>
</div>
<ul class="two-col-ul">
<li> <li>
<h5>Français</h5> <h5>Français</h5>
<p>Langue maternelle</p> <p>Langue maternelle</p>
@ -154,52 +216,93 @@
</ul> </ul>
</li> </li>
<li class="list-lvl1" id="skills-other"> <li class="list-lvl1" id="skills-other">
<h4>Autres</h4> <div>
<div class="header-container">
<h4>Autres</h4>
<div class="highlight-h4"></div>
</div>
</div>
<ul> <ul>
<li> <li>
<h5>Linguistique</h5> <h5>Linguistique</h5>
<p>Connaissances des concepts grammaticaux, de morphologie, de syntaxe et de phonétique</p> <p>Connaissances des concepts grammaticaux, de morphologie, de syntaxe et de phonétique.</p>
</li> </li>
<li> <li>
<h5>Création de langues</h5> <h5>Création de langues</h5>
<p>Des exemples peuvent être trouvés <a href="https://langue.phundrak.fr">sur mon site de linguistique</a></p> <p>Des exemples peuvent être trouvés <a href="https://langue.phundrak.fr">sur mon site de linguistique</a>.</p>
</li> </li>
<li> <li>
<h5>Création dunivers fictifs</h5> <h5>Création dunivers fictifs</h5>
<p>Création dun univers fictif complexe pour mon roman en cours décriture</p> <p>Création dun univers fictif complexe pour mon roman en cours décriture.</p>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
<div id="cont-training"> <div id="cont-training" class="card">
<h3>Formations</h3> <div>
<ul> <div class="header-container">
<h3>Formations</h3>
<div class="highlight-h3"></div>
</div>
</div>
<ul class="card card-lvl2">
<li class="list-lvl1"> <li class="list-lvl1">
<h5>Licence dInformatique</h5> <div>
<div class="header-container">
<h4>Licence dInformatique</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>Université Vincennes-Saint-Denis (Paris VIII)</p> <p>Université Vincennes-Saint-Denis (Paris VIII)</p>
<p>Depuis Septembre 2016</p> <p>Depuis Septembre 2016</p>
<p class="train-description">Formation en programmation et sciences de linformatique</p> <p class="train-description">Formation en programmation et sciences de linformatique</p>
</li> </li>
<li class="list-lvl1"> <li class="list-lvl1">
<h5>Anglais LLCE</h5> <div>
<div class="header-container">
<h4>Anglais LLCE</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>Université Lumière Lyon 2</p> <p>Université Lumière Lyon 2</p>
<p>Septembre 2013 à Mai 2015</p> <p>Septembre 2013 à Mai 2015</p>
<p class="train-description">Formation dAnglais en fillière Langue, Littérature et Civilisations Étrangères (LLCE)</p> <p class="train-description">Formation dAnglais en fillière Langue, Littérature et Civilisations Étrangères (LLCE)</p>
</li> </li>
<li class="list-lvl1"> <li class="list-lvl1">
<h5>Baccalauréat</h5> <div>
<div class="header-container">
<h4>Baccalauréat</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>Lycée de la Plaine de lAin</p> <p>Lycée de la Plaine de lAin</p>
<p>Septembre 2010 à Juillet 2013</p> <p>Septembre 2010 à Juillet 2013</p>
<p class="train-description">Baccalauréat série Scientifique spécialisation Sciences de lIngénieur, mention bien</p> <p class="train-description">Baccalauréat série Scientifique spécialisation Sciences de lIngénieur, mention bien</p>
</li> </li>
</ul> </ul>
</div> </div>
<div id="cont-hobbies"> <div id="cont-hobbies" class="card">
<h3>Loisirs</h3> <div>
<ul> <div class="header-container">
<h3>Loisirs</h3>
<div class="highlight-h3"></div>
</div>
</div>
<ul class="card card-lvl2">
<li class="list-lvl1"> <li class="list-lvl1">
<h5>Écriture</h5> <div>
<div class="header-container">
<h4>Écriture</h4>
<div class="highlight-h4"></div>
</div>
</div>
<ul> <ul>
<li>Écriture de roman, de nouvelles et de scénarios de jeux de rôles</li> <li>Écriture de roman, de nouvelles et de scénarios de jeux de rôles</li>
<li>Constructions dunivers fictifs</li> <li>Constructions dunivers fictifs</li>
@ -207,14 +310,26 @@
</ul> </ul>
</li class="list-lvl1"> </li class="list-lvl1">
<li class="list-lvl1"> <li class="list-lvl1">
<h5>Musique</h5> <div>
<div class="header-container">
<h4>Musique</h4>
<div class="highlight-h4"></div>
</div>
</div>
<ul> <ul>
<li>Utilisation de voix de synthèse</li> <li>Utilisation de voix de synthèse</li>
<li>Mixage et mastering audio</li> <li>Mixage et mastering audio</li>
</ul> </ul>
</li> </li>
<li class="list-lvl1"> <li class="list-lvl1">
<h5>Lectures</h5> <div>
<div class="header-container">
<h4>Lectures</h4>
<div class="highlight-h4"></div>
</div>
</div>
<ul> <ul>
<li>Livres de programmation (actuellement <i>Clean Code</i> par Robert C. Martin)</li> <li>Livres de programmation (actuellement <i>Clean Code</i> par Robert C. Martin)</li>
<li>Livres de linguistique (principalement par Mark Rosenfelder)</li> <li>Livres de linguistique (principalement par Mark Rosenfelder)</li>
@ -222,7 +337,13 @@
</ul> </ul>
</li> </li>
<li class="list-lvl1"> <li class="list-lvl1">
<h5>Jeux</h5> <div>
<div class="header-container">
<h4>Jeux</h4>
<div class="highlight-h4"></div>
</div>
</div>
<ul> <ul>
<li>RPG (série des Elder Scrolls, ...)</li> <li>RPG (série des Elder Scrolls, ...)</li>
<li>RTS (Hearts of Iron IV)</li> <li>RTS (Hearts of Iron IV)</li>
@ -231,38 +352,80 @@
</li> </li>
</ul> </ul>
</div> </div>
<div id="cont-portfolio"> <div id="cont-portfolio" class="card">
<h3>Portfolio</h3> <div>
<ul> <div class="header-container">
<h3>Portfolio</h3>
<div class="highlight-h3"></div>
</div>
</div>
<ul class="card card-lvl2">
<li class="list-lvl1"> <li class="list-lvl1">
<a class="port-proj-link" href="https://dict.phundrak.fr/">ConlangDict</a> <div>
<a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/dictionary-conlangs">source</a> <div class="header-container">
<h4>ConlangDict</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>Dictionnaire bilingue en ligne entre langues naturelles et langues construites, le serveur est codé en Python basé sur Django&nbsp;2.</p> <p>Dictionnaire bilingue en ligne entre langues naturelles et langues construites, le serveur est codé en Python basé sur Django&nbsp;2.</p>
<a class="port-proj-link" href="https://dict.phundrak.fr/">(lien)</a>
<a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/dictionary-conlangs">(source)</a>
</li> </li>
<li class="list-lvl1"> <li class="list-lvl1">
<a class="port-proj-link" href="https://langue.phundrak.fr/">Langues Construites de Pundrak</a> <div>
<a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/langue-phundrak-fr">source</a> <div class="header-container">
<h4>Langues Construites de Pundrak</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>Site web de linguistique contenant mes fichiers de travail sur mes langues construites. Écrit en org-mode, exporté en HTML et PDF via Emacs.</p> <p>Site web de linguistique contenant mes fichiers de travail sur mes langues construites. Écrit en org-mode, exporté en HTML et PDF via Emacs.</p>
<a class="port-proj-link" href="https://langue.phundrak.fr/">(lien)</a>
<a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/langue-phundrak-fr">(source)</a>
</li> </li>
<li class="list-lvl1"> <li class="list-lvl1">
<a class="port-proj-link" href="https://phundrak.fr/git">Tutoriel sarcastique sur Git</a> <div>
<a class="port-proj-src" href="https://github.com/Phundrak/tutoriel-git">source</a> <div class="header-container">
<h4>Tutoriel sarcastique sur Git</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>Tutoriel sarcastique sur Git, écrit pour débutants souhaitant démarrer avec une utilisation de Git pour gérer leurs projets. Écrit en org-mode, exporté en HTML et PDF via Emacs.</p> <p>Tutoriel sarcastique sur Git, écrit pour débutants souhaitant démarrer avec une utilisation de Git pour gérer leurs projets. Écrit en org-mode, exporté en HTML et PDF via Emacs.</p>
<a class="port-proj-link" href="https://phundrak.fr/git">(lien)</a>
<a class="port-proj-src" href="https://github.com/Phundrak/tutoriel-git">(source)</a>
</li> </li>
<li class="list-lvl1"> <li class="list-lvl1">
<a class="port-proj-link" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">Chat en réseau</a> <div>
<a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">source</a> <div class="header-container">
<h4>Chat en réseau</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>Projet duniversité de chat en ligne se lançant dans un terminal. Écrit en Rust.</p> <p>Projet duniversité de chat en ligne se lançant dans un terminal. Écrit en Rust.</p>
<a class="port-proj-link" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">(lien)</a>
<a class="port-proj-src" href="https://labs.phundrak.fr/phundrak/chat-reseau-p8">(source)</a>
</li> </li>
<li class="list-lvl1"> <li class="list-lvl1">
<a class="port-proj-link" href="http://gl4d.api8.fr/FR/">GL4Dummies</a> <div>
<a class="port-proj-src" href="https://github.com/noalien/GL4Dummies">source</a> <div class="header-container">
<h4>GL4Dummies</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>Participation au développement de GL4Dummies, un framework en C pour faciliter le développement en C avec OpenGL pour débutants en programmation graphique 2D et 3D.</p> <p>Participation au développement de GL4Dummies, un framework en C pour faciliter le développement en C avec OpenGL pour débutants en programmation graphique 2D et 3D.</p>
<a class="port-proj-link" href="http://gl4d.api8.fr/FR/">(lien)</a>
<a class="port-proj-src" href="https://github.com/noalien/GL4Dummies">(source)</a>
</li> </li>
<li class="list-lvl1"> <li class="list-lvl1">
<a class="port-proj-link" href="https://github.com/GitSquared/edex-ui">eDEX UI</a> <div>
<a class="port-proj-src" href="https://github.com/GitSquared/edex-ui">source</a> <div class="header-container">
<h4>eDEX UI</h4>
<div class="highlight-h4"></div>
</div>
</div>
<p>Participation au développement deDEX UI, une interface desktop futuristique.</p> <p>Participation au développement deDEX UI, une interface desktop futuristique.</p>
<a class="port-proj-link" href="https://github.com/GitSquared/edex-ui">(lien)</a>
<a class="port-proj-src" href="https://github.com/GitSquared/edex-ui">(source)</a>
</li> </li>
</ul> </ul>
</div> </div>

View File

@ -1,3 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Fira+Sans&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One&subset=latin-ext,vietnamese');
body { body {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
@ -8,14 +11,28 @@ body {
a { a {
text-decoration: none; text-decoration: none;
color: #2c3e50;
text-decoration: none;
font-style: italic;
border-bottom: 5px solid #2c3e50;
transition: color 0.2s, border-bottom-color 0.2s;
} }
a:hover { a:hover {
text-decoration: underline; color: #8e44ad;
border-bottom-color: #8e44ad;
transition: color 0.4s, border-bottom-color 0.4s;
} }
.sidebar, .content { h1,
/* margin: 10px; */ h2 {
margin: 0;
padding: 0 20px;
}
.sidebar,
.content {
padding: 10px; padding: 10px;
background-color: #bdc3c7; background-color: #bdc3c7;
color: black; color: black;
@ -27,30 +44,20 @@ a:hover {
margin-right: auto; margin-right: auto;
} }
.list-lvl1, .list-lvl1 a {
background-color: #34495e;
color: #ecf0f1;
}
/* ribbon ********************************************************************/ /* ribbon ********************************************************************/
.ribbon { .ribbon {
grid-area: ribbon; grid-area: ribbon;
padding: 0; padding: 0;
margin: 0; margin: 0;
/* background: #2c3e50; */
background-color: #2c3e50; background-color: #2c3e50;
} }
.ribbon, .ribbon a { .ribbon,
.ribbon a {
color: #ecf0f1; color: #ecf0f1;
} }
h1, h2 {
margin: 0;
padding: 0 20px;
}
.ribbon-links { .ribbon-links {
display: table; display: table;
list-style-type: none; list-style-type: none;
@ -60,6 +67,7 @@ h1, h2 {
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
} }
.ribbon-links li { .ribbon-links li {
display: table-cell; display: table-cell;
float: left; float: left;
@ -75,7 +83,7 @@ h1, h2 {
.sidebar { .sidebar {
grid-area: sidebar; grid-area: sidebar;
margin: 10px 5px 10px 0; margin: 10px 5px 10px 10px;
width: 300px; width: 300px;
} }
@ -88,7 +96,8 @@ h1, h2 {
background-color: #ecf0f1; background-color: #ecf0f1;
} }
.side-card h4, .side-content { .side-card h4,
.side-content {
padding: 10px 1em; padding: 10px 1em;
margin: 0; margin: 0;
} }
@ -97,15 +106,131 @@ p.side-content {
padding: 0.5em 1em; padding: 0.5em 1em;
} }
.side-links {
line-height: 1.5em;
}
/* content *******************************************************************/ /* content *******************************************************************/
.content { .content {
grid-area: content; grid-area: content;
margin: 10px 0 10px 5px; margin: 10px 10px 10px 5px;
} }
.content div { .card {
background-color: #ecf0f1; background-color: #ecf0f1;
padding: 10px; padding: 10px;
margin: 10px; margin: 40px 10px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
transition: box-shadow 0.2s;
}
.card:hover {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.7);
transition: box-shadow 0.3s;
}
.card-lvl2 {
margin: 10px 10px 20px 20px;
padding-left: 0;
background-color: #bdc3c7;
}
.list-lvl1,
.list-lvl1 a {
background-color: #bdc3c7;
list-style: none;
}
.list-lvl1 {
padding: 10px;
}
.list-lvl1 h4 {
margin-block-start: 0.5em;
margin-block-end: 1em;
}
.two-col-ul {
collumns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
/* highlights ****************************************************************/
h1,h2,h3,h4,h5 {
font-family: 'Alfa Slab One', serif;
font-weight: 300;
margin: 0;
z-index: 20;
position: relative;
}
h1 {
font-size: 4em;
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.2em;
}
.header-container {
display: inline-block;
}
.highlight-h1, .highlight-h2, .highlight-h3, .highlight-h4, .highlight-h5 {
position: relative;
left: -10px;
width: 120%;
max-width: 90vw;
z-index: 10;
}
.highlight-h1 {
background-color: #1abc9c !important;
height: 48px;
top: -48px;
}
.highlight-h2 {
background-color: #f1c40f !important;
height: 34px;
top: -34px;
}
.highlight-h3 {
background-color: #2ecc71 !important;
height: 24px;
top: -24px;
}
.highlight-h4 {
background-color: #e67e22 !important;
height: 24px;
top: -26px;
left: 0;
width: 110%;
}
.list-lvl1 .highlight-h4 {
background-color: #e67e22 !important;
height: 24px;
top: -34px;
left: 0;
left: -10px;
width: 120%;
}
.highlight-h5 {
background-color: #9b59b6 !important;
height: 12px;
top: -12px;
} }