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 🥂.
Top comments (0)