Ewfc2005
-
Total de itens
11 -
Registro em
-
Última visita
Posts postados por Ewfc2005
-
-
Eu gostaria de saber como faço para criar uma area de serviço igual ao dessa página https://ciesalon.com/services
deixando ela responsiva
-
Funcionou Direitinho! Obrigado, porem eu nao consigo colocar outras 3 imagens abaixo alinhadas na mesma coluna
-
funciounou mais ou menos, porque por exemplo, eu nao consigo deixar ela com uma distancia entre a outra e elas acabam
nao ficando centralizadas.
-
Obrigado, Agora eu gostaria de saber como eu faço para posicionar elas no meio da pagina sem tirar a responsividade do site
-
Gostaria de saber como eu devo fazer para alinhar 3 imagens lado a lado, sem fazer o site deixar de ser responsivo.
que fique igual ao desse site
-
Muito Obrigado! Vou tentar fazer isso
-
Eu sou um programador amador, e ainda estou aprendendo programação, comecei um site, mas esqueci de faze-lo para ser responsivo, agora preciso de ajuda
pois nao consigo deixa-lo responsivo
Codigo HTMLQuote<!DOCTYPE html>
<head>
<title>Sogo Studio</title>
<link rel="stylesheet" type="text/css" href="sobre.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<meta charset="utf-8">
</head>
<body><div id="all">
<ul class="menu">
<a href="site.html"><img class="img-circle" src="sogostudio.png"></a>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="servicos.html">Serviços</a></li>
<li><a href="nossoTime.html">Nosso Time</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</div>
<h1 style="white-space:pre-wrap;">Sobre</h1><hr size="1">
<div class="centralizado">
TEXTO
</div>
<div class="footer">
<p class="local">LOCALIZAÇÂO</p>
</div><div class="sub">
<p>local</p>
</div>
<div class="footer2">
<p class="horas">HORARIO</p>
</div><div class="sub2">
<p>horas</p>
</div>
<div class="footer3">
<p class="contato">CONTATO</p>
</div><div class="sub3">
<p>contato</p>
</div><div class="footer4">
<p class="social">SOCIAL</p>
</div><a href="https://www.instagram.com/sogostudio/" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://www.facebook.com/sogostudioararaquara/" target="_blank"><i class="fab fa-facebook-square"></i></a>
</body>
</html>Codigo CSS
Quotehtml {
overflow: auto;
}*{
margin: 10px;padding: 10px;
}body {
font-family: "Times New Roman",Times,serif;
font-weight: 400;
font-size: 16px;
line-height: 1.25em;
letter-spacing: 0em;
font-family: proxima-nova;
font-weight: 300;
font-style: normal;
font-size: 13px;
line-height: 2.4em;
letter-spacing: .065em;
text-rendering: optimizeLegibility;
}
a{
text-decoration: none; color: #000;
}
ul.menu{
font-family: "Times New Roman",Times,serif;text-align: center; /* centraliza na horizontal */
}
ul.menu li{
display: inline-block; /* centraliza na horizontal */
margin: 0 5px;
}}
ul.menu li a:hover{
background-color: #8BBADC;
}.img-circle {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 50px;
top: 0;
}span {
font-family: sans-serif;
line-height: 1.25em;
letter-spacing: 0em;
text-transform: none;
font-weight: 100;
font-style: normal;
font-size: 50px;
line-height: 1.4em;
letter-spacing: .25em;
text-transform: uppercase;
color: #222;
position: absolute;
top: 330px;
left: 450px;}
.titulo{
position: absolute;
background-image: url("servico.jpg");
height: 125px;
width: 1328px;
top: 300px;
left: -10px;
}.retangulo{
position: absolute;
background-color: white;
height: 90px;
width: 330px;
top: 320px;
left: 450px;
}.foto1{
position: absolute;
top: 500px;
left: -20px;
width: 650px;
height: 320px;
background: url("servicos1.jpeg") center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}.foto1:hover {
opacity: 0.8
}.servico1{
font-family: Arial,sans-serif;line-height: 1.25em;
letter-spacing: .02em;
font-weight: bold;
font-style: normal;
font-size: 32px;
line-height: 1.2em;
letter-spacing: .5em;
text-transform: uppercase;
position: absolute;
top: 600px;
left: 300px;
background: white;
padding: 20px;
}.foto2{
position: absolute;
top: 900px;
right: -10px;
width: 650px;
height: 320px;
background: url("servicos2.jpeg") center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}.foto2:hover{
opacity: 0.8
}.servico2{
font-family: Arial,sans-serif;font-weight: 400;
line-height: 1.25em;
letter-spacing: .02em;
font-weight: bold;
font-style: normal;
font-size: 32px;
line-height: 1.2em;
letter-spacing: .5em;
text-transform: uppercase;
position: absolute;
top: 1030px;
right: 500px;
background: white;
padding: 20px;
}.foto3{
position: absolute;
top: 1300px;
left: -20px;
width: 650px;
height: 320px;
background: url("servicos3.jpg") center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}.foto3:hover{
opacity: 0.8
}.servico3{
font-family: Arial,sans-serif;line-height: 1.25em;
letter-spacing: .02em;
font-weight: bold;
font-style: normal;
font-size: 32px;
line-height: 1.2em;
letter-spacing: .5em;
text-transform: uppercase;
position: absolute;
top: 1400px;
left: 550px;
background: white;
padding: 20px;
}.foto4{
position: absolute;
top: 1700px;
right: -10px;
width: 650px;
height: 320px;
background: url("servico4.jpg") center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}.foto4:hover{
opacity: 0.8;
}.servico4{
font-family: Arial,sans-serif;font-weight: 400;
line-height: 1.25em;
letter-spacing: .02em;
font-weight: bold;
font-style: normal;
font-size: 32px;
line-height: 1.2em;
letter-spacing: .5em;
text-transform: uppercase;
position: absolute;
top: 1850px;
right: 300px;
background: white;
padding: 20px;
}.foto5{
position: absolute;
top: 2100px;
left: -10px;
width: 650px;
height: 320px;
background: url("servico5.jpeg") center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}.foto5:hover{
opacity: 0.8;
}.servico5{
font-family: Arial,sans-serif;font-weight: 400;
line-height: 1.25em;
letter-spacing: .02em;
font-weight: bold;
font-style: normal;
font-size: 32px;
line-height: 1.2em;
letter-spacing: .5em;
text-transform: uppercase;
position: absolute;
top: 2230px;
left: 300px;
background: white;
padding: 20px;
}.footer:not(.index-item-title) {
position: absolute;
left: 200px;
text-align: center;
top: 2500px;
font-size: 10px;
font-family: Arial,sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1.25em;
letter-spacing: 0em;
text-transform: none;
font-family: arno-pro;
font-weight: 700;
font-style: normal;
font-size: 9px;
line-height: 2.1em;
letter-spacing: .25em;
text-transform: uppercase;
color: #222;
}.footer2{
position: absolute;
left: 450px;
text-align: center;
top: 2500px;
font-size: 10px;
font-family: Arial,sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1.25em;
letter-spacing: 0em;
text-transform: none;
font-family: arno-pro;
font-weight: 700;
font-style: normal;
font-size: 9px;
line-height: 2.1em;
letter-spacing: .25em;
text-transform: uppercase;
color: #222;
}.footer3{
position: absolute;
left: 700px;
text-align: center;
top: 2500px;
font-size: 10px;
font-family: Arial,sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1.25em;
letter-spacing: 0em;
text-transform: none;
font-family: arno-pro;
font-weight: 700;
font-style: normal;
font-size: 9px;
line-height: 2.1em;
letter-spacing: .25em;
text-transform: uppercase;
color: #222;
}.footer4{
position: absolute;
left: 950px;
text-align: center;
top: 2500px;
font-size: 10px;
font-family: Arial,sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 1.25em;
letter-spacing: 0em;
text-transform: none;
font-family: arno-pro;
font-weight: 700;
font-style: normal;
font-size: 9px;
line-height: 2.1em;
letter-spacing: .25em;
text-transform: uppercase;
color: #222;
}.sub{
position: absolute;
left: 130px;
text-align: center;
top: 2530px;
font-size: 11px;
font-family: Arial,sans-serif;
font-size: 19px;
line-height: 1.25em;
letter-spacing: 0em;
font-family: arno-pro;
font-weight: 400;
font-style: normal;
font-size: 13px;
line-height: 1.2em;
letter-spacing: .05em;
text-transform: none;
color: #222;
}.sub2{
position: absolute;
left: 440px;
text-align: center;
top: 2540px;
font-family: Arial,sans-serif;
font-size: 19px;
line-height: 1.25em;
letter-spacing: 0em;
font-family: arno-pro;
font-weight: 400;
font-style: normal;
font-size: 13px;
line-height: 1.2em;
letter-spacing: .05em;
text-transform: none;
color: #222;
}.sub3{
position: absolute;
left: 690px;
text-align: center;
top: 2540px;
font-family: Arial,sans-serif;
font-size: 19px;
line-height: 1.25em;
letter-spacing: 0em;
font-family: arno-pro;
font-weight: 400;
font-style: normal;
font-size: 13px;
line-height: 1.2em;
letter-spacing: .05em;
text-transform: none;
color: #222;
}.fa-facebook-square{
position: absolute;
top: 2560px;
right: 310px;
font-size: 20px;
}.fa-instagram{
position: absolute;
top: 2560px;
right: 270px;
font-size: 20px;
}.fab:hover {
opacity: 0.7;
}@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}.fadeIn {
-webkit-animation: fadeIn 3s ease-in-out;
-moz-animation: fadeIn 3s ease-in-out;
-o-animation: fadeIn 3s ease-in-out;
animation: fadeIn 3s ease-in-out;
}Ele está mal feito, ainda tenho que arrumar muita coisa, se alguem conseguir me ajudar e dizer como ele pode ficar responsivo
eu Agradeço.
-
Eu ainda sou programador amador, estou aprendendo, não consegui colocar esse codigo e faze-lo funcionar,
poderia me explicar melhor ?
-
On 7/15/2019 at 5:39 PM, Gleyson Abreu said:let divAlterar = $("#mudar").offset().top - 200; document.addEventListener("scroll", () => { if(window.pageYOffset >= divAlterar){ $("#mudar").html("MUDAR"); } });
Acredito que é isso que você está procurando. Quando o scroll da pagina chega na div ele mostra o texto.
O -200 é para que antes que o scroll cheque a div ele mostre se não tiver o -200 ele só mostra altera o titulo quando está realmente em cima da div.
Animação pode fazer com css.
-
Queria saber como faço para fazer um texto aparecer ao rolar a pagina
igual ao desse site: https://ciesalon.com/services
Ajuda para aba 'serviços'
em Desenvolvimento frontend
Postado
Mais Especificamente a parte com as imagens e os textos