Line/VixenchromaWebSite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add about page and several pages for projects

Browse Source
This commit is contained in:
Alyx LG
2025-05-21 17:55:28 +02:00
parent 33d840af79
commit 72e83a3c30
27 changed files with 2691 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
html/art.html Normal file
View 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>