Skip to main content

​
Overview

The BLACKICE Portal interface is built with a minimal, modern design philosophy featuring a bento grid layout, responsive navigation, and immersive visual effects. The portal serves as the central hub for accessing AI tools, productivity apps, and developer utilities.

​
Navigation Structure

The portal implements a clean, fixed navigation bar with adaptive styling:
index.html:106-138
/* NAV */
nav {
    display: flex;
    align-items: center;
    padding: 24px 0;
    gap: 40px;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    color: #000;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

.nav-menu {
    display: flex;
    gap: 32px;
    margin-left: auto;
    align-items: center;
}

.nav-link {
    color: #666;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
}

.nav-link:hover {
    color: #000
}

​
Navigation Components

​
Bento Grid Layout

The portal uses a 12-column bento grid system for organizing content cards:
index.html:635-640
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    margin: 60px 0;
}

​
Grid Cell Configuration

.b1 {
    grid-column: span 8;
    grid-row: span 2;
    background-image: url('...');
    background-size: cover;
    color: #fff;
    padding: 48px;
}
The grid automatically adapts to smaller screens:
  • Tablet (≤1024px): 6-column grid
  • Mobile (≤768px): Single column layout

​
3D Card Effects

The portal implements perspective-based 3D tilt effects on hover:
index.html:1596-1611
document.querySelectorAll('.box').forEach(box=>{
  const divisor=box.classList.contains('b1')?25:10;
  box.addEventListener('mousemove',e=>{
    const rect=box.getBoundingClientRect();
    const x=e.clientX-rect.left;
    const y=e.clientY-rect.top;
    const centerX=rect.width/2;
    const centerY=rect.height/2;
    const rotateX=(y-centerY)/divisor;
    const rotateY=(centerX-x)/divisor;
    box.style.transform=`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02,1.02,1.02)`;
  });
  box.addEventListener('mouseleave',()=>{
    box.style.transform='perspective(1000px) rotateX(0) rotateY(0) scale3d(1,1,1)';
  });
});
The featured card (.b1) uses a divisor of 25 for subtle movement, while standard cards use 10 for more pronounced tilt effects.

​
Background & Visual Effects

The portal features a custom background with gradient mask overlay:
index.html:1363-1393
.custombg {
    width: 100%;
    min-height: 100vh;
    background-image: url('https://brave.com/search/api/tools/images/default-image-1.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.custombg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, #ccc 1px, transparent 1px);
    background-size: 50px 100%;
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 70%);
    z-index: 1;
}

​
Interactive Info Panel

A slide-up panel provides additional information:
index.html:1335-1353
#infoPanel {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(25, 25, 25, 0.95);
    padding: 25px 20px 60px;
    border-top: 2px solid #00e0ff;
    transform: translateY(100%);
    transition: transform 0.5s ease;
}

#infoPanel.open {
    transform: translateY(0);
}

​
Responsive Behavior

  • 12-column grid
  • Horizontal navigation
  • Full-size hero section
  • All 3D effects enabled

​
Container & Typography

The portal uses a centered container with responsive padding:
index.html:90-96
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}
Typography hierarchy:
index.html:457-473
h1 {
    font-size: clamp(48px, 7vw, 72px);
    font-weight: 800;
    line-height: 1.1;
    color: #1a1a1a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hero-text {
    font-size: 20px;
    color: #4a4a4a;
    max-width: 600px;
    font-weight: 500;
}
The portal uses the Outfit font from Google Fonts with weights 400, 600, and 800.

Build docs developers (and LLMs) love

Get started for freeTalk to us