0

Estou fazendo um app web, mas minha página esta em branco, e apresentando os seguintes erros: inserir a descrição da imagem aqui

Fiz umas pesquisas no Google, e vi que é relacionado as fontes e tal, mas como sou extremamente novato, queria de uma ajuda mais didática.

<!DOCTYPE html>

<head>

    <title> Sistema de aluguel de narguile </title>

    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <?php include("css/style.php"); ?>
</head>


        <script src="js/materialize.min.js"></script>

    <script type="text/javascript">

        //MODAL1

            document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.modal');
            var instances = M.Modal.init(elems, options);
            });

            // Or with jQuery

            $(document).ready(function(){
            $('.modal').modal();
            });
        //
    </script>
 </body>
</html>

        <style type="text/css">

        #cabeçalho_preto {
            width:1366px;
            height: 192px;
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            background-image: linear-gradient(to bottom, black, #686564);
        }

        #cabeçalho_laranja {
            background-image: url("images/meio-circulo.png");
            width: 1367px;
            height: 192px;
            margin-top: 0px;
            margin-left: -1px;
            margin-bottom: 0px;
        }

        #logo {
            background-image: url("images/94169465.png");
            width: 141px;
            height: 192px;
            margin-top: -1px;
            margin-left: 0px;
            margin-bottom: 0px;
        }

        #font_cabeçalho {
            font-family: Lucida Calligraphy;
            font-size: 55px;
            color: #fff;
            text-align: center;
            margin-top: -150px;
        }

        #menu_lateral {
            background-image: linear-gradient(to bottom, #f97000, white);
            width: 340px;
            height: 556px;
            margin-top: -20px;
            margin-left: 0px;
            margin-bottom: 0px;
        }

        #font_titulo_menu_lateral {
            font-family: Lucida Calligraphy;
            font-size: 25px;
            color: #fff;
            text-align: center;
        }

        #font_subtitulo_menu_lateral {
            font-family: Lucida Calligraphy;
            font-size: 15px;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }

        #design_modal {
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            background-image: linear-gradient(to bottom, #f97000, black);
        }

        #font_titulo_modal {
            font-family: Lucida Calligraphy;
            font-size: 25px;
            color: #fff;
            text-align: center;
        }

        #font_modal {
            font-family: Lucida Calligraphy;
            font-size: 15px;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        #back_produtos {
            background-image: url("images/Produtos.png");
            width: 1026px;
            height: 576px;
            margin-top: -576px;
            margin-left: 340px;
            margin-bottom: 0px;
            font-family: Lucida Calligraphy;
            font-size: 15px;
            color: black;
            text-align: center;
            line-height: 525px;
        }

        #design_quadrado {
            width: 225px;
            height: 225px;
            background-image: linear-gradient(to bottom, black, #f97000);               
            font-family: Lucida Calligraphy;
            font-size: 12px;
            color: #fff;
            line-height: 18px;              
        }

        .fonte_button {
            font-size: 10px;
            width: 200px;
            height: 40px;
            text-align: center;
            line-height: 2;
        }

inserir a descrição da imagem aqui

6
  • Sim, é relacionado as Fontes, provavelmente é alguma importação que está com o caminho errado. Observe os locais onde você a importa e tente corrigir. Se puder postar a estrutura do seu projeto, o arquivo que está importando as fontes e o código utilizado iria ajudar muito a te ajudar :D 9/11/2018 às 19:19
  • 1
    Valeu, Eduardo. Coloquei o codigo do Header, Footer e Style... se puder me ajudar...
    – Excel
    9/11/2018 às 19:28
  • Depois se tiver como posta o código do style.php, mas em seu código não vi lugar em que estivesse importando essa fonte, eu sei que ela é usada por padrão no Materialize, talvez como você está usando o Materialize local ele esteja importando. Tente trocar ele pelo do cdn e veja se o erro foi corrigido. link CDN 9/11/2018 às 21:03
  • então, @EduardoRibeiro, coloquei o Style.php la no post... tentei pelo CDN e ficou na mesma... :(
    – Excel
    12/11/2018 às 16:15
  • criei a pasta C:\xampp\htdocs\narguile\fonts\Roboto e coloquei os arquivos la e continuou do mesmo jeito @EduardoRibeiro
    – Excel
    12/11/2018 às 17:33

1 Resposta 1

0

Sim, é relacionado as Fontes. Eu tentei reproduzir o erro aqui em minha máquina, mas aqui não ocorreu, a única mudança que eu fiz foi trocar o materialize local para o de um CDN, como você também fez isso e continuou com o erro, pode ser que ele está executando alguma versão que está em cache em seu navegador, tente limpar o cache, acessar em guia anônima ou até mesmo usar outro navegador e verificar se o erro persiste.

Só uma observação: Como seu arquivo style.php praticamente só contém código css, seria interessante ao invés de criar o arquivo com a extensão php convertê-lo para css, pode parecer besteira, mas deixa um pouco mais didático para os próximos que forem dar manutenção.

Segue como o meu arquivo index.php ficou;

<!DOCTYPE html>
<head>

    <title> Sistema de aluguel de narguile </title>

    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

   <!-- Compiled and minified CSS -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <?php include("css/style.php"); ?>
</head>


  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <script type="text/javascript">

  //MODAL1

      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.modal');
        var instances = M.Modal.init(elems, options);
      });

      // Or with jQuery

      $(document).ready(function(){
        $('.modal').modal();
      });
  //    </script>
 </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .