Add about page and several pages for projects
This commit is contained in:
parent
33d840af79
commit
72e83a3c30
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
*.png filter=lfs diff=lfs merge=lfs -text
|
||||||
|
*.jpg filter=lfs diff=lfs merge=lfs -text
|
||||||
224
html/3dprinting_painting.html
Normal file
224
html/3dprinting_painting.html
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="title" content="VixenChroma">
|
||||||
|
<meta name="description" content="VixenChroma - Line / Alyx website" />
|
||||||
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
|
<link rel="author" href="https://vixenchroma.com"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
|
||||||
|
<title>Vixenchroma</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="header"></div>
|
||||||
|
<div id="headerArea">
|
||||||
|
<h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
|
||||||
|
</div>
|
||||||
|
<div id="flex">
|
||||||
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
|
<div>
|
||||||
|
<h3>Links</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Projects</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/about.html">About</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/art.html">Art</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/embroidery.html">Embroidery / Patches</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/other_things.html">Other things</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Cool badge !</h3>
|
||||||
|
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
|
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<main>
|
||||||
|
<h1>This page is a work in progress</h1>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- THIS IS THE CSS !-->
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--header-image: url('/img/LINE_TXT_REVERSE.png');
|
||||||
|
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
|
||||||
|
|
||||||
|
/* colors */
|
||||||
|
--content: #43256E;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: ADDSBP;
|
||||||
|
src: url('ADDSBP.TTF');
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
cursor: url('img/cursor.png'), auto;
|
||||||
|
font-family: 'ADDSBP';
|
||||||
|
margin: 0;
|
||||||
|
background-color: #08031A;
|
||||||
|
background-size: 960px;
|
||||||
|
color: #fceaff;
|
||||||
|
background-image: var(--body-bg-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerArea {
|
||||||
|
text-align: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
background-color: #241445;
|
||||||
|
height: 400px;
|
||||||
|
background-image: var(--header-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
#flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: 800;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: url('img/cursor_click.png'), auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a:hover {
|
||||||
|
color: #a49cba;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
background-color: #241445;
|
||||||
|
width: 200px;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background-color: #43256E;
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* what's this "order" stuff about??
|
||||||
|
allow me to explain!
|
||||||
|
if you're using both sidebars, the "order" value
|
||||||
|
tells the CSS the order in which to display them.
|
||||||
|
left sidebar is 1, content is 2, and right sidebar is 3! */
|
||||||
|
|
||||||
|
*/ #leftSidebar {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #13092D;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
pre {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background-color: #13092D;
|
||||||
|
border: 1px solid #1E74FD;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topBar {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: smaller;
|
||||||
|
background-color: #13092D;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#flex {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftSidebar {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
233
html/about.html
Normal file
233
html/about.html
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="title" content="VixenChroma">
|
||||||
|
<meta name="description" content="VixenChroma - Line / Alyx website" />
|
||||||
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
|
<link rel="author" href="https://vixenchroma.com"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
|
||||||
|
<title>Vixenchroma</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="header"></div>
|
||||||
|
<div id="headerArea">
|
||||||
|
<h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
|
||||||
|
</div>
|
||||||
|
<div id="flex">
|
||||||
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
|
<div>
|
||||||
|
<h3>Links</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Projects</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/about.html">About</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/art.html">Art</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/embroidery.html">Embroidery / Patches</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/other_things.html">Other things</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Cool badge !</h3>
|
||||||
|
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
|
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<main id="main">
|
||||||
|
<p>Hey, I'm Alyx and I use Line as my pseudo/nickname.</p>
|
||||||
|
<p>I'm a cybersecurity specialist, systems and network admin or whatever you want to call it. I use Linux and do self-hosting.</p>
|
||||||
|
-------
|
||||||
|
<h1>About me :</h1>
|
||||||
|
<p><strong>Name : </strong>Alyx / Line</p>
|
||||||
|
<p><strong>Pronouns : </strong>she / her</p>
|
||||||
|
<p><strong>Age : </strong>26</p>
|
||||||
|
<p><strong>Likes : </strong>colorfull and shiny things - foxes - monster energy - bouldering / climbing - motorcycle - helping people break free from big corpo - and other things</p>
|
||||||
|
-------
|
||||||
|
<p>I have a lot of passions/projects (✨hyperfocus power✨) and I would like to gather them, leave informations and share them on this website.</p>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- THIS IS THE CSS !-->
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--header-image: url('/img/LINE_TXT_REVERSE.png');
|
||||||
|
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
|
||||||
|
|
||||||
|
/* colors */
|
||||||
|
--content: #43256E;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: ADDSBP;
|
||||||
|
src: url('ADDSBP.TTF');
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
cursor: url('img/cursor.png'), auto;
|
||||||
|
font-family: 'ADDSBP';
|
||||||
|
margin: 0;
|
||||||
|
background-color: #08031A;
|
||||||
|
background-size: 960px;
|
||||||
|
color: #fceaff;
|
||||||
|
background-image: var(--body-bg-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerArea {
|
||||||
|
text-align: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
background-color: #241445;
|
||||||
|
height: 400px;
|
||||||
|
background-image: var(--header-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
#flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: 800;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: url('img/cursor_click.png'), auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a:hover {
|
||||||
|
color: #a49cba;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
background-color: #241445;
|
||||||
|
width: 200px;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background-color: #43256E;
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* what's this "order" stuff about??
|
||||||
|
allow me to explain!
|
||||||
|
if you're using both sidebars, the "order" value
|
||||||
|
tells the CSS the order in which to display them.
|
||||||
|
left sidebar is 1, content is 2, and right sidebar is 3! */
|
||||||
|
|
||||||
|
*/ #leftSidebar {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #13092D;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
pre {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background-color: #13092D;
|
||||||
|
border: 1px solid #1E74FD;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topBar {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: smaller;
|
||||||
|
background-color: #13092D;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#flex {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftSidebar {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
249
html/art.html
Normal file
249
html/art.html
Normal file
@ -0,0 +1,249 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="title" content="VixenChroma">
|
||||||
|
<meta name="description" content="VixenChroma - Line / Alyx website" />
|
||||||
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
|
<link rel="author" href="https://vixenchroma.com"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
|
||||||
|
<title>Vixenchroma</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="header"></div>
|
||||||
|
<div id="headerArea">
|
||||||
|
<h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
|
||||||
|
</div>
|
||||||
|
<div id="flex">
|
||||||
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
|
<div>
|
||||||
|
<h3>Links</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Projects</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/about.html">About</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/art.html">Art</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/embroidery.html">Embroidery / Patches</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/other_things.html">Other things</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Cool badge !</h3>
|
||||||
|
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
|
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<main>
|
||||||
|
<h1>This page is a work in progress</h1>
|
||||||
|
<p>I haven't drawn in a long time, and right now I'm really interested in learning and creating pixel art.</p>
|
||||||
|
<p>The goal would be to develop my own style so I can customize my other creations with a pixel art cyberpunk touch.</p>
|
||||||
|
<p>I will put here examples of creations that I like.</p>
|
||||||
|
<p><strong>May 2025</strong></p>
|
||||||
|
<div class="box">
|
||||||
|
<img src="/img/art/LINE_TXT_REVERSE.png" alt="line cyberpunk style"/>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="box">
|
||||||
|
<img src="/img/art/cursor.png" alt="glitchy cursor"/>
|
||||||
|
<img src="/img/art/cursor_click.png" alt="glitchy cursor 2"/>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="box">
|
||||||
|
<img src="/img/art/LINE_BACKGROUND.png" alt="Cyberpunk background example"/>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="box">
|
||||||
|
<img src="/img/art/LINE_LOGO_BACKGROUND.png" alt="Cyberpunk background example"/>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- THIS IS THE CSS !-->
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--header-image: url('/img/LINE_TXT_REVERSE.png');
|
||||||
|
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
|
||||||
|
|
||||||
|
/* colors */
|
||||||
|
--content: #43256E;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: ADDSBP;
|
||||||
|
src: url('ADDSBP.TTF');
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
cursor: url('img/cursor.png'), auto;
|
||||||
|
font-family: 'ADDSBP';
|
||||||
|
margin: 0;
|
||||||
|
background-color: #08031A;
|
||||||
|
background-size: 960px;
|
||||||
|
color: #fceaff;
|
||||||
|
background-image: var(--body-bg-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerArea {
|
||||||
|
text-align: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
background-color: #241445;
|
||||||
|
height: 400px;
|
||||||
|
background-image: var(--header-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
#flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: 800;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: url('img/cursor_click.png'), auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a:hover {
|
||||||
|
color: #a49cba;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
background-color: #241445;
|
||||||
|
width: 200px;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background-color: #43256E;
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
main img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* what's this "order" stuff about??
|
||||||
|
allow me to explain!
|
||||||
|
if you're using both sidebars, the "order" value
|
||||||
|
tells the CSS the order in which to display them.
|
||||||
|
left sidebar is 1, content is 2, and right sidebar is 3! */
|
||||||
|
|
||||||
|
*/ #leftSidebar {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #13092D;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
pre {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background-color: #13092D;
|
||||||
|
border: 1px solid #1E74FD;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topBar {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: smaller;
|
||||||
|
background-color: #13092D;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#flex {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftSidebar {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
244
html/embroidery.html
Normal file
244
html/embroidery.html
Normal file
@ -0,0 +1,244 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="title" content="VixenChroma">
|
||||||
|
<meta name="description" content="VixenChroma - Line / Alyx website" />
|
||||||
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
|
<link rel="author" href="https://vixenchroma.com"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
|
||||||
|
<title>Vixenchroma</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="header"></div>
|
||||||
|
<div id="headerArea">
|
||||||
|
<h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
|
||||||
|
</div>
|
||||||
|
<div id="flex">
|
||||||
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
|
<div>
|
||||||
|
<h3>Links</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Projects</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/about.html">About</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/art.html">Art</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/embroidery.html">Embroidery / Patches</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/other_things.html">Other things</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Cool badge !</h3>
|
||||||
|
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
|
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<main>
|
||||||
|
<h1>This page is a work in progress</h1>
|
||||||
|
<p>In 2023, I had the urge to make patches and embroidery, so I thought, why not buy an embroidery machine?</p>
|
||||||
|
<p>So I have an Etsy shop, sometimes I put creations there or I make customized patches : https://www.etsy.com/shop/AlyxWoofShop</p>
|
||||||
|
<pre style="font-family: 'ADDSBP';">Tools and softwares I use :
|
||||||
|
|
||||||
|
- Brother Innovis 880e
|
||||||
|
- Inkscape with Inkstitch ( https://inkstitch.org )
|
||||||
|
</pre>
|
||||||
|
<p>I will put here examples of creations that I like.</p>
|
||||||
|
<p><strong>2024</strong></p>
|
||||||
|
<div class="box">
|
||||||
|
<img src="/img/embroidery/line_patch.jpg" alt="line patch"/>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="box">
|
||||||
|
<img src="/img/embroidery/whiterose_patch.jpg" alt="whiterose patch"/>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- THIS IS THE CSS !-->
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--header-image: url('/img/LINE_TXT_REVERSE.png');
|
||||||
|
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
|
||||||
|
|
||||||
|
/* colors */
|
||||||
|
--content: #43256E;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: ADDSBP;
|
||||||
|
src: url('ADDSBP.TTF');
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
cursor: url('img/cursor.png'), auto;
|
||||||
|
font-family: 'ADDSBP';
|
||||||
|
margin: 0;
|
||||||
|
background-color: #08031A;
|
||||||
|
background-size: 960px;
|
||||||
|
color: #fceaff;
|
||||||
|
background-image: var(--body-bg-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerArea {
|
||||||
|
text-align: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
background-color: #241445;
|
||||||
|
height: 400px;
|
||||||
|
background-image: var(--header-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
#flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: 800;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: url('img/cursor_click.png'), auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a:hover {
|
||||||
|
color: #a49cba;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
background-color: #241445;
|
||||||
|
width: 200px;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background-color: #43256E;
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
main img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* what's this "order" stuff about??
|
||||||
|
allow me to explain!
|
||||||
|
if you're using both sidebars, the "order" value
|
||||||
|
tells the CSS the order in which to display them.
|
||||||
|
left sidebar is 1, content is 2, and right sidebar is 3! */
|
||||||
|
|
||||||
|
*/ #leftSidebar {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #13092D;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background-color: #13092D;
|
||||||
|
border: 1px solid #1E74FD;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topBar {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: smaller;
|
||||||
|
background-color: #13092D;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#flex {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftSidebar {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 130 B |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 130 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1014 B After Width: | Height: | Size: 129 B |
BIN
html/img/art/LINE_BACKGROUND.png
(Stored with Git LFS)
Normal file
BIN
html/img/art/LINE_BACKGROUND.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
html/img/art/LINE_LOGO_BACKGROUND.png
(Stored with Git LFS)
Normal file
BIN
html/img/art/LINE_LOGO_BACKGROUND.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
html/img/art/LINE_TXT.png
(Stored with Git LFS)
Normal file
BIN
html/img/art/LINE_TXT.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
html/img/art/LINE_TXT_REVERSE.png
(Stored with Git LFS)
Normal file
BIN
html/img/art/LINE_TXT_REVERSE.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
html/img/art/cursor.png
(Stored with Git LFS)
Normal file
BIN
html/img/art/cursor.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
html/img/art/cursor_click.png
(Stored with Git LFS)
Normal file
BIN
html/img/art/cursor_click.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
html/img/cursor.png
(Stored with Git LFS)
Normal file
BIN
html/img/cursor.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
html/img/cursor_click.png
(Stored with Git LFS)
Normal file
BIN
html/img/cursor_click.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
html/img/embroidery/line_patch.jpg
(Stored with Git LFS)
Normal file
BIN
html/img/embroidery/line_patch.jpg
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
html/img/embroidery/whiterose_patch.jpg
(Stored with Git LFS)
Normal file
BIN
html/img/embroidery/whiterose_patch.jpg
(Stored with Git LFS)
Normal file
Binary file not shown.
1423
html/img/favicon.svg
Normal file
1423
html/img/favicon.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 64 KiB |
BIN
html/img/webbadge/agrou.png
(Stored with Git LFS)
Normal file
BIN
html/img/webbadge/agrou.png
(Stored with Git LFS)
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 131 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 132 B |
Binary file not shown.
|
Before Width: | Height: | Size: 696 B After Width: | Height: | Size: 128 B |
BIN
html/img/webbadge/new.gif
Normal file
BIN
html/img/webbadge/new.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
Binary file not shown.
|
Before Width: | Height: | Size: 615 B After Width: | Height: | Size: 128 B |
110
html/index.html
110
html/index.html
@ -4,14 +4,9 @@
|
|||||||
<meta name="title" content="VixenChroma">
|
<meta name="title" content="VixenChroma">
|
||||||
<meta name="description" content="VixenChroma - Line / Alyx website" />
|
<meta name="description" content="VixenChroma - Line / Alyx website" />
|
||||||
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
<!-- Open Graph -->
|
|
||||||
<meta property="og:title" content="VixenChroma">
|
|
||||||
<meta property="og:type" content="website" />
|
|
||||||
<meta property="og:url" content="https://vixenchroma.com">
|
|
||||||
<meta property="og:description" content="VixenChroma - Line / Alyx website">
|
|
||||||
|
|
||||||
<link rel="author" href="https://vixenchroma.com"/>
|
<link rel="author" href="https://vixenchroma.com"/>
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
|
||||||
<title>Vixenchroma</title>
|
<title>Vixenchroma</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -21,20 +16,48 @@
|
|||||||
<h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
|
<h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
|
||||||
</div>
|
</div>
|
||||||
<div id="flex">
|
<div id="flex">
|
||||||
<aside id="leftSidebar" style="margin-right: 10px;">
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
<div class="box">
|
<div>
|
||||||
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
|
<h3>Links</h3>
|
||||||
<br>
|
<div class="box">
|
||||||
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
|
<ul style="padding-left:8px;">
|
||||||
<br>
|
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
|
||||||
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
|
<br>
|
||||||
|
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Projects</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/about.html">About</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/art.html">Art</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/embroidery.html">Embroidery / Patches</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/other_things.html">Other things</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Cool badge !</h3>
|
||||||
|
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
|
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
|
||||||
</div>
|
</div>
|
||||||
<h3>Cool badge !</h3>
|
|
||||||
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
|
||||||
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
|
|
||||||
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
|
|
||||||
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
|
|
||||||
<img src="/img/webbadge/fox.png" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
|
|
||||||
</aside>
|
</aside>
|
||||||
<main>
|
<main>
|
||||||
<h1>Welcome on Vixenchroma !</h1>
|
<h1>Welcome on Vixenchroma !</h1>
|
||||||
@ -67,11 +90,16 @@
|
|||||||
|
|
||||||
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
|
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
|
||||||
</main>
|
</main>
|
||||||
<aside id="rightSidebar" style="margin-left: 10px;">
|
<aside id="rightSidebar" style="margin-left: 8px;">
|
||||||
<h2>Updates</h2>
|
<h2>Updates</h2>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<p>20/05/2025</p>
|
<img src="/img/webbadge/new.gif" alt="new gif"/><span> 21/05/25</span>
|
||||||
<ul style="padding-left:10px;">
|
<ul style="padding-left:8px;">
|
||||||
|
<li>I added an about page and several pages to share my projects</li>
|
||||||
|
</ul>
|
||||||
|
<p>--------</p>
|
||||||
|
<span> 20/05/25</span>
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
<li>NEW website version with no more js</li>
|
<li>NEW website version with no more js</li>
|
||||||
<br>
|
<br>
|
||||||
<li>NEW content published</li>
|
<li>NEW content published</li>
|
||||||
@ -79,7 +107,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<h3>External Tools/Links</h3>
|
<h3>External Tools/Links</h3>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<ul style="padding-left:10px;">
|
<ul style="padding-left:8px;">
|
||||||
<li><a href="https://goblin-heart.net/sadgrl/webmastery/webmaster-links">Usefull links to build website</a></li>
|
<li><a href="https://goblin-heart.net/sadgrl/webmastery/webmaster-links">Usefull links to build website</a></li>
|
||||||
<br>
|
<br>
|
||||||
<li><a href="https://www.dafont.com/addstandardbitmap.font">Font used for the site</a></li>
|
<li><a href="https://www.dafont.com/addstandardbitmap.font">Font used for the site</a></li>
|
||||||
@ -106,6 +134,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
cursor: url('img/cursor.png'), auto;
|
||||||
font-family: 'ADDSBP';
|
font-family: 'ADDSBP';
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: #08031A;
|
background-color: #08031A;
|
||||||
@ -141,39 +170,22 @@
|
|||||||
background-image: var(--header-image);
|
background-image: var(--header-image);
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar {
|
#flex {
|
||||||
height: 40px;
|
|
||||||
background-color: #13092D;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navbar ul {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar li {
|
li a {
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navbar li a {
|
|
||||||
color: #1E74FD;
|
color: #1E74FD;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
cursor: url('img/cursor_click.png'), auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar li a:hover {
|
li a:hover {
|
||||||
color: #a49cba;
|
color: #a49cba;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
#flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
background-color: #241445;
|
background-color: #241445;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
@ -206,7 +218,7 @@
|
|||||||
background-color: #13092D;
|
background-color: #13092D;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
padding: 10px;
|
padding: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -228,13 +240,13 @@
|
|||||||
.box {
|
.box {
|
||||||
background-color: #13092D;
|
background-color: #13092D;
|
||||||
border: 1px solid #1E74FD;
|
border: 1px solid #1E74FD;
|
||||||
padding: 10px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#topBar {
|
#topBar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding: 10px;
|
padding: 8px;
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
background-color: #13092D;
|
background-color: #13092D;
|
||||||
}
|
}
|
||||||
@ -259,10 +271,6 @@
|
|||||||
#rightSidebar {
|
#rightSidebar {
|
||||||
order: 3;
|
order: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
#navbar ul {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
224
html/other_things.html
Normal file
224
html/other_things.html
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="title" content="VixenChroma">
|
||||||
|
<meta name="description" content="VixenChroma - Line / Alyx website" />
|
||||||
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
|
<link rel="author" href="https://vixenchroma.com"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
|
||||||
|
<title>Vixenchroma</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="header"></div>
|
||||||
|
<div id="headerArea">
|
||||||
|
<h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
|
||||||
|
</div>
|
||||||
|
<div id="flex">
|
||||||
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
|
<div>
|
||||||
|
<h3>Links</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Projects</h3>
|
||||||
|
<div class="box">
|
||||||
|
<ul style="padding-left:8px;">
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/about.html">About</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/art.html">Art</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/embroidery.html">Embroidery / Patches</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
|
||||||
|
<br>
|
||||||
|
<li><a href="/other_things.html">Other things</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Cool badge !</h3>
|
||||||
|
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
|
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
|
||||||
|
<img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<main>
|
||||||
|
<h1>This page is a work in progress</h1>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- THIS IS THE CSS !-->
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--header-image: url('/img/LINE_TXT_REVERSE.png');
|
||||||
|
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
|
||||||
|
|
||||||
|
/* colors */
|
||||||
|
--content: #43256E;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: ADDSBP;
|
||||||
|
src: url('ADDSBP.TTF');
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
cursor: url('img/cursor.png'), auto;
|
||||||
|
font-family: 'ADDSBP';
|
||||||
|
margin: 0;
|
||||||
|
background-color: #08031A;
|
||||||
|
background-size: 960px;
|
||||||
|
color: #fceaff;
|
||||||
|
background-image: var(--body-bg-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerArea {
|
||||||
|
text-align: center;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
width: 100%;
|
||||||
|
background-size: 100%;
|
||||||
|
background-color: #241445;
|
||||||
|
height: 400px;
|
||||||
|
background-image: var(--header-image);
|
||||||
|
}
|
||||||
|
|
||||||
|
#flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
color: #1E74FD;
|
||||||
|
font-weight: 800;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: url('img/cursor_click.png'), auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a:hover {
|
||||||
|
color: #a49cba;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
background-color: #241445;
|
||||||
|
width: 200px;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background-color: #43256E;
|
||||||
|
flex: 1;
|
||||||
|
padding: 20px;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* what's this "order" stuff about??
|
||||||
|
allow me to explain!
|
||||||
|
if you're using both sidebars, the "order" value
|
||||||
|
tells the CSS the order in which to display them.
|
||||||
|
left sidebar is 1, content is 2, and right sidebar is 3! */
|
||||||
|
|
||||||
|
*/ #leftSidebar {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #13092D;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
pre {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: #1E74FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
background-color: #13092D;
|
||||||
|
border: 1px solid #1E74FD;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#topBar {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: smaller;
|
||||||
|
background-color: #13092D;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#flex {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#leftSidebar {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rightSidebar {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user