choptop84.github.io/index.html at main · choptop84/choptop84.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="application-name" content="AbyssBox" />
    <meta name="apple-mobile-web-app-title" content="AbyssBox">
    <meta name="description" content="choptop84's little home." />
    <meta name="keywords" content="home, choptop84" />
    <link rel="apple-touch-icon" sizes="180x180" href="/icon_32.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="icon_32.png" />

  </head>
    <title>choptop84.github.io</title> <!--  -->
      </head>
        <style type="text/css">
        @font-face {
        font-family: "AbyssType";
        src: url("https://choptop84.github.io/abyssbox-app/image_assets/abysstype.otf") format("opentype") tech(color-COLRv1),
        }

	body {
	display: flex;
  	flex-direction: column;
  	align-items: center;
	}

        html {
        background: #1e0915;
        overflow-x: hidden;
        font-family: AbyssType;
        font-size: large;
        line-height: 1.3;
        color: white;

        background-image: url("https://choptop84.github.io/abyssbox-app/image_assets/stripesbg.gif") !important;
        background-position: center;
        background-repeat: repeat;

        image-rendering: -moz-crisp-edges !important;         /* Firefox */
        image-rendering: -webkit-optimize-contrast !important; /* Webkit (Chrome/Safari) */
        image-rendering: -o-crisp-edges !important;            /* Opera */
        image-rendering: pixelated !important;                 /* Future browsers */
        image-rendering: optimizeSpeed !important;             /* IE */
        }

        #text-content {
        width: 75vw;
        border-image-source: url("https://choptop84.github.io/abyssbox-app/image_assets/abyssbox_border.png");
        border-image-slice: 4 fill;
        border-image-width: 8px;
        border-image-repeat: stretch;
        padding: 12px;

        image-rendering: -moz-crisp-edges !important;         /* Firefox */
        image-rendering: -webkit-optimize-contrast !important; /* Webkit (Chrome/Safari) */
        image-rendering: -o-crisp-edges !important;            /* Opera */
        image-rendering: pixelated !important;                 /* Future browsers */
        image-rendering: optimizeSpeed !important;             /* IE */
        }

        #side-bord {
        border-image-source: url("https://choptop84.github.io/abyssbox-app/image_assets/abyssbox_border.png");
        border-image-slice: 4 fill;
        border-image-width: 8px;
        border-image-repeat: stretch;
        padding: 12px;

        image-rendering: -moz-crisp-edges !important;         /* Firefox */
        image-rendering: -webkit-optimize-contrast !important; /* Webkit (Chrome/Safari) */
        image-rendering: -o-crisp-edges !important;            /* Opera */
        image-rendering: pixelated !important;                 /* Future browsers */
        image-rendering: optimizeSpeed !important;             /* IE */
        height: 250px;
        }

        #main-text {
        display: grid;
        grid-column-gap: 6px;
        grid-row-gap: 6px;
        grid-template-columns: 25% 75%;
        }

        #description {
        border-image-slice: 4 fill;
        border-image-width: 8px;
        border-image-repeat: stretch;
        padding: 12px;

        }

        h1 {
        font-size: 2.7rem;
        text-align: center;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        -webkit-text-stroke-width: 0;
        }

        p {
        font-size: 1.5rem;
        text-align: center;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        -webkit-text-stroke-width: 0;
        }

        </style>
        <body>
        <div id="text-content">
        <h1>Welcome to the <font color="#c763a0">choptop84.github.io!</font></h1>
          <p>This website is still a work in progress, but let me tell you more about myself!</p>
        <div id="main-text">
          <div id="side-bord">
            <p><a href="https://youtube.com/@choptop84" target="_blank">YouTube</a></p>
            <p><a href="https://twitter.com/choptop84" target="_blank">Twitter/X</a></p>
            <p><a href="https://choptop84.github.io/abyssbox-app/" target="_blank">AbyssBox</a></p>
            <p><a href="https://www.youtube.com/@MyAbyss-Official" target="_blank">My Abyss YT</a></p>
            <p><a href="https://choptop84.github.io/my-abyss/" target="_blank">My Abyss Site</a></p>
          </div><div id="description"><p>Hello, I am choptop84. The creator of this fine website. I am a YouTuber, Developer, and Pixel artist.</p>
          <p>You can find my creations on the left, Feel free to peruse at your leasure.</p>
          <p></p>
        </div>
      </div>
    </div>
  </body>
</html>