[HN Gopher] Pure CSS Website
___________________________________________________________________
Pure CSS Website
Author : archiewood
Score : 74 points
Date : 2024-03-22 18:34 UTC (4 hours ago)
(HTM) web link (pure-css-site.netlify.app)
(TXT) w3m dump (pure-css-site.netlify.app)
| archiewood wrote:
| I built this website to see what was possible with only one div,
| and a stylesheet.
|
| No JS, No other HTML, just CSS.
|
| Source: https://github.com/archiewood/pure-css-site
| azangru wrote:
| After examples showcased at https://a.singlediv.com/, I would
| not be surprised by anything...
| prng2021 wrote:
| Jesus this is insane
| somishere wrote:
| Epic. Tho where are the next level hover states?!
| throwaway14356 wrote:
| http://go-here.nl/omg-tables.html
|
| the css is js generated but doesn't need to be
| somishere wrote:
| :D
| brailsafe wrote:
| That's not fair, they clearly have illustration skills ;)
| nkozyra wrote:
| This is a 404, btw. Private repo?
| pimlottc wrote:
| Might as well just link the hosted CSS file:
|
| https://pure-css-site.netlify.app/index.css
| danslinky wrote:
| I can't see the repo, Archie
| cantSpellSober wrote:
| > one div
|
| <html> and <body> accept pseudo-elements. Why add such bloat?!
| dspillett wrote:
| That link currently 404s, and doesn't seem to be listed when
| manually navigating up to the user repository list.
| oldsecondhand wrote:
| Link is broken for me (404).
| Pesthuf wrote:
| Never knew "content" was animatable. This might come in handy
| some time.
| lacoolj wrote:
| well it's not hard to believe given that it doesn't seem to have
| anything but that one paragraph of text and then the animated
| sentence at the top
|
| am I not seeing something else?
| lebean wrote:
| I had a similar thought. I thought "wow, believable!" but not
| to be flippant, the initial wow was genuine.
| kypro wrote:
| Yeah, that was exactly my thought too, but then I've been doing
| web dev for 20 years so obviously it wouldn't come as much of a
| surprise to me that this is possible.
|
| I guess not all people are in the same boat though, and I
| suppose it is quite cool how much can be done with CSS these
| days! (not that you would necessarily want to).
| pimlottc wrote:
| And none of the text is selectable :(
| c-hendricks wrote:
| Ah so it's more like a pure css mobile app.
| butz wrote:
| What's the purpose of remote background image? Tracking?
| somishere wrote:
| Pure CSS. Invalid HTML.
|
| Nice job tho. Now just need to make it in 3D.
| souvlakee wrote:
| If you have browser extensions that make additional div, it looks
| weird: i.imgur.com/glCfzkj.png
| souvlakee wrote:
| Code: https://paste.mozilla.org/BVWPuyrH
| psnehanshu wrote:
| Consider adding https:// at the start of the URL to make it
| clickable.
| bawolff wrote:
| That is pretty cool.
|
| I wonder if you could do this with no <div> using just the <link>
| tag.
|
| Or do browsers add an implicit body tag if you don't put one that
| you can style?
| Julesman wrote:
| A self-closing div is not valid HTML.
| yu3zhou4 wrote:
| Nice work! It's possible to get rid of even that single div -
| https://35bytes.maczan.pl/
| ape4 wrote:
| Did you see this in the css @keyframes
| typewriter { 00.0% { content: "A" } 00.4% {
| content: "A " } 00.8% { content: "A W" } 01.2% {
| content: "A We" } 01.6% { content: "A Web" }
| 02.0% { content: "A Webs" } 02.4% { content: "A Websi" }
| 02.8% { content: "A Websit" } 03.2% { content: "A
| Website" } 13.2% { content: "A Website," } 13.6%
| { content: "A Website, " } 14.0% { content: "A Website,
| i" } 14.4% { content: "A Website, in" } 14.8% {
| content: "A Website, in " } 15.2% { content: "A Website,
| in P" } 15.6% { content: "A Website, in Pu" }
| 16.0% { content: "A Website, in Pur" } 16.4% { content:
| "A Website, in Pure" } 16.8% { content: "A Website, in
| Pure " } 17.2% { content: "A Website, in Pure C" }
| 17.6% { content: "A Website, in Pure CS" } 18.0% {
| content: "A Website, in Pure CSS" } 22.2% { content: "A
| Website, in Pure CSS." } }
___________________________________________________________________
(page generated 2024-03-22 23:00 UTC)