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

M6

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information