Jump to content

Question

Layout Responsivo Desalinhado: Estou criando um site de filmes e a cada momento que incluo algo o layout se estica para a direita ficando impossível de concertar sou novato e não sei onde estou errando me ajudem.

 

Estou tentando criar um site de filmes responsivo mais o layout estar completamente desalinhado estirando a todo momento que incluo alguma  imagem para a direita me ajudem por favor.

 

 

Codigo CSS abaixo:

 

*{
    
  padding: 0px;
  margin: 0px;
}
a{
    text-decoration:none;
    color:#999;
}

body{
    font-family: arial;
    color:#eaeeef;
    background-color: #36454f; /*Fundo Escur0*/ 
    margin-left: -100px;
    margin-top: -16px;


}
.font400{
font-size: 4em;


}
.font350{
font-size: 3.5em;

}     


.font300 {
font-size: 3em;

}

.font200 {
font-size: 2em;

}

.font180 {
font-size: 1.8em;

}

.font12{
    font-size:12px;

}


.font10{
    font-size:10px;
}
.font18{
    font-stretch: 18px;
}
.branca{
    color:#FFFFFF
}


.cinza {
    color: #CBCCCD;
}

.vermelho_1{
    color:#ff0000;
}

ul{
    list-style:none;
}

/*Imagem do Menu*/
img{
    width:35px;
    margin-left: 100px;
    margin-top: 10px;
    
}

input[type="checkbox"]
    
{
    display:none;
}

nav
{
    background-color: rgba(16,16,16,.5);
    width:150px;
    height:100%;
    left: -150px;
    position: absolute;
    transition: all .5s;
    
    
}

input[type="checkbox"]:checked ~ nav
{
    transform: translateX(150px);
}

ul{
    top:80px;
    position:absolute;
    width: 100%;
}

a{
    
    background: block;
    padding:10px 5px;
    color: white;
}

a:hover{
     background-color: rgba();
     color: black;
}

label{
    padding: 15px;
    position: absolute;
    z-index:1;
    /*icone*/
}


/* Formatação de chamada principal da imagem em destaque*/
.chamada{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://img.youtube.com/vi/NOEQ7wVKIew/maxresdefault.jpg);
    background-position: center center; /* Centraliza a imagem no centro da tela*/
    background-repeat: no-repeat;/* Não repete a imagem*/
    background-size: cover; /* Ocupa toda a tela sem distorcer a imagem*/
    background-attachment: fixed;
    height: 100vh; /*100% do view height*/
    display: flex; 
}   

.area_chamada {
    margin: auto;
    margin-bottom:150px;
    text-align: center;

}

h2 {
    margin: 0px;
}

.titulo{
     font-family: 'Open Sans', sans-serif;
     text-transform: uppercase;
     line-height: 1.1em;
     font-weight: 400;
     text-shadow: 2px 3px 0px rgba(0,0,0,.8);
     color: #CBCCCD;
     
     
}

.subtitulo{
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    line-height: 1.1em;
    font-weight: 400;
    text-shadow: 2px 3px 0px rgba(0,0,0,.8);
    height: 80px;

}

.parte_superior{
    /*banner de 280px na largura e 120px*/
    width: 100vw;
    height: 0px;
    display: flex;
    align-items: center;
    margin-top: 17px;
    margin-left: 50px;


}

/*imagem do logo*/
.logo> img {
     width:250px;
     margin-top: 0px ;
          margin: 160px;
     

}

.pesquisa {
 width:500px;
 height:40px;
 margin:200px auto;
 display: flex;
 margin-top: 80px;
 margin-left: 40px;
 border-bottom-width: 2px;

}

#texto {
 width:520px;
 height:50px;
 float:left;
 font-family:Arial, Helvetica, sans-serif ;
 font-size:18px;
 background: #151515;
 border: #151515;
 border-radius: 6px 0px 0px 6px;
 display: flex;
 color: white;
 justify-content: space-around;
 

}

#texto:focus {
 border: solid 2px #1f1f1f;


}

.btn {
 height:34px;
 width:17px;
 background:#ff0000;
 padding:6px 8px;
 cursor:pointer;
 display: flex;
 margin-top: -10px;
 border: solid 0px #ff0000;
 border-radius: 0px ;
 margin-left: 0px;
 
}

button{
    padding: 12px;
    border-width: 0px;
    border-radius: 0px 6px 6px 0px;
    height: 50px;
    background: #ff0000;
    width: 60px;
}
   
   /*Move todo o Slide*/
.miniaturas{
    
     height: 290px;
         width: 180px;
         display: flex;
         padding: 0px 2%;
         margin-top: -250px;
         margin-left: 90px;
         margin-top: -100px;
}

/*Move todo o menu do slide*/
.horizontal{
       display: flex;
       justify-content: center ;
        margin-left: 70px;
       justify-content: space-around;
       width: 200px;
       color: dimgrey;
       margin-top: 450px;
        
}

.ativo{
    margin:0px;
    color:white;
}
     
   .black_clover> img{
         
         height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;

         }

.black_clover > img:hover{
    opacity: 0.2;
}


.one_punch_man> img{

         height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
          position: relative;
         z-index: 1;
         transition: all 0.5s linear;

  }     

    .one_punch_man > img:hover{
    opacity: 0.2;

}

.Dororo> img{
    height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
          position: relative;
         z-index: 1;
         transition: all 0.5s linear;

  }     

    .Dororo > img:hover{
    opacity: 0.2;
}

.shingek_3>img{
      height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
          position: relative;
         z-index: 1;
         transition: all 0.5s linear;


  }     

    .shingek_3 > img:hover{
    opacity: 0.2;

}

.Mob>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
          position: relative;
         z-index: 1;
         transition: all 0.5s linear;


  }     

    .Mob > img:hover{
    opacity: 0.2;


}

.kimetsu_no_yaiba>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Kimetsu_no_yaiba > img:hover{
    opacity: 0.2;  

}

.figuras {
    display: flex;
    margin-left: 50px;
    justify-content: space-between;
    padding: 4%;
    height: 290px;
    width: 180px;


    
    }
        figure {
              margin: 0px;
              display: flex;


}

figcaption{
    width: 180px;
    height: 290px;
    background-color: black;
    display: flex;
    min-height:290px;
    margin: 10px;
    margin-top: -300px;
    
}


.grana{
    display: flex;
}

.baner{
    padding-top:   100px;
    display: flex;

    
}

/*move o banner e a primeira coluna de animes*/
.bittube>a>img{
    display: flex;
    width: 400px;
    margin: 0px 580px; 
    margin-top: 20px;


}

.posts{
    margin-top:  100px;
    padding: 0px -400px;
    display: flex;
    margin-left: 180px;
    


}

.primeira{
    display: flex;
}


.primeira > ul > li{
    display:inline-block;
    margin-top: 1220px;
    margin-left: 20px;
}


.One_Piece>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .One_Piece> img:hover{
    opacity: 0.2;  

}

.tate_no_yusha>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .tate_no_yusha> img:hover{
    opacity: 0.2;  


}

.naruto_shippuden>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .naruto_shippuden> img:hover{
    opacity: 0.2;  


}

.Nanatsu_no_taizai>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Nanatsu_no_taizai> img:hover{
    opacity: 0.2;  


}

.dragon_ball_super>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .dragon_ball_super> img:hover{
    opacity: 0.2;  


}

.boku_no_hero_academia>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .boku_no_hero_academia> img:hover{
    opacity: 0.2;  

}
 /*Move toda a segunda coluna de animes*/
.coluna{
    margin-top:   50px ;
    margin-left: 180px;
    display: flex;

}

.segunda{
    display: flex;


}


.boruto>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .boruto> img:hover{
    opacity: 0.2;  


}


.isekai_maou>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .isekai_maou> img:hover{
    opacity: 0.2;  


}


.bleach>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .bleach> img:hover{
    opacity: 0.2;  


}


.fairy_tail>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .fairy_tail> img:hover{
    opacity: 0.2;  

}


.tensei_shitara>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .tensei_shitara> img:hover{
    opacity: 0.2;  

}


.Tokyo_Ghoul>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Tokyo_Ghoul> img:hover{
    opacity: 0.2;  


}
 /*Move toda a  coluna de séries*/
.coluna_series{
    margin-top:   120px ;
    margin-left: 180px;
    display: flex;

}

.primeira_series{
    display: flex;


}


.primeira_series > ul > li{
    display:inline-block;
    margin-top: 2020px;
    margin-left: 20px;

}


.Atirador>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Atirador> img:hover{
    opacity: 0.2;  
}


.Game_of_thrones>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Game_of_thrones> img:hover{
    opacity: 0.2;  
}


.La_casa_de_papel>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .La_casa_de_papel> img:hover{
    opacity: 0.2;  
}


.lucifer>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .lucifer> img:hover{
    opacity: 0.2;  
}


.sons_of_anarchy>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .sons_of_anarchy> img:hover{
    opacity: 0.2;  
}


.vikings>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .vikings> img:hover{
    opacity: 0.2;  


}
 /*Move toda a  coluna de séries*/
.coluna_series2{
    margin-top:   50px ;
    margin-left: 180px;
    display: flex;

}

.segunda_series2{
    display: flex;


}


.segunda_series2 > ul > li{
    display:inline-block;
    margin-top: 2020px;
    margin-left: 20px;

}


.The_purge>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .The_purge> img:hover{
    opacity: 0.2;  

    }


.titans>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .titans> img:hover{
    opacity: 0.2;  

    }


.the_big_bang_theory>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .the_big_bang_theory> img:hover{
    opacity: 0.2;  

    }


.o_último_guardião>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .o_último_guardião> img:hover{
    opacity: 0.2;  

    }


.legends_of_tomorrow>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .legends_of_tomorrow> img:hover{
    opacity: 0.2;  

    }


.chernobyl>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .chernobyl> img:hover{
    opacity: 0.2;  


}
 /*Move toda a  coluna de séries*/
.coluna_fimes{
    margin-top:   120px ;
    margin-left: 180px;
    display: flex;

}

.segunda_filmes{
    display: flex;


}


.segunda_filmes > ul > li{
    display:inline-block;
    margin-top: 2820px;
    margin-left: 20px;

}


.avangers_Age>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .avangers_Age> img:hover{
    opacity: 0.2;  

    }


.capitan_marvel>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .capitan_marvel> img:hover{
    opacity: 0.2;  

}


.capitao_america>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .capitao_america> img:hover{
    opacity: 0.2;  

    }


.guerra_civil>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .guerra_civil> img:hover{
    opacity: 0.2;  

    }

.doutor_estranho>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .doutor_estranho> img:hover{
    opacity: 0.2;  

    }


.hulk_o_inacreditavel>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .hulk_o_inacreditavel> img:hover{
    opacity: 0.2;  

    }

.coluna_fimes1{
    margin-top:   50px ;
    margin-left: 180px;
    display: flex;

}

.segunda_filmes1{
    display: flex;


}


.segunda_filmes1> ul > li{
    display:inline-block;
    margin-top: 2820px;
    margin-left: 20px;

}

.iron_man>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .iron_man> img:hover{
    opacity: 0.2;  

    }

    .thor>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .thor> img:hover{
    opacity: 0.2;  

    }

    .a_lenda_do_golem>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .a_lenda_do_golem> img:hover{
    opacity: 0.2;  

    }

    .maligno>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .maligno> img:hover{
    opacity: 0.2;  

    }

    .as_trapaceiras>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .as_trapaceiras> img:hover{
    opacity: 0.2;  

    }

    .homem_de_ferro2>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .homem_de_ferro2> img:hover{
    opacity: 0.2;  

    }


    .rodape{
        padding: 25px;
        color: white
        font-size:1.5em;
        display: flex;
        padding-top:   3600px;
        padding-left: 350px;


    }

    .rodape li{
        margin-right:20px;
        padding-top: 50px;
        
    }

    .parceria{
        display: flex;
        padding-top:   3600px;
        padding-left: 350px;

        }

    .parceria li{

        margin:-20px 10px;
        display:flex;

 

 

 

<<<<<<<<Codigo Html abaixo>>>>>>>>

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Camilavip
      Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé
      Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css
       
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"> </head> <body> <!-- CSS DO FLIP --> <style> .flip-container:hover .flipper{ transform: rotateY(180deg); /* se quiser uma animação na vertical, troque por rotateX(180deg) */ } .flipper{ width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; } .front, .back{ position: absolute; width: 100%; height: 100%; } .back{ transform: rotateY(180deg); } </style> <center> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" /> </div> <div class="back"> <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" /> </div> </div> </div> <!-- AQUI COMEÇA O RODAPÉ --> <!-- CSS DO RODAPÉ --> <style> @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; color: #d9d9d9; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .content1{ position: relative; margin: 130px auto; text-align: center; padding: 0 20px; } .content1 .text{ font-size: 2.5rem; font-weight: 600; color: #202020; } .content1 .p{ font-size: 2.1875rem; font-weight: 600; color: #202020; } footer{ position: fixed; bottom: 0px; width: 100%; background: #111; } .main-content{ display: flex; } .main-content .box{ flex-basis: 50%; padding: 10px 20px; } .box h2{ font-size: 1.125rem; font-weight: 600; text-transform: uppercase; } .box .content{ margin: 20px 0 0 0; position: relative; } .box .content:before{ position: absolute; content: ''; top: -10px; height: 2px; width: 100%; background: #1a1a1a; } .box .content:after{ position: absolute; content: ''; height: 2px; width: 15%; background: #f12020; top: -10px; } .left .content p{ text-align: justify; } .left .content .social{ margin: 20px 0 0 0; } .left .content .social a{ padding: 0 2px; } .left .content .social a span{ height: 40px; width: 40px; background: #1a1a1a; line-height: 40px; text-align: center; font-size: 18px; border-radius: 5px; transition: 0.3s; } .left .content .social a span:hover{ background: #f12020; } .center .content .fas{ font-size: 1.4375rem; background: #1a1a1a; height: 45px; width: 45px; line-height: 45px; text-align: center; border-radius: 50%; transition: 0.3s; cursor: pointer; } .center .content .fas:hover{ background: #f12020; } .center .content .text{ font-size: 1.0625rem; font-weight: 500; padding-left: 10px; } .center .content .phone{ margin: 15px 0; } .right form .text{ font-size: 1.0625rem; margin-bottom: 2px; color: #656565; } .right form .msg{ margin-top: 10px; } .right form input, .right form .msgForm{ width: 100%; font-size: 1.0625rem; background: #151515; padding-left: 10px; border: 1px solid #222222; } .right form input:focus, .right form .msgForm:focus{ outline-color: #3498db; } .right form input{ height: 35px; } .right form .btn{ margin-top: 10px; } .right form .btn button{ height: 40px; width: 100%; border: none; outline: none; background: #f12020; font-size: 1.0625rem; font-weight: 500; cursor: pointer; transition: .3s; } .right form .btn button:hover{ background: #000; } .bottom center{ padding: 5px; font-size: 0.9375rem; background: #151515; } .bottom center span{ color: #656565; } .bottom center a{ color: #f12020; text-decoration: none; } .bottom center a:hover{ text-decoration: underline; } @media screen and (max-width: 900px) { footer{ position: relative; bottom: 0px; } .main-content{ flex-wrap: wrap; flex-direction: column; } .main-content .box{ margin: 5px 0; } } </style> <div class="content1"> <div class="text"> Fully Responsive Footer Section</div> <div class="p"> HTML and CSS (Flexbox)</div> </div> <footer> <div class="main-content"> <div class="left box"> <h2> About us</h2> <div class="content"> <p> CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p> <div class="social"> <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a> <a href="#"><span class="fab fa-twitter"></span></a> <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a> <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a> </div> </div> </div> <div class="center box"> <h2> Address</h2> <div class="content"> <div class="place"> <span class="fas fa-map-marker-alt"></span> <span class="text">Birendranagar, Surkhet</span> </div> <div class="phone"> <span class="fas fa-phone-alt"></span> <span class="text">+089-765432100</span> </div> <div class="email"> <span class="fas fa-envelope"></span> <span class="text">abc@example.com</span> </div> </div> </div> <div class="right box"> <h2> Contact us</h2> <div class="content"> <form action="#"> <div class="email"> <div class="text"> Email *</div> <input type="email" required> </div> <div class="msg"> <div class="text"> Message *</div> <!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea --> <changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea --> <br /> <div class="btn"> <button type="submit">Send</button> </div> <div class="bottom"> <center> <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span> <span class="far fa-copyright"></span> 2020 All rights reserved. </center> </div> </body> </html>  
    • By Kemily
      Eu preciso de ajuda para poder publicar meu site.
      O professor mandou faze-lo em HTML e CSS e eu fiz mas eu não sei postar e manter as imagens.
      Quando consegui postar as imagens não foram junto.
      O link q consegui fazer sem as imagens ficou assim:
       
      http://hyundai.droppages.com/
    • By danicarla
      Olá pessoas,

      Estou tentando fazer uma versão de impressão usando CSS eu queria colocar um cabeçalho e um rodapé em todas as paginas,  O problema é que o conteúdo vem do banco de dados,  e dependendo do tamanho dos parágrafos em algumas vezes o texto acaba ficando em cima do cabeçalho ou do rodapé.. alguém tem alguma idéia de como posso fazer isso?
       
      Meu cód está assim:
       
      header {font-family:Arial;font-size: 22px;color: #000;text-align: center;} footer {font-family:Arial;font-size: 10px; color: #CD090C;text-align: center;} article {font-family:Arial;font-size: 14px; color: #000;text-align: justify;} @page {size: A4;margin: 11mm 17mm 17mm 17mm;} @media print { header {position: fixed;top: 0;} footer {position: fixed;bottom: 0;} article {position: relative;top:40px;} .content-block, p {top:40px;page-break-inside: avoid;} html, body {width: 210mm;height: 297mm;} } E no HTML
       
      <header>CABEÇALHO</header> <article>Conteudo.. texto.. etc..</article> <footer>Texto do Rodapé</footer>  
    • By GabrielSCastro
      Olá pessoa, terminei a faculdade e recebi algumas propostas de projetos web, mas como ainda estou iniciando não tenho muita noção de quanto cobrar.
      Para um site, eu pensei em cobrar um valor razoável de entrada , e além deste valor, definir um contrato de um valor mensal para fazer manutenções necessárias, assim eu terei o cliente e uma renda sempre. Por outro lado, o cliente pode ficar com o site por pouco tempo e não chegar ao valor que eu gostaria pelo projeto. 
      Pensei também em cobrar por projeto, no minimo R$ 1000 por um site simples, já que to começando.

      Ai entra outro falta de experiência minha. Se eu cobrar por projeto, o cliente ficaria responsável por pagar o domínio e hospedagem dele ou eu contrataria uma hospedagem com a possibilidade de hospedar varios sites para quando eu tiver mais clientes.

      Indo mais direto ao ponto, gostaria que me ajudasse em como começar, cobrar, etc.

      Agradeço a quem puder ajudar.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.