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 # w9x
A recreation of the Windows XP Luna theme in HTML+CSS. An example webpage is provided. 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> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Windows XP</title> <title>Windows 95</title>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<div class="container"> <div class="border">
<div class="header"> <div class="container">
<h1>Windows XP</h1> <div class="header">
<div class="header-button" id="red"><p id="close">🗙</p></div> <h1>Windows 95</h1>
<div class="header-button"><p id="maximise">🗗</p></div> <div class="border-button"><div class="header-button"><p id="close">X</p></div></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> </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/> <div class="formarea">
<div class="content">
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/> <h1>Hello, world!</h1>
<div class="button-border">
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/> <button>I am a button!</button>
</div>
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/> </div>
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> </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-face {
font-family: "Trebuchet MS"; font-family: "W95FA";
src: url(trebuchet.ttf); src: url(w95fa.woff);
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "Tahoma"; font-family: "MS Sans Serif";
src: url(tahoma.ttf); src: url(mssansserif.ttf);
font-display: swap; font-display: swap;
} }
.container { .container {
display: flex; display: flex;
min-height: 95vh; min-height: 65vh;
margin: 0; margin: 0;
flex-direction: column; flex-direction: column;
background: #0157e8; background: #c0c0c0;
border-top-left-radius: 8px; border-top: 2px solid #ffffff;
border-top-right-radius: 8px; border-left: 2px solid #ffffff;
background-image: linear-gradient(to bottom, #2b90ff, #004de3 8.5%); 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 { body {
margin: 1em; margin: 1em;
background: url(bliss.jpg); background: #008080;
background-repeat: no-repeat;
background-size: cover;
} }
.header { .header {
padding: 0; padding: 0;
margin: 0; margin: 0;
margin-top: 5px; margin-top: 5px;
margin-left: 8px; margin-left: 2px;
margin-right: 3px; margin-right: 1px;
color: #fff; color: #fff;
background: #000080;
} }
.header h1 { .header h1 {
font-family: "Trebuchet MS"; font-family: "W95FA";
float: left; float: left;
display: inline; display: inline;
margin: 0; margin: 0;
margin-left: 0.15em; margin-left: 0.15em;
margin-top: 0.2em; margin-top: 0.35em;
padding: 2px;
padding-bottom: 5px;
font-size: 160%;
} }
.header .header-button { .header .header-button {
background: #025af0;
display: inline;
float: right;
margin: 0;
padding: 2px;
width: 2em; width: 2em;
margin-right: 0.2em; border-bottom: 2px solid #808080;
border: 2px solid white; border-right: 2px solid #808080;
text-align: center; text-align: center;
border-radius: 3px; background: #c0c0c0;
background-image: linear-gradient(160deg, #90aff9, #025af0 70%); color: #000;
} }
.header .header-button #minimise { .header .header-button #minimise {
@ -74,9 +133,9 @@ body {
} }
.header .header-button p { .header .header-button p {
font-family: "Trebuchet MS"; font-family: "MS Sans Serif";
margin: 0; margin: 0;
font-size: 140%; font-size: 160%;
} }
.header .header-button img { .header .header-button img {
@ -86,16 +145,10 @@ body {
min-width: 100%; min-width: 100%;
} }
#red {
background: #e03802;
background-image: linear-gradient(160deg, #f1ac9a, #e03802 70%);
}
.formarea { .formarea {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
background: #fff;
padding-top: 0; padding-top: 0;
margin: 0.2em; margin: 0.2em;
} }
@ -104,14 +157,14 @@ body {
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.5em; padding-right: 0.5em;
margin: 0; margin: 0;
font-family: "Tahoma"; font-family: "W95FA";
} }
.ribbon { .ribbon {
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
font-size: 110%; font-size: 110%;
font-family: "Tahoma"; font-family: "W95FA";
min-width: 1%; min-width: 1%;
max-height: 3.2em; max-height: 3.2em;
background: #ece9d8; 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.