Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
c.im is one of the many independent Mastodon servers you can use to participate in the fediverse.
C.IM is a general, mainly English-speaking Mastodon instance.

Administered by:

Server stats:

2.9K
active users

c.im: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.6

#Webdesign

82 posts61 participants6 posts today
Codrops<p>If you caught Stas Bondar's portfolio breakdown this week — you already know it's packed with insights.</p><p>But one detail is just too good to miss: The "About Me" text breaks apart with physics as you scroll 🔥</p><p>GSAP + Matter.js + ScrollTrigger = ✨voodoo magic✨</p><p>...and there's so much more: <a href="https://tympanus.net/codrops/2025/03/25/stas-bondar-25-the-code-techniques-behind-a-next-level-portfolio/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">tympanus.net/codrops/2025/03/2</span><span class="invisible">5/stas-bondar-25-the-code-techniques-behind-a-next-level-portfolio/</span></a></p><p><a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdevelopment</span></a> <a href="https://mastodon.social/tags/casestudy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>casestudy</span></a> <a href="https://mastodon.social/tags/tutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tutorial</span></a> <a href="https://mastodon.social/tags/GSAP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GSAP</span></a> <a href="https://mastodon.social/tags/portfolio" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>portfolio</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Proposals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Proposals</span></a><br>Item Flow (part 1) · A new CSS layout concept uniting Grid, Flexbox, and Masonry <a href="https://ilo.im/1631o0" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/1631o0</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Concept" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Concept</span></a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Layout</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssGrid</span></a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssFlexbox</span></a> <a href="https://mastodon.social/tags/Masonry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Masonry</span></a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a></p>
Font Free Downloads<p>Air Heavy font contains varity of styles. This font is quite popular amonng the world and design by Neil Summerour.<br><a href="https://www.fontfreedownloads.com/en/air-heavy.font-free-download" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">fontfreedownloads.com/en/air-h</span><span class="invisible">eavy.font-free-download</span></a><br><a href="https://mastodon.social/tags/AirHeavy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AirHeavy</span></a> <a href="https://mastodon.social/tags/AirHeavy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AirHeavy</span></a> <a href="https://mastodon.social/tags/AirHeavy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AirHeavy</span></a> <a href="https://mastodon.social/tags/art" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>art</span></a> <a href="https://mastodon.social/tags/creative" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>creative</span></a> <a href="https://mastodon.social/tags/graphicdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>graphicdesign</span></a> <a href="https://mastodon.social/tags/wallpaper" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>wallpaper</span></a> <a href="https://mastodon.social/tags/fonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fonts</span></a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>typography</span></a> <a href="https://mastodon.social/tags/calligraphy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>calligraphy</span></a> <a href="https://mastodon.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>design</span></a> <a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/handwritten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>handwritten</span></a> <a href="https://mastodon.social/tags/calligraphic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>calligraphic</span></a> <a href="https://mastodon.social/tags/type" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>type</span></a> <a href="https://mastodon.social/tags/typeface" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>typeface</span></a> <a href="https://mastodon.social/tags/lettering" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>lettering</span></a> <a href="https://mastodon.social/tags/handlettering" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>handlettering</span></a> <a href="https://mastodon.social/tags/weddingfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>weddingfonts</span></a> <a href="https://mastodon.social/tags/ttf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ttf</span></a> <a href="https://mastodon.social/tags/otf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>otf</span></a></p>
The Small Web<p>💙 Flashback Friday #3 💙 – Geocities &amp; Angelfire </p><p>Before social media took over, Geocities and Angelfire were where the internet’s real creativity happened. These free web hosting platforms let people build anything they wanted—from personal diaries to deep-dive fan shrines to completely bizarre conspiracy hubs.</p><p>%url%</p><p><span class="h-card" translate="no"><a href="https://a.gup.pe/u/indieweb" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>indieweb</span></a></span> <span class="h-card" translate="no"><a href="https://a.gup.pe/u/smallweb" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>smallweb</span></a></span> <span class="h-card" translate="no"><a href="https://a.gup.pe/u/neocities" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>neocities</span></a></span> #<a href="https://indieweb.social/tags/angelfire" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>angelfire</span></a> #<a href="https://indieweb.social/tags/geocities" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>geocities</span></a> #<a href="https://indieweb.social/tags/indieweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>indieweb</span></a> #<a href="https://indieweb.social/tags/nostalgia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>nostalgia</span></a> #<a href="https://indieweb.social/tags/oldweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>oldweb</span></a> #<a href="https://indieweb.social/tags/smallweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>smallweb</span></a> #<a href="https://indieweb.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> #<a href="https://indieweb.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a> #<a href="https://indieweb.social/tags/webrevival" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webrevival</span></a></p><p><a href="https://smallweb.thecozy.cat/blog/%f0%9f%92%99-flashback-friday-3-%f0%9f%92%99-geocities-angelfire/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">smallweb.thecozy.cat/blog/%f0%</span><span class="invisible">9f%92%99-flashback-friday-3-%f0%9f%92%99-geocities-angelfire/</span></a></p>
royal<p>Web portals! Circa 2000, you found them everywhere. I'm looking for a modern one.<br>Or maybe you'd call it a dashboard. I want a visual, drag-and-drop bookmark manager. You know, the sort of thing that lets me cluster my blog links in one section, news sites in another, etc. Maybe with color-coding. Maybe with images or page previews. FOSS preferred but I'd consider anything.</p><p>EDIT: Looks like Vivaldi's Dashborad might be close to what I'm looking for.</p><p><a href="https://theres.life/tags/webportals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webportals</span></a> <a href="https://theres.life/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://theres.life/tags/browsers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>browsers</span></a> <a href="https://theres.life/tags/vivalidi" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vivalidi</span></a> <a href="https://theres.life/tags/webbrowsers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webbrowsers</span></a> <a href="https://theres.life/tags/webdashboards" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdashboards</span></a></p>
Font Free Downloads<p>Aexir is a modern, futuristic, and cyberpunk-inspired sans-serif typeface and design by Adrian Syauqi.<br><a href="https://www.fontfreedownloads.com/en/aexir.font-free-download" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">fontfreedownloads.com/en/aexir</span><span class="invisible">.font-free-download</span></a><br><a href="https://mastodon.social/tags/Aexir" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Aexir</span></a> <a href="https://mastodon.social/tags/Aexir" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Aexir</span></a> <a href="https://mastodon.social/tags/Aexir" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Aexir</span></a> <a href="https://mastodon.social/tags/art" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>art</span></a> <a href="https://mastodon.social/tags/creative" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>creative</span></a> <a href="https://mastodon.social/tags/graphicdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>graphicdesign</span></a> <a href="https://mastodon.social/tags/wallpaper" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>wallpaper</span></a> <a href="https://mastodon.social/tags/fonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fonts</span></a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>typography</span></a> <a href="https://mastodon.social/tags/calligraphy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>calligraphy</span></a> <a href="https://mastodon.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>design</span></a> <a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/handwritten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>handwritten</span></a> <a href="https://mastodon.social/tags/calligraphic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>calligraphic</span></a> <a href="https://mastodon.social/tags/type" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>type</span></a> <a href="https://mastodon.social/tags/typeface" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>typeface</span></a> <a href="https://mastodon.social/tags/lettering" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>lettering</span></a> <a href="https://mastodon.social/tags/handlettering" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>handlettering</span></a> <a href="https://mastodon.social/tags/weddingfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>weddingfonts</span></a> <a href="https://mastodon.social/tags/ttf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ttf</span></a> <a href="https://mastodon.social/tags/otf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>otf</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/Analyses" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Analyses</span></a><br>The fallacy of optical alignment · “You don’t have to nudge, you can measure instead.” <a href="https://ilo.im/1630q4" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/1630q4</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Alignment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Alignment</span></a> <a href="https://mastodon.social/tags/Measurement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Measurement</span></a> <a href="https://mastodon.social/tags/PixelPushing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PixelPushing</span></a> <a href="https://mastodon.social/tags/VisualDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VisualDesign</span></a> <a href="https://mastodon.social/tags/ProductDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProductDesign</span></a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UiDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDesign</span></a></p>
Public
EmpyClaw

Working through my book launch checklist. Today was... webpage!

My partner, illustrator, and technically publisher, already has a site so it was just a matter of adding a page for #CrownOfHorns

audra.balion.ca/crown-of-horns/

Let me know what you think and if there's anything that stands out that should get fixed.

Audra BalionCrown of Horns | Political Fantasy NovelCreated by Saskatoon-based partner and inspired by Slavic myth and culture, explore the rise of authoritarianism in this gripping novel.
#writing#writingcommunity#webdesign
ExploreLive feeds
About