Capturing the essence of Mumbai, one Vada Pav at a time.

anii — Thu, 28 Mar 2024 14:29:10 +0000

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Snack I want to highlight is the very humble Vada pav, the iconic street food of Mumbai, that has become an integral part of Mumbaikar culture.

"Life is short, eat Vada Pav! It’s a tasty reminder to enjoy the little things in life."

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light Dark Mode Toggle</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Anton&family=Luckiest+Guy&family=Pixelify+Sans:wght@400..700&family=Rubik+Iso&display=swap');

        body {
            font-family: "Rubik Iso", Arial, sans-serif;
            margin: 0;
            margin-top: 100px;
            padding: 0;
            transition: background-color 0.3s ease;
            background-color: white;
        }

        .switch {
            position: fixed;
            top: 20px;
            right: 20px;
            display: inline-block;
            width: 60px;
            height: 34px;
            background-color: #ccc;
            border-radius: 34px;
            z-index: 999;
        }

        .switch:after {
            content: '';
            position: absolute;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background-color: white;
            top: 4px;
            left: 4px;
            transition: transform 0.3s ease;
        }

        input[type="checkbox"] {
            display: none;
        }

        input[type="checkbox"]:checked + .switch {
            background-color: #222;
        }

        input[type="checkbox"]:checked + .switch:after {
            transform: translateX(26px);
        }

        .content {
            text-align: center;
            margin-top: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .content img {
            display: block;
            margin: 0 auto;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .content img:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .content img,
        .content p {
            display: none;
            font-family: "Pixelify Sans",sans-serif;
            font-size: 25px;
        }

        .content .light-text {
            line-height: 40px;
        }

        input[type="checkbox"]:checked ~ .content img,
        input[type="checkbox"]:checked ~ .content p {
            display: block;
        }

        input[type="checkbox"]:not(:checked) ~ .content .light-text {
            display: block;
            font-family: "Luckiest Guy", sans-serif;
            font-size: 50px;
        }

        input[type="checkbox"]:checked ~ body {
            background-color: black;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="toggle">
    <label class="switch" for="toggle"></label>
    <div class="content">
        <img src="vp.png" alt="Your Image" style="height:350px;margin-top: 250px;">
        <p>If there is one food I can eat all my life, its <span style="font-family:Luckiest Guy, sans-serif;">VADAPAV</span></p>
        <p class="light-text">Food for every mood @brand ambassador of Mumbai.</p>
        <img src="vp2.png" alt="">
    </div>
</body>
</html>

Journey

🚀 Reflecting on the DevCommunity Challenge: Engaging with the Dev community challenge has been a whirlwind of creativity and growth. From mastering CSS art to embracing feedback, each moment has fueled my passion for coding. Moving forward, I'm excited to continue pushing boundaries, collaborating with peers, and exploring new frontiers in web development.
Here's to the journey ahead, filled with innovation, learning, and endless possibilities 🥂.

GeolocationAPI: Your Digital Compass 🌍

anii — Thu, 28 Mar 2024 13:55:15 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

The Geolocation API enables web apps to access user location with their permission, vital for location-based services like maps or weather apps. It respects user privacy by prompting for consent before retrieving location data.

Additional Context