This is still very much a work in progress right now, but I wanted to put something here for now while I continue to learn!

A bit about me

I like crafts, writing, animals, learning languages, and just learning in general! I like playing around with diffrent things and just seeing what can be done!

What I'll do here:

I just want a place to share some of my art, work, etc for fun! I also just wanted a place to practice with code as well, just to learn it.

Resources I've Used

Status & Plans

Update color pallete w/ more colors (and perhaps shades)
Play around w/ css/html (Im still gonna play around w/ it more)

Updates!

7/29/26

Yall mind if I learn a little javascript? Ahaha, lol, but yeah had a break to see family & learned some JS while I was out. Now I have a little pop up thing! This actually isn't meant for here, but for a new layout I'm working towards. Just wanted to put it here though for practice. Stuff may start to slow down though (coding wise) as school begins soon, so I have to prepare for that.
Besides that, I'll try to get a tutorial up on how I did the pop-up, since this took me forever to figure out, and I dont wanna leave anyone in the dust.

7/15/26

I AM FREE!!! NO MORE MATH CLASS (for now) I AM FREE!!!!!! For now I guess i'll continue to play round with stuff :p

7/10/26

I have learned the hard way that one must code for mobile compatibility first before desktop. Auuuuugghh but I am alright! At least the code is somewhat neater.

7/8/26

Ive finally finished the tutorial!!! I guess I'll just play around with stuff now, as well as slowly ease into javascript! I'll also have to clean up the code in here, lol

6/29/26

Added a update box!!! Still busy with summer school tho, so this is all until freedom!!! Also learned how to customize the scrollbar and do collapsed lists ig too! so woopie!!!

About The Dog!

Hi there, browser! Welcome to my website! You can call me Canina! I chose the name Canina because it is my favorite subtribe of canids; my most favorite being the African Wild Dog (my most favorite for the longest, however, was the wolf, specifically the Vancouver Coastal Sea wolf).

I made this website to learn code, as well as have a place to share the things I like! I really like learning and making crafts, so I hope to share these things!

As I've begun to learn more code (though I am very much in the early stages of learning), I've grown to really like it! It's like a whole new medium of expression that encompasses other mediums within it! I'm having lots of fun creating things for this silly website :]

Gen Info!
Age	19	Pronouns	Any	Fav Color	YELLOW!
Interests	Zoology, Biology, Languages, Dogs, Pigeons
Hobbies	Sewing, Crochet, Knitting, Drawing, Coding, Crafting, Learning Languages, Writing, Learning and more!

HTML Code

CSS Code

JS Code

<!--Remember to link your JS and CSS sheets!-->
    <button id="btnON">Overlay On</button>

    <div id="overlay">
    <div id="content">

        <div id="imgbox"><p>Image Here</p></div>

        <div class="boxes" id="box1"></div>
        <div class="boxes" id="box2"></div>
        <div class="boxes" id="box3"></div>

        <div id="SideTabBox">
            <div class="SideTabs" id="STBox1"><p>Box 1</p></div>
            <div class="SideTabs" id="STBox2"><p>Box 2</p></div>
            <div class="SideTabs" id="STBox3"><p>Box 3</p></div>
        </div>
        <button id="btnOFF">Overlay Off</button>
    </div> <!--content end-->
    </div> <!--Overlay end-->

    #overlay{
        height: 100vh;
        width: 100vw;
        background-color: #0000007c;
        position: fixed;
        display: none;
        top:0;
        left:0;
        right: 0;
        bottom: 0;
        box-sizing: border-box;}
        #content{
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;}

            /*Image*/
            #imgbox{
                height: 50vh;
                width: 150px;
                background-color:darksalmon;
                animation-name: bounceIN;
                animation-duration: .75s;
                animation-timing-function: cubic-bezier(.35,.01,.26,1.57);
                cursor:pointer;}
                @keyframes imgspin1{
                    100% {transform: rotateZ(360deg);}}
                @keyframes imgspn2{
                    100% {transform: rotateZ(-360deg);}}

            /*Boxes*/
            .boxes{
                border: 7px solid;
                height: 50vh;
                width: 50vw;
                min-width: 250px;
                padding-left: 15px;
                padding-right: 15px;
                box-sizing: border-box;
                overflow: auto;}
            #box1{

                background-color: gold;
                animation-name: Box1DelayFade;
                animation-duration: 1s;
                animation-delay: 1.25s;
                opacity: 1;
                animation-fill-mode: backwards;}
            #box2{
                background-color: brown;
                display: none;
                animation-name: SideTabBoxAnim;
                animation-duration: .25s;}
            #box3{
                background-color:darkolivegreen;
                display: none;
                animation-name: SideTabBoxAnim;
                animation-duration: .25s;}

            /*Side Tabs*/
            #SideTabBox{
                position: absolute;
                gap: 5px;
                display: flex;
                flex-wrap: wrap;
                width: 10vw;
                min-width: 75px;
                right: 0;}
                .SideTabs{
                    width: 10vw;
                    min-width: 75px;
                    border-top: 7px solid;
                    border-bottom: 7px solid;
                    border-left: 7px solid;
                    border-top-left-radius: 50px;
                    border-bottom-left-radius: 50px;
                    background-color:lightblue;
                    text-align: center;
                    cursor: pointer;
                    box-sizing: border-box;}
                @keyframes SideTabBoxAnim {
                    50% {transform: translateY(-20px);}}
            
            /*Off & On Button*/
            #btnOFF{
                position: absolute;
                bottom: 25px;
                right: 25px;
                border: 5px solid;
                transition: .3s;
                cursor: pointer;}
                #btnOFF:hover{
                background-color: black;
                color:darkgray;}
                @keyframes bounceIN {
                    0%{transform: translateY(100vh);}
                    100%{transform: translateY(0);}}
                @keyframes Box1DelayFade{
                    0%{opacity: 0;}
                    100%{opacity: 1;}}
                @keyframes bounceOUT{
                    0%{transform: translateY(0);}
                    100%{transform: translateY(110vh);}}

//Naming & Info
    //Buttons & Overlay
    const overlay = document.getElementById(`overlay`);
    const btnON = document.getElementById(`btnON`);
    const btnOFF = document.getElementById(`btnOFF`);
    //Image & Content Boxes
    const imgbox = document.getElementById(`imgbox`);
    const box1 = document.getElementById(`box1`);
    const box2 = document.getElementById(`box2`);
    const box3 = document.getElementById(`box3`);
    //Side Tabs
    const STBox1 = document.getElementById(`STBox1`);
    const STBox2 = document.getElementById(`STBox2`);
    const STBox3 = document.getElementById(`STBox3`);

    //On & off button
    btnON.onclick = function(){
        overlay.style.display = "block";
        imgbox.style.animationName = "bounceIN";
        imgbox.style.animationDuration = ".75s";
        imgbox.style.animationTimingFunction = "cubic-bezier(.35,.01,.26,1.57)";
        box1.style.animationName = "Box1DelayFade";
        box1.style.animationDelay = "1.25s";
        box1.style.display = "block";
        box2.style.display = "none";
        box3.style.display = "none";}
    btnOFF.onclick = function(){
        setTimeout(function() {overlay.style.display = "none";}, 1000);
        imgbox.style.animationName = "bounceOUT";
        imgbox.style.animationTimingFunction = "cubic-bezier(.7,-0.62,.88,.74)";
        imgbox.style.animationFillMode = "forwards";
        imgbox.style.animationDuration = ".75s";}

    //Side Tab Behavior & Animation
    STBox1.onclick = function() {
        box1.style.display = "block";
        box1.style.animationName = "none";
        box1.style.animationName = "SideTabBoxAnim";
        box1.style.animationDelay = "0s";
        box1.style.animationDuration = ".25s";
        box2.style.display = "none";
        box3.style.display = "none";}
    STBox2.onclick = function() {
        box1.style.display = "none";
        box2.style.display = "block";
        box3.style.display = "none";}
    STBox3.onclick = function() {
        box1.style.display = "none";
        box2.style.display = "none";
        box3.style.display = "block";} 

    //Image Animation
    imgbox.onclick = function() {
        imgbox.style.animationDuration = ".5s";
        if (imgbox.style.animationName === "bounceIN")
            {imgbox.style.animationName = "imgspin1";}
        else if (imgbox.style.animationName === "imgspin1")
            {imgbox.style.animationName = "imgspn2"}
        else {imgbox.style.animationName = "imgspin1";}}

Place Holder Text

About Me

My Persona(s)

Pop-Up Tut

*Welcoming barks*

A bit about me

What I'll do here:

Resources I've Used

About The Dog!

Welcoming barks