Olá! Sou

David Marques

Designer e front-end developer, focado em desenvolvimento de projetos gráficos e digitais.



Seja bem-vindo!

Sobre mim
Formado em Computação Gráfica trabalho compratilhando dos meus conhecimentos em Informática e design buscando desenvolver cada vez mais minha capacidade como profissional.
Desenvolvimento em folders, logos, wallpapers, banners impresso ou digital, documentos, informativos, layout, vinhetas, autoração de DVD, edição de vídeo, apresentação de slides, etc.

Trabalhos e inspirações gráficas e digitais

lina_bosque
anjo
frutas
woman_flame
gatinho
spacemedia
peninha
vetor_fireworks
bosque
bonecagfone
alice
cartaz_infancia
gelo
wallpapermusic
maquiagem
lara_croft
bonecas

Desenho em CSS

Com os novos recursos da linguagem CSS3 para os navegadores web, podemos utilizar elementos complexos para desenvolvimento e aperfeiçoamentos gráficos de perspectiva, transformação e rotação de objetos.
  • Cenário

    #tela {
    position: absolute;
    border: 8px solid;
    width: 770px;
    height: 430px;
    left: 20%;
    top: 60px;
    }

    #fundo {
    position: absolute;
    width: 768px;
    height: 385px;
    z-index: -4;
    left: 0px;
    top: 0px;
    border: 1px solid;
    background-color: #D5FFFF;
    }

    #linha {
    position: absolute;
    width: 768px;
    height: 53px;
    z-index:-3;
    left: 0px;
    top: 375px;
    border: 1px solid;
    background-color: #646831;
    }

    #sol {
    position: absolute;
    width: 200px;
    height:115px;
    z-index:-4;
    left: 275px;
    top: 273px;
    background: radial-gradient(#FC3, #FF9);
    border: 3px solid #FFC;
    border-filter: blue(20);
    border-radius: 100px 100px 0px 0px;
    }

    #céu {
    position: absolute;
    width: 766px;
    height: 196px;
    z-index: -4;
    left: 2px;
    top: 1px;
    background: linear-gradient(#0CF, #D5FFFF);
    }

  • Cão

    #tronco {
    position:absolute;
    width:84px;
    height:39px;
    z-index:1;
    left: 605px;
    top: 352px;
    background-color: #996633;
    border: 1px solid;
    border-radius: 60px;
    }

    #cabeça {
    position:absolute;
    width:49px;
    height:47px;
    z-index:3;
    left: 584px;
    top: 334px;
    background-color: #996633;
    border: 1px solid;
    border-radius: 60px;
    }

    #orelha{
    position:absolute;
    width:10px;
    height:28px;
    z-index:4;
    left: 614px;
    top: 343px;
    background-color: #996633;
    border: 1px solid;
    border-radius: 60px 0px 60px 0px;
    }

    #focinho {
    position:absolute;
    width:14px;
    height:13px;
    z-index:4;
    left: 580px;
    top: 356px;
    background-color: #000;
    border: 1px solid;
    border-radius: 60px;
    }

    #boca {
    position:absolute;
    width:14px;
    height:13px;
    z-index: 3;
    left: 594px;
    top: 363px;
    background-color: #FBE0D7;
    border: 1px solid;
    border-radius: 60px 0px 60px 0px;
    }

    #olho {
    position:absolute;
    width:12px;
    height:12px;
    z-index:3;
    left: 595px;
    top: 346px;
    background-color: #FFF;
    border: 1px solid;
    border-radius: 60px;
    }

    #olho_globo {
    position:absolute;
    width:6px;
    height:6px;
    z-index:3;
    left: 595px;
    top: 349px;
    background-color: #930;
    border: 1px solid #663;
    border-radius: 60px;
    }

    #patafrente{
    position:absolute;
    width:20px;
    height:37px;
    z-index:1;
    left: 613px;
    top: 371px;
    background-color: #996633;
    border: 1px solid;
    border-radius: 60px;
    }

    #patatras{
    position:absolute;
    width:20px;
    height:37px;
    z-index:1;
    left: 665px;
    top: 371px;
    background-color: #996633;
    border: 1px solid;
    border-radius: 60px;
    }

    #calda{
    position:absolute;
    width:8px;
    height:33px;
    z-index:0;
    left: 686px;
    top: 340px;
    background-color: #996633;
    border: 1px solid;
    border-radius: 60px 0px 60px 0px;
    }

    #colera {
    position:absolute;
    width:5px;
    height:150px;
    z-index:2;
    left: 576px;
    top: 232px;
    border-radius: 60px; background-color: #666666;
    }

    #colera {
    -webkit-transform: rotateZ(-40deg); /* Safari */
    -moz-transform: rotateZ(-30deg); /* Firefox */
    -ms-transform: rotateZ(-30deg); /* Internet Explorer */
    -o-transform: rotateZ(-30deg); /* Opera */
    transform: rotateZ(-40deg); /* Standard syntax */
    }

  • Rapaz

    #cabeça {
    position:absolute;
    width:100px;
    height:100px;
    z-index:1;
    left: 150px;
    top: 87px;
    background-color: #F5B68B;
    border: 1px solid #000;
    border-radius: 100px;
    }

    #cabelo {
    position:absolute;
    width:67px;
    height:82px;
    z-index:1;
    left: 146px;
    top: 85px;
    background-color: #993300;
    border-radius: 60px 0px 40px 0px;
    }

    #cabelo2 {
    position:absolute;
    width:46px;
    height:41px;
    z-index:1;
    left: 210px;
    top: 85px;
    background-color: #993300;
    border-radius: 0px 40px 0px 60px;
    }

    #olho {
    position:absolute;
    width:19px;
    height:19px;
    z-index:1;
    left: 216px;
    top: 121px;
    background-color: #ffffff;
    border: 1px solid #000;
    border-radius: 100px;
    }

    #olho_globo {
    position:absolute;
    width:10px;
    height:10px;
    z-index:2;
    left: 223px;
    top: 128px;
    background-color: #000000;
    border: 1px solid #000;
    border-radius: 100px;
    }

    #boca {
    position:absolute;
    width:20px;
    height:1px;
    z-index:2;
    left: 219px;
    top: 165px;
    background-color: #000000;
    border: 1px solid #000;
    border-radius: 100px;
    }

    #troco {
    position:absolute;
    width:38px;
    height:98px;
    z-index:1;
    left: 180px;
    top: 183px;
    background-color: #003366;
    border: 1px solid #000;
    }

    #braço_esq {
    position:absolute;
    width:70px;
    height:19px;
    z-index:2;
    left: 151px;
    top: 220px;
    background-color: #F5B68B;
    border: 1px solid #000;
    border-radius: 50px;
    }

    #braço_dir{
    position:absolute;
    width:70px;
    height:19px;
    z-index:0;
    left: 191px;
    top: 220px;
    background-color: #F5B68B;
    border: 1px solid #000;
    border-radius: 50px;
    }

    #perna_esq{
    position:absolute;
    width:27px;
    height:114px;
    z-index:2;
    left: 171px;
    top: 275px;
    background-color: #666666;
    border: 1px solid #000;
    border-radius: 0px 0px 50px 50px;
    }

    #perna_dir{
    position:absolute;
    width:27px;
    height:114px;
    z-index:1;
    left: 200px;
    top: 277px;
    background-color: #666666;
    border: 1px solid #000;
    border-radius: 0px 0px 50px 50px;
    }

    #braço_esq {
    -webkit-transform: rotateZ(-80deg); /* Safari */
    -moz-transform: rotateZ(-80deg); /* Firefox */
    -ms-transform: rotateZ(-80deg); /* Internet Explorer */
    -o-transform: rotateZ(-80deg); /* Opera */
    transform: rotateZ(-80deg); /* Standard syntax */
    }

    #braço_dir {
    -webkit-transform: rotateZ(60deg); /* Safari */
    -moz-transform: rotateZ(60deg); /* Firefox */
    -ms-transform: rotateZ(60deg); /* Internet Explorer */
    -o-transform: rotateZ(60deg); /* Opera */
    transform: rotateZ(60deg); /* Standard syntax */
    }

    #perna_esq {
    -webkit-transform: rotateZ(8deg); /* Safari */
    -moz-transform: rotateZ(8deg); /* Firefox */
    -ms-transform: rotateZ(8deg); /* Internet Explorer */
    -o-transform: rotateZ(8deg); /* Opera */
    transform: rotateZ(8deg); /* Standard syntax */
    }

    #perna_dir {
    -webkit-transform: rotateZ(-10deg); /* Safari */
    -moz-transform: rotateZ(-10deg); /* Firefox */
    -ms-transform: rotateZ(-10deg); /* Internet Explorer */
    -o-transform: rotateZ(-10deg); /* Opera */
    transform: rotateZ(-10deg); /* Standard syntax */
    }

    #pe_esq {
    position:absolute;
    width:42px;
    height:22px;
    z-index:3;
    left: 163px;
    top: 379px;
    background-color: #644300;
    border: 1px solid #000;
    border-radius: 0px 50px 50px 50px;
    }

    #pe_esq {
    -webkit-transform: rotateZ(10deg); /* Safari */
    -moz-transform: rotateZ(10deg); /* Firefox */
    -ms-transform: rotateZ(10deg); /* Internet Explorer */
    -o-transform: rotateZ(10deg); /* Opera */
    transform: rotateZ(10deg); /* Standard syntax */
    }

    #pe_dir {
    position:absolute;
    width:42px;
    height:22px;
    z-index:3;
    left: 207px;
    top: 379px;
    background-color: #644300;
    border: 1px solid #000;
    border-radius: 0px 50px 50px 50px;
    }

  • Moça

    #cabeça {
    position:absolute;
    width:100px;
    height:100px;
    z-index:1;
    left: 466px;
    top: 87px;
    background-color: #FADBC7;
    border: 1px solid #000;
    border-radius: 100px;
    }

    #cabelo {
    position:absolute;
    width:58px;
    height:163px;
    z-index:6;
    left: 512px;
    top: 85px;
    background-color: #FFA600;
    border-radius: 0px 60px 0px 60px;
    } #cabelo2 {
    position:absolute;
    width:46px;
    height:46px;
    z-index:2;
    left: 466px;
    top: 85px;
    background-color: #FFA600;
    border-radius: 60px 0px 60px 0px;
    }

    #olho {
    position:absolute;
    width:19px;
    height:19px;
    z-index:1;
    left: 482px;
    top: 121px;
    background-color: #ffffff;
    border: 1px solid #000;
    border-radius: 100px;
    }

    #olho_globo {
    position:absolute;
    width:10px;
    height:10px;
    z-index:2;
    left: 484px;
    top: 128px;
    background-color: #336600;
    border: 1px solid #000;
    border-radius: 100px;
    }

    #boca {
    position:absolute;
    width:15px;
    height:1px;
    z-index:2;
    left: 482px;
    top: 163px;
    background-color: #000000;
    border:2px solid #F33;
    border-radius: 0px 0px 13px 13px;
    }

    #troco {
    position:absolute;
    width:38px;
    height:98px;
    z-index:1;
    left: 496px;
    top: 183px;
    background-color: #FF3366;
    border: 1px solid #000;
    }

    #braço_esq {
    position:absolute;
    width:70px;
    height:19px;
    z-index:3;
    left: 487px;
    top: 220px;
    background-color: #FADBC7;
    border: 1px solid #000;
    border-radius: 50px;
    }

    #braço_dir{
    position:absolute;
    width:70px;
    height:19px;
    z-index:0;
    left: 458px;
    top: 220px;
    background-color: #FADBC7;
    border: 1px solid #000;
    border-radius: 50px;
    }

    #perna_esq{
    position:absolute;
    width:20px;
    height:114px;
    z-index:2;
    left: 493px;
    top: 275px;
    background-color: #FADBC7;
    border: 1px solid #000;
    border-radius: 0px 0px 50px 50px;
    }

    #perna_dir{
    position:absolute;
    width:20px;
    height:114px;
    z-index:1;
    left: 520px;
    top: 277px;
    background-color: #FADBC7;
    border: 1px solid #000;
    border-radius: 0px 0px 50px 50px;
    }

    #boca {
    -webkit-transform: rotateZ(-10deg); /* Safari */
    -moz-transform: rotateZ(-10deg); /* Firefox */
    -ms-transform: rotateZ(-10deg); /* Internet Explorer */
    -o-transform: rotateZ(-10deg); /* Opera */
    transform: rotateZ(-10deg); /* Standard syntax */
    #braço_esq {
    -webkit-transform: rotateZ(-100deg); /* Safari */
    -moz-transform: rotateZ(-100deg); /* Firefox */
    -ms-transform: rotateZ(-100deg); /* Internet Explorer */
    -o-transform: rotateZ(-100deg); /* Opera */
    transform: rotateZ(-100deg); /* Standard syntax */
    } #braço_dir {
    -webkit-transform: rotateZ(-60deg); /* Safari */
    -moz-transform: rotateZ(-60deg); /* Firefox */
    -ms-transform: rotateZ(-60deg); /* Internet Explorer */
    -o-transform: rotateZ(-60deg); /* Opera */
    transform: rotateZ(-60deg); /* Standard syntax */
    }

    #perna_esq {
    -webkit-transform: rotateZ(10deg); /* Safari */
    -moz-transform: rotateZ(10deg); /* Firefox */
    -ms-transform: rotateZ(10deg); /* Internet Explorer */
    -o-transform: rotateZ(10deg); /* Opera */
    transform: rotateZ(10deg); /* Standard syntax */
    }

    #perna_dir {
    -webkit-transform: rotateZ(-12deg); /* Safari */
    -moz-transform: rotateZ(-12deg); /* Firefox */
    -ms-transform: rotateZ(-12deg); /* Internet Explorer */
    -o-transform: rotateZ(-12deg); /* Opera */
    transform: rotateZ(-12deg); /* Standard syntax */
    }

    #pe_dir {
    -webkit-transform: rotateZ(-8deg); /* Safari */
    -moz-transform: rotateZ(-8deg); /* Firefox */
    -ms-transform: rotateZ(-8deg); /* Internet Explorer */
    -o-transform: rotateZ(-8deg); /* Opera */
    transform: rotateZ(-8deg); /* Standard syntax */
    }

    #pe_esq {
    position:absolute;
    width:36px;
    height:22px;
    z-index:0;
    left: 469px;
    top: 379px;
    background-color: #E9E9E9;
    border: 1px solid #000;
    border-radius: 50px 0px 50px 50px;
    }

    #pe_dir {
    position:absolute;
    width:36px;
    height:22px;
    z-index:0;
    left: 516px;
    top: 379px;
    background-color: #E9E9E9;
    border: 1px solid #000;
    border-radius: 50px 0px 50px 50px;
    }

    #abdomem {
    position:absolute;
    width:37px;
    height:20px;
    z-index:3;
    left: 496px;
    top: 238px;
    background-color: #FADBC7;
    border: 1px solid;
    }

    #saia {
    position:absolute;
    width:65px;
    height:52px;
    z-index:2;
    left: 487px;
    top: 252px;
    background-color: #000000;
    border-radius: 60px 80px 0px 0px;
    }

ANIMAÇÕES

Realizo trabalhos como Instrutor de Informática, Web designer, Designer gráfico, Editor de vídeos, Slidemaker e desenvolvimento de projetos.

Colocando minhas habilidades em prática e colaborar com equipes de trabalho, tendo o crescimento da organização e o desenvolvimento pessoal e profissional como focos principais.

  Contato: (21) 96966-2848