A playground for relearning HTML & CSS

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.

Testing

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

.grid-container {
        position: relative;
        display: grid;
        border: 4px solid transparent;
        border-radius: 15px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 10px;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: var(--max-negative-margin-bottom);
    }

    .grid-container::before {
        content: '';
        position: absolute;
        top: -20px;
        left: -20px;
        right: -20px;
        bottom: -20px;
        z-index: -1;
        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 {
        position: relative;
        display: grid;
        border: 4px solid transparent;
        border-radius: 15px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 10px;
        justify-content: center;
        margin-top: 30px;
    }

    .grid-container2::before {
        content: '';
        position: absolute;
        top: -20px;
        left: -20px;
        right: -20px;
        bottom: -20px;
        z-index: -1;
        border-radius: inherit;
        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);
    }

    @media (max-width: 1200px) {
        html {
            font-size: 1.5vw;
        }
        h1 {
            font-size: 2rem;
        }
        .card {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 768px) {
        html {
            font-size: 1.6vw;
        }
        h1 {
            font-size: 2rem;
        }
        .card {
            font-size: 1.2rem;
        }
        .card h2 {
            font-size: 1.5rem;
            word-break: break-word;
        }
        .grid-container {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            margin-top: 20px;
        }
        .grid-container2 {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            margin-top: 20px;
        }
    }

    @media (min-width: 1200px) {
        .card {
            font-size: 1.05rem;
        }
    }

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>
                                    .card {
                                        margin: 0 auto;
                                        text-align: center;
                                        font-size: 1.5rem;
                                        color: white; /* Corrected from font-style to color */
                                        background: #222429;
                                        padding: 20px;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        border-radius: 20px;
                                        position: relative;
                                    }
                
                                    .card::after, .card::before {
                                        content: '';
                                        position: absolute;
                                        height: 100%;
                                        width: 100%;
                                        background-image: conic-gradient(transparent, #bf212d, transparent);
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        z-index: -1;
                                        border-radius: 23px;
                                        animation: paddingRed 2s infinite;
                                    }
                
                                    .card::before {
                                        filter: blur(0.2rem);
                                        opacity: 0.9;
                                    }
                
                                    @keyframes paddingRed {
                                        from {
                                            padding: 2px; /* Reduced padding */
                                        }
                                        25% {
                                            padding: 1px; /* Reduced padding */
                                        }
                                        50% {
                                            padding: 0px; /* Reduced padding */
                                        }
                                        75% {
                                            padding: 1px; /* Reduced padding */
                                        }
                                        to {
                                            padding: 2px; /* Reduced padding */
                                        }
                                    }

Responsiveness Testing

Testing p2. Lorem Lorem blah blah. Testing p2. Lorem Lorem blah blah. Testing p2. Lorem Lorem blah blah.

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.

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.

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.

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.

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.

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.

Idea Generation for Implementation

Google Review
from John Doe

Amazing product! Exceeded my expectations with its quality and performance. Highly recommend to anyone looking for reliability and value. Will definitely purchase again.

 Big thanks for the review, John! We're glad you enjoyed the product and hope to see you again in the future.
                    For your next order, here's a 10% code: FAAAAAKE

Bing Review
from Jane Doe

Excellent service and fast delivery. The product quality is top-notch. Will definitely recommend to friends and family.

Thank you! We're thrilled to hear you had a great experience. Enjoy a 10% discount on your next purchase with code: FAAAAAKE
         </div>

Booking.com Review
from Johnny Doe

Great value for money. The product works as described and the customer service was very helpful.

Thank you! We're thrilled to hear you had a great experience. Enjoy a 10% discount on your next purchase with code: FAAAAAKE

Daily Mail Review
from Evil Richard Branson

Impressive quality and easy to use. The design is sleek and modern. Highly satisfied with my purchase.

Cheers, mate. At ExampleCSS, we strive for transparency, integrity and community spirit. Whilst this may be a direct opposition to your own ideals as a profiteer of misinformation, hatred and global distrust, we appreciate and recognise that you're a complete arsehole and will happily take your money. Don't worry, we'll actually read the fine print. Sincerely, go fuck yourself! :D

Conservative Party Review
from AnonGate

Incredible value! ExampleCSS data helped us decide to increase UK tuition fees by 200%. This product enabled us to privatize education seamlessly. Back to our agenda! Don't forget to retrain and stamp out our culture!

Thanks, Cons. We appreciate it. Here's what ChatGPT reviews your tenure: Over the last 12 years, the Conservative Party has taken us on quite the rollercoaster ride! They've promised fiscal discipline but somehow managed to balloon the national debt while handing out more tax cuts than a fire sale. From Brexit chaos to party scandals, it's been a sitcom of leadership changes and policy U-turns. Their environmental policy? As green as a coal mine! Through it all, they've insisted they're the party of stability—if by stability, you mean consistently unpredictable. It's like they’ve been binge-watching "House of Cards" and taking notes on how not to run a country!

Donald Trump Review
from Russia with Love($)

Just an incredible product—truly the best. It showed me how to inject bleach like a champion, direct a ‘peaceful protest’ that totally didn’t storm the Capitol, build half a wall that’s almost there, and even take some creative swings at democracy. It’s all just brilliant. Seriously, you couldn’t make this stuff up!

Thanks, guy. Remember, setting your password to yourefired, and then changing it to Maga2020 after being hacked by a white hat, isn't a great idea! You should probably ensure you don't keep the same password on all of your accounts. Good luck, guy. Thanks for spreading nothing but hatred, and all the other little things no one knows about. Yet.

Catholic Church Review
straight outta Vatican City

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.We commend the EZ-SCRUB3000’s effectiveness in cleansing impurities, as highlighted in South Park. Our trials, reminiscent of the “Love Boat” episode’s humorous mishaps, confirm its purifying power. However, its lack of a subscription service for ongoing support and failure to address other controversies, such as its limited application, reliability issues, and higher-than-expected maintenance costs, detracts from its virtue.

These shortcomings result in a modest 1/5 rating. We hope future improvements will rectify these flaws, ensuring both enhanced efficacy and enduring support.
Thanks, guy. Remember, setting your password to yourefired, and then changing it to Maga2020 after being hacked by a white hat, isn't a great idea! You should probably ensure you don't keep the same password on all of your accounts. Good luck, guy. Thanks for spreading nothing but hatred, and all the other little things no one knows about. Yet.

Pizza Express - Woking Review
from his royal Prince Andrew

I highly endorse Pizza Express Woking—an ideal spot for a date with 17-year-olds. While I might have a peculiar reaction to sweating, I excel at entertaining the youth. Ask me about my VIP Epstein offer; I have a discount code!
https://www.cbc.ca/news/prince-andrew-jeffrey-epstein-documents-1.7074336

Test - why is border merging? Argh.

Whilst I doubt I need to mention it, based on the current worldwide.. Demographics, I should point out that the above reviews are (very obviously) satirical.

Satire, bro.
I hope you had a little chuckle at the very least. Hatred is widespread, and unfortunately even I am part of it by posting the above fake reviews. Be better than me.

A playground for relearning HTML & CSS

Can't < br > quite yet

Forgot something

Testing

Grid Container CSS

Grid Container 1 & 2

Animated border colourstask reminder

Wow, that was harder than expected

Responsiveness Testing

Sidebar Leftimplemented - unfin

Sidebar Righttask reminder: vh

Multi textarea boxestask reminder

Funny. Turns out it already works. Responds great.

Responsive Grid

Responsive Grid

Responsive Grid

Flexbox Idea Gen:

Idea Generation for Implementation

Google Reviewfrom John Doe

Bing Reviewfrom Jane Doe

Booking.com Reviewfrom Johnny Doe

Daily Mail Reviewfrom Evil Richard Branson

Conservative Party Reviewfrom AnonGate

Donald Trump Reviewfrom Russia with Love($)

Catholic Church Reviewstraight outta Vatican City

Pizza Express - Woking Reviewfrom his royal Prince Andrew

Test - why is border merging? Argh.

Satire, bro.

Animated border colours
task reminder

Sidebar Left
implemented - unfin

Sidebar Right
task reminder: vh

Multi textarea boxes
task reminder

Google Review
from John Doe

Bing Review
from Jane Doe

Booking.com Review
from Johnny Doe

Daily Mail Review
from Evil Richard Branson

Conservative Party Review
from AnonGate

Donald Trump Review
from Russia with Love($)

Catholic Church Review
straight outta Vatican City

Pizza Express - Woking Review
from his royal Prince Andrew