DEV Community

loading...

I created an iPhone using pure CSS and only 1 DIV

pandaquests profile image pandaquests ・1 min read

About a few years ago, I found a tutorial how they teach you to create an apple logo using CSS and multiple DIVs.

This image of an iPhone - including all the elements in it, e.g. logo, camera, buttons, etc - is created using only 1 DIV:
Alt Text

The whole source code can be found here:
https://codepen.io/thadeuszlay/pen/EyZxZj

It's an ongoing series I make: Creating images with CSS and only 1 DIV. If you have another idea what else I could make, drop a line.

Discussion (10)

Collapse
chuksokwuenu profile image
Chuks Okwuenu

Wow nice one

Collapse
pandaquests profile image
pandaquests Author

Thanks. Will upload more later

Collapse
chuksokwuenu profile image
Chuks Okwuenu

Is the camera also css or it image .. just asking thou 😎

Thread Thread
pandaquests profile image
pandaquests Author

Everything is CSS. It's made purely with CSS and one DIV. Check the code yourself

Thread Thread
chuksokwuenu profile image
Chuks Okwuenu

just checked it out man... that was a great css work you did right there

Thread Thread
pandaquests profile image
pandaquests Author

Thanks. I'll post more in the near future. Stay tuned. B)

Collapse
andrewbaisden profile image
Collapse
pandaquests profile image
Collapse
rigobcastro profile image
Rigo B Castro

Fascinating

Collapse
pandaquests profile image
Forem Open with the Forem app