konata/index.html at master · azurejelly/konata · 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE HTML>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="assets/style.css"/>

    <!--

    /// "Konata Zone" template made by awhe @ https://awhe.neocities.org/

    /// NOTE: Feel free to delete the above credits included in the code. I do not require credit, and I encourage copying from me as much as you'd like. As always: The internet is made for sharing, and so I'm happy to be able to share this with you!

    /// I've been having a lot of (frustrating) fun using grids for layouts and eventually I ended up with an edited version of this layout for my new index page! I think it looks nice and clean and I hope you have fun with it ! Only downside is it looks weird on firefox unless you zoom out, my bad. You can probably fix that with editing the code a bit, but I don't want to so B-)

    /// I'm bad at spelling. If you see any spelling errors, no you don't! (I'm sorry, even after checking, I still usually miss something.)

    ==============================================================

                    -USEFUL INFO-

    // margin: refers to the space AROUND an element.
    // padding: refers to the space INSIDE an element.
    // color: refers to TEXT COLOR.
    // background: refers to the BACKGROUND COLOR of an element.
    // favicon: refers to the tiny image that shows up on your website tab at the top.
    // body: refers to the main structure of the site. think of the plain white screen before adding all your code, that's the body.

    // https://www.w3schools.com/ (This site has all the help you need if you require more assistance.)
    // https://codepen.io/ (This site allows live previews of your code, which can be helpful when you're changing parts and still learning.)
    // https://awhe.neocities.org/links (Shameless self plug, but I've included many many links here regarding HTML (among other things!) that may prove useful.)
    // https://blog.hubspot.com/website/web-safe-html-css-fonts (Displays "web safe fonts" which are fonts that'll adapt to any browser on any device.)
    // https://www.w3schools.com/tags/ref_colornames.asp (Shows you the names of colors supported by all browsers!)

    ==============================================================

    /// Just a small reminder that:
        - You can and you should copy from me if you'd like. I don't care. My url is: https://awhe.neocities.org/
        - Credit is always optional, whatever you feel like.
        - For a cleaner look, I recommend removing my text additions whenever you feel comfortable to.
        - I recommend editing on a live preview, so you can see the immediate effects of any changes you make.
        - Have fun! Add, change, edit, etc, whatever you want! The net is yours.

-->

    <title>KONATA ZONE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico"/>
</head>

<body>
    <img src="assets/img/konata.png" width="12%" height="auto"
        style="position:absolute;bottom:0;left:15%;">

    <span class="title">TITLE HERE</span>

    <div class="angry-grid">
        <div id="header">
            <div id="header_img">
                <marquee><b>latest news:</b> put whatever you'd like here!</marquee>
            </div>
        </div>

        <div id="navbar">
            <img src="assets/img/konata-small.png">
            <span class="navbar-title">NAV</span>
            <img src="assets/img/konata-small.png">
            <hr>
            <i>
                <p>main
            </i> ...→</p>
            <ul>
                <li><a href="/">LINK 1</a></li>
                <img src="assets/img/pointing.gif" class="float">
                <!-- this is the floating konata image for the navbar -->
                <li><a href="/">LINK 2</a></li>
                <li><a href="/">LINK 3</a></li>
                <li><a href="/">LINK 4</a></li>
            </ul>
            <i>
                <p>me
            </i> ...→</p>
            <ul>
                <li><a href="/">LINK 5</a></li>
                <li><a href="/">LINK 6</a></li>
                <li><a href="/">LINK 7</a></li>
                <li><a href="/">LINK 8</a></li>
            </ul>
            <i>
                <p>you
            </i> ...→</p>
            <ul>
                <li><a href="/">LINK 9</a></li>
                <img src="assets/img/obj/pepsi.gif" class="float">
                <!-- this is the rotating pepsi can image for the navbar -->
                <li><a href="/">LINK 10</a></li>
                <li><a href="/">LINK 11</a></li>
                <li><a href="/">LINK 12</a></li>
            </ul>
            <hr>
            <center>
                <img src="assets/img/stamps/0.gif"><br>
                <img src="assets/img/stamps/1.png"><br>
                <img src="assets/img/stamps/2.png"><br>
                <img src="assets/img/stamps/3.png"><br>
                <img src="assets/img/stamps/4.jpg">
            </center>
        </div>

        <div id="maintop">
            <span class="maintop-title">WELCOME</span><br>
            <img src="assets/img/obj/loading.gif">
            <!-- this is the loading bar gif -->
            <br><br>
            <table>
                <tbody>
                    <tr>
                        <td style="padding-right: 10px;">
                            <img src="assets/img/avatar.jpg" width="100%" class="maintop-avatar">
                            <!-- this is the konata profile pic! replace it with whatever else you'd like to use, or just delete the table and instead use just the <p> tag. -->
                        </td>
                        <td>
                            <div class="maintop-content">
                                <p>hello and welcome to konata zone! i think this layout looks nice
                                    with a set theme, not necessarily konata. i use this box as the main main content for my
                                    index!</p>
                                <p><strong>extra:</strong> info here. there are a lot of links to
                                    the left, but you can add/remove as many as you want. graphics from <a
                                        href="https://hoarding.neocities.org/" target="_blank">here</a>!</p>
                                <p>just try to keep this section somewhat limited for better
                                    sizing. <b>optimized for 1920x1080 chrome.</b> zoom out to 80% for firefox viewing.</p>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div id="mainbottom">
            <span class="mainbottom-subtitle">more space waow!</span>
            <br><br>
            <p>for exmaples of what I added to this section, you can look at <a href="https://awhe.neocities.org/"
                    target="_blank">my site</a>, or you can do whatever else you'd like here! it's pretty small, but you
                can edit the code to make it whatever size you want B-)</p>
            <hr>
            <span class="mainbottom-subtitle">example todo list</span>
            <ul>
                <li>create more art!</li>
                <li>make those noodles i love.</li>
                <li>buy salmon...</li>
            </ul>
        </div>
    </div>
</body>
</html>