Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

21 November 2024

Modelo HTML CSS para site de desenvolvedor

HTML

CSS

body
{
    margin: 0;
    padding: 0;
    background: #222;
}
.logo
{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 400px;
    background: #dc4c40;
    border-radius: 50%;
    overflow: hidden;
    animation: rot 1s infinite linear;
}
@keyframes rot{
    0%{
        transform: translate(-50%, -50%) rotate(0deg)
    }
    100%{
        transform:translate(-50%, -50%) rotate(360deg)
    }
}
.center
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
    background: #367bf0;
    border-radius: 50%;
    border: 24px solid #fff;
    z-index: 3;
}
.yellow
{
    position: absolute;
    top: 27%;
    left: 61.5%;
    width: 100%;
    height: 100%;
    background: #f7c43a;
    z-index: 2;
    transform: skewX(-30deg);
}
.yellow:before
{
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 100%;
    height: 50%;
    background: #f7c43a;
    transform: skewX(50deg);
}
.green
{
    position: absolute;
    top: 22%;
    left: -269px;
    width: 100%;
    height: 100%;
    background: #0fa361;
    z-index: 1;
    transform: skewX(32deg);
}
.green:before
{
    content: '';
    position: absolute;
    top: 160px;
    left: 160px;
    width: 100%;
    height: 100%;
    background: #0fa361;
}

Recomendado

arquivo grátis

Um código por NotYoEA

Modelo HTML CSS para site de desenvolvedor

HTML

CSS

JS

Recomendado

arquivo grátis

Um código por NotYoEA

Modelo HTML CSS para site de desenvolvedor

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS