ANOTAÇÕES CSS

-
criar pasta /styles
globa.css

//declarando variaveis padrão para utilizar no código
:root {
    --color-background:#F3F3F3;
    --color-background-nav:#2B3D50;
    --color-background-home:#344960;
    --color-text-light:#EDEDED;
    --color-text-title:#FF5555;
    --color-text-dark:#3D3D3D;
  }




//css padrão para tudo do app
*{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: sans-serif;
  }

//utilizando variavel

  html,body{
      background-color: var(--color-background);
  }

//opacidade dos links
  a{
      text-decoration: none;
      transition: 0.2s opacity;
  }

//opacidade dos links

  a:hover{
      opacity: 0.8;
  }

//tamanho dos containers
  .container{
      width: 90%;
  }

//config aparencia do main

  main{
      width: 100%;
      min-height: calc(100vh - 120px);
      display: flex;
      flex-direction: column;
  }

//configuração básica para todos H1
  h1{
    color: var(--color-text-title);
    margin:40px 0;
    font-size: 30px;
  }


//configuração header.vue
// o style scoped é o q funciona somente para esta página

<style scoped>

    header{
        background-color: var(--color-background-nav);
        height: 60px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
   
    nav{
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
    }

    #logo{
        width: 130px;
    }

    #menu-button{
        width: 30px;
    }

    #menu-overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 40%;
        height: 100vh;
        background-color: #000000;
        opacity: 0.8;
    }

    #menu-logo{
        width: 110px;
        margin-top: 30px;
        margin-bottom: 10px;
    }
    #menu-items{
        position: fixed;
        margin-top: 2px;
        top: 0;
        right: 0;
        background-color: var(--color-background-nav);
        width: 60%;
        height: 100vh;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    #menu-items.active{
        display: flex;
    }

    ul{
        list-style: none;
        text-align: center;
        height: 60px;
        align-items: center;
    }

    ul li{
        margin: 20px 0px;
    }

    ul li a{
        color: var(--color-text-light);
       
    }

    /*ocultando elementos no desktop*/
    @media (min-width: 700px){
        #menu-button,
        #menu-logo,
        #menu-overlay{
            display:none;
        }

        #menu-items{
            display: flex;
            position: static;
            height: 50px;
            width: auto;
        }

        ul{
            display: flex;
        }
        ul li{
            margin: 0;
            margin-right: 20px;
        }
    }
</style>

//config do footer

<style scoped>

    footer{
   
        bottom: 0px;
        height: 60px;
        width: 100%;
        background-color: var(--color-background-nav);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .socialLink img{
        width: 20px;
    }

    .socialLink{
        border:2px solid var(--color-text-light);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        margin: 0 8px;
    }

</style>

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Banco de dados resumo..

-
Vou resumir um pouco da aula de banco de dados, fiz com o canal do  Curso em video , do professor Guanabara, cujo recomendo que assistam pois os comandos que vou postar aqui é tudo da aula dele.. https://www.youtube.com/watch?v=Ofktsne-utM&list=PLHz_AreHm4dkBs-795Dsgvau_ekxg8g1r (link da playlist com todas as aulas) Primeiramente é preciso instalar o xampp e o Mysql Workbench (acho que o professor não ira usar esse programa na aula) caso o seu sistema seja Windows. Para começar a trabalhar o banco no windows é necessário que abra o xampp e clique no mysql, logo em seguida abra o workbench e lá vai ter um +, clique nele e coloque o nome root no primeiro espaço e de ok, pronto já estará com o programa rodando.  Já se o seu sistema é linux irá ter que usar o Mysq workbench e o LAMP, Recomendo o tutorial do professor hudson.   http://hudsonss.blogspot.com.br/2016/12/instalar-lamp-no-debian-8.html Outra dica importante antes de começar, o mysql funciona da ...
Leia mais

Aula03 Html

-
<!DOCTYPE HTML> <html lang="pt-br">     <head>         <meta charset="UTF-8">         <title>Cadastro</title>     </head>     <body bgcolor="lightblue">         <p><u>Cadastre-se no site</u></p>         <br>         <form action="enviar.py">             <fieldset>                 <legend>Dados Pessoais:</legend>                 <br>                 Nome:                 <br>                 <input type="text" name="nome">                 <br>   ...
Leia mais

Comandos Vim

-
<?php //LOCALHOST $host= "localhost"; $usuario="gui"; $senha="123mudar"; $banco="db_fatecie"; //CONEXAO $conn=mysqli_connect($host, $usuario, $senha, $banco); //VERIFICA CONEXÃO if($conn){         echo("<br>Parabéns!!! Conexão com o banco de dados MySQL, Realizada com sucesso!!"); } else {         printf("<br>Falha na conexão com o banco de dados: %s\n", mysqli_connect_error());         exit(); } ?> esc :x salva e fecha esc :q! fecha sem salvar esc :w Salva e continua listando: <?php echo "<br><h3>.:: CONSULTA ::.</h3>"; ?> <a href="consulta.php">| Atualiazar |</a> <br> <?php //CHAMA CONEXAO COM BANCO MYSQL include 'banco/conecta.php'; //GERA UM STRING DA CONSULTA $sql = "SELECT * FROM tb_aluno ORDER BY nome asc"; //EXECUTA CONSULTA $res = mysqli_query($conn, $sql); //TOTAL DE ...
Leia mais