-
Similar Content
-
By jcvlanova
Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada em tópicos circundados, divididos por uma espécie de caixas, boxes formados por linhas e curvas, alguém saberia me dizer como é possível fazer essas linhas curvas uma página html ???
-
By ViniciusRamoa
Eu peguei um site já pronto em laravel, minha ideia era só pegar o site que o cara distribuiu e mudar layout aos poucos para se adaptar para mim, eu sei, digamos, o intermediário de css e básico de Php e html, e o que eu quero alterar é só o básico como: cores, background e etc, mas mesmo eu alterando os arquivos css ou até mesmo apagando todos os arquivos css, NADA muda no site, como se fosse inútil os arquivos css, mudar a aparência no laravel é diferente? Qual o método?
Vale lembrar que possui vários arquivos .blade (index.blade, footer.blade etc), isso tem algo a ver? Obrigado
-
By ramonjba
Olá pessoal. Estou desenvolvendo uma especie de monitoramento, estou utilizando o MATERIALIZE, desta forma, optei por não trabalhar com responsividade, pois preciso do máximo de informações possíveis na tela, seja desktop ou mobile, fazendo o ajuste de zoom se preciso. Fiquei cerca de dois anos sem programar, eu havia feito esse projeto para meu TCC, porém após finalizar, deixei parado e acabei perdendo. Com o tempo, algumas ideias em relação ao projeto também mudaram, e para apresentar a informações das `Torres de Internet`, utilizei o collapsible-header conforme imagem `projeto_monitor`, pois, ao clicar em cima do `equipamento`, ele apresenta informações relacionadas a ele. Estou tendo problemas para alinhar estes `collapsible-header ` pois preciso preencher toda a tela, sem deixar espaçamentos. Para isso, fiz uma classe CSS contendo:
.row .col.quadroTorre1 { margin-top: -10%; margin-bottom: 10%; } .row .col.quadroTorre2 { margin-top: -7.3%; margin-bottom: 10%; } .row .col.quadroTorre3 { margin-top: -30%; margin-bottom: 10%; } .row .col.quadroTorre4 { margin-top: -1.7%; margin-bottom: 10%; }
E fiz uma verificação no código, para ver qual o numero de equipamentos que a `Torre` que está acima tem. Porém, como podemos observar, na segunda linha funcionou preenchendo os espaços, mas pulando para a terceira linha, já possui uma lacuna em branco, onde deveria estar situado o elemento. Além disso, os elementos da segunda linha, acabam se sobrepondo, conforme imagem `projeto_sobrepor`. Como fiquei cerca de 2 anos sem programar, estou encontrando algumas dificuldades e empacando nelas. A parte de front-end é a que gera maior dificuldade. Se alguém puder me auxiliar, agradeço.
Edit: Se alguém tiver dicas de como posso melhorar o preenchimento das lacunas em branco.
-
By ianluis
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>>>>>>>>
-
By lukaizh
Olá Galera,
Estou iniciando um e-commerce pela Tray,e não entendo muito bem de css
eu gostaria de saber se tem como eu mudar o menu lateral esquerdo, para deixar ele na horizontal.
e teria mais uma dúvida, se há alguma maneira de importar o site para o photoshop e depois pegar o css das camadas.
-
