I started 100 days of code this Monday! I didn't get as much done as I wanted, as I was kind of sick, but I just wrapped up my second mini project. I started them both at the same time, but my first project is an interactive card!
I saw a challenge on Codier about doing a futuristic card, but decided I just wanted to make my own type of card in react instead. I will admit that CSS animations have been a bit foreign to me! I need to research and use them a lot more. It doesn't help that I dived head first into doing 3D perspective with it!
I have to say however, a failing so far is that I haven't made it mobile responsive. When I make it smaller the width breaks the layout, so I pretty much have to redesign the whole thing for mobile, which is not bad, just means that's another project for another day.
#scene {
width: 35rem;
height: 20rem;
perspective: 600px;
#card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
.back {
transform: rotateY(180deg) rotateX(0deg);
backface-visibility: hidden;
}
.front {
transform: rotateX(0deg);
position: absolute;
height: 100%;
width: 100%;
}
}
.isFlipped {
transform: rotateY(-180deg);
}
The second project I did actually has a page you can visit! Using the Black and White assets from Pokemon, as well as various pokemon themed fonts, I made a little app that lets you save an html element as an image for a cute message.
It's a small app, but it's taught me a bit more about React states and state management. I still haven't gotten into Redux yet as it keeps going over my head, but I'll get there someday.
grabMail() {
domtoimage.toPng(document.getElementById('mail'))
.then(dataURL => {
download(dataURL, 'mail.png');
})
}
Top comments (5)
When I tell you my jaw DROPPED looking at this. Great job!
These look really good!
Thank you!
I love the Pokemon mail. Reminds me of nostalgic-css.github.io/NES.css/
Oh that's a really wonderful framework! Thanks for showing me!