Building my site from the ground up!

[DJoftheCoven]

I debated for a while about where to put this, and I'm still not entirely sure. Let me know if you think it should go on another board!

Anyway, after receiving Melooon's welcome package and reading through the (incredibly well made!!!) webmaking guide, I realized that I wasn't happy with the way my website looked. There are so many cool ways to format a site that I still haven't tried! I know I'm new to programming, but I feel like I'm ready to at least begin brainstorming the way I want my site to look in the future. I've got big ideas!

Therefor, I created my first big vision for the future appearance of DJ's Internet Cafe: a proposed landing page! What goes behind said landing page is still in the works, but I'll probably have a few potential designs sketched out by the end of the week.

Here's my rough sketch of the page:


My idea is that I'll create this image as a pixel art painting, then figure out how to insert the things I want in various areas. The site entrance and three clickable areas are labeled. I intend to make the computer one redirect either to my web manifesto or to melonland forum; I haven't decided. The tea set will lead to an area of my favorite pixel art snacks and drinks from various sites (linked, of course!). As for the window, I plan for it to display the setting of my favorite Pokemon Mystery Dungeon cutscene. When you click on it, it takes you to the full image of the beach, where it will play the track Bubbles Shining Over the Sea. Obviously, the "enter" button on the menu will lead to the actual website.

Let me know what you guys think, or if you have any ideas as to how this vision can be accomplished!

(edit: I cannot for the life of me figure out how to resize this image :drat:smile:

[Melooon]

Yep this is the place for this! It seems like a totally solid idea, and I'm glad the guide was useful to you!

You can study MSBob and Packard Bell Navigator for ideas:


You'll prob want to aim for your pixel room to be around 1000px wide, that will allow it to fit on most screens without issues!

As for placing objects I have a trick for that!
Plonk this script on your page, and give all the objects you want to position the class "floater" and a unique ID (on the a tag so they work as links).
Add this CSS:

Code

      .floater {
        position: absolute;
        float: left;
        color: white;
        top: 0;
        left: 0;
      }

      .floater img {
        display: block;
      }

Then you'll be able to drag them to the positions you want.
Finally press any key and it will spit out CSS code (on the browser console) for the positions you currently have things dragged to.
Just copy and paste that CSS onto your html page and next time you reload everything will be where you dragged it to (Them remove the script, links don't work while the script is installed)

It sounds really fun! I look forward to seeing it

P.S. Image resizing - There is a BBCode help button in the footer, and its explained here

[morrysillusion]

really love the idea you have here! there is something so charming and homey about those old pages that just felt like you walked into someone's room, seeing scattered objects and clicking on them and just seeing where they take you. i have also been thinking about reworking my site to have a landing page as well, to feel more like its inviting you in- and to attempt some heavily hand drawn sites that feel 'immersive' for their themes be it a home page or something else.

excited to see how you page turns out! there is SO much that can be done with a website, so much to make it personal. i get easily overwhelmed by all the possible "what ifs" but i have very much liked the vibes of landing pages like this too.

[DJoftheCoven]

Thank you for such amazing advice, Melooon! I've been meaning to respond for a while now, but the second I posted my idea I basically blacked out and emerged from my coma 48 hours later with a color design. I can't wait to try that little bit of code and see what I can do with it!

I've got my mock-up right here:


I tried my best to make it as big as I could, but the art program I usually use only allows up to 700 pixels. I hope it'll fit.

Also, thank you for the kind words, morrysillusion!