^

your name goes here

you could also put an image here, if you wanted! or a subtitle!

a very simple portfolio code template!

back to the blog post!

how to grab this code:

right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

this is some page content, in bold, italic, underlined, highlighted, code, and link varieties.

the p tag denotes a paragraph, and the br tag will make a single line break,
like this.

the code includes 5 variables for colors you can edit: text, background, accent, accent-dark, and accent-light.

  1. ordered lists (ol) look like this
  2. (they have numbers)
this is a blockquote, which is good for quoting.
this is a box - you can put special content into it, if you want. use class="center" to center text.
want to put two boxes next to each other? or text next to an image?
use a div class="flex"!

^ that's an hr - a little dividing line to put between elements.

image gallery

YOUR NAME GOES HERE YOUR NAME GOES HERE YOUR NAME GOES HERE
^

your name goes here

you could also put an image here, if you wanted! or a subtitle!

a very simple portfolio code template!

back to the blog post!

how to grab this code:

right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

this is some page content, in bold, italic, underlined, highlighted, code, and link varieties.

the p tag denotes a paragraph, and the br tag will make a single line break,
like this.

the code includes 5 variables for colors you can edit: text, background, accent, accent-dark, and accent-light.

  1. ordered lists (ol) look like this
  2. (they have numbers)
this is a blockquote, which is good for quoting.
this is a box - you can put special content into it, if you want. use class="center" to center text.
want to put two boxes next to each other? or text next to an image?
use a div class="flex"!

^ that's an hr - a little dividing line to put between elements.

image gallery

^
^
^

your name goes here

you could also put an image here, if you wanted! or a subtitle!

your name goes here

your name goes here

your name goes here

you could also put an image here, if you wanted! or a subtitle! your navigation links go here! <>>

your name goes here

you could also put an image here, if you wanted! or a subtitle!

a very simple portfolio code template!

back to the blog post!

how to grab this code:

right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

this is some page content, in bold, italic, underlined, highlighted, code, and link varieties.

the p tag denotes a paragraph, and the br tag will make a single line break,
like this.

the code includes 5 variables for colors you can edit: text, background, accent, accent-dark, and accent-light.

  1. ordered lists (ol) look like this
  2. (they have numbers)
this is a blockquote, which is good for quoting.
this is a box - you can put special content into it, if you want. use class="center" to center text.
want to put two boxes next to each other? or text next to an image?
use a div class="flex"!

^ that's an hr - a little dividing line to put between elements.

image gallery

a very simple portfolio code template!

back to the blog post!

back to the blog post!

back to the blog post!

how to grab this code:

right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

how to grab this code:

right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

how to grab this code:

right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

this is some page content, in bold, italic, underlined, highlighted, code, and link varieties.

the p tag denotes a paragraph, and the br tag will make a single line break,
like this.

the p tag denotes a paragraph, and the br tag will make a single line break,
like this.

the p tag denotes a paragraph, and the br tag will make a single line break,
like this.

the code includes 5 variables for colors you can edit: text, background, accent, accent-dark, and accent-light.

the code includes 5 variables for colors you can edit: text, background, accent, accent-dark, and accent-light.

the code includes 5 variables for colors you can edit: text, background, accent, accent-dark, and accent-light.

  • you can also make lists
  • unordered lists (ul) look like this
  • unordered lists ( ul ) look like this
  • unordered lists (ul) look like this
    1. ordered lists (ol) look like this
    2. (they have numbers)
  • ordered lists (ol) look like this
  • ordered lists ( ol ) look like this
  • ordered lists (ol) look like this
  • (they have numbers)
    1. ordered lists (ol) look like this
    2. (they have numbers)
    this is a blockquote, which is good for quoting.
    this is a box - you can put special content into it, if you want. use class="center" to center text.
    this is a box - you can put special content into it, if you want. use class="center" to center text.
    this is a box - you can put special content into it, if you want. use class="center" to center text.
    want to put two boxes next to each other? or text next to an image?
    use a div class="flex"!
    want to put two boxes next to each other? or text next to an image?
    want to put two boxes next to each other? or text next to an image?
    want to put two boxes next to each other? or text next to an image?
    use a div class="flex"!
    use a div class="flex" !
    use a div class="flex"!
    want to put two boxes next to each other? or text next to an image?
    use a div class="flex"!

    <>>
    ^ that's an hr - a little dividing line to put between elements.

    image gallery

    you can put text here, too, if you want. the number of columns will change depending on how wide the window is, making it responsive to view on phone screens!

    don't want columns? just remove the class = "columns" bit. (this is good for things like posting comic pages, since columns can mess with the order of your images.)
    don't want columns? just remove the class = "columns" bit. (this is good for things like posting comic pages, since columns can mess with the order of your images.)
    don't want columns? just remove the class = "columns" bit. (this is good for things like posting comic pages, since columns can mess with the order of your images.)
    you can use the figure & figcaption elements if you want to add captions to your images
    you can use the figure & figcaption elements if you want to add captions to your images
    you can use the figure & figcaption elements if you want to add captions to your images
    you can use the figure & figcaption elements if you want to add captions to your images
    you can use the figure & figcaption elements if you want to add captions to your images

    a very simple portfolio code template!

    back to the blog post!

    how to grab this code:

    right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

    then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

    this is some page content, in bold, italic, underlined, highlighted, code, and link varieties.

    the p tag denotes a paragraph, and the br tag will make a single line break,
    like this.

    the code includes 5 variables for colors you can edit: text, background, accent, accent-dark, and accent-light.

    • you can also make lists
    • unordered lists (ul) look like this
    1. ordered lists (ol) look like this
    2. (they have numbers)
    this is a blockquote, which is good for quoting.
    this is a box - you can put special content into it, if you want. use class="center" to center text.
    want to put two boxes next to each other? or text next to an image?
    use a div class="flex"!

    ^ that's an hr - a little dividing line to put between elements.

    image gallery

    footer text! this is where you put things like:
    (c) you, 2025 - forever.

    base code by kaylee rowena. (you don't have to leave this in here, but i'd appreciate if you link to me somewhere on your site so other people can grab the template if they want to! i'm not your mom or a cop, though, so do whatever you want.)

    you can put social media links here too:
    bsky | instagram | tumblr | tip jar | email

    <>> footer text! this is where you put things like:
    (c) you, 2025 - forever.

    base code by kaylee rowena. (you don't have to leave this in here, but i'd appreciate if you link to me somewhere on your site so other people can grab the template if they want to! i'm not your mom or a cop, though, so do whatever you want.)

    base code by kaylee rowena . (you don't have to leave this in here, but i'd appreciate if you link to me somewhere on your site so other people can grab the template if they want to! i'm not your mom or a cop, though, so do whatever you want.)

    base code by kaylee rowena. (you don't have to leave this in here, but i'd appreciate if you link to me somewhere on your site so other people can grab the template if they want to! i'm not your mom or a cop, though, so do whatever you want.)

    you can put social media links here too:
    bsky | instagram | tumblr | tip jar | email

    you can put social media links here too:
    bsky | instagram | tumblr | tip jar | email

    you can put social media links here too:
    bsky | instagram | tumblr | tip jar | email

    footer text! this is where you put things like:
    (c) you, 2025 - forever.

    base code by kaylee rowena. (you don't have to leave this in here, but i'd appreciate if you link to me somewhere on your site so other people can grab the template if they want to! i'm not your mom or a cop, though, so do whatever you want.)

    you can put social media links here too:
    bsky | instagram | tumblr | tip jar | email

    const popover = document.getElementById("lightbox"); $('#gallery img').click(function (e) { var image_src = $(this).attr("src"); $(this).attr('popovertarget', 'lightbox'); $('#lightbox').html(''); popover.showPopover(); $('#lightbox').append(''); });

    your name goes here

    you could also put an image here, if you wanted! or a subtitle!

    a very simple portfolio code template!

    back to the blog post!

    how to grab this code:

    right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

    then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

    this is some page content, in bold, italic, underlined, highlighted, code, and link varieties.

    the p tag denotes a paragraph, and the br tag will make a single line break,
    like this.

    the code includes 5 variables for colors you can edit: text, background, accent, accent-dark, and accent-light.

    • you can also make lists
    • unordered lists (ul) look like this
    1. ordered lists (ol) look like this
    2. (they have numbers)
    this is a blockquote, which is good for quoting.
    this is a box - you can put special content into it, if you want. use class="center" to center text.
    want to put two boxes next to each other? or text next to an image?
    use a div class="flex"!

    ^ that's an hr - a little dividing line to put between elements.

    image gallery

    footer text! this is where you put things like:
    (c) you, 2025 - forever.

    base code by kaylee rowena. (you don't have to leave this in here, but i'd appreciate if you link to me somewhere on your site so other people can grab the template if they want to! i'm not your mom or a cop, though, so do whatever you want.)

    you can put social media links here too:
    bsky | instagram | tumblr | tip jar | email

    YOUR NAME GOES HERE

    your name goes here

    you could also put an image here, if you wanted! or a subtitle!

    a very simple portfolio code template!

    back to the blog post!

    how to grab this code:

    right click on this page & select view page source, then copy everything that comes up! paste that into your index.html file.

    then go to style.css and copy-paste everything there into a style.css file. edit to your heart's content.

    this is some page content, in bold, italic, underlined, highlighted, code, and link varieties.

    the p tag denotes a paragraph, and the br tag will make a single line break,
    like this.

    the code includes 5 variables for colors you can edit: text, background, accent, accent-dark, and accent-light.

    • you can also make lists
    • unordered lists (ul) look like this
    1. ordered lists (ol) look like this
    2. (they have numbers)
    this is a blockquote, which is good for quoting.
    this is a box - you can put special content into it, if you want. use class="center" to center text.
    want to put two boxes next to each other? or text next to an image?
    use a div class="flex"!

    ^ that's an hr - a little dividing line to put between elements.

    image gallery

    footer text! this is where you put things like:
    (c) you, 2025 - forever.

    base code by kaylee rowena. (you don't have to leave this in here, but i'd appreciate if you link to me somewhere on your site so other people can grab the template if they want to! i'm not your mom or a cop, though, so do whatever you want.)

    you can put social media links here too:
    bsky | instagram | tumblr | tip jar | email