Como coloco o site responsivo de forma mais otimizada

Tiago_Mendes · July 21, 2021 at 06:54 PM

Estou com uma questão e já não me recordo do método, sei que existia uma forma atomizada de colocar o site responsivo alguém sabe qual é?

HTML

<!DOCTYPE html>
<html lang="pt">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" media="(min-width: 800px)" href="style\style.css">
    <link rel="stylesheet" type="text/css" media="(max-width: 800px)" href="style\mobile.css">
    </head>
        <body>
        <div class="img1">
            <img src="logo.png"width="10%" height="15%">
        </div>
        <header>
            <ul class="menul">
                <li class="menuil"><a href="./contact.html">Contactos</a></li>
                <li class="menuil"><a href="./portfoliomain.html">Portfólio</a></li>
                <li class="menuil"><a href="./service.html">Serviços</a></li>    
                <li class="menuil"><a href="./about.html">Sobre Nós</a></li>
                <li class="menuil"><a href="../index.html">Home</a></li>
            </ul>
    
        </header>
        
        <div class="descimg1">
        
        <h6>Badger Tech</h6>
        
        </div>

    <div class="fc">
        
  <div class="fci">
  
    <div class="fcf">
      <img src="img/about.jpg" class="imgbout1" alt="about">
    </div>
    <div class="fcb">
      <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1> 
      <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></b> aqui.</p>
    </div>
  </div>
</div>

<div class="spcH"></div>

<div class="fc2">
        
  <div class="fci2">
  
    <div class="fcf2">
    
      <img src="img/quefazes.jpg"  class="imgbout1" alt="quefazemos" >
      
      
      
    </div>
    
    <div class="fcb2">
    
      <h1>bbbbbbbbbbbbbbbbbbbbbb</h1> 
      
      <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
      
    </div>
    
  </div>
  
</div>

<div class="fc3">
        
  <div class="fci3">
  
    <div class="fcf3">
    
      <img src="img/horas.jpg" class="imgbout1" alt="horas">
      
    </div>
    
    <div class="fcb3">
    
      <h1>cccccccccccccccccccccccccccc</h1> 
      
      <p>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p>
      
    </div>
    
  </div>
  
</div>
<br>
<br>
<br>
<br>
<br>
<br>
        <footer>
            <h6 class="copyr"> &#169; </h6>
        </footer>
        </body>
</html>

css

/* about us*/
/*fc1*/
.fc {
  background-color: transparent;
  width: 300px;
  height: 600px;
  perspective: 1000px;
  margin-top:5%;
  margin-left:10%;
}

.fci {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.fc:hover .fci {
  transform: rotateY(-180deg);
}

.fcf, .fcb {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.fcf {
  
  color: white;
}

.fcb {
  background-image: linear-gradient(#f24236 , rgba(0,0,0,0));
  color: white;
  transform: rotateY(180deg);
}

/*fc2*/

.fc2 {
  background-color: transparent;
  width: 300px;
  height: 600px;
  perspective: 1000px;
  margin-top:-44.222222%;
  margin-left:40%;
}

.fci2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.fc2:hover .fci2 {
  transform: rotateY(-180deg);
}

.fcf2, .fcb2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.fcf2 {
  
  color: white;
}

.fcb2 {
  background-image: linear-gradient(#f24236 , rgba(0,0,0,0));
  color: white;
  transform: rotateY(180deg);
}

/*fc3*/

.fc3 {
  background-color: transparent;
  width: 300px;
  height: 600px;
  perspective: 1000px;
  margin-top:-44.233333333%;
  margin-left:70%;
}

.fci3 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.fc3:hover .fci3 {
  transform: rotateY(-180deg);
}

.fcf3, .fcb3 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.fcf3 {
  
  color: white;
}

.fcb3 {
  background-image: linear-gradient(#f24236 , rgba(0,0,0,0));
  color: white;
  transform: rotateY(180deg);
}

/*a about*/

.aabout{
    color: black;
}

.imgbout1{
    width:300px;
    height:600px;
}

tem mais codigo mas decidi colocar só esta pagina

Alguém me pode ajudar?

M6 · July 23, 2021 at 01:11 PM

A forma mais fácil e rápida que conheço é usar Bootstrap.

Sign In

Como coloco o site responsivo de forma mais otimizada

Recommended Posts

Tiago_Mendes

Link to comment

Share on other sites

M6

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information