Sid Gifari File Manager

📝 Editing: home.css

.hero
{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(../media/bg.png);
    background-attachment: fixed;
}
.upper-sub-header
{
    display: block;
    color: var(--accent_2);
    font-family: nineByFive;
    font-size: 1rem;
    letter-spacing: 2px;
}
.hero h1
{
    color: var(--secondary);
    font-family: hel-bold;
    font-size: 3em;
    margin: 0;
    line-height: 1;  
    text-align: center;  
    text-transform: uppercase;
    width: 60%;
}
.hero h1 .highlight-gra
{
    font-family: nineByfive;
    text-transform: uppercase;
    font-size: 4.1rem;
    letter-spacing: 2px;
    color: var(--accent);

}
.hero .logo
{
    display: inline-block;
}
.hero .logo span:first-child
{
    font-size: 20px;
}
.hero .logo span:last-child
{
    font-size: 24px;
}
.hero p
{
    color: var(--sec-text);
    font-family: hel-reg;
    width: 50%;
    text-align: center;
    margin: 0;
    font-size: 1rem;
}
.cta-box
{
    padding: 15px;
}
.divider
{
    display: block;
    width: 100%;
    height: 100px;
    background-image: linear-gradient(#00000000, var(--primary));
    margin-top: -100px;
}
.pitch .subhead
{
    display: block;
    text-align: center;
    color: var(--secondary);
    font-family: nineByFive;
    font-size: 20px;
    letter-spacing: 2px;
}
.pitch-wrap h2
{
    text-align: center;
    width: 57%;
    margin: auto;
    line-height: 1.2;
}
.punch
{
    padding: 0 50px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.punch h2
{
    background: linear-gradient(to right, var(--accent), #d40000);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-family: hel-reg;
    font-size: 3.5rem;
}
.pitch-wrap
{
    position: sticky;
    top: 0;
}
.pitch-wrap.f-wrap
{
    min-height: 100vh;
    background-color: #0a0a0a;
    border-radius: 100px 100px 0 0 ;
    padding: 80px 50px;
}
.pitch-wrap.f-wrap h2
{
    font-size: 4rem;
    background: linear-gradient(to right, var(--accent), var(--accent_2));
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-family: hel-reg;
}
.pitch-wrap p
{
    font-family: hel-reg;
    color:#cdcdcd;
    margin: 0;
    width: 40%;
}
.pitch-wrap .para-wrap
{
    padding: 10px;
    width: 70%;
    display: flex;
    justify-content: right;   
    margin: auto; 
}
.pitch-grid
{
    width: 100%;
    padding: 50px 60px;
    column-count: 3;
    column-gap: 10px;
}
.pitch-grid .pitch-box
{
    width: 100%;
    padding: 40px 30px;
    border: 0.5px solid #1d1d1d;
    border-radius: 10px;
    background: radial-gradient(
        circle at calc(var(--x) * 1px) calc(var(--y) * 1px),
        #1d1d1d, 
        transparent 300px    
    );
    background-attachment: fixed;
    height: fit-content;
    page-break-inside: avoid;
}
.pb-head
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 30px;
}
.pb-head svg
{
    color: var(--accent) !important;
    stroke: #fff;
}
.pb-content .pb-heading
{
    color: var(--secondary);
    text-align: center;
    font-size: 2rem;
    margin: 0;
    font-family: hel-bold;
}
.pb-content .pb-det
{
    font-family: hel-reg;
    display: block;
    color: var(--sec-text);
    text-align: center;
    font-size: 1.2rem;
}
.services
{
    width: 100%;
}
.ser-wrap
{
    padding: 50px;
}
.ser-grid
{
    padding: 15px 0;
    column-count: 2;
    column-gap: 5px;
}
.ser-box
{
    padding: 40px;
    border: 0.5px solid #1d1d1d;
    border-radius: 10px;
    page-break-inside: avoid;
    background: radial-gradient(
        circle at calc(var(--x) * 1px) calc(var(--y) * 1px),
        #1d1d1d, 
        transparent 300px    
    );
    background-attachment: fixed;
    cursor: pointer;
}
.ser-box:not(:first-child)
{
    margin-top: 5px;
}
.ser-box h4
{
    color: var(--secondary);
    font-family: hel-bold;
    margin: 0;
}
.ser-box p
{
    color: #cdcdcd;
    font-family: hel-reg;
    margin: 0;
}
.about-wrap
{
    padding: 150px 50px;
}
.about-wrap p
{
    color: var(--secondary);
    font-family: hel-reg;
    font-size: 30px;
    line-height: 1.1;
    padding: 10px 0;
}
.about-wrap p .highlight
{
    font-size: 35px;
}
.work-wrap
{
    padding: 50px;
}
.partners
{
    padding: 50px;
}
.partners-grid
{
    column-count: 2;
    column-gap: 10px;
    padding: 20px 0;
}
.partners-grid a
{
    display: block;
    max-width: 200px;
}
.partners-grid img
{
    width: 100%;
}
.test
{
    padding: 50px;
}
.test-wrap
{
    padding: 20px;
    column-count: 2;
    column-gap: 10px;
}
.test-box
{
    width: 100%;
    height: fit-content ;
    border: 0.5px solid #1d1d1d;
    position: sticky;
    top: 100px;
    border-radius: 10px;
    padding: 30px;
    background-color: var(--primary);
    page-break-inside: avoid;
}
.test-box:not(:first-child)
{
    margin-top: 10px;
}
.profile
{
    display: flex;
    align-items: center;
}
.profile .photo
{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 5px;
}
.profile .photo img
{
    width: 100%;
}
.profile .p-content
{
    font-family: hel-reg;
}
.profile .p-content span
{
    display: block;
    line-height: 1;
}
.profile .p-content span.name
{
    font-size: 15px;
    color: var(--secondary);
}
.profile .p-content span.title
{
    font-size: 13px;
    color: var(--sec-text);
}
.test-box p
{
    color: var(--secondary);
    font-family: hel-reg;
    font-size: 1rem;
    margin: 10px 0 0;
}
.cta
{
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.cta h4
{
    color: var(--secondary);
    font-family: nineByFive;
    font-size: 3rem;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}
.cta p
{
    color: var(--sec-text);
    font-family: hel-reg;
    font-size: 1rem;
    line-height: 1;
    margin: 0 0 20px;
}
.test-content-wrap
{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    padding: 10px;
}
.test-content-wrap p
{
    margin: 0;
}
.test-content-wrap video
{
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
}
.templates
{
    padding: 20px 50px; 
}

@media  (max-width: 1200px) 
{
    .test-wrap
    {
        column-count: 1;
    }
    .punch h2, .f-wrap h2
    {
        width: 80%;
    }    
    .pitch-grid
    {
        column-count: 2;
    }
 
}
@media (max-width: 959px) 
{
    .test, .templates, .about-wrap, .work-wrap
    {
        padding: 50px 20px;
    }
    .punch h2, .f-wrap h2
    {
        width: 100%;
    } 
    .hero p
    {
        width: 70%;
    }
    .ser-grid
    {
        column-count: 1;
    }
    .ser-wrap
    {
        padding: 60px 20px;
    }   
    .pitch .pitch-box:not(:first-child)
    {
        margin-top: 10px !important;
    }
    .hero h1
    {
        width: 80%;
    }
}

@media (max-width: 450px) 
{
    .hero h1
    {
        width: 100%;
    }
    .temp-grid,
    .test-content-wrap
    {
        grid-template-columns: 1fr;
    }
    .test-wrap
    {
        padding: 20px 0;
    }
    .test-box p
    {
        font-size: 0.9rem;
    }
    .cta
    {
        padding: 20px;
    }
    .cta p
    {
        text-align: center;
    }
    .about-wrap p
    {
        font-size: 20px;
    }
    .about-wrap p .highlight
    {
        font-size: 25px;
    }
    .hero
    {
        padding: 10px;
    }
    .hero h1
    {
        font-size: 2.5rem;
    }
    .hero h1 .highlight-gra
    {
        font-size: 2.8rem;
    }
    .hero p
    {
        font-size: 0.8rem;
        width: 100%;
    }
    .about-wrap
    {
        padding: 50px 20px;
    }
    .punch
    {
        padding: 0 20px;
    }
    .punch h2
    {
        width: 100%;
        font-size: 2rem;
    }
    .punch .para-wrap, .punch .para
    {
        width: 100%;
    }
    .pitch-wrap.f-wrap
    {
        padding: 100px 20px;
        background-color: var(--primary);
    }
    .pitch-wrap.f-wrap h2
    {
        width: 100%;
        font-size: 2rem;
    }
    .pitch-grid
    {
        column-count: 1;
        padding: 15px;
    }
    .pitch-grid .pitch-box
    {
        padding: 20px;
    }
    .pb-content .pb-heading
    {
        font-size: 1.5rem;
    }
    .pb-content .pb-det
    {
        font-size: 0.8rem;
    }
}

@media (max-width: 380px) 
{
    .hero h1
    {
        font-size: 2rem;
    }
    .hero h1 .highlight
    {
        font-size: 2.5rem;
    }
    .hero p
    {
        font-size: 0.7rem;
        width: 100%;
    }
}

Sid Gifari File Manager

📝 Editing: home.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