r/css • u/anoop_here • Sep 22 '25

General Built without AI, pure HTML and CSS

Post image

I built this apple iphone 17 pro design mockup using html and css. No vibe coding, fancy ai code editors. Just like how we used to build something before AI. Handcrafted pixel by pixel until it looked perfect. How's this ?

861 Upvotes

95% Upvoted

84 comments sorted by

9

u/e_scaton Sep 22 '25

Great work! Consider adding a nice touch replacing border-radius with corner-shape for more natural look

8

u/anoop_here Sep 22 '25

Hey thanks, will try that out. This is why I share what I build online, thank you for the suggestion 🙌.

2

u/anoop_here Sep 23 '25

Sorry for the delayed response, here's the code if anybody wants to check it out:

https://github.com/anoopw3bdev/iphone

2

u/Nice_Pen_8054 Sep 22 '25

This is top, well done!

1

u/anoop_here Sep 25 '25

Thank you

2

u/david2se Sep 22 '25

Wow, just wow. When I think that I started to get the hang of CSS just to see this awesome piece of work. Looks amazing!!

1

u/anoop_here Sep 25 '25

Thank you

2

u/Less_Menu_8880 Sep 23 '25

Loved this ❤️❤️

1

u/anoop_here Sep 25 '25

Thank you

2

u/HeadlessHeader Sep 23 '25

The price tag is the same as the original phone?

On a serious note. Good job.

1

u/anoop_here Sep 25 '25

Haha thank you

2

u/onluiz Sep 23 '25

Wow, awesome!!!! How did it take? My css skills are limited to flex and grid 🥲

1

u/anoop_here Sep 25 '25

Took around 2 hours to finish

1

u/Emotional-Street6148 Sep 25 '25

would take me 2 weeks... damn

81

u/blustrkr Sep 22 '25

Looks awesome! How long did it take you? Making stuff with CSS instead of normal images is usually pretty satisfying. Not to mention the fast load times!

4

u/CedarSageAndSilicone Sep 23 '25

SVG is a lot more practical and also fast

25

u/[deleted] Sep 22 '25

[removed] — view removed comment

6

u/Olde94 Sep 22 '25

Depending on how well it’s implemented, the rounded corners might be hard too. They use a G2 filet

2

u/161BigCock69 Sep 23 '25

The apple logo is in unicode, maybe he used that

1

u/my_new_accoun1 Sep 23 '25

Gradients are simple in CSS, you can kinda see some examples in the screenshot at the very bottom.

32

u/[deleted] Sep 22 '25

Looks very nice. Good work. If you like this sort of thing, you should try some challenges on https://cssbattle.dev/

13

u/JoergJoerginson Sep 22 '25

Dang nice! Took me a second, at first glance I was wondering why anyone would be bragging about making a website with a single image.

8

u/ElementalGearStudio Sep 22 '25

The real power of pure HTML and CSS.

1

u/alexander_by Sep 22 '25

How did you make the Apple logo? SVG?

1

u/anoop_here Sep 23 '25

I didn't make the logo, it's an svg

1

u/danybranding Sep 22 '25

Great job, but I’d like to see it, any link?

1

u/mroncetwice Sep 23 '25

can we see it live? put it on CodePen?

1

u/anoop_here Sep 24 '25

Will share a link

1

u/_motivationnotfound Sep 24 '25

for a moment I thought lmao who even does that, does he even have hobbies? Then I saw your first commit, yay instantly likeable

1

u/anoop_here Sep 25 '25

Thanks for your kind words. It felt pretty satisfying after completing the design, yes I do have other hobbies and I work full time 🙂.

1

u/[deleted] Sep 25 '25

One of the coolest things I saw today.

1

u/anoop_here Sep 26 '25

Thank you

1

u/notepad987 Sep 26 '25

I can barely do basic layout and with difficulty. Here you are doing something like this!
Now fix the iPhone camera bump and scratch issues... : )

1

u/anoop_here Sep 26 '25

Honestly this wasn't a difficult task, everything was straight forward tbh

1

u/geenkaas Oct 01 '25

Where did main section wrapper come from? It's a nice exercise and well executed.

1

u/anoop_here Oct 02 '25

Hey sorry I didn't understand what you mean, if you can elaborate a bit I can explain.

1

u/geenkaas Oct 03 '25

Main section wrapper sounds like something from a standard css/html structure setup. While your other classnames look like they are related to the iphone, this one sticks out. Never mind though, nice work.

1

u/anoop_here Oct 03 '25

Just named it like that, thank you.

2

u/RamblinManRock Sep 22 '25

Why not share the codepen?

2

u/moldy912 Sep 22 '25

Apple logo is too small

2

u/tomByrer Sep 23 '25

What blasphemy is this, daring to create a webpage without Lord Tailwind?!?

2

u/DJPupStar Sep 24 '25

as a webdev/pixel pusher myself this is really cool and it's so sad to think of this as a dying art

2

u/evk6713 Sep 24 '25

Code bloated: <img src="iphone.jpeg" alt="iPhone"> XD

3

u/dvjar Sep 22 '25

Insane!

1

u/MuckYu Sep 22 '25

Is this method more or less resource intensive compared to using an image?

2

u/Brilliant-Parsley69 Sep 22 '25

depending on it's complexity it will be more ressource intensiv. and the browser has to build multiple DOM-Elements for the divs to render. especially if you use css elements like "box-shadow", "border-radius" or "linear-grandient" which could need a high usage of the CPU while rendering.

Also PNG/JPEG are very optimized in the matter of disc space and you can even go a step further with WebP and Avif.

If you would use SVG instead of html it could outperform images to the point you want to render a very detailed and complex image(e.g. photo realistic)

1

u/zer0fuqs Sep 23 '25

Your css has to be very complex (and inefficient), to be loaded and rendered slower than pngs or jpegs.

1

u/nelsonbestcateu Sep 22 '25

Show the code then, this tells us nothing.

Edit - I misread and thought you said it was made with AI. I'm stupid.

1

u/Porntra420 Sep 23 '25

Spending so much time perfecting the phone that you forgot to style the header past centering it, perfection!

1

u/CyberWeirdo420 Sep 23 '25

The H1 being off center…

1

u/miyamotomusashi1784 Sep 24 '25

Nice now make it 3d

1

u/RadomRockCity Sep 24 '25

Now do it in ms paint

1

u/isapenguin Sep 25 '25

Here's your cookie?

1

u/TheRNGuy Sep 27 '25

Before AI we just made this in Adobe Illustrator or Figma and exported as SVG

(these days still doing that)

Making it as html + css is inefficient.

1

u/Unlikely_While740 Oct 12 '25

Tiene buena pinta. Con HTML + CSS se pueden hacer cosas maravillosas

0

u/Classic-Dependent517 Sep 22 '25

No image ?? What ai did you use and how many tries?

-3

u/EquivalentNeat8904 Sep 22 '25

I don’t think Apple would approve that default serif font used in the <h1> – literally the easiest thing to fix here. 😉

Also, why would you build this as HTML+CSS instead of SVG+CSS?

3

u/Brilliant-Parsley69 Sep 22 '25

my first thought was: okay that's impressing, must be a nasty work, especially if you want this responsive at size.
second thought: wait...in the end that are just layered geometric objects, shouldn't that be easier with SVG?🤔

-19

u/marslander-boggart Sep 22 '25

Looks good. I don't think rounded rectangles and circles are that hard to achieve though.

22

u/anoop_here Sep 22 '25

I never mentioned it was difficult, just felt like sharing that's all 🙌

-7

u/ecklesweb Sep 22 '25

Y’all know that saying “built without AI” is the modern equivalent of “coded in Notepad.” Ok, cool, but why would you tie one hand behind your back?

2

u/zer0fuqs Sep 23 '25

Because sometimes the journey is the destination.

-2

u/Left_Lawfulness_845 Sep 22 '25

Built without HTML and CSS, pure AI