Criando um site

Hello World... vamos conversar nesta postagem sobre como montamos o site do nosso projeto.

Escolhemos o Free Web Hosting Areahttps://www.freewebhostingarea.com) para hospedar nosso site.



Características

  • Construtor de sites gratuito
  • Instalador automático (WordPress, Joomla, etc)
  • Hospedagem condicional sem anúncios
  • Suporte a banco de dados PHP e MySQL


Especificações


  • Espaço em disco: 1.5GB
  • Largura de banda: ilimitado
  • Banco de Dados: Bancos de Dados MySQL 1
  • Painel de Controle: Painel FreeWHA / Cpanel


Como criar uma conta para hospedar seu site


  Acesse ao site https://www.freewebhostingarea.com


2º  Em "Free SubDomain Hosting" digite o Domínio desejado, neste exemplo foi usado " TesteRegistro" e selecionar uma das opções de SubDomínio disponíveis e em seguida clicar em "Proceed" 





3º Preencha com suas informações os campos necessários e clicar em  "Create"


Apos inserir as informações, abrirá a tela a seguir:



4º  Acesse o Painel de Controle no Link indicado, e acesse com seu respectivo usuário e senha, onde abrirá a seguinte página:


Nesta página, você terá acesso as informações dos dados do seu site, tipo de plano, espaço disponível/utilizado e Tráfego. E também direcionamento e recursos para a criação da interface do site e upload de imagens e index.

A partir dai é soltar a criatividade e montar o seu site.

Nosso site


O link do nosso site é: http://projetophtemperatura.orgfree.com





O coding fonte usado no site esta abaixo.

index.html:



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
<html lang="pt-br">
 
<head  >
    <title>Smart pH</title>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="25">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="./assets/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,700" rel="stylesheet">
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
    <script src="https://kit.fontawesome.com/7b1bca71a5.js" crossorigin="anonymous"></script>
 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
</head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- COMEÇO DA NAV  -->
    <div class="row mx-0" style="width: 100%">
        <a href="index.html" class="navbar-brand h1 mb-0"><img src="img/logo2.png"></a>
    </div>
    <a href="https://smartphusf.blogspot.com/p/blog-page_30.html" target="_blank" class="navbar-brand h1 mb-0"><img src="img/blog.png"></a>

</nav><br/>
 
<!-- 2 ETAPA - CARROSEL  -->
<div id="carouselSite" class="carousel slide" data-ride="carousel" interval="2000">
    <!-- Carrosel de imgens -->
    <div class="carousel-inner">
        <center>
            <!-- Informçaões internas do carrosel -->
            <div class="carousel-item active">
                <img src="img/logo.png" class="img-fluid d-block">
            </div>
 
            <div class="carousel-item">
                <img src="img/arrobocore.png" class="img-fluid d-block">
            </div>
 
            <div class="carousel-item">
                <img src="img/logo3.png" class="img-fluid d-block">
            </div>
    </div>
    </center>
</div>
<!-- FIM 2 ETAPA - CARROSEL  -->
 
<body text="black">
 
    <div class="container align-items-center" style="height: 50vh;"> 
        <div class="row align-items-center" style="height: 50%;">
            <div class="col-12 d-block d-lg-flex">

                <div class="col-12 col-lg-6 pt-5 pt-lg-0">
                    <p class="text-center text-black h1-celular h1" >
                        27,
                        <script>
                            document.write(Math.round(Math.random() * 60));
                        </script> ºC
                        <img src="img/temp.png" style="width: auto; height: 100px" alt="">
                    </p>
 
                </div>
                <div class="col-12 col-lg-6 pt-5 pt-lg-0">
                    <p class="text-center text-black h1-celular h1">
                        7,
                        <script>
                            document.write(Math.round(Math.random() * 60));
                        </script>
                        <img src="img/nacido.png" style="width: auto; height: 100px" alt="">
                        
                    </p>
                
                </div>
            </br>
            </div>
        </div>
       
    </div>
    


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>


</head>
 
</html>


style.css:


123456789101112131415161718192021222324252627282930313233343536
:not(i) {
    font-family: 'Poppins', 'Roboto', sans-serif !important;
}
 
.navtest {
    box-shadow: 0px -14px 49px black !important;
}
 
body {
    background-color: rgb(4, 34, 44);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    box-shadow: inset 0px 0px 0px black;
}
 
only screen and (max-width: 992px) {
    .h1-celular {
        font-size: 6.5rem !important;
    }
    .navbar-celular {
        padding: 1.5rem 1rem !important;
    }
    .burguer-celular {
        font-size: 2.5rem !important;
    }
    .brand-celular {
        font-size: 2.5rem !important;
        color: rgba(74, 74, 74, 0.9);
        font-weight: bolder;
    }
    .item-celular {
        font-size: 2.2rem !important;
    }
}




E nosso ficou assim FTP Client:








No dia da apresentação usaremos uma tabela com os valores de temperatura e pH coletados anteriormente, como teríamos problemas no dia da apresentação com relação a internet.


World... sobre o site é isso, há muitos servidores gratuitos para hospedar seu site, o que pode também ser bem útil para treinar e "brincar", ir fazendo testes.

Até mais pessoal.







Sem comentários:

Enviar um comentário