added index and aboutme. added css, and made (mostly) w98 border

2025-08-08 03:15:11 +02:00 · 2025-08-08 03:15:11 +02:00 · a640cb9b42
commit a640cb9b42
parent 2389dc29d3
3 changed files with 134 additions and 0 deletions
--- a/src/aboutme.html
+++ b/src/aboutme.html
@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<body>
+    Test
+</body>
--- a/src/css/app.css
+++ b/src/css/app.css
@ -0,0 +1,98 @@
+.prevent-select{
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+
+.retro-window{
+    margin: 1em;
+    padding: 0;
+    width: fit-content;
+}
+
+.retro-border{
+    border-style: solid;    
+    border-width: .2em;
+    border-top-color: lightgray;
+    border-left-color: lightgray;
+    border-right-color: gray;
+    border-bottom-color: grey;
+    background-color: darkgray;
+}
+
+
+.retro-title{
+    padding: .3em;
+    margin: .1em;
+    display: flex;
+    justify-content: space-between;
+
+    color: aliceblue;
+    
+    background: #090979;
+    background: linear-gradient(90deg, rgba(9, 9, 121, 1) 30%, rgba(0, 106, 255, 1) 100%);
+}
+
+.retro-title-close{
+    padding-left: .5ch;
+    padding-right: .5ch;
+    color: #000;
+
+    margin: -.2em;
+    margin-left: .5em;
+
+    clear: both;
+
+    border-style: solid;
+    border-width: .2em;
+    border-top-color: lightgray;
+    border-left-color: lightgray;
+    border-right-color: gray;
+    border-bottom-color: grey;
+    background-color: darkgray;
+}
+
+.retro-title-close:hover{
+    cursor: pointer;
+    background-color: rgb(179, 179, 179);
+}
+
+.retro-content{
+    padding: .5em;
+}
+
+.retro-text{
+    margin: 0;
+    padding: 0;
+
+    word-wrap: break-word;
+}
+
+.center-children{
+    display: flex;
+    justify-content: center;
+}
+
+.width-size-m{
+    width: 50em;
+}
+
+.width-size-s{
+    width: 10em;
+}
+
+.retro-button{
+    margin: .5em;
+
+    padding: .2em;
+}
+
+.retro-button:hover{
+    background-color: rgb(179, 179, 179);
+}
+
+a { 
+    color: inherit; 
+    text-decoration:none;
+}
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>ConfuzzedCatDotDev</title>
+        <!-- <base href="https://confuzzedcat.dev/" target="_blank"> -->
+        <meta charset="UTF-8">
+        <meta name="author" content="ConfuzzedCat">
+        <meta name="description" content="My personal website">
+        <meta name="keywords" content="HTML, CSS, PERSONAL">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="css/app.css">
+    </head>
+    <body>
+        <div class="retro-border retro-window">
+            <p class="retro-title prevent-select">Welcome to my website<text class="retro-title-close">X</text></p>
+            <section class="retro-content width-size-m">
+                <p class="retro-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta molestiae temporibus maxime recusandae expedita vero consequatur est accusamus modi, obcaecati aperiam tenetur ipsa ratione nobis sapiente aliquid id sed asperiores.</p>
+            </section>
+        </div>
+
+
+        <div class="retro-border retro-window">
+            <p class="retro-title prevent-select">About Me<text class="retro-title-close">X</text></p>
+            <section class="retro-content width-size-s">
+                <p class="retro-text">Click below to learn more.</p>
+            </section>
+            <div class="center-children">
+                <a class="retro-border retro-button" href="aboutme.html">Learn more</a>
+            </div>
+        </div>
+    </body>
+</html>