Sid Gifari File Manager

📝 Editing: components.css

:root
{
    --primary: #010101;
    --secondary: #f5f5f5;
    --accent: #0800d2;
    --accent_2: #a318ff;
    --sec-text: #c0c0c0;
}
body
{
    background-color: var(--primary);
    scrollbar-gutter: stable;
    overflow: hidden;
}
.logo
{
    color: var(--secondary);
    margin: 0;
    width: fit-content;
    line-height: 1;
}
.logo span:first-child
{
    font-family: cubao;
    font-size: 40px;
}
.logo span:last-child
{
    font-family: nineByFive;
    font-size: 45px;
    margin-left: 2px;
}
.pr-btn
{
    padding: 10px 20px;
    border-radius: 50px;
    transition: 0.3s;
    background-color: #f7f7f71a;
    color: var(--secondary);
    border: 0.5px solid #404040;
    font-family: hel-reg;
    text-decoration: none;
    font-size: 15px;
}
.pr-btn.priority
{
    background-color: var(--secondary);
    border: 0.5px solid var(--secondary);
    color: var(--primary);
}
.pr-btn:hover
{
    background-color: var(--secondary);
    border: 0.5px solid var(--secondary);
    color: var(--primary);
}
.sc-btn
{
    padding: 10px 20px;
    border-radius: 50px;
    transition: 0.3s;
    color: var(--secondary);
    border: 0.5px solid #404040;
    font-family: hel-reg;
    text-decoration: none;
    font-size: 15px;
}

.sc-btn:hover
{
    background-color: var(--secondary);
    border: 0.5px solid var(--secondary);
    color: var(--primary);
}
.util-btn
{
    line-height: 1;
    padding: 5px 10px;
}
.header h3, .header h1
{
    font-family: nineByFive;
    text-transform: uppercase;
    color: var(--secondary);
    font-size: 4rem;
    letter-spacing: 2px;
    line-height: 0.6;
    margin: 0;
}
.brackets
{
    font-size: 0.8rem;
    font-family: hel-reg;
    color: #555555;
    text-transform: uppercase;
}
.highlight
{
    font-family: nineByFive;
    text-transform: uppercase;
    color: var(--accent_2);
    letter-spacing: 2px;
}
.highlight-gra
{
    font-family: nineByFive;
    letter-spacing: 2px;
    background: linear-gradient(to left, var(--accent_2), var(--accent));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    margin: 0;
    line-height: 1;
}

.work-grid
{
    padding: 30px 0;
    column-count: 2;
    column-gap: 5px;
}
.work-box
{
    border-radius: 10px;
    cursor: pointer;
    padding: 5px;
    page-break-inside: avoid;
}
/* .work-box:not(:first-child)
{
    margin-top: 5px;
} */
.work-box img
{
    width: 100%;
    border-radius: 5px;
}
.work-content
{
    display: grid;
    grid-template-columns: auto auto;
    padding: 5px 0 0;
}
.work-content h3
{
    margin: 0;
    font-size: 0.9rem;
    color: var(--secondary);
    font-family: hel-reg;
    line-height: 1;
}
.work-content span
{
    color: var(--sec-text);
    font-family: hel-reg;
    font-size: 0.8rem;
    line-height: 1;
}
.work-content span.service
{
    text-align: right;
}

.temp-grid
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    padding: 10px 0;
}
.temp-box
{
    padding: 10px;
    border-radius: 10px;
    border: 0.5px solid #232323;
}
.temp-box img
{
    width: 100%;
    border-radius: 5px;
}
.temp-content
{
    display: flex;
    flex-wrap: wrap;
    font-family: hel-reg;
    align-items: center;
    padding-top: 5px;
}
.temp-content span
{
    width: 50%;
    line-height: 1;
}
.temp-content .title
{
    color: var(--secondary);
    font-size: 1rem;
}
.temp-content .price
{
    color: #3c3c3c;
    text-transform: uppercase;
    font-size: 0.8rem;
    text-align: right;
}
.temp-content .des
{
    color: #3c3c3c;
    font-size: 0.9rem;
    width: 70%;
    line-height: 1;
}
.temp-content .plat
{
    width: 30%;
    color: #3c3c3c;
    font-size: 0.8rem;
    text-align: right;
    line-height: 1;
}
::-webkit-scrollbar
{
    width: 2px;
    background-color: #00000000;
    transition: .3s;
}
::-webkit-scrollbar-thumb
{
    background-color: var(--secondary);
    border-radius: 5px;
}   
@media (max-width: 1200px) 
{
    .work-grid
    {
        column-count: 2;
    }
    .temp-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) 
{
    .temp-grid
    {
        grid-template-columns: repeat(1, 1fr);
    }
    .work-grid
    {
        column-count: 1;
    }
    .header h3
    {
        font-size: 3rem;
    }
}

We didn't invent the wheel, we re-imagined it.

Unlimited Revisions

We give our clients unlimited revisions across all our services.

Quick Timelines

We provide the fastest service that we can and we also build projects short notices

Result Oriented Projects

We don't build websites, we help companies solve thier problems with the web

Sid Gifari File Manager

📝 Editing: components.css

TECHAMBER

Grow your business online with websites that drive Sales

42% of users will leave a website due to poor functionality

We didn't invent the wheel, we re-imagined it.

Unlimited Revisions

Quick Timelines

Result Oriented Projects

What we do

Websites and digital platforms

Website Builders

eCommerce Development

Outsource

WHO ARE WE

WHAT WE'VE DONE

Ali Metal Corp.

Crafty Living

Fresh and Frozen

Samco 11

Our Partners

WHAT OUR CLIENTS SAY

Let's get started

Useful links

Services

Recent Work

Get in touch