Documentação Do Site

DOCUMENTAÇÃO DO SITE
Equipe : Filipe Nascimento, Ian Felipe,

Pedro Henrique, Danielle Dias,
Jonathan Oliveira, e Paulo Souza
Data : 13/08/2023
EMPRESA TECNOFY
CÓDIGO HTML
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?
family=Arvo&family=Libre+Baskerville&family=Merriweather:wght@300&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-
z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>T E C N O F Y</title>
</head>
<body>
<header> //CABEÇALHO
<nav class="navbar navbar-expand-lg navbar-dark" style="background: rgb(93,224,230); // ADICIONAR NAV BAR
background: linear-gradient(90deg, #004AAD 20%, #5DE0E6 80%); // FUNDO COM GRADIENTE
padding: 0.5rem 7rem;"> //POSICIONAR A IMAGEM EM RELAÇÃO COM A MARGEM
<a class="navbar-brand" href="#"><img src="Images/TecnoFy_Logo.png" alt="" style="width: 8rem;
height: 8rem; //ALTURA

border-radius: 50% ;"> // EDITAR A CURVATURA DA BORDA
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" // ADD

BOTÃO FUNCIONAL
aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
<span class="navbar-toggler-icon"></span> //CLASS-> ADD CLASSE
</button>
<div class="collapse navbar-collapse" id="conteudoNavbarSuportado"> //DIV-> CRIAR GRUPO
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" id="pg"> Página Inicial <span class="sr-only">(página
atual)</span></a>
</li> //ELEMENTO DE LISTA
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" // LINK NA NAV BAR
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sobre
</a> //ÂNCORA
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"> Equipe </a>
<a class="dropdown-item" href="#">Projeto</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contato</a>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
Serviços
</a>
<a class="dropdown-item" href="#"> Cursos </a>
<a class="dropdown-item" href="#">Consultorias</a>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
<i class="fa-solid fa-magnifying-glass"></i>

</a>
<a class="dropdown-item" href="#"> <input class="form-control mr-sm-2" type="search"
placeholder="Pesquisar" aria-label="Pesquisar"> </a>
</li>
</ul>
</div>
</nav>
</header
<main class="container_nav">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="Images/Desenvolvimento.jpg" alt="Primeiro Slide"> // ADD IAMGEM
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Images/Ensinamentos.png" alt="Segundo Slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Images/analise de sistema.jpg" alt="Terceiro Slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div> 
<br> //SALTAR LINHA
<div class="jumbotron">
<h1 class="display-4"> //ADD TÍTULO -> H1 É O TAMANHO MAIOR DE CAIXA DE TEXTO //PS:. PODE SER ALTERADO NO CSS
Bem Vindo ao TecnoFy!
</h1>
<h2 class="display-5"> //ADD UM TÍTULO COM TAMANHO MENOR
Technology For You
</h2>
<p class="lead"> //p-> ADD TEXTO
É com grande entusiasmo que recebemos você no nosso site dedicado ao mundo da <br>
tecnologia. Aqui, exploraremos juntos as maravilhas do universo digital, desde as mais <br>
recentes tendências até os conceitos fundamentais que moldam nosso futuro tecnológico.
</p>
<hr class="my-4"> //HR QUEBRA TEMÁTICA ENTRE ELEMENTOS
<p>
Capacitamos nossa comunidade a aprender em seu próprio ritmo sempre que for conveniente, <br>
e a partir do conforto de onde quer que esteja no mundo. Amplie seu horizonte e permita <br>
que sua criatividade seja livre. Para saber sobre os cursos, clique no botão abaixo.
</p>
<a class="btn btn-primary btn-lg" href="#cursos" role="button">Veja mais sobre os cursos</a>
</div>
<br>
<div class="card-deck">
<div class="card">
<a href="https://distrito.me/blog/novas-tecnologias-quais-as-tendencias-para-2023/">
<img class="card-img-top" src="Images/TendenciasTecnologicas.jpg" alt="Imagem de capa do card">
</a>
<div class="card-body">
<h5 class="card-title">
As Tendências Mais Quentes em Tecnologia para 2023
</h5> //TAMANHO DE CAIXA DE TEXTO
<p class="card-text">
Estamos no meio de uma revolução tecnológica emocionante, e 2023 está
repleto de inovações que estão moldando o futuro de maneiras surpreendentes.
Neste artigo, exploraremos algumas das tendências mais quentes em tecnologia
que estão dominando este ano e estão destinadas a ter um impacto duradouro.
</p>
</div>
</div>
<div class="card">
</a>
href="https://sebrae.com.br/sites/PortalSebrae/artigos/o-que-e-realidade-aumentada-e-realidade-
virtual,9da08ec38f685810VgnVCM100000d701210aRCRD"> //heref-> URL EXTERNA
<img class="card-img-top" src="Images/realidade-virtual.jpg" alt="Imagem de capa do card">
</a>
A Ascensão da Realidade Virtual e Aumentada
</h5>
A Realidade Virtual (RV) e a Realidade Aumentada (RA) estão finalmente saindo
das sombras e se tornando uma parte essencial de várias indústrias. Desde
jogos imersivos até treinamento profissional e educação, a RV e o RA estão
animados a maneira como interagimos com o mundo digital. Empresas líderes
como Oculus, HTC e Microsoft estão lançando dispositivos impressionantes que
prometem levar essas tecnologias a novos patamares.
</p>
</div>
</div>
<div class="card">
<a
href="https://www.autentify.com.br/marketing/velocidade-5g-como-a-tecnologia-5g-esta-revolucionando-a-
conectividade-e-a-comunicacao/#:~:text=Velocidade%205G%3A%20A%20revolu%C3%A7%C3%A3o%20da%20conectividade%20e
%20da%20comunica%C3%A7%C3%A3o&text=A%20velocidade%20de%20conex%C3%A3o%205G,em%20alta%20defini
%C3%A7%C3%A3o%20sem%20interrup%C3%A7%C3%B5es.">
<img class="card-img-top" src="Images/5G.png" alt="Imagem de capa do card">
</a>
5G: A Revolução na Conectividade
</h5>
A implementação do 5G está causando ondas de choque na indústria de
telecomunicações. Com velocidades de download ultrarrápidas e latência
mínima, o 5G está permitindo avanços em áreas como carros autônomos,
cidades inteligentes e Internet das Coisas (IoT). À medida que mais redes 5G são
lançadas em todo o mundo, podemos esperar uma transformação digital
completa em como os dispositivos se comunicam e interagem.
</p>
</div>
</div>
</div>
<br>
<div class="jumbotron jumbotron-fluid"> 
<div class="container">
<h1 class="display-4">
A Era da Computação Quântica
</h1>
<p class="lead">
A computação quântica é uma fronteira emocionante na tecnologia, prometendo resolver problemas
complexos que estão além do alcance dos computadores tradicionais. Embora ainda estejam em
suas aspirações iniciais, empresas como IBM, Google e Microsoft estão fazendo sucesso na
construção de computadores quânticos funcionais. À medida que essa tecnologia se desenvolve,
podemos esperar avanços revolucionários em áreas como criptografia, simulação molecular e
otimização.
</p>
<br>
<p class="lead1">
O ano de 2023 está repleto de emocionantes avanços tecnológicos que estão envolvendo nossas vidas de
maneiras que nunca tiveram imaginado. Desde a realidade virtual até a computação quântica, estamos
testemunhando uma era de inovação que está moldando o nosso futuro de maneira profunda e
inspiradora.
Portanto, fique atento a essas tendências e prepare-se para uma jornada empolgante no mundo da
tecnologia.
</p>
</div>
</div> 
<br>
<ul class="nav justify-content-center" id="nav-two"> //LISTA DESODERNADA
<a class="nav-link active" href="#principios">Princípios Fundamentais</a>
</li>
<a class="nav-link" href="#avancos">Avanços Tecnológicos</a>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Mais
</a>
<a class="dropdown-item" href="#impacto">Impacto </a>
<a class="dropdown-item" href="#etica_desafio">Ética e Desafios</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#conclusao">Conclusão</a>
</div>
</li>
</ul>
<br>
<br>
<div data-spy="scroll" data-target="#navbar-exemplo2" data-offset="0">
<div class="card">
<img class="card-img-top" src="Images/Princípios Fundamentais.jpg" alt="Imagem de capa do card">
<h4 id="principios"> //ADD CAIXA DE TEXTO
Princípios Fundamentais
</h4>
Para compreender a compreensão quântica, devemos mergulhar nos princípios
fundamentais da mecânica quântica. Enquanto os computadores clássicos usam
bits para representar informações como 0s e 1s, os computadores quânticos
usam qubits. Diferente dos bits convencionais, os qubits podem existir em
um estado de superposição, o que significa que eles podem representar 0,
1 ou uma combinação dos dois simultaneamente. Além disso, os qubits podem
estar entrelaçados, permitindo uma conexão intrincada que é a base para a
capacidade de processamento exponencialmente rápido da computação quântica.
</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Images/Avanços Tecnológicos.png" alt="Imagem de capa do card">
<h4 id="avancos">
Avanços Tecnológicos
</h4>
Os avanços na tecnologia estão aproximando a computação quântica da realidade.
Empresas como IBM, Google, Microsoft e várias startups estão trabalhando
incansavelmente para construir computadores quânticos cada vez mais poderosos
e estáveis. Eles enfrentam desafios técnicos complexos, como a manutenção da
manipulação quântica, minimizando erros quânticos e escalando a arquitetura
para manipular um grande número de qubits. À medida que esses desafios são
superados, estamos nos aproximando da capacidade de resolver problemas que
levaram anos ou décadas para serem resolvidos em questão de minutos.
</p>
</div>
</div>
</div>
<br>
<br>
<div class="card">
<img class="card-img-top" src="Images/Impacto.jpg" alt="Imagem de capa do card">
<h4 id="impacto">
Impacto em Diversas Indústrias
</h4>
A computação quântica promete ter um impacto profundo em diversas indústrias.
Na criptografia, por exemplo, a capacidade dos computadores quânticos de
fatorar grandes em tempo hábil pode afetar a segurança de sistemas
criptográficos convencionais. Além disso, a otimização, a simulação de comando
complexo para desenvolvimento de medicamentos e o campo da inteligência
artificial também devem se beneficiar das capacidades quânticas. As arquiteturas
são vastas e ainda estamos arranhando a superfície do que é possível.
</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Images/Ética e Desafios.jpg" alt="Imagem de capa do card">
<h4 id="etica_desafio">
Ética e Desafios
</h4>
Como toda inovação tecnológica, a computação quântica também apresenta desafios
éticos e preocupações. Por exemplo, a capacidade dos computadores quânticos de
quebrar a criptografia convencional levanta questões sobre a segurança dos dados
e da privacidade. Além disso, devemos considerar como lidar com a corrida
armamentista quântica, garantindo que essa tecnologia seja usada para o bem da
humanidade. É crucial nessa medida que avançamos jornada, também levamos em
consideração a ética ética e social.
</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="Images/Conclusão.jpg" alt="Imagem de capa do card">
<h4 id="conclusao">
Conclusão
</h4>
A era da computação quântica está se iniciando diante de nossos olhos, trazendo consigo uma
promessa de soluções para desafios científicos, tecnológicos e sociais que pareciam
insuperáveis. À medida que continuamos a manter os limites do que é possível, é importante
permanecermos informados, engajados e vigilantes em relação aos desenvolvimentos nesse
campo. A computação quântica tem o potencial de transformar nosso mundo de maneiras
inimagináveis, e estamos apenas no começo dessa jornada emocionante.
</p>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="jumbotron jumbotron-fluid" id="cursos">
<h1 class="display-4">
Nossos Cursos!
</h1>
<p class="lead">
Este é um jumbotron modificado que ocupa todo o espaço horizontal de seu elemento pai.
</p>
</div>
</div>
<br>
<br>
<div class="card-columns">
<div class="card" id="teste">
<img class="card-img-top" src="Images/cadeado.png" alt="Imagem de capa do card" id="cadeado">
Título do card que quebra em uma nova linha
</h5>
Este é um card mais longo com suporte a texto embaixo, que funciona como uma
introdução a um conteúdo adicional. Este conteúdo é um pouco maior.
</p>
</div>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body"> //BLOCO DE LONGA CITAÇÃO
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer"> //RODAPÉ
<small class="text-muted"> //DIMINUIR O TAMANHO DO TEXTO EM UMA CITAÇÃO PREDEFINIDA
Alguém famoso em <cite title="Título da fonte">Título da fonte</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src=".../100px160/" alt="Imagem de capa do card">
<h5 class="card-title">Título do card</h5>
<p class="card-text">Este é um card com suporte a texto embaixo, que funciona como uma introdução a
um conteúdo adicional.</p>
<p class="card-text"><small class="text-muted">Atualizados 3 minutos atrás</small></p>

</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<p class="card-text">Este é um card com suporte a texto embaixo, que funciona como uma introdução a
um conteúdo adicional.</p>
</div>
</div>
<div class="card">
<img class="card-img" src=".../100px260/" alt="Imagem do card">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
</small>
</footer>
</blockquote>
</div>
<div class="card">
<p class="card-text">Este é um card maior com suporte a texto embaixo, que funciona como uma
introdução a um conteúdo adicional. Este card tem o conteúdo ainda maior que o primeiro, para
mostrar a altura igual, em ação.</p>
</div>
</div>
</div>
</main>//DEFINE O CONTÉUDO PRINCIPAL
<footer>

<footer class="text-center text-lg-start bg-white text-muted">
 //SEÇÃO GENÉRICA
<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">

<div class="me-5 d-none d-lg-block">
<span>Conecte-se conosco nas redes sociais:</span>
</div>
 //POSICIONAR A ESQUERDA
//POSICIONAR A DIREITA
<div>
<a href="" class="me-4 link-secondary" id="facebook">
<i class="fab fa-facebook-f"></i> //PARTE DESTACADA
</a>
<a href="" class="me-4 link-secondary">
<i class="fab fa-twitter"></i>
</a>
<i class="fab fa-google"></i>
</a>
<i class="fab fa-instagram"></i>
</a>
<i class="fab fa-linkedin"></i>
</a>
<i class="fab fa-github"></i>
</a>
</div>


</section>


<section class="">
<div class="container text-center text-md-start mt-5">
 //LINHA DE INICÍO E TÉRMINO
<div class="row mt-3">
 //DEFINE OS TAMANHOS DAS LINHAS E COLUNAS
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
 //DEFINE O TIPO DE CONTÉUDO
<h6 class="text-uppercase fw-bold mb-4"> //ADD CAIXA DE TEXTO
<i class="fas fa-gem me-3 text-secondary"></i>Company name
</h6>
<p>
you can rows columns to organize your footer content. Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>


<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
<p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>

<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="#!" class="text-reset">Pricing</a>
</p>
<p>
<a href="#!" class="text-reset">Settings</a>
</p>
<p>
<a href="#!" class="text-reset">Orders</a>
</p>
<p>
<a href="#!" class="text-reset">Help</a>
</p>
</div>
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">

<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3 text-secondary"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3 text-secondary"></i>
info@example.com
</p>
<p><i class="fas fa-phone me-3 text-secondary"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3 text-secondary"></i> + 01 234 567 89</p>
</div>
</div>

</div>
</section>


</footer>

</footer>


<script src=https://code.jquery.com/jquery-3.3.1.slim.min.js //ADD HIPERLINK DE ARQUIVO
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script> // FAZ COM QUE UM ARQUIVO NÃO POSSA SER BAIXADO PELO USUÁRIO
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
CÓDIGO CSS
{
padding: 0; //DISTÂNCIA ENTRE O ELEMENTO E A BORDA
margin: 0; //MARGEM NOS QUATRO LADOS DO ELEMENTO
box-sizing: border-box;
letter-spacing: 1px; //ESPAÇAMENTO DE LETRA
line-height: 1.6em; //ALTURA DA LETRA
html {
scroll-behavior: smooth; //PARA SUAVIZAR A NAV BAR
body {
background: rgb(93, 224, 230); //
background: linear-gradient(90deg, #004AAD 20%,
#5DE0E6 80%);
overflow-x: hidden; //PARA TORNAR O TEXTO INVISÍVEL
font-size: 1rem; //TAMANHO DA FONTE
line-height: 1.5; //MUDA A ENTRELINHA
.navbar-toggler-icon {
border: 2px solid #004AAD;// BORDA DA NAV BAR
#pg {
font-family: "Arvo", sans-serif; // TIPO DE FONTE
#navbarDropdown {
font-family: "Arvo", sans-serif;
.dropdown-item { //CONTROLE DE FORMULÁRIO COM FOCO EM ENTRADA
::placeholder { // UMA DICA DE COMO O USUÁRIO DEVE EXECUTAR A AÇÃO
#facebook {
text-decoration: none;//
align-items: center;// ALINHAMENTO DE ELEMENTOS DENTRO DO GRUPO
justify-content: center;//ALINHAR DE ACORDO COM O ELEMENTO PRINCIPAL
background-color: black ;// ALTERAR COR DE FUNDO
#nav-two {
background-color: white;
height: 3rem;
align-items: center;
.container {
display: flex;//TORNA POSSÍVEL ALTERAR OS ELEMENTOS INDIVIDUALMENTE
justify-content: center;
#teste {
display: flex;
background-image: url(Images/TecnologiaBackground.avif); //
#cadeado {
width: 15rem;// LARGURA DE UM ELEMENTO
animation: floating 6s ease-out infinite;//ADD ANIMAÇÕES
@keyframes floating {
0% {
transform: translateY(0) rotate(0);//PERMITE O ZOOM OU ROTAÇÃO DOS ELEMENTOS
50% {
transform: translateY(-25px) rotate(4deg);
100% {
transform: translateY(0) rotate(0);
.jumbotron { //É UM COMPONENTE PARA QUE PODE SE EXTENDER
color: white;// ALTERAR COR

display: grid;
background: rgb(93, 224, 230);
background: linear-gradient(90deg, #004AAD 20%, #5DE0E6 80%);
.btn:hover { //ALTERA O CURSOR DO MOUSE
background-color: #004AAD;
border: 2px solid #004AAD;
color: #5DE0E6;
.btn-outline-success { //REMOVE AS CORES E IMAGENS DO FUNDO DE UM BOTÃO
color: #004AAD;
background-color: transparent;
background-image: none;
border-color: #004AAD;//MUDA A COR DA BORDA
CÓDIGO DA PÁG DE CURSOS

//ÚLTIMAS ETAPAS
CÓDIGO JAVA
//AINDA INCOMLETO
BANCO DE IMAGENS

Documentação Do Site - Tecnofy.14.08

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Documentação Do Site - Tecnofy.14.08

Uploaded by

Copyright:

Available Formats

Equipe : Filipe Nascimento, Ian Felipe,

Jonathan Oliveira, e Paulo Souza

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

<link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"

crossorigin="anonymous" referrerpolicy="no-referrer" />

<nav class="navbar navbar-expand-lg navbar-dark" style="background: rgb(93,224,230); // ADICIONAR NAV BAR

background: linear-gradient(90deg, #004AAD 20%, #5DE0E6 80%); // FUNDO COM GRADIENTE

padding: 0.5rem 7rem;"> //POSICIONAR A IMAGEM EM RELAÇÃO COM A MARGEM

<a class="navbar-brand" href="#"><img src="Images/TecnoFy_Logo.png" alt="" style="width: 8rem;

height: 8rem; //ALTURA

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" // ADD

aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">

<span class="navbar-toggler-icon"></span> //CLASS-> ADD CLASSE

<div class="collapse navbar-collapse" id="conteudoNavbarSuportado"> //DIV-> CRIAR GRUPO

<ul class="navbar-nav mr-auto">

<li class="nav-item active">

<a class="nav-link" href="#" id="pg"> Página Inicial <span class="sr-only">(página

</li> //ELEMENTO DE LISTA

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" // LINK NA NAV BAR

data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#"> Equipe </a>

<a class="dropdown-item" href="#">Projeto</a>

<a class="nav-link" href="#">Contato</a>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"

data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#"> Cursos </a>

<a class="dropdown-item" href="#">Consultorias</a>

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"

data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<i class="fa-solid fa-magnifying-glass"></i>

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

<a class="dropdown-item" href="#"> <input class="form-control mr-sm-2" type="search"

placeholder="Pesquisar" aria-label="Pesquisar"> </a>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

<div class="carousel-item active">

<img class="d-block w-100" src="Images/Desenvolvimento.jpg" alt="Primeiro Slide"> // ADD IAMGEM

<img class="d-block w-100" src="Images/Ensinamentos.png" alt="Segundo Slide">

<img class="d-block w-100" src="Images/analise de sistema.jpg" alt="Terceiro Slide">

<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

</div>

<br> //SALTAR LINHA

Bem Vindo ao TecnoFy!

<h2 class="display-5"> //ADD UM TÍTULO COM TAMANHO MENOR

Technology For You

<p class="lead"> //p-> ADD TEXTO

<hr class="my-4"> //HR QUEBRA TEMÁTICA ENTRE ELEMENTOS