welcome to my single page site!
this is a free to use mobile-friendly personal website template for folks who want a small, simple spot on the net. it's entirely made with html & css, and yes -- the whole site is contained in a single html file!
i'm no pro, but i love to make this stuff! and hopefully if you don't already, you'll learn to love it too.
more resources
site templates
color pickers
files hosts
you can also visit my main site's links page for even more places to help you make a site, including some nice beginner tutorials on learning html!and if you run into any problems with the layout, or have any questions you can't seem to figure out on your own, you can feel free to message me via discord or email for help.
thanks for visiting! see ya!
how's this work?
this website is built using anchor tags. this is the basic format:
<a href="#link">my link</a>
<div id="link">my page</div>here, the a href="#link" is the anchor tag, and the div id="link" is what the anchor tag will navigate to when you click it. by using some formatting tricks, we can make it so that every section an anchor link leads to appears as if it's its own separate page, rather than what it actually is ( a section on a single page ).
specifically, we create two types of divs: one is our "container" div, and one is our "page" div. the container div disguises itself as the viewport, while the page div fills the container & acts as a discrete page.
here is an example with the css & html:
css
.container{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.page{
width: 100%;
height: 100%;
overflow: auto;
display: block;
}html
<a href="#index">index</a> <a href="#links">links</a>
<div class="container">
<div class="page" id="index">
welcome to my website!
</div>
<div class="page" id="links">
here's some links to other cool sites ...
</div>
</div>by fixing the height & widths -- most importantly the heights -- you can contain the specific "page" within the .container div. hiding the overflow in .container also ensures you cannot scroll down to the other sections before clicking the anchor links for them.
it's an old technique, and a scrappy one -- but even today, it still has its benefits! namely, you load up your entire site as soon as someone clicks into it. for people on slower connections, or webmasters whose hosts don't have the most amazing servers, this can be a nice way to avoid the headache of having to wait for individual pages to load. it's also got a certain cuteness to it that individual pages don't, you know ... ?
the downside is that you ARE hosting your entire site's code in a single html file. if you add lots & lots of pages, this can get unwieldy to edit. that's why i recommend this for small & simple sites! you can use this technique in a regular page-ful site, too, of course.
download
lemon layout
download zip( more pre-made layouts coming soon! )
how to install
simply drag & drop the files extracted from the zip into wherever you're launching your site from & you're good! if you are using neocities, your dashboard should look like this.
customizing your site
making a new page
when you want to make a new page, there are two steps: (1) adding a link in your nav bar, and (2) adding a div within your .container div. the order you add them within .container doesn't really matter, but i'd keep it logical for the sake of screen readers ( and maybe your sanity ).
the code provided in the zip should be a good enough example, but i'll try to write out instructions clearly here too, in case you need it.
<div class="nav">
<a href="#home">home</a>
<a href="#about">about me</a>
<a href="#ocs">my ocs</a>
</div>
<div class="container">
<div class="page home" id="home">
welcome to my site!
</div>
<div class="page about" id="about">
you wanna know about me? well ...
</div>
<div class="page ocs" id="ocs">
here's some quick bios for my characters!
</div>
</div>step 1. in your html file, within the <div class="nav"> section near the top, copy & paste <a href="#LINK">my page</a>, replacing "NAME" with whatever the name of your new page is. please note, this needs to be UNIQUE, ie. no other pages have this id; i would recommend keeping it to one word as well to avoid formatting issues.
the order you arrange your links here will determine how they show up on your website.
step 2. next, copy & paste <div class="page NAME" id="NAME">welcome to my new page!</div> beneath your latest page in the <div class="container"> section in your html file. change "NAME" again to whatever you called it in step 1.
step 3. that's it!! have fun filling out your freakin website!!!!
editting the css
the "style.css" file included in the zip has been split into two sections -- the first is all of the formatting stuff. if you are not familiar with css, do not mess with this section ( unless you like to tinker & play, of course ).
the second is all styling stuff. this includes background colors, fonts, borders, drop shadows, etc. you should feel free to mess with this section as much as you'd like! it has been sectioned off like this specifically to encourage you to customize.
if you don't understand what you're looking at to the point that you don't know how to edit it ( "what the heck is a 'font-family'?! " ), i recommend searching "[ thing you don't get ] w3s" on your engine of choice & reading what pops up. w3s is an excellent resource for learning how to code, and i frequently visit it when i forget what certain attributes do.
extra code
here's some extra formatting options you can slap onto your pages. the css already contains the styling, so simply refer to this page for how to insert it into your html!
image formatting
class="left": floats img to the left.
class="right": floats img to the right.
class="center": centers img on new line.
class="border": adds border radius to img.
class="shadow": adds drop shadow to img.
add this in your <img src="img.jpg"> codes.
you can use multiple at a time, as long as they don't counteract each other.
( you can also use on divs! )
wide div
class="block"
display div on a new line.
nice for quotes, important info, etc.
the home page has an example of this!
inline div
class="smallblock"
display divs inline with each other.
these 3 divs are an example of it!
2-panel div
<div class="panel">
<div class="one">hello!</div>
<div class="two">blah blah blah ...</div>
</div>div for displaying things side-by-side.
further stylizing the panel
changing the height
the panel is fixed height. if you want to change this, go into your style.css file & find this:
.panel{
height: 450px;
...
}change the value for height: 450px to whatever suits you. you can even set it to height: auto if you want the height to be dictated by how much content is in your div!
☛ quick tip: if you want to change the alignment of your text, try adding one of these to your <p></p> codes, which surround each of your paragraphs:
style="text-align:left" : aligns your text to the left!
style="text-align:center" : to the center!
style="text-align:right" : and to the right!
you can also just use good ol' <center>my text here</center> to center text. ( or divs ... or anything! )
changing panel ratios
if you don't like how the panel display is uneven, you can head back to your style.css file & look for the following code:
.panel{
...
grid-template-columns: 1fr 2fr;
grid-template-areas: 'one two';
...
}if you noticed from editing your html file, "one" & "two" are the names of the divs that you're putting your content in. in the line above them, "1fr" & "2fr" dictate how large those respective sections are in comparison to each other. so ... if you wanted them to be the same size? simply change the code to say grid-template-columns: 1fr 1fr!