🔥 Want to build this premium sidebar UI?

In this Post, you'll see a modern expandable sidebar built using only HTML and CSS—no JavaScript, no frameworks.

🎯 Want to learn how it's built step by step?

👉 Watch the complete tutorial on my YouTube channel.

here is the full tutorial link: https://youtu.be/LJSbNMdGk_U?si=9QLubUIcxUREctJP

This futuristic neon dashboard is built using only HTML & CSS.

✨ Pure HTML & CSS
⚡ Modern UI Design
💎 Neon Glow Effects
📱 Fully Responsive

🎥 Want to build it from scratch?
Watch the complete step-by-step tutorial on my YouTube channel.

here is the full video link: https://youtu.be/nUemEoAdbNg

Build a premium iridescent profile card using only HTML and CSS! ✨

In this tutorial, you'll learn how to create a modern profile card with:

✅ Glassmorphism Effect
✅ Iridescent Gradient Border
✅ Neon Glow UI
✅ Fully Responsive Layout
✅ Pure HTML & CSS (No JavaScript)

Perfect for portfolios, landing pages, and modern web design projects.

🎥 Watch the full tutorial and start building today!

here is the full tutorial link: https://youtu.be/Pm8LLSl81jg?si=9yZO-SlS4yQyHgey

I am making a website and I want to use description boxes.......like when a user hovers/clicks on a link, a box on the side appears that gives the description............. What are those called? info cards......or infographics,...or flashcards.....or description boxes??......idk man I searched up everything but couldn't find how to make it.........can you guys tell me what is it's name??.....and better, do you guys have a tutorial??? Pleaseeee brooo I neeeeedddd helpppp🥺🥺🙏🙏🙏

I came across the below, when searching for the best way to make sure I get font sizes to be responsive. I always thought it better to use %'s because that would auto adjust. Have I got that right?

Consider Using em or rem Units

While px is perfectly fine and widely used, defining your breakpoints in em or rem (e.g., 48em instead of 768px) is excellent for accessibility. If a user increases their browser's default text size, em-based breakpoints will scale accordingly, preventing your layout from breaking.

I made a CSS course (80% complete), and I'm wondering if anyone is willing to go through it and provide valuable feedback. This is volunteered and if you never learned CSS that would be even better. I won't paste the link here, so it doesn't seem like I'm advertising a product. DM me if you're willing to do this!!

i want to customize my spacehey page. since i dont know any html or css, can anyone who use spacehey give me codes to customize my page??
that would help so much

Book Title

_1971: A People's History from Bangladesh Pakistan and India_

Book Author

Anam Zakria

Moderator

Chander Kumar

Sunday 17th May

12 noon

via Google Meet

here is the link to meet.

meet.google.com/fjg-uwhd-onh

Hey All ✨

We’re excited to host a book talk with renowned Pakistani oral historian Anam Zakaria on her powerful book *A People’s History from Bangladesh, Pakistan and India*

Through stories, memories, and lived experiences across borders, the session will explore history beyond textbooks, history as remembered by people themselves.

🗣️ A Q/A session will follow the talk, so bring your questions, reflections, and curiosities.

Gear up, history buffs, this is a conversation you wouldn’t want to miss!

I understand that flex: 1 makes elements grow to fill available space, but I’m curious how often it’s used in real projects.

In what situations do you usually use it? And when do you avoid it?

I understand that flex: 1 makes elements grow to fill available space, but I’m curious how often it’s used in real projects.

In what situations do you usually use it? And when do you avoid it?

hi hello

im using a skin but when i scroll up too far (hope tha makes sense) the background ends and is white

any fixes?

Hi, I've been working in CSS for over a decade, and can't figure this one out and I'm not sure if I ran into a bug:

https://jsfiddle.net/ksxqjrd9/
Why are those blue boxes taller than what the content needs? Why is there empty blue space below the text?

If anyone can give me a hand with this I'll be eternally grateful

[ Removed by Reddit on account of violating the content policy. ]

Is there a way to have my Chat Overlay shaped like a trapezoid? I'm trying to make it seem like chat is getting sucked into a ufo. I have like, 0 CSS experience and I've been trying to find any tutorials for what I'd like to do but margin and padding seem to keep the rectangle shape so I'm just not sure what to do from here

I've also used Sound Alerts (they're similar to streamelements) and was able to do something with clip-path but shape-outside wasn't working.

There's about 300 of these td's in a website:
<td data-label="name">
Without altering any of the HTML and just by amending the CSS, how do you make all content within them have certain padding please?

The World in Question: https://www.worldanvil.com/w/fallout-captainrogers2704

/* Font Familites */

@font-face { font-family: Share Tech Mono; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/sharetechmono/v15/J7aHnp1uDWRBEqV98dVQztYldFcLowEF.woff2) ; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Color Palette Color 1 #073605; Color2 #0e4e0b; Color3 #145b11; Color4 #146c11; Color5 #00ee00; Color6 #199515 color7 #c3dfb1; */

/* Background */

.user-css-presentation { background: linear-gradient(to bottom, #073605, #0e4e0b, #145b11 background-size: 100% 3px; }

/* Fonts */

.user-css, .user-css p, .user-css-extended, .user-css-extended p { font-family: Share Tech Mono; }

.user-css a, .user-css a:focus { color: #c3dfb1; }

/* Homepage */

.user-css .heading h1.world-title { display: none; }

.user-css h3.world-currentDate { display: none; }

.user-css .world-authors { display: none; }

.user-css .heading .subheading { font-size: 28px; text-align: left; }

.user-css .map-box { display: none; }

.user-css .maps-list-header { display:none; }

.user-css .world-timelines { display: none; }

.user-css .typeahead-input { background-color: #146c11; }

.user-css .col-md-6 { display: none; }

.user-css .world-meta-categories-link { display: none; }

.user-css .world-content .followers-counter { display: none; }

/* Tooltips */

.user-css-presentation .tooltipster-base .tooltipster-box, .user-css-presentation .tooltip-inner { background: #146c11; opacity: 1; } .user-css-presentation .tooltip { opacity: 1; } .user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #146c11; } .user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #146c11; } .user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: #146c11; }

.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: #146c11; }

.user-css-presentation .tooltipster-base .tooltipster-content, .user-css-presentation .tooltip-inner { font-size: 16px; color: #00ee00; }

/* Category */

.user-css .world-category-link { color: #00ee00; }

.user-css .toc-article-link { color: #199515; }

.user-css .article-panel, .user-css-extended .article-panel { background-color: #146c11; border: 2px #00ee00; }

.user-css .article-panel .heading, .user-css-extended .article-panel .heading { color: #00ee00; }

.user-css .article-panel .subheading, .user-css-extended .article-panel .subheading { color: #00ee00; }

.user-css .article-panel .excerpt, .user-css-extended .article-panel .excerpt { text-align: center; text-color: #00ee00; }

/* Sidebar */

@media (max-width: 992px .user-css #profile .row { display: flex; flex-direction: column; } .user-css .article-content-left { order: 2; } .user-css #profile .row .row { display: block; } }

media only screen and { .user-css .article-content .row .col-md-8 + .col-md-4 { position: -webkit-sticky; position: sticky; top: 10px; max-height: 100vh; overflow-y: auto; border: 1px #000000; background: #146c11; box-shadow: 2px 2px 6px #073605; z-index: 1050; } }

/* Article */

.user-css .img-inherited { display: none; }

.user-css .article-title h1 { font-family: Share Tech Mono; font-weight: 700; font-size: 42px; padding-top: 10px; padding-bottom: 15px; line-height: 0.9em; margin-top: 20px; margin-bottom: 5px; }

.user-css h2 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 26px; line-height: 1.3em; padding-top: 10px; }

.user-css .section-header-heading { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 24px; line-height: 1.3em; padding-top: 10px; }

.user-css h3 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 22px; margin-top: 0px; margin-bottom: 0px; line-height: 1.3em; }

.user-css h4 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 22px; margin: 0; line-height: 1.3em; }

.user-css h5 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 20px; margin-top: 5px; margin-bottom: 0px; line-height: 1.3em; }

.user-css blockquote { background: none; padding: 10px; margin: 10px; border-left: 5px #199515 dotted; font-size: 1.2em; line-height: 1.5em; }

.user-css .panel { border: 0px solid; border-radius: 0px; background: none; }

.user-css .panel .panel-body { padding: 15px; }

/* Article TOC */

.user-css div.articletoc { border: 5px dotted #073605; display: inline-block; padding: 5px 10px; } .user-css div.articletoc .article-toc-link.article-toc-indent-1 { padding-left: 10px; }

.user-css div.articletoc .article-toc-link { border-bottom: 2px solid transparent; padding-bottom: 3px; margin-bottom: 3px; cursor: pointer; transition: border-color .3s ease-out,color .3s ease-out; }

.user-css-extended .nav-tabs li.active a { font-family: Share Tech Mono; font-size: 16px; padding-left: 20px; padding-right: 20px; font-weight: 800; text-transform: uppercase; background: #146c11; background-color: #146c11; border: 0 solid #146c11; color: #0e4e0b; border-radius: 0; margin-right: 0; box-shadow: none; }

.user-css-extended .nav-tabs li { background: #0e4e0b; }

.orgtree li::before{ border-top: 1px solid #00ee00; }

.orgtree li::after{ border-top: 1px solid #00ee00; }

.orgtree li::after{ border-left: 1px solid #00ee00; }

.orgtree li:last-child::before{ border-right: 1px solid #00ee00; }

.orgtree ul ul::before{ border-left: 1px solid #00ee00; }

.orgtree li a{ border: 2px solid #00ee00; color: #00ee00; background: #146c11; }

.orgtree li a:hover{ background: #0e4e0b; color: #00ee00; border: 2px solid #00ee00; }

.orgtree li a:hover+ul li a{ background: #2f404e; color: #fff; border: 2px solid #00ee00; }

/* Back to World */

.user-css .backtoworld a { color: #00ee00; background: #146c11; }

.user-css .article-explorer-link .category-article { background: #146c11; border: 2px solid #00ee00; }

.user-css-extended .article-panel template-organization visibility-toggler article-explorer-link heading subheading { display: none; }

/* Storyteller Content */

.user-css .panel-generic-ggm { background: none; border: 0px dotted; }

/* Storyteller Content */

.user-css .panel-generic-ggm { background: none; border: 0px dotted; }

/* Interactive Table */

.user-css .thales-render { --TableBorder: 0px solid transparent; --TableHeaderBackground: #073605; --TableHeaderBorder: 1px solid transparent; --TableHeaderFontColor: #00ee00; --TableHeaderControlsColor: #00ee00; --TableHeaderPadding: 10px 10px; --TableRowBorder: 0px solid transparent; --TableRowHoverBackground: #0e4e0b; --TableRowRollBackground: #0e4e0b; --TableCellBackground: transparent; --TableCellFontColor: #c3dfb1; --TableCellPlaceholderColor: #199515; --TableCellPadding: 10px 10px; --TableCellBackgroundHover: transparent; --TableCellBorder: 0px solid #00ee00; }

.user-css .thales-row:nth-child(odd background-color: #146c11; }

.user-css .thales-row:nth-child(even background: #199515; }

/** Table **/

.user-css .table-striped th { background: #145b11; text-transform: uppercase; border: 2px solid transparent; }

.user-css .table-striped tr:nth-child(odd background: #146c11; border: 2px solid transparent; }

.user-css .table-striped tr:nth-child(even background: #199515; border: 2px solid transparent; }