Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

CSS Deixar um site responsivo ou só pra usar notebook

Tosseg0

Por Tosseg0
em Web e banco de dados

 Compartilhar

Posts recomendados

Tosseg0
 

Tosseg0

Postado
Postado

Estou quase finalizando o projeto final da faculdade porém fiz ele tudo no computador, e agora faltando 1 semana, estava revisando e quando abro ele no notebook ele muda tudo. Achei que eu não ia ter problema pra arrumar na hora porém não estou conseguindo arrumar uma das pagina aqui, são três e uma já foi e as outras 2 não estou conseguindo deixar do tamanho certo do notebook. Vou mandar uma das página e se poderem me ajudar, peguei o código inicial do colega pra fazer a parte do front e isso prejudicou muito também. Estou usando js na página no html pois estou usando o py com flask, ainda não olhei se da pra colocar em pasta separada mas provalvemente dar só um aviso pra não estranharem o js junto com html.

 

HTML  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="static/home.css">
    <script src="https://kit.fontawesome.com/808cb3fb50.js" crossorigin="anonymous"></script>
    <link href="https://fonts.cdnfonts.com/css/helvetica-neue-55" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="sweetalert2.min.js"></script>
    <link rel="stylesheet" href="sweetalert2.min.css">

                

    <title>Document</title>
</head>
<body >
    <header>    
        <img src="static/LOGO.jpg">
        <div class="info-header">
            <div class="logo">
              <h1>Gestao de Banco</h1>
            </div>
      
          </div>
          
            <div class="user-mostrar">
                <i class="fa-solid fa-user"></i> <h3 class="h3-icone-user">Olá, Joao</h3> <a href="bars"><i class="fa-solid fa-arrow-down"></i></a>
        </div> 
           <!-- <i class="fa-solid fa-bars"></i></a> -->

    </header>
   
    <nav class="nav-links">
        <a href="/home"  > <i class="fa-solid fa-house"></i>HOME</a>
        <hr>
        <br>
        <a href="/churn"> <i class="fa-solid fa-person"></i>PREVISÃO DE CHURN</a>
        <hr>
        <br>
        <a href="/dashboard"> <i class="fa-solid fa-table-columns"></i>Dashboard</a>
        <hr>
        <br>
        <a href="/relatorio"> <i class="fa-solid fa-table"></i>Relatorio</a>
        <hr>
    </nav>

    <template id="bars" class="temaplate-bars">
        <button id="close-bars" class="close-button">X</button>

        <nav class="navbars">
  
          <!--<div class="icon-navbar">
          </div> -->
          <img   src="static/user.png" alt="">
          <h3 >Olá, Joao</h3> 
          <br>
        <div class="linha"></div>
          <br>
           <a href=""> <i class="fa-solid fa-face-smile"></i> Conta</a>
           <hr>
          <br>
           <a href=""> <i class="fa-solid fa-gear"></i> configurações </a><hr>
          <br>
           <a href=""> <i class="fa-solid fa-question"></i> Fale conosco </a><hr>
           <br>
           <a href=""> <i class="fa-solid fa-person"></i> Sobre-nós </a>
        </nav>
     
    </template>
    <main class="content-home">
        <div class="slider">
            <div class="slides"> 
                <input type="radio" name="radio-btn" id="radio1">
                <input type="radio" name="radio-btn" id="radio2">
                <input type="radio" name="radio-btn" id="radio3">
                <input type="radio" name="radio-btn" id="radio4">
            


            <div class="slide first"  > <img src="static/sobre.png" alt="Imagem 1"> </div>
            <div class="slide" > <img src="static/missao.png" alt="Imagem 2"></div>
            <div class="slide"  > <img src="static/compromisso.png" alt="Imagem 3"></div>
            <div class="slide"  > <img src="static/solucao.png" alt="Imagem 4"></div>

               <!-- Navigation--> 
                <div class="navigation-auto">
                    <div class="auto-btn1"></div>
                    <div class="auto-btn2"></div>
                    <div class="auto-btn3"></div>
                    <div class="auto-btn4"></div>

                </div>

        </div>

        <div class="manual-navigation">
            <label for="radio1" class="manual-btn"></label>
            <label for="radio2"  class="manual-btn"></label>
            <label for="radio3"  class="manual-btn"></label>
            <label for="radio4"  class="manual-btn"></label>

        </div>            
          </div>

        <div class="servicos-container">
            <h3>Servicos: </h3>
            <div class="box-services" >
                <div class="services">
                    <i class="fa-solid fa-Vídeo"></i>
                                        <h3>Monitoramento em Tempo Real</h3>
                   
                </div>
                <div class="services"><i class="fa-solid fa-money-bill"></i>
                    <h3>Previsao de Custos </h3>
                    </div>
                <div class="services"><i class="fa-solid fa-coins"></i>
                    <h3>Detecção de Fraudes Financeiras</h3>
                    </div>
                <div class="services"><i class="fa-regular fa-credit-card"></i>
                    <h3>Análise de Risco de Crédito</h3>
                    </div>
            </div>
           <div class="box-services">
                <div class="services">
                    <i class="fa-solid fa-chart-simple"></i>
                    <h3>Prevenção e Intervenção</h3>
                   
                </div>
                <div class="services"><i class="fa-solid fa-money-bill"></i>
                    <h3>Monitoramento em Tempo Real </h3>
                    </div>
                </div>
        </div>
        
     </main>
     <main id="main-bars"  style="display: none;" class="bars-main"></main>


    <script>

  // Abri a seta pra baixo
  const barsIcon = document.querySelector("a[href='bars']");
const mainContent = document.querySelector("#main-bars");
const templateBars = document.querySelector("#bars");

barsIcon.addEventListener("click", function (e) {
  e.preventDefault(); // Impede o comportamento padrão do link

  // Verifica se o templateBars existe
  if (templateBars) {
    // Define o conteúdo do mainContent com o conteúdo do templateBars
    mainContent.innerHTML = templateBars.innerHTML;
    mainContent.style.display = 'block';

  }
});


// funcoes do slides       
let count = 1
document.getElementById("radio1").checked = true

setInterval( function(){
    nextImage()
}, 5000)
  
function nextImage() {
    count++
    if(count > 4 ){
        count = 1
    }

    document.getElementById("radio"+count).checked = true

}
let elementosServices = document.querySelectorAll('.services');
elementosServices.forEach(function(elemento) {
  elemento.addEventListener('click', function() {
    Swal.fire({
  title: "Indisponivel",
  text: "Em breve...",
  icon: "error"
});
  });
});

    </script>
</body>
</html>


CSS  

* {
	/* Remove a margem externa de todos os lados do elemento. */
	margin: 0;

	/* Remove o espaçamento interno de todos os lados do elemento. */
	padding: 0;

	/* Inclui o preenchimento e a borda na largura e altura. */
	box-sizing: border-box;
}

body {
	/* Exibição flexível.                          */
	/* Torna o elemento um flex container          */
	/* e os seus elementos internos em flex-itens. */
	display: flex;

	/* Quebra de linha quando os itens não couberem na largura da tela. */
	flex-wrap: wrap;

	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	flex: 1 1 100vw;

	/* Margem de todos os lados. */
	margin: 3px;
}


.content-home{
	/* Realizar a subtração de 100% da altura vertical menos a soma    */
	/* da altura dos elementos ( 400px ) com as suas margens ( 36px ). */
	/* background: linear-gradient(135deg, #5C805B, #dff8e3);*/
	/* background-image: url(/static/images/banco.jpg) !important;
	background-size: cover;
	background-repeat: no-repeat; /* Isso evita a repetição da imagem 
    background-attachment: fixed; */
	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	background: linear-gradient(135deg, #5C805B, #dff8e3);
	height: 100%;
	flex-direction: column;
	position: relative;
	flex: 20 1 500px;

   
	
} 
header, .nav-links, .content-home, aside, footer {
	/* Cor do fundo. */
	background: #dff8e3;

	/* Exibição flexível.                          */
	/* Torna o elemento um flex container          */
	/* e os seus elementos internos em flex-itens. */
	display: flex;

	/* Margem externa de todos os lados. */
	margin: 3px;
}
header {

	/* Altura do elemento. */
	height: 100px;
	background-color: #5C805B;
    justify-content: space-between;
	/* Junção de flex-grow, flex-shrink e flex-basis.  */
	/* flex-grow – Habilidade de um flex item crescer. */
	/* flex-shrink - Capacidade de redução do item.    */
	/* flex-basis – Tamanho inicial do item.           */
	flex: 1 1 100vw;
}
header i {
    font-size: 40px;
    padding: 10px;
    transition: transform 0.2s;
    color: white;
}
header i:hover {
    transform: scale(1.1);
}
.user-mostrar {
    display: flex;
    align-items: center;
    margin-right: 10px;
    position: relative;
    right: 100px;
}
.user-mostrar i {
    font-size: 22px;
}
.info-header {
    color: RGB(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 25px;
    color: white;
}
.h3-icone-user{
    color: RGB(0, 0, 0);
}
.icone-guia-pesquisar {
    display: flex;
}
.icone-header {
 display: flex;
 justify-content: flex-start;

}




.nav-links {
    flex: 1 1 200px;
    flex-direction: column;
    padding: 20px;
}
.nav-links a {
    
    padding: 8px 13px;
    display: block;
    color: #203B22;
    text-decoration: none;
    width: 100%;
    transition: transform 0.2s  ;
}
.nav-links a:hover {
    background-color: #95ec7f;
    border-left: 6px solid green;
    color: black;
    transform: scale(1.1);
}

.nav-links i {
    margin-right: 5px;
}

/* Nav da seta pra baixo */
.bars-main {
    margin-top: 5px;
    margin-right: 2px;
    position: absolute;
    top: 0;
    right: 0;
    background-color:RGB(101, 211, 128) ;
    width: 200px;
    height: 50%;
    border-radius: 8px;
}
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 20px;
  }

.navbars img{
    position: relative;
    left: 20px;
     display: flex;   
     justify-content: center;
     align-items: center;
     width: 110px;
     height: 110px;
     border-radius: 80px;
     margin-left: 3px;


}
#icone-navbars {
    font-size: 80px;
   
}
.navbars{
    background-color: transparent;
    width: 100%;
    height: 100%;
 
}
.navbars h3 {
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-top: 15px;
    font-size: 30px;
}
.linha {
    width: 100%;
    height: 3px;
    border: solid 2px;
}
.navbars  a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 10px;
    margin-left: 3px;
    transition: transform 0.2s;

}
.navbars a:hover {
    transform: scale(1.08);
    background-color: #f1e9ea;
    border-left: 8px solid #1B4001;
    


}
/* fim da nav da seta pra baixo */
.slider {
	margin: 0 auto;
	width: 1600px;
	height: 500px;
	overflow: hidden;
}

.slides {
	width: 400%;
	height: 500px;
	display: flex;
}
.slides input {
	display: none;
}
.slide {
	position: relative;
	width: 25%;
	transition: 2s;
}

.manual-navigation {
	position: absolute;
	margin-top: -40px;
	width: 800px;
	display: flex;
	justify-content: center;
}
.manual-btn {
	border: 2px solid black;
	padding: 5px;
	border-radius: 10px;
	cursor: pointer;
	transition: 1s;
}
.manual-btn:not(:last-child){
	margin-right: 40px;
}
.manual-btn:hover {
	background-color: black;
}

#radio1:checked ~ .first {
	margin-left: 0;
}
#radio2:checked ~ .first {
	margin-left: -25%;
}
#radio3:checked ~ .first {
	margin-left: -50%;
}
#radio4:checked ~ .first {
	margin-left: -75%;
}
.navigation-auto div {
	border: 2px solid #20a6ff;
	padding: 5px;
	border-radius: 10px;
	cursor: pointer;
	transition: 1s;
}
.navigation-auto {
	position: absolute;
	width: 800px;
	margin-top: 460px;
	display: flex;
	justify-content: center;
}

.navigation-auto div:not(:last-child){
	margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1 {
	background-color: black;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
	background-color: black;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
	background-color: black;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
	background-color: black;
}


/* CSS SERVICOS */
.servicos-container h3 {
	margin-left: 10px;
	font-size: 30px;
	font-family: 'Heveltica Neue', sans-serif;

}
.servicos-container {
	width: 100%;
	display: block;
}

.box-services {
	margin-top: 10px;
	display: flex;
	width: 100%;
}
.services {

	margin-top: 60px;
	margin-right: 10px;
	width: 400px;
	height: 200px;
	display: block;
	text-align: center;   
	transition: 500ms linear;

}
.services:hover {
	-webkit-filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
    filter: drop-shadow(15px 10px 5px rgba(0,0,0,.5));
	background: #a7f3b4;
}
.services i {
	font-size: 100px;
	margin-top: 8px;
}
.services h3 {
	font-size: 30px;
	font-family: 'Heveltica Neue', sans-serif;
	margin-top: 20px;
	margin-bottom: 40px;
}
.services span {
	font-size: 20px;
	font-family: 'Heveltica Neue', sans-serif;
}

 

Link para o comentário
Compartilhar em outros sites
Tosseg0
 

Tosseg0

Postado
  • Autor
Postado

@MailingTester Como  a tela esta ficando  no PC onde estou finalizando o projeto, a única pagina que esta certa é o dashboard. Sem contar que quero adicionar mais algumas coisa no projeto. E sim estou usando paginas diferente pra fazer a navegação pois minha dupla fez desse jeito e ele esta usando troca de pagina com python image.thumb.png.1f28b4ea8cbeddefabdfacb6e1ce4286.png

 

 

Agora como fica quando abro no notebook:

 

image.thumb.png.7b79cdb42ce9352cbbed180e9b50850d.png

 

Estou precisando consertar isso, pra poder apresentar na faculdade.

Link para o comentário
Compartilhar em outros sites
washalbano
 

washalbano

Postado
Postado

É bem como o colega argumentou:
Se não tiver o código fonte original, que transpilou nesse daí:

1 hora atrás, MailingTester disse:

talvez seja mais rápido escrever novamente

Do zero!!!
 

Comecei um aqui. Veja se te ajuda:
https://codepen.io/washalbano/pen/YzBLVjv

image.png.e9037095c6ac5a01bf0997772a0b3852.png
Visualiza bem em telas bem pequenas. mas ainda não está 100% responsivo

  • Curtir 1
Link para o comentário
Compartilhar em outros sites
extremedll
 

extremedll

Postado
Postado

@Tosseg0 tive que fazer diversas alterações no código pra ser um layout minimamente responsivo

 

(depois você pode usar uma extensão do vscode para comparar os arquivos e ver as alterações. qualquer dúvida sobre as alterações é só falar)

 

OBS: AS IMAGENS NÃO CARREGARAM POIS ELA ESTÃO NA SUA MÁQUINA

OBS: OS TESTES FORAM BASEADO NUMA TELA MINIMA DE 1360X768 (QUALQUER NOTEBOOK DE 2014 PRA FRENTE JÁ TEM ESSA RESOLUÇÃO POR "padrão" )

 

image.thumb.png.b421b9b26b242569a792ee650b24463c.png

 

  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="static/home.css" />
    <script src="https://kit.fontawesome.com/808cb3fb50.js" crossorigin="anonymous"></script>
    <link href="https://fonts.cdnfonts.com/css/helvetica-neue-55" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="sweetalert2.min.js"></script>
    <link rel="stylesheet" href="sweetalert2.min.css" />

    <title>Document</title>
  </head>
  <body>
    <header>
      <img src="static/LOGO.jpg" />
      <div class="info-header">
        <div class="logo">
          <h1>Gestao de Banco</h1>
        </div>
      </div>

      <div class="user-mostrar">
        <i class="fa-solid fa-user"></i>
        <h3 class="h3-icone-user">Olá, Joao</h3>
        <a href="bars"><i class="fa-solid fa-arrow-down"></i></a>
      </div>
      <!-- <i class="fa-solid fa-bars"></i></a> -->
    </header>

    <template id="bars" class="temaplate-bars">
      <button id="close-bars" class="close-button">X</button>

      <nav class="navbars">
        <!--<div class="icon-navbar">
          </div> -->
        <img src="static/user.png" alt="" />
        <h3>Olá, Joao</h3>
        <br />
        <div class="linha"></div>
        <br />
        <a href=""> <i class="fa-solid fa-face-smile"></i> Conta</a>
        <hr />
        <br />
        <a href=""> <i class="fa-solid fa-gear"></i> configurações </a>
        <hr />
        <br />
        <a href=""> <i class="fa-solid fa-question"></i> Fale conosco </a>
        <hr />
        <br />
        <a href=""> <i class="fa-solid fa-person"></i> Sobre-nós </a>
      </nav>
    </template>
    <main class="content-home">
      <nav class="nav-links">
        <a href="/home"> <i class="fa-solid fa-house"></i>HOME</a>
        <hr />
        <br />
        <a href="/churn"> <i class="fa-solid fa-person"></i>PREVISÃO DE CHURN</a>
        <hr />
        <br />
        <a href="/dashboard"> <i class="fa-solid fa-table-columns"></i>Dashboard</a>
        <hr />
        <br />
        <a href="/relatorio"> <i class="fa-solid fa-table"></i>Relatorio</a>
        <hr />
      </nav>
      <div class="conteudo-principal">
        <div class="slider">
          <div class="slides">
            <input type="radio" name="radio-btn" id="radio1" />
            <input type="radio" name="radio-btn" id="radio2" />
            <input type="radio" name="radio-btn" id="radio3" />
            <input type="radio" name="radio-btn" id="radio4" />

            <div class="slide first"><img src="static/sobre.png" alt="Imagem 1" /></div>
            <div class="slide"><img src="static/missao.png" alt="Imagem 2" /></div>
            <div class="slide"><img src="static/compromisso.png" alt="Imagem 3" /></div>
            <div class="slide"><img src="static/solucao.png" alt="Imagem 4" /></div>

            <!-- Navigation-->
            <div class="navigation-auto">
              <div class="auto-btn1"></div>
              <div class="auto-btn2"></div>
              <div class="auto-btn3"></div>
              <div class="auto-btn4"></div>
            </div>
          </div>

          <div class="manual-navigation">
            <label for="radio1" class="manual-btn"></label>
            <label for="radio2" class="manual-btn"></label>
            <label for="radio3" class="manual-btn"></label>
            <label for="radio4" class="manual-btn"></label>
          </div>
        </div>

        <div class="servicos">
          <h3>Servicos:</h3>
          <div class="servicos-container">
            <div class="services">
              <i class="fa-solid fa-Vídeo"></i>
              <h3>Monitoramento em Tempo Real</h3>
            </div>
            <div class="services">
              <i class="fa-solid fa-money-bill"></i>
              <h3>Previsao de Custos</h3>
            </div>
            <div class="services">
              <i class="fa-solid fa-coins"></i>
              <h3>Detecção de Fraudes Financeiras</h3>
            </div>
            <div class="services">
              <i class="fa-regular fa-credit-card"></i>
              <h3>Análise de Risco de Crédito</h3>
            </div>
            <div class="services">
              <i class="fa-solid fa-chart-simple"></i>
              <h3>Prevenção e Intervenção</h3>
            </div>
            <div class="services">
              <i class="fa-solid fa-money-bill"></i>
              <h3>Monitoramento em Tempo Real</h3>
            </div>
          </div>
        </div>
      </div>
    </main>
    <main id="main-bars" style="display: none" class="bars-main"></main>

    <script>
      // Abri a seta pra baixo
      const barsIcon = document.querySelector("a[href='bars']");
      const mainContent = document.querySelector("#main-bars");
      const templateBars = document.querySelector("#bars");

      barsIcon.addEventListener("click", function (e) {
        e.preventDefault(); // Impede o comportamento padrão do link

        // Verifica se o templateBars existe
        if (templateBars) {
          // Define o conteúdo do mainContent com o conteúdo do templateBars
          mainContent.innerHTML = templateBars.innerHTML;
          mainContent.style.display = "block";
        }
      });

      // funcoes do slides
      let count = 1;
      document.getElementById("radio1").checked = true;

      setInterval(function () {
        nextImage();
      }, 5000);

      function nextImage() {
        count++;
        if (count > 4) {
          count = 1;
        }

        document.getElementById("radio" + count).checked = true;
      }
      let elementosServices = document.querySelectorAll(".services");
      elementosServices.forEach(function (elemento) {
        elemento.addEventListener("click", function () {
          Swal.fire({
            title: "Indisponivel",
            text: "Em breve...",
            icon: "error",
          });
        });
      });
    </script>
  </body>
</html>

  

* {
  /* Remove a margem externa de todos os lados do elemento. */
  margin: 0;

  /* Remove o espaçamento interno de todos os lados do elemento. */
  padding: 0;

  /* Inclui o preenchimento e a borda na largura e altura. */
  box-sizing: border-box;
}

body {
  /* Exibição flexível.                          */
  /* Torna o elemento um flex container          */
  /* e os seus elementos internos em flex-itens. */
  display: flex;

  /* Quebra de linha quando os itens não couberem na largura da tela. */
  flex-wrap: wrap;

  /* Junção de flex-grow, flex-shrink e flex-basis.  */
  /* flex-grow – Habilidade de um flex item crescer. */
  /* flex-shrink - Capacidade de redução do item.    */
  /* flex-basis – Tamanho inicial do item.           */
  flex: 1 1 100vw;

  /* Margem de todos os lados. */
  margin: 3px;
}

.content-home {
  /* Realizar a subtração de 100% da altura vertical menos a soma    */
  /* da altura dos elementos ( 400px ) com as suas margens ( 36px ). */
  /* background: linear-gradient(135deg, #5C805B, #dff8e3);*/
  /* background-image: url(/static/images/banco.jpg) !important;
	background-size: cover;
	background-repeat: no-repeat; /* Isso evita a repetição da imagem 
    background-attachment: fixed; */
  /* Junção de flex-grow, flex-shrink e flex-basis.  */
  /* flex-grow – Habilidade de um flex item crescer. */
  /* flex-shrink - Capacidade de redução do item.    */
  /* flex-basis – Tamanho inicial do item.           */
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  position: relative;
  gap: 10px;
  max-width: 100% !important;
  background-color: #fff;
}

.conteudo-principal {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  gap: 10px;
  max-width: 100% !important;
  background: #dff8e3;
  overflow-x: hidden;
}
header,
aside,
footer {
  /* Cor do fundo. */
  background: #dff8e3;

  /* Exibição flexível.                          */
  /* Torna o elemento um flex container          */
  /* e os seus elementos internos em flex-itens. */
  display: flex;

  /* Margem externa de todos os lados. */
  margin: 3px;
}
header {
  /* Altura do elemento. */
  height: 100px;
  background-color: #5c805b;
  justify-content: space-between;
  /* Junção de flex-grow, flex-shrink e flex-basis.  */
  /* flex-grow – Habilidade de um flex item crescer. */
  /* flex-shrink - Capacidade de redução do item.    */
  /* flex-basis – Tamanho inicial do item.           */
  flex: 1 1 100vw;
}
header i {
  font-size: 40px;
  padding: 10px;
  transition: transform 0.2s;
  color: white;
}
header i:hover {
  transform: scale(1.1);
}
.user-mostrar {
  display: flex;
  align-items: center;
  margin-right: 10px;
  position: relative;
  right: 100px;
}
.user-mostrar i {
  font-size: 22px;
}
.info-header {
  color: RGB(0, 0, 0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 25px;
  color: white;
}
.h3-icone-user {
  color: RGB(0, 0, 0);
}
.icone-guia-pesquisar {
  display: flex;
}
.icone-header {
  display: flex;
  justify-content: flex-start;
}

.nav-links {
  display: flex;
  flex-direction: column;
  padding: 20px;
  max-width: 250px;
  background-color: #dff8e3;
  width: 250px;
  min-width: 100%;
}
.nav-links a {
  padding: 8px 13px;
  display: block;
  color: #203b22;
  text-decoration: none;
  width: 100%;
  transition: transform 0.2s;
}
.nav-links a:hover {
  background-color: #95ec7f;
  border-left: 6px solid green;
  color: black;
  transform: scale(1.1);
}

.nav-links i {
  margin-right: 5px;
}

/* Nav da seta pra baixo */
.bars-main {
  margin-top: 5px;
  margin-right: 2px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: RGB(101, 211, 128);
  width: 200px;
  height: 50%;
  border-radius: 8px;
}
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 20px;
}

.navbars img {
  position: relative;
  left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 110px;
  border-radius: 80px;
  margin-left: 3px;
}
#icone-navbars {
  font-size: 80px;
}
.navbars {
  background-color: transparent;
  width: 100%;
  height: 100%;
}
.navbars h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  font-size: 30px;
}
.linha {
  width: 100%;
  height: 3px;
  border: solid 2px;
}
.navbars a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 10px;
  margin-left: 3px;
  transition: transform 0.2s;
}
.navbars a:hover {
  transform: scale(1.08);
  background-color: #f1e9ea;
  border-left: 8px solid #1b4001;
}
/* fim da nav da seta pra baixo */
.slider {
  width: 1600px;
  height: 500px;
  overflow: hidden;
  max-width: calc(100% - 260px) !important;
}

.slides {
  width: 400%;
  height: 500px;
  display: flex;
}
.slides input {
  display: none;
}
.slide {
  position: relative;
  width: 25%;
  transition: 2s;
}

.manual-navigation {
  position: absolute;
  margin-top: -40px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.manual-btn {
  border: 2px solid black;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}
.manual-btn:not(:last-child) {
  margin-right: 40px;
}
.manual-btn:hover {
  background-color: black;
}

#radio1:checked ~ .first {
  margin-left: 0;
}
#radio2:checked ~ .first {
  margin-left: -25%;
}
#radio3:checked ~ .first {
  margin-left: -50%;
}
#radio4:checked ~ .first {
  margin-left: -75%;
}
.navigation-auto div {
  border: 2px solid #20a6ff;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}
.navigation-auto {
  position: absolute;
  width: 100%;
  margin-top: 460px;
  display: flex;
  justify-content: center;
}

.navigation-auto div:not(:last-child) {
  margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1 {
  background-color: black;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
  background-color: black;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
  background-color: black;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
  background-color: black;
}

/* CSS SERVICOS */
.servicos h3 {
  margin-left: 20px;
  font-size: 30px;
  font-family: "Heveltica Neue", sans-serif;
}
.servicos-container {
  width: calc(100% - 250px);
  display: block;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box-services {
  margin-top: 10px;
  display: flex;
  width: 100%;
}
.services {
  margin-top: 60px;
  margin-right: 10px;
  max-width: 350px;
  height: 200px;
  display: block;
  text-align: center;
  transition: 500ms linear;
  justify-content: space-between;
}
.services:hover {
  -webkit-filter: drop-shadow(15px 10px 5px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(15px 10px 5px rgba(0, 0, 0, 0.5));
  background: #a7f3b4;
}
.services i {
  font-size: 100px;
  margin-top: 8px;
}
.services h3 {
  font-size: 30px;
  font-family: "Heveltica Neue", sans-serif;
  margin-top: 20px;
  margin-bottom: 40px;
}
.services span {
  font-size: 20px;
  font-family: "Heveltica Neue", sans-serif;
}

 

  • Amei 1
Link para o comentário
Compartilhar em outros sites
Tosseg0
 

Tosseg0

Postado
  • Autor
Postado

@extremedll Mano obrigado realmente me salvou demais. Como meu amigo fez  esse layout vendo um vídeo no youtube e eu já não manjo css e o cara do Vídeo ainda usa flex grid e etc.. E não entendo nada de flex grid e nem ele também kk. Obrigado mesmo mano a todos ae aprendi muito com vcs @MailingTester  @washalbano e fazendo aqui o meu projeto  eu percebi que odeio frontend kkkk

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

 

GRÁTIS: ebook Redes Wi-Fi – 2ª Edição

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!