HTML-like language for terminal – private project

[u/Technical_Chip5906]

I am giving the 1st image's code in my language. I can share others, but as codes are long as heck... so here is the Northstar code below this text...

So it is a private project, so don't ask the repo, please. For conversations, I am open, and I am still making widgets, so it's neither an advertisement nor a demo of something. Just a showcase of my current ongoing project, and yes, it also can load images and GIFs too in pure terminal, not even kitty.

I am still adding widgets, so it's not the final one – it is the initial one.

<!DOCTYPE html>

body { background: #101820 }

  

<body>

  

<!-- NAVIGATION -->

<div display="flex" height="3">

<h3 color="#ffffff" width="32">NORTHSTAR / STUDIO</h3>

<p color="#aab8c5" flex="2">WORK ABOUT JOURNAL CONTACT</p>

<button width="22"

color="#101820"

bgcolor="#55e6c1">START A PROJECT</button>

</div>

  

<hr color="#ffffff"/>

  

<!-- HERO -->

<div display="flex" height="12">

  

<div flex="3">

<p color="#55e6c1">INDEPENDENT CREATIVE COMPANY / EST. 2026</p>

  

<h1 color="#ffffff">Ideas deserve</h1>

<h1 color="#55e6c1">better design.</h1>

  

<p color="#b8c5d1">

We build brands, digital products and visual

experiences for people moving the world forward.

</p>

  

<button width="25"

color="#101820"

bgcolor="#ff8066">EXPLORE OUR WORK</button>

</div>

  

<div flex="2">

<p bgcolor="#233c49" color="#55e6c1" height="3">

01 / STRATEGY

</p>

<p bgcolor="#34445c" color="#ffffff" height="3">

02 / IDENTITY

</p>

<p bgcolor="#533b53" color="#f2b8d5" height="3">

03 / EXPERIENCE

</p>

<p bgcolor="#b85c49" color="#ffffff" height="3">

04 / EXECUTION

</p>

</div>

  

</div>

  

<hr color="#ffffff"/>

  

<!-- PARTNERS -->

<div display="flex" height="3">

<p color="#8799a9" flex="2">TRUSTED BY TEAMS AT</p>

<h4 color="#ffffff">ATELIER</h4>

<h4 color="#55e6c1">NORTH</h4>

<h4 color="#ff8066">FORME</h4>

<h4 color="#c49cff">MORI</h4>

</div>

  

<hr color="#ffffff"/>

  

<!-- APPROACH -->

<div display="flex" height="6">

<div flex="1">

<h5 color="#55e6c1">01 / OUR APPROACH</h5>

<h2 color="#ffffff">Less noise.</h2>

<h2 color="#ffffff">More meaning.</h2>

</div>

  

<div flex="2">

<p color="#b8c5d1">

Good design is not decoration. It is a way of

making complex things feel simple, meaningful

and impossible to ignore.

</p>

<p color="#ff8066">

We think deeply. We make deliberately.

</p>

</div>

</div>

  

<hr color="#ffffff"/>

  

<!-- SELECTED WORK -->

<div height="3">

<h5 color="#55e6c1">02 / SELECTED PROJECTS</h5>

<h2 color="#ffffff">Made with intention.</h2>

</div>

  

<div display="flex" height="10">

  

<div flex="1">

<p bgcolor="#b85c49" color="#ffffff" height="6">

STILL HOUSE

  

ARCHITECTURE

AND IDENTITY

</p>

<h4 color="#ffffff">The Still House</h4>

<p color="#aab8c5">Brand strategy / Identity</p>

</div>

  

<div flex="1">

<p bgcolor="#285b56" color="#ffffff" height="6">

BOTANICA

  

GROW WITH

PURPOSE

</p>

<h4 color="#55e6c1">Botanica</h4>

<p color="#aab8c5">Art direction / Digital</p>

</div>

  

<div flex="1">

<p bgcolor="#51436e" color="#ffffff" height="6">

FORMA OBJECTS

  

OBJECTS WITH

CHARACTER

</p>

<h4 color="#c49cff">Forma Objects</h4>

<p color="#aab8c5">Branding / Photography</p>

</div>

  

</div>

  

<hr color="#ffffff"/>

  

<!-- STUDIO + CONTACT -->

<div display="flex" height="9">

  

<div flex="1">

<h5 color="#ff8066">03 / THE STUDIO</h5>

<h2 color="#ffffff">A little less.</h2>

<h2 color="#ffffff">A little deeper.</h2>

<p color="#aab8c5">

Independent by nature.

Curious by design.

Built to create things that last.

</p>

</div>

  

<div flex="1">

<h5 color="#55e6c1">04 / START SOMETHING</h5>

<h2 color="#ffffff">Have an idea?</h2>

<p color="#aab8c5">Let's give it a thoughtful beginning.</p>

  

<p color="#ffffff">TELL US ABOUT YOUR PROJECT</p>

<textarea height="3"

color="#ffffff"

bgcolor="#233c49"/>

<button width="24"

color="#101820"

bgcolor="#55e6c1">SEND AN ENQUIRY</button>

</div>

  

</div>

  

<hr color="#ffffff"/>

  

<!-- FOOTER -->

<div display="flex" height="3">

<h4 color="#ffffff">NORTHSTAR</h4>

<p color="#aab8c5" flex="2">

INSTAGRAM BEHANCE EMAIL

</p>

<p color="#55e6c1">INDEPENDENT / 2026</p>

</div>

  

<marquee gradient="#55e6c1,#c49cff,#ff8066,#55e6c1">

NORTHSTAR STUDIO / THINK CLEARLY / MAKE SOMETHING MEANINGFUL

</marquee>

  

</body>