Neocities allows anyone to create a free web site to express themselves. Want to create your own awesome site? Join us!
art music videogames programming anime games food personal writing cats blog movies books gaming fashion photography comics design animation horror game drawing coding manga arte portfolio furry reading ocs poetry technology cute kpop musica history education animals programacion film fun roblox literature sports philosophy html nature science programing tech videogame travel politics minecraft web gamedev retro school videojuegos life youtube computers cartoons love pokemon 2000s blogging diary video illustration fantasy pink dogs random comic idk gardening internet memes videos oc linux ai test cooking y2k queer webcomic kawaii nostalgia tv fandom arg aesthetic journal emo news business fanfiction worldbuilding cars crafts vocaloid learning media health films silly stuff space math fiction 90s website cutecore stories culture scifi etc arts cat painting football css graphics journaling homestuck baking marketing goth software punk lgbt 3d crochet commissions sanrio sport cinema pixelart archive artist psychology digitalart program dance diy me comida shows makeup series dnd characters trans metal funny religion lgbtq graphicdesign lifestyle creativity cool editing aboutme fanart entertainment clothes streaming sonic indie rpg javascript friends code development scene webcomics story plants roleplay comedy guitar languages rock weird webcore everything electronics zines ttrpg sewing study hacking gay community aesthetics engineering reviews cyberpunk webdesign educacion beauty basketball fnaf computer informatica it originalcharacters soccer weirdcore social vintage oldweb vtuber spirituality discord photos pets project deltarune blogs vaporwave architecture shop storytelling movie flowers information coffee clothing about language thoughts shopping japan undertale hobbies biology nintendo testing mlp cosplay magic html5 creative book lore fitness crypto digital money radio ttrpgs blinkies nothing experimental fandoms chat physics info alternative tecnologia astronomy cybersecurity site websites singing juegos japanese furries bugs birds occult autism wip witchcraft anything other finance research resume futbol band tvshows theatre crafting profile television sleep lain sleeping dolls projects gamedevelopment moda personalwebsite events work vr system linguistics genshin apps vampires interests all photo knitting fish ghchs yaoi dreams splatoon python webdevelopment transgender free meme astrology gatos carrd rap fanfic puzzle mentalhealth aliens developer toys wiki collecting windows coquette app poems romance dancing pixels drawings animations visualnovels fortnite cartoon robots bio english touhou dog deportes family tarot frutigeraero gothic stamps a intro skateboarding animes marvel medicine pizza online modding security essays links mathematics humor data gamedesign hiking osc fnf adventure interactive teaching characterdesign gyaru journalism gym mystery no gallery dragons chess roleplaying lol fansite creepypasta rp hobby zine zonelets objectshows jfashion gifs birthday popculture puzzles pixel twitch resources yuri mythology home law vkei musicals meow breakcore myself ffxiv ocean dreamcore traveling novels tf2 scenecore blender noise hiphop piano audio introduction privacy death recipes peliculas graphic danganronpa stars progamming jogos style dark libros twine pjsk rpgs podcast bfdi ecommerce plushies hellokitty indiegames swag shrine android communism socialmedia studying robotics car paranormal production pictures activism omori spanish awesome wrestling running bunnies foods none utau pinterest christianity boardgames lesbian jewelry lolita educational amor deporte anarchism vent electronic student things filmmaking craft girls travelling misc volleyball feminism god unblocked cine grunge scratch sharks bitcoin mario geography store songs clowns dev webdev maths computing designing old 80s jpop realestate outdoors 3dmodeling blue doom bl pc vtubers help environment flash transformers images collage dinosaurs brasil college starwars stickers java tools jazz tumblr bts creepy acting fotografia cafe chemistry novel jesus services event epic trains alt computerscience baseball construction yoga mcr translation plurality tea escuela pastel lego warriorcats cyber args collection programar retrogaming theater persona southpark whatever manhwa multimedia yes therian videoediting programas tcc js pop vlog cozy weed monsters tabletop programmer horses podcasts gamer trading truecrime supernatural historia forum f1 techno medical otherkin shoes literatura miku tiktok people videography skating hardware weather dc draw estudiante insects bsd drama cricket skincare economics girly angels socialism enstars homepage green lgbtqia salud ecology maps dj search opensource restaurant whimsy freedom learn swimming surrealism modeling hi kirby turismo ropa kandi sound curso digitalmarketing animales kidcore ideas nerd text vhs animanga trinkets artwork bible world closedspecies tattoos petz kdrama conspiracy halloween filmes tourism cleaning author depression edm service chatting analysis shitposting hockey furniture cultura 3dprinting healthcare cv racing fishing sociology did videogaming academia egl surreal drugs hardcore friendship brazil rats blockchain bands women homework tennis frogs hair scary knowledge sculpture chill eating wedding mobile general sketching programa plural colors networking visualnovel library sciencefiction academic thrifting christian livros artes cryptocurrency soft ambient informacion aviation quotes alterhuman creation analog rpgmaker purple tutorials server genshinimpact anarchy programacao mods gacha truth society university practice species estudio foss mangas graffiti water retrogames sites writting glitch ghosts cryptids ux wellness anthropology batman company sustainability bot erotica miriadax programs jjba forsaken conlang review onepiece medieval cycling magazine harrypotter css3 garden character writer neocities schoolproject live guns google noticias esoteric webseries nails yapping superheroes class otaku kids tattoo theology 3dart theory archives twitter talking camping rants bikes instagram ceramics cs revival cards startrek animal building crime performance vampire shitpost analoghorror notes disney rhythmgames play unblockedgames crocheting blood illustrations advertising future lostmedia dating church decor french idols os articles evangelion musicproduction liminal house viajes industrial apple shrines training handmade meditation spiderman creating originalcharacter synthesizers concerts ultrakill chaos selfship kdramas frontend interactivefiction youtuber shoegaze voiceacting content party desing jobs scrapbooking communication prompts sims folklore designer crk seals satire terror vlogs new visualkei exercise neopets disability tareas datascience spooky finalfantasy calculator entretenimiento vrchat embroidery tecnology silliness repair tarea doodles zelda mylittlepony animalcrossing quiz magick rambling facts halflife paganism vinyl sweets sanat shifting rainbow geek poesia creatures joke something marxism cult commission black developing download overwatch hack spiritual vida anthro cheese animating vtubing jokes musics miscellaneous photoshop desarrollo adhd daily kink hotel islam bass creativewriting ranfren mtg tic webring beach club scp conlangs songwriting happy vegan military php private christmas fanfics arcane projectsekai ar self doctorwho zombies agriculture todo tokipona mha trabajo productivity underground mecha oldroblox more drinks shoujo ia tamagotchi tips archival cottagecore 1 edits yugioh pet secret map glitter studies generator motorcycles gender beginner mushrooms ui dandysworld tokusatsu collections oldinternet rave musician red ciencia vibes cities randomstuff programm lofi dungeonsanddragons videgames faith words hosting cake gossip stupid index
Thank you! Feel free to take a look at the source code - the way to do it on Firefox on Windows is to right click on the web page and click View Page Source. There are some Javascript objects on the homepage for the Search and the Webrings so I would recommend looking at a simpler page so there's less clutter. Interpreting what you see will become easier as you write/learn more HTML/CSS code.
One of the simpler pages is the Contact Me page. view-source:https://pixelglade.net/about/contact.html The responsive parts are due to the divs flexcolumn and flexbox. To see what they are referring to you open the .css style page.
Thank you so much!! I really appreciate it c: I'll do my best. Something I'm struggling with for my Zonelets blog is that the Blog title and Date aren't showing up automatically, despite there being divs for them and I am labeling the html files appropriately. If I type something in the divs the text will not appear on my page. Im assuming it is a Javascript error? I don't know how to fix it tho, do you an idea?
I do have an idea, actually. The first issue is that if you deviate from the template too much or decide to not use on the the variables in the script file, it can break the Javascript that Zonelets uses. For that reason (and because the Javascript was a bit slow sometimes) I actually removed the Javascript from the blog and replaced it with HTML, but I kept a lot the styling divs the same.
I kept the footer for zonelets because that's how I started with my blog, but it's deviated from the original code a fair bit. I think it was actually the blog title and date issues that made me remove all the Javascript. But I would recommend editing the template file first and testing with that to try troubleshoot. Not sure if that's super helpful, but in the end - it probably is an issue with the Javascript.
Thank you so much for the suggestion!! I removed the Javascript on the Post Template and I'll continue fiddling around with it while referencing your code c:
Something I'm trying to achieve on my home page is a cute header banner like yours but with my own pixel art. I copied your code and replaced the background image file with mine, but the banner appears as blank. Do you know what is going on? (Thank you so much for all the help by the way, I hope I am not troubling you)
in terms of the background image, check that it's in the root directory of the website. Check the path and file name are correct "./" in the css style file means it's looking in the root directory. Also check the height and width arguments are correct with units (px). You don't have to load the image as a background image, you can load it as an image in HTML in the file instead if you want.
When I tried looking for your background image by navigating to the filename I got a 404 error so I think the path is probably wrong. The paths are all relative, you can read about it here: https://www.w3schools.com/Html/html_filepaths.asp
Since you're using my code as a base/reference, I'd appreciate it if you could mention it somewhere on your site like "this website layout was inspired by pixelglade's site" with a link to my site - that's just the terms of the Creative Commons license, you can remix and build upon the content or alter it but attribution is usually required. Whenever your website is finished, I'd appreciate the mention. 🙂
Thank you a lot for the help!! I'll double check the path to make sure I get it right. And yes absolutely! I'll be sure to give a link back to pixelglade on my main page since I am referencing your code :) thank you for letting me use it to learn, I appreciate it.
You're welcome! Let me know if you have any more questions.
Hi again! I've made a lot of progress on my site that I'm very happy with c: Thank you for letting me learn from your code. I have three minor things on my site I want to debug.
First two have to do with responsive design; I want to achieve the equally spaced nav box effect your site has on mobile. I referenced your code, but on my phone my site's "About" box is too squished, making the text feel crammed, while my "Projects" box is too spread out. My "Misc" box seems just fine though. What can I do to even out the "about" and "projects" boxes?
The second thing on mobile; if I swipe on my phone it will reveal that there is extra unused space to the right of my page. I was looking stuff up, and I think it comes from me adding padding to a box that had "width=100%" for responsive design. I can't seem to find the offending box though. This extra space on mobile isn't something present on your site, do you know how you prevented this?
The last thing is very minor, but something I notice on my home page is that there is some extra space between the start of the content box and my beginning header. I checked the css for h2 but I can't find any extra padding, so I'm not sure what is going on. Do you have any ideas?
Sorry for all the questions haha, thank you a lot for all the help. Wishing you the best
In regards to the size of the nav box in mobile when it's running along the top, it's set to fill 100% of the space. It looks like the middle column might be larger is due to the line length- the Pokemon: Sceptre/Spear could be the culprit, I generally tried to keep all my heading names roughly a similar length for that reason. A way to test is to temporarily remove all the headings and see what the columns look like
I recommend testing your website in a browser and you can do Right Click > Inspect (Q) and then hover the mouse over different elements. When I did this, I found your h1 banner is what is causing the extra space on the right. If you click the element in this mode you can see a highlight for what the padding is, the position, etc.
My suspicion is the extra space and the header positioning are related issues, if you solve one it might fix the other. The inspect says it's the h1.banner element rather than the header so I'd look into that.
So don't get me wrong, testing on mobile is important but for narrowing down issues with elements you can resize your browser window to be squished and it will have approximately the same effect which can help you search for issues this way with Inspect.
Thank you so much! Your responses helped me fix all of those issues c:
Hi again! c: I am trying to create "favorite things" sections with booktable grids like yours. But one issue I am running into is that when I resize my browser window, the .bookdescription text will go off of the page. Do you know how to keep it in the main container?
Hello~ I actually had this problem with css-grid as well but I never got around to fixing it. In other parts of the site where I have tables (e.g. guestbook, resources root pages) I use just html tables that are set to fit the window. You could try something like that instead, sorry I can't be more help about this right now.
No need to be sorry at all! Thanks for the suggestion c: I'll see what I can do