threeoh6000/w9xcss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

meow

Browse source
This commit is contained in:
abbie 507131 2024-12-23 01:09:36 +00:00
parent 08a38b4d96
commit d1eea0e052
Signed by: threeoh6000
GPG key ID: 801FE4AD456E922C
8 changed files with 106 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -1,4 +1,6 @@
# Luna CSS
A recreation of the Windows XP Luna theme in HTML+CSS. An example webpage is provided.
# w9x
A recreation of the Windows 95 theme in HTML+CSS. An example webpage is provided.
![Example webpage screenshot](https://git.colean.cc/threeoh6000/luna/raw/branch/master/ss.png)
[Based off of Luna CSS.](https://git.colean.cc/threeoh6000/luna)
![Example webpage screenshot](https://git.colean.cc/threeoh6000/w9xcss/raw/branch/master/ss.png)

41
index.html
View file

@ -1,41 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>Windows XP</title>
<title>Windows 95</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="header">
<h1>Windows XP</h1>
<div class="header-button" id="red"><p id="close">🗙</p></div>
<div class="header-button"><p id="maximise">🗗</p></div>
<div class="header-button"><p id="minimise">🗕</p></div>
</div>
<div class="formarea">
<div class="ribbon">
<p class="link" id="first">File</p>
<p class="bar">|</p>
<p class="link">Edit</p>
<p class="bar">|</p>
<p class="link">Preferences</p>
<div class="border">
<div class="container">
<div class="header">
<h1>Windows 95</h1>
<div class="border-button"><div class="header-button"><p id="close">X</p></div></div>
</div>
<div class="content">
<h1>Hello, world!</h1>
<p>
Veritatis facilis et odio voluptas recusandae. Dolore alias doloribus aut. Quasi distinctio voluptates sed.<br/><br/>
Aut autem voluptates eum ut recusandae. Eveniet aut enim voluptas quasi commodi exercitationem dicta. Placeat cupiditate non et reprehenderit perferendis. A tempora exercitationem beatae qui dicta maiores est amet. Sint assumenda rerum sed placeat natus qui odio aut.<br/><br/>
Dicta ea nihil accusamus. Et sequi quia in ipsam ut quia non. Consequatur ut qui est velit et. Ratione eligendi est nisi a modi atque fugit dolor.<br/><br/>
Et commodi ratione voluptatum in. Aut fugit omnis suscipit voluptatem voluptates. Illo excepturi officiis quia temporibus suscipit eos. Eligendi ut sunt ut animi assumenda quaerat.<br/><br/>
Deleniti praesentium saepe et ut magni accusamus ipsum. Omnis delectus velit aut delectus ut ut rerum ipsum. Sequi veniam sapiente fugiat. Aut et minus sunt neque vel.
</p>
<div class="formarea">
<div class="content">
<h1>Hello, world!</h1>
<div class="button-border">
<button>I am a button!</button>
</div>
</div>
</div>
</div>
</div>

BIN
mssansserif.ttf Normal file
View file

Binary file not shown.

BIN
ss.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 668 KiB

After

Width:  |  Height:  |  Size: 118 KiB

123
style.css
View file

@ -1,64 +1,123 @@
@font-face {
font-family: "Trebuchet MS";
src: url(trebuchet.ttf);
font-family: "W95FA";
src: url(w95fa.woff);
font-display: swap;
}
@font-face {
font-family: "Tahoma";
src: url(tahoma.ttf);
font-family: "MS Sans Serif";
src: url(mssansserif.ttf);
font-display: swap;
}
.container {
display: flex;
min-height: 95vh;
min-height: 65vh;
margin: 0;
flex-direction: column;
background: #0157e8;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-image: linear-gradient(to bottom, #2b90ff, #004de3 8.5%);
background: #c0c0c0;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #808080;
border-bottom: 2px solid #808080;
}
.border {
border-top: 2px solid #c0c0c0;
border-left: 2px solid #c0c0c0;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
margin-left: 200px;
margin-right: 200px;
margin-top: 15vh;
padding: 0;
justify-content: center;
}
.border-button {
display: inline;
float: right;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
margin: 0;
margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
padding: 0;
}
.button-border {
display: inline-block;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
padding: 0;
margin: 0;
}
.button-border:active {
border-top: 2px solid #808080;
border-left: 2px solid #808080;
border-bottom: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
button {
background-color: #c0c0c0;
border: none;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080;
font-family: "W95FA";
font-size: 150%;
padding: 0.1em;
padding-left: 0.3em;
padding-right: 0.3em;
}
button:active {
border: none;
border-left: 2px solid #000;
border-top: 2px solid #000;
}
body {
margin: 1em;
background: url(bliss.jpg);
background-repeat: no-repeat;
background-size: cover;
background: #008080;
}
.header {
padding: 0;
margin: 0;
margin-top: 5px;
margin-left: 8px;
margin-right: 3px;
margin-left: 2px;
margin-right: 1px;
color: #fff;
background: #000080;
}
.header h1 {
font-family: "Trebuchet MS";
font-family: "W95FA";
float: left;
display: inline;
margin: 0;
margin-left: 0.15em;
margin-top: 0.2em;
margin-top: 0.35em;
padding: 2px;
padding-bottom: 5px;
font-size: 160%;
}
.header .header-button {
background: #025af0;
display: inline;
float: right;
margin: 0;
padding: 2px;
width: 2em;
margin-right: 0.2em;
border: 2px solid white;
border-bottom: 2px solid #808080;
border-right: 2px solid #808080;
text-align: center;
border-radius: 3px;
background-image: linear-gradient(160deg, #90aff9, #025af0 70%);
background: #c0c0c0;
color: #000;
}
.header .header-button #minimise {
@ -74,9 +133,9 @@ body {
}
.header .header-button p {
font-family: "Trebuchet MS";
font-family: "MS Sans Serif";
margin: 0;
font-size: 140%;
font-size: 160%;
}
.header .header-button img {
@ -86,16 +145,10 @@ body {
min-width: 100%;
}
#red {
background: #e03802;
background-image: linear-gradient(160deg, #f1ac9a, #e03802 70%);
}
.formarea {
display: flex;
flex-direction: column;
flex: 1;
background: #fff;
padding-top: 0;
margin: 0.2em;
}
@ -104,14 +157,14 @@ body {
padding-left: 0.5em;
padding-right: 0.5em;
margin: 0;
font-family: "Tahoma";
font-family: "W95FA";
}
.ribbon {
padding-top: 3px;
padding-bottom: 3px;
font-size: 110%;
font-family: "Tahoma";
font-family: "W95FA";
min-width: 1%;
max-height: 3.2em;
background: #ece9d8;

BIN
tahoma.ttf
View file

Binary file not shown.

BIN
trebuchet.ttf
View file

Binary file not shown.

BIN
w95fa.woff Normal file
View file

Binary file not shown.