A playground for relearning HTML & CSS

Grid Container 1&2 development:

Can't < br > quite yet

So using a br on the body (outside of the card elements) breaks the code (trying to figure out still). Vaguely remember shrinking the body by 75%, so I guess I'll start there. Workaround is to use BR on the titles for now. Funny how most of my issues are stemming from not properly researching the page setup. Shows that I've been far too reliant on Wordpress in the past.

Forgot something

Seriously, I meant to write something import here but I have no idea what it was. Oh well.

I guess it's fixed

No idea what/why that br issue was. It seems to be fixed? Go me.

Good job finding this little prompt. Thank you, too. I appreciate the engagement.<br> Well, these cards have been an interesting first 'project' for sure. Whilst the majority of the code is my own input, I realise (half way through - I'm still not particularly happy with the results) I was far too reliant on CoPilot. I would still absolutely recommend it as a learning tool, and development tool. The amount of shit I've learned in a few days is.. Unreal. It opens a huge door for knowledge, and is engaging enough to feel like an actual teacher. Granted, a teach who is constantly incorrect, and breaks your code on a regular basis. But shit, it's all about that code vocab.<br> My second 'project', flexbox, uses only my own input. In the future, I'll be adding snippets of code for 'ease of access'. It'll be in relation to whatever comes of this page. Still need to make it nice and pretty. I guess this card turned out to be an unintended mini dev log.

Grid Container CSS

The barebones of how the grid works. Opposite to flexbox, grid container retains the grid format in a more 'static' way. I'm a pretty big fan of the customizability it offers. It seems that every .card I have placed within is fully responsive - to an extent. Scaling the screen size seems to increase the entire row size dependant of content within the P. I guess this is the downside of not using flexbox. Probably best to use this when there is a character limit, or with only 4-6 cards per grid. The pretty awesome thing I discovered is if you add a hover to the card (click activate), the grid automatically resizes to the content. Pretty sweet. I guess a workaround in the meanwhile is to center/align/justify (still trying to remember which one) h2 & P to the center of the card.

Grid Container 1 & 2

Code is being constantly amended for them, but they're super simple. In progress 3 column included.


.grid-container {
            position: relative;
            display: grid;
            border: 4px solid transparent;
            border-radius: 15px;
            grid-template-columns: repeat(2, minmax(250px, 1fr));
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
            /* z-index: -1; - error -1 breaks the textarea*/
        }
        
        .grid-container2 {
            position: relative;
            display: grid;
            border: 4px solid transparent;
            border-radius: 15px;
            grid-template-columns: repeat(auto-fit, minmax(24%, 1fr));
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        }
        
        /* .grid-container2 {             3 column grid:
            position: relative;
            display: grid;
            border: 4px solid transparent;
            border-radius: 15px;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        } */
        
        .grid-container::before, .grid-container2::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            z-index: -2; /* edited from -1 to 0 but maaay break something. Review later */
            border-radius: inherit;
            background: linear-gradient(to right, rgba(13, 13, 20, 0.7), rgba(75, 82, 92, 0.3));
            box-shadow: 0 0 0 20px rgba(13, 13, 20, 0.158);
        }
        
        .grid-container2::before {
            background: linear-gradient(to right, rgba(75, 82, 92, 0.3), rgba(13, 13, 20, 0.7));
            box-shadow: 0 0 0 20px rgba(13, 13, 20, 0.079);
            z-index: -2; /*could cause error*/
        }
        
        @media (max-width: 768px) {
            html {
                font-size: 1.6vw;
            }
            h1 {
                font-size: 2rem;
            }
            .card {
                font-size: 0.5rem;
            }
            .card h2 {
                font-size: 1.2rem;
                word-break: break-word;
            }
            .grid-container, .grid-container2 {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* change in future */
                margin-top: 20px;
            }
        }

Ignore the ramblings

Learning is way easier when you're typing down random garbage imo. I'll correct the misinformation as I learn.

Animated border colours
task reminder

Need to remember to actually implement these. Code is going to be an absolute mess (already is) so I'm majorly procrastinating. If my idea works it'll look pretty sweet though.

Wow, that was harder than expected

Seriously, that took forever. Stoked I managed to figure it out on my own. The code inside the textarea is pretty janky, but it works. I should research what I can exactly do with @keyframes. So much potential.

<b>Card, animations and elements:</b><br>
                    /* Styles for card elements with common properties */
                    .card, .cardYellow, .cardGreen {
                        margin: 0 auto; /* Center the card horizontally */
                        text-align: center; /* Center text inside the card */
                        font-size: 1.5rem; /* Set the font size */
                        background: #222429; /* Set the background color */
                        padding: 20px; /* Add padding inside the card */
                        display: block; /* Display as block element */
                        flex-direction: column; /* Arrange children in a column */
                        align-items: center; /* Center children horizontally */
                        border-radius: 20px; /* Round the corners */
                        position: relative; /* Position relative for pseudo-elements */
                        min-height: 290px; /* Set minimum height */
                        height: fit-content; /* Adjust height to fit content */
                    }
                    
                    /* Styles for ::before and ::after pseudo-elements of card elements */
                    .card::after, .card::before,
                    .cardYellow::after, .cardYellow::before,
                    .cardGreen::after, .cardGreen::before {
                        content: ''; /* Empty content for pseudo-elements */
                        position: absolute; /* Position absolutely within the card */
                        height: 100%; /* Full height of the card */
                        width: 100%; /* Full width of the card */
                        background-image: conic-gradient(transparent, #bf212d, transparent, #bf212d, transparent); /* Gradient background */
                        top: 50%; /* Center vertically */
                        left: 50%; /* Center horizontally */
                        transform: translate(-50%, -50%); /* Adjust position to center */
                        z-index: -1; /* Place behind the card content */
                        padding: 2px; /* Add padding */
                        border-radius: 23px; /* Round the corners */
                        animation: paddingRed 2s infinite; /* Apply animation */
                    }
                    
                    /* Specific background for .cardYellow pseudo-elements */
                    .cardYellow::after, .cardYellow::before {
                        background-image: conic-gradient(transparent, #ccda12, transparent, #ccda12, transparent); /* Yellow gradient */
                    }
                    
                    /* Specific background for .cardGreen pseudo-elements */
                    .cardGreen::after, .cardGreen::before {
                        background-image: conic-gradient(transparent, #148022, transparent, #148022, transparent); /* Green gradient */
                    }
                    
                    /* Blur and opacity for ::before pseudo-elements */
                    .card::before, .cardYellow::before, .cardGreen::before {
                        filter: blur(0.2rem); /* Apply blur effect */
                        opacity: 0.9; /* Set opacity */
                    }
                    
                    /* Keyframes for padding animation */
                    @keyframes paddingRed {
                        from { padding: 6px; }
                        25% { padding: 4px; }
                        50% { padding: 2px; }
                        75% { padding: 4px; }
                        to { padding: 6px; }
                    }

Colour Coding

I keep forgetting what I'm working on. So.. For this grid, bf212d is not started, yellow is in progress and green is mostly completed. I'm sure there is a much easier way to code this. For now I'm sticking with individual card classes per border. Added ChatGPT annotations

Sidebar Left
implemented - unfin

I've implemented a basic sidebar, but it's messsssyyyy. Responsive, but messy. I should finalise this first, and then do the vh afterwards. Going to be tricky making it responsive if I base it on current CSS. Maybe right sidebar up by 15%, pad out some space, then duplicate underneath.

Did its job!

I'll play more with sidebar settings and watch some videos. Too many 90s vibes for me.

.sidebar {
                    width: 100px;
                    background-color: rgba(75, 82, 92, 0.3);
                    padding: 15px;
                    justify-content: center;
                    align-items: center;
                    align-content: center;
                    height: auto;
                    overflow: auto;
                    position: fixed;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    border: 1px solid rgba(75, 82, 92, 0.3);
                    border-radius: 15px;
                    font-family: 'Helvetica', sans-serif;
                    font-size: xx-small;
                    font-weight: bold;
                    color: rgb(107, 105, 105);
                }
                
                .sidebar a {
                    display: block;
                    color: rgb(124, 123, 123);
                    padding: 8px 0;
                    text-decoration: none;
                    font-weight: bold;
                }
                
                .sidebar a:hover {
                    background-color: #5e5e5e;
                    border-radius: 10px;
                }

Sidebar Right
task reminder: vh

Duplicate the left side bar into a new class probably named sidebar-right. It will contain the version history of the page currently on, and will span across future elements. Think it'll be a bit more of a nightmare than I expect.

Implemented

Version History sidebar on the right, but it will get super cluttered in a few months. Looks way too 90s. Leaving this as is and moving on to a form of navbar to integrate.

.sidebarvh {
                        width: 100px;
                        background-color: rgba(75, 82, 92, 0.3);
                        padding: 15px;
                        justify-content: center;
                        align-items: center;
                        align-content: center;
                        height: auto;
                        overflow: auto;
                        position: fixed;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        border: 1px solid rgba(75, 82, 92, 0.3);
                        border-radius: 15px;
                        font-family: 'Helvetica', sans-serif;
                        font-size: xx-small;
                        font-weight: bold;
                        color: rgb(107, 105, 105);
                    }
                    
                    .sidebarvh a {
                        display: block;
                        color: rgb(124, 123, 123);
                        padding: 8px 0;
                        text-decoration: none;
                        font-weight: bold;
                    }
                    
                    .sidebarvh a:hover {
                        background-color: #5e5e5e;
                        border-radius: 10px;
                    }

Multi textarea boxes
task reminder

Need to check and implement the possibility of having multiple textarea boxes within the a card. Well, I also need to test it. Not sure if it will work due to positioning being absolute, but maybe I can make a secondary class? idk yet, probably have to revisit in a few months with more experience

Funny. Turns out it already works. Responds great.

Spam spam Lorem Spam

test 1

test 2

Awesome. Saved a job. Brilliant.

More Card Classes

Thin to test

Conic Gradient

Works way better than expected. Playing with keyframes is pretty sweet.

                    @property --angle {
              <!--  syntax: '<angle>'; -->
                    initial-value: 0deg;
                    inherits: false;
                }
                    .cardChasingBorder::after, .cardChasingBorder::before {
                        animation: 3s ChasingBorder linear infinite;
                        background-image: conic-gradient(from var(--angle), transparent 80%, red);
                    }
                    .cardChasingBorder::before {
                        filter: blur(0.2rem);
                        opacity: 0.9;
                    }
                    @keyframes ChasingBorder {
                        from{

                            --angle: 0deg;
                        }
                        to {

                            --angle: 360deg;
                    }

                }

Navigation Menu & Sidebar

Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsum

Responsive Grid

Theoretically compatible with all devices. Works on 1fr and auto-repeat. I should test this with 10 cards (the class) with variety in word counts.

Flexbox Idea Gen:

Recipe cards - hover animations (jpg maybe?) Upon click, takes to recipe print page - Recipe on the right, the annoying text on the left.