Fórum Fiz algo de errado? #527869
05/08/2015
0
Bom gente eu finalmente finalizei meu primeiro site!!! mas queria saber de vocês se eu fiz algo de errado em relação ao código se utilizei as tags certas se to seguindo as "boas praticas de programação", se não como posso melhorar me deem algumas dicas de como se deve prosseguir de maneira correta e eficaz. Bem vou deixar os códigos e imagens do site abaixo. Agradecimentos desde já.
OBS: aceito dicas tambem da parte do layout e designe do site :)
código html "home":
codigo html "como é feito o site":
codigo html "contato":
img "home":
[img:descricao=img-home1]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122622.png[/img]
[img:descricao=img-home2]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122706%20%281%29.png[/img]
img "como é feito o site":
[img:descricao=img-como é feito o site]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122754%20%281%29.png[/img]
img "contato":
[img:descricao=img-contato]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122840.png[/img]
OBS: aceito dicas tambem da parte do layout e designe do site :)
código html "home":
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="description" content="Criação de sites para pequenas empresas e para divulgação, com qualidade, preço baixo e a atenção que você merece. Utilizamos as melhores tecnologias existentes no mercado para satisfazer as suas necessidades."/>
<title>Storm Tech - Criação de Sites</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="cabecalho">
<div class="linha">
<header>
<div class="coluna col4">
<h1><img src="img/logo.png" alt="logo Storm Tech" title="logo Storm Tech"></h1>
</div>
<div class="coluna col4">
<h2 class="titulo-texto titulo-home">Criação de Sites</h2>
</div>
<div class="coluna col4">
<form action="" class="buscar">
<input type="text" class="text-busca" placeholder="Buscar..."/>
<input type="image" class="img-busca" src="img/img.busca.png"/>
</form>
</div>
</header>
</div>
</div>
<div class="menu">
<div class="linha">
<nav>
<div class="coluna col12">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="como-e-feito-o-site.html">Como é feito o site</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="baner">
<div class="linha">
<div class="coluna col3" id="img1-baner">
<img src="img/img1-baner.png" alt="">
</div>
<div class="coluna col3">
<p class="texto"><h3 class="titulo-texto">Sites Para Pequenos Negócios</h3><br>Sites Para Pequenos NegóciosLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p>
</div>
<div class="coluna col3" id="img2-baner">
<img src="img/img2-baner.png" alt="">
</div>
<div class="coluna col3">
<p class="texto"><h3 class="titulo-texto">Sites Para Divulgação</h3><br><br>Sites Para DivulgaçãoLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,massa gkhfk siutnhhdf <br><br></p>
</div>
</div>
</div>
<div class="conteudo">
<div class="linha">
<div class="coluna col12">
<h3 class="titulo-texto">As Melhores Ferramentas Para o Seu Site</h3>
</div>
</div>
<div class="linha">
<div class="coluna col12">
<img class="setas" src="img/seta1.png" alt="">
<img class="setas" src="img/seta2.png" alt="">
<img class="setas" src="img/seta3.png" alt="">
</div>
</div>
<div class="linha">
<div class="coluna col4 img-html-css3-fireworks">
<img src="img/box-conteudo1.png" alt="HTML5">
</div>
<div class="coluna col4 img-html-css3-fireworks">
<img src="img/box-conteudo2.png" alt="CSS3">
</div>
<div class="coluna col4 img-html-css3-fireworks">
<img src="img/box-conteudo3.png" alt="FireWorks">
</div>
</div>
</div>
<div class="rodape">
<footer>
<div class="linha">
<div class="coluna col12">
<h6>© Storm Tech - Criação de Sites 2015</h6>
</div>
</div>
</footer>
</div>
</body>
</html>codigo html "como é feito o site":
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="description" content="O processo de crição do site é feito inicialmente com a coleta de informações passadas pelo cliente, como o tipo de negócio e o público alvo. Com base nessas informações é feito o layout." />
<title>Como é feito o site | StormTech</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="cabecalho">
<div class="linha">
<header>
<div class="coluna col4">
<img src="img/logo.png" alt="logo Storm Tech" title="logo Storm Tech">
</div>
<div class="coluna col4">
<h2 class="titulo-texto titulo-home">Criação de Sites</h2>
</div>
<div class="coluna col4">
<form action="" class="buscar">
<input type="text" class="text-busca" placeholder="Buscar..."/>
<input type="image" class="img-busca" src="img/img.busca.png"/>
</form>
</div>
</header>
</div>
</div>
<div class="menu">
<div class="linha">
<nav>
<div class="coluna col12">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="como-e-feito-o-site.html">Como é feito o site</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="conteudo">
<article>
<div class="linha">
<div class="coluna col12 largura-texto">
<br><br><br><br><h1 class="titulo-texto">Como é feito o site?</h1><br>
</div>
</div>
<div class="linha">
<div class="coluna col12 largura-texto">
<img class="img-texto-direita" src="img/como-e-feito-o-site.png" alt="">
<h2 class="subtitulo-texto">Informações</h2>
<p class="texto">O processo de crição do site é feito inicialmente com a coleta de informações passadas pelo cliente, como o tipo de negócio e o público alvo. Com base nessas informações é feito o layout(conjunto de textos, imagens, texturas e estilos que definem o site)
.Esse processo só é finalizado quando o cliente aprova o projeto.</p>
<br>
<h2 class="subtitulo-texto">Programação</h2>
<p class="texto">A programação é a parte responsável por criar efetivamente o site. Nesta etapa pegamos o layout que foi definido na etapa anterior e o convertemos para a linguagem utilizada na web(uma série de códigos para estruturação, estilização e tratamento de dasos de um website). No nosso caso as linguagens utilizadas para a criação dos sites são: HTML5 e CSS3.</p>
<br>
<h2 class="subtitulo-texto">Finalização do site!!</h2>
<p class="texto">Com tudo quase pronto falta somente testar o site, ver o funcionamento do mesmo em diferentes navegadores, e fazer uma revisão completa do código para ver se nada ficou errado ou fora do lugar. E finalmente o site está pronto para ser colocado em um servidor e acessado por qualquer pessoa no mundo!</p>
<br><br><br><br>
</div>
</div>
</article>
</div>
<div class="rodape">
<footer>
<div class="linha">
<div class="coluna col12">
<h6>© Storm Tech - Criação de Sites 2015</h6>
</div>
</div>
</footer>
</div>
</body>
</html>codigo html "contato":
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Contato | StormTech</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="cabecalho">
<div class="linha">
<header>
<div class="coluna col4">
<img src="img/logo.png" alt="logo Storm Tech" title="logo Storm Tech">
</div>
<div class="coluna col4">
<h2 class="titulo-texto titulo-home">Criação de Sites</h2>
</div>
<div class="coluna col4">
<form action="" class="buscar">
<input type="text" class="text-busca" placeholder="Buscar..."/>
<input type="image" class="img-busca" src="img/img.busca.png"/>
</form>
</div>
</header>
</div>
</div>
<div class="menu">
<div class="linha">
<nav>
<div class="coluna col12">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="como-e-feito-o-site.html">Como é feito o site</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="conteudo">
<div class="linha">
<div class="coluna col12">
<h1 id="titulo-form-contato">Contato</h1>
</div>
</div>
<div class="linha">
<div class="coluna col5">
<img src="img/img-form-contato2.png" alt="img-contato">
</div>
<div class="coluna col3">
<img id="img-email-form" src="img/img-email-form.png" alt="img-email">
</div>
<div class="coluna col4">
<form action="" id="form-contato">
<label for="nome" class="font-label">Nome: </label><br>
<input type="text" id="nome" placeholder="Digite seu nome" required="required" name="nome"/><br><br>
<label for="email" class="font-label">E-mail: </label><br>
<input type="email" id="email" placeholder="exemplo@hotmail.com" required="required" name="email"/><br><br>
<label for="mensagem" class="font-label">Mensagem:</label><br>
<textarea type="text" id="mensagem" placeholder="Digite uma mensagem" required="required" name="mensagem"></textarea><br>
<input type="image" src="img/img-enviar.png" id="enviar">
</form>
</div>
</div>
</div>
<div class="rodape">
<footer>
<div class="linha">
<div class="coluna col12">
<h6>© Storm Tech - Criação de Sites 2015</h6>
</div>
</div>
</footer>
</div>
</body>
</html>img "home":
[img:descricao=img-home1]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122622.png[/img]
[img:descricao=img-home2]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122706%20%281%29.png[/img]
img "como é feito o site":
[img:descricao=img-como é feito o site]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122754%20%281%29.png[/img]
img "contato":
[img:descricao=img-contato]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122840.png[/img]
Juliana
Curtir tópico
+ 0
Responder
Post mais votado
05/08/2015
Olha sinceramente sem navegar pelo site não tenho como opinar embasado e critérios técnicos.
Aparentemente esta ok, afinal se esta rodando e ficou bom para você esta ok!
Mas só vendo o site renderizado em vários browsers e usando é que podemos afirmar com certeza.
Única observação que posso fazer é que prefiro um tipografia mais formal e sóbria, afinal pelo que entendi você pretende se profissionalizar, mas é apenas uma opinião pessoal.
Você como Webdesign é que sabe qual o foco e objetivo do site.
Outra coisa que não percebi é nenhuma referência a tratamento de imagens e identidade visual.
No mais boa sorte!
Aparentemente esta ok, afinal se esta rodando e ficou bom para você esta ok!
Mas só vendo o site renderizado em vários browsers e usando é que podemos afirmar com certeza.
Única observação que posso fazer é que prefiro um tipografia mais formal e sóbria, afinal pelo que entendi você pretende se profissionalizar, mas é apenas uma opinião pessoal.
Você como Webdesign é que sabe qual o foco e objetivo do site.
Outra coisa que não percebi é nenhuma referência a tratamento de imagens e identidade visual.
No mais boa sorte!
Jothaz
Responder
Gostei + 1
Mais Posts
05/08/2015
Juliana
Bom gente eu finalmente finalizei meu primeiro site!!! mas queria saber de vocês se eu fiz algo de errado em relação ao código se utilizei as tags certas se to seguindo as "boas praticas de programação", se não como posso melhorar me deem algumas dicas de como se deve prosseguir de maneira correta e eficaz. Bem vou deixar os códigos e imagens do site abaixo. Agradecimentos desde já.
OBS: aceito dicas tambem da parte do layout e designe do site :)
código html "home":
codigo html "como é feito o site":
codigo html "contato":
img "home":
[img:descricao=img-home1]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122622.png[/img]
[img:descricao=img-home2]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122706%20%281%29.png[/img]
img "como é feito o site":
[img:descricao=img-como é feito o site]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122754%20%281%29.png[/img]
img "contato":
[img:descricao=img-contato]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122840.png[/img]
OBS: aceito dicas tambem da parte do layout e designe do site :)
código html "home":
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="description" content="Criação de sites para pequenas empresas e para divulgação, com qualidade, preço baixo e a atenção que você merece. Utilizamos as melhores tecnologias existentes no mercado para satisfazer as suas necessidades."/>
<title>Storm Tech - Criação de Sites</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="cabecalho">
<div class="linha">
<header>
<div class="coluna col4">
<h1><img src="img/logo.png" alt="logo Storm Tech" title="logo Storm Tech"></h1>
</div>
<div class="coluna col4">
<h2 class="titulo-texto titulo-home">Criação de Sites</h2>
</div>
<div class="coluna col4">
<form action="" class="buscar">
<input type="text" class="text-busca" placeholder="Buscar..."/>
<input type="image" class="img-busca" src="img/img.busca.png"/>
</form>
</div>
</header>
</div>
</div>
<div class="menu">
<div class="linha">
<nav>
<div class="coluna col12">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="como-e-feito-o-site.html">Como é feito o site</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="baner">
<div class="linha">
<div class="coluna col3" id="img1-baner">
<img src="img/img1-baner.png" alt="">
</div>
<div class="coluna col3">
<p class="texto"><h3 class="titulo-texto">Sites Para Pequenos Negócios</h3><br>Sites Para Pequenos NegóciosLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p>
</div>
<div class="coluna col3" id="img2-baner">
<img src="img/img2-baner.png" alt="">
</div>
<div class="coluna col3">
<p class="texto"><h3 class="titulo-texto">Sites Para Divulgação</h3><br><br>Sites Para DivulgaçãoLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,massa gkhfk siutnhhdf <br><br></p>
</div>
</div>
</div>
<div class="conteudo">
<div class="linha">
<div class="coluna col12">
<h3 class="titulo-texto">As Melhores Ferramentas Para o Seu Site</h3>
</div>
</div>
<div class="linha">
<div class="coluna col12">
<img class="setas" src="img/seta1.png" alt="">
<img class="setas" src="img/seta2.png" alt="">
<img class="setas" src="img/seta3.png" alt="">
</div>
</div>
<div class="linha">
<div class="coluna col4 img-html-css3-fireworks">
<img src="img/box-conteudo1.png" alt="HTML5">
</div>
<div class="coluna col4 img-html-css3-fireworks">
<img src="img/box-conteudo2.png" alt="CSS3">
</div>
<div class="coluna col4 img-html-css3-fireworks">
<img src="img/box-conteudo3.png" alt="FireWorks">
</div>
</div>
</div>
<div class="rodape">
<footer>
<div class="linha">
<div class="coluna col12">
<h6>© Storm Tech - Criação de Sites 2015</h6>
</div>
</div>
</footer>
</div>
</body>
</html>codigo html "como é feito o site":
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="description" content="O processo de crição do site é feito inicialmente com a coleta de informações passadas pelo cliente, como o tipo de negócio e o público alvo. Com base nessas informações é feito o layout." />
<title>Como é feito o site | StormTech</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="cabecalho">
<div class="linha">
<header>
<div class="coluna col4">
<img src="img/logo.png" alt="logo Storm Tech" title="logo Storm Tech">
</div>
<div class="coluna col4">
<h2 class="titulo-texto titulo-home">Criação de Sites</h2>
</div>
<div class="coluna col4">
<form action="" class="buscar">
<input type="text" class="text-busca" placeholder="Buscar..."/>
<input type="image" class="img-busca" src="img/img.busca.png"/>
</form>
</div>
</header>
</div>
</div>
<div class="menu">
<div class="linha">
<nav>
<div class="coluna col12">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="como-e-feito-o-site.html">Como é feito o site</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="conteudo">
<article>
<div class="linha">
<div class="coluna col12 largura-texto">
<br><br><br><br><h1 class="titulo-texto">Como é feito o site?</h1><br>
</div>
</div>
<div class="linha">
<div class="coluna col12 largura-texto">
<img class="img-texto-direita" src="img/como-e-feito-o-site.png" alt="">
<h2 class="subtitulo-texto">Informações</h2>
<p class="texto">O processo de crição do site é feito inicialmente com a coleta de informações passadas pelo cliente, como o tipo de negócio e o público alvo. Com base nessas informações é feito o layout(conjunto de textos, imagens, texturas e estilos que definem o site)
.Esse processo só é finalizado quando o cliente aprova o projeto.</p>
<br>
<h2 class="subtitulo-texto">Programação</h2>
<p class="texto">A programação é a parte responsável por criar efetivamente o site. Nesta etapa pegamos o layout que foi definido na etapa anterior e o convertemos para a linguagem utilizada na web(uma série de códigos para estruturação, estilização e tratamento de dasos de um website). No nosso caso as linguagens utilizadas para a criação dos sites são: HTML5 e CSS3.</p>
<br>
<h2 class="subtitulo-texto">Finalização do site!!</h2>
<p class="texto">Com tudo quase pronto falta somente testar o site, ver o funcionamento do mesmo em diferentes navegadores, e fazer uma revisão completa do código para ver se nada ficou errado ou fora do lugar. E finalmente o site está pronto para ser colocado em um servidor e acessado por qualquer pessoa no mundo!</p>
<br><br><br><br>
</div>
</div>
</article>
</div>
<div class="rodape">
<footer>
<div class="linha">
<div class="coluna col12">
<h6>© Storm Tech - Criação de Sites 2015</h6>
</div>
</div>
</footer>
</div>
</body>
</html>codigo html "contato":
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Contato | StormTech</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="cabecalho">
<div class="linha">
<header>
<div class="coluna col4">
<img src="img/logo.png" alt="logo Storm Tech" title="logo Storm Tech">
</div>
<div class="coluna col4">
<h2 class="titulo-texto titulo-home">Criação de Sites</h2>
</div>
<div class="coluna col4">
<form action="" class="buscar">
<input type="text" class="text-busca" placeholder="Buscar..."/>
<input type="image" class="img-busca" src="img/img.busca.png"/>
</form>
</div>
</header>
</div>
</div>
<div class="menu">
<div class="linha">
<nav>
<div class="coluna col12">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="como-e-feito-o-site.html">Como é feito o site</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="conteudo">
<div class="linha">
<div class="coluna col12">
<h1 id="titulo-form-contato">Contato</h1>
</div>
</div>
<div class="linha">
<div class="coluna col5">
<img src="img/img-form-contato2.png" alt="img-contato">
</div>
<div class="coluna col3">
<img id="img-email-form" src="img/img-email-form.png" alt="img-email">
</div>
<div class="coluna col4">
<form action="" id="form-contato">
<label for="nome" class="font-label">Nome: </label><br>
<input type="text" id="nome" placeholder="Digite seu nome" required="required" name="nome"/><br><br>
<label for="email" class="font-label">E-mail: </label><br>
<input type="email" id="email" placeholder="exemplo@hotmail.com" required="required" name="email"/><br><br>
<label for="mensagem" class="font-label">Mensagem:</label><br>
<textarea type="text" id="mensagem" placeholder="Digite uma mensagem" required="required" name="mensagem"></textarea><br>
<input type="image" src="img/img-enviar.png" id="enviar">
</form>
</div>
</div>
</div>
<div class="rodape">
<footer>
<div class="linha">
<div class="coluna col12">
<h6>© Storm Tech - Criação de Sites 2015</h6>
</div>
</div>
</footer>
</div>
</body>
</html>img "home":
[img:descricao=img-home1]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122622.png[/img]
[img:descricao=img-home2]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122706%20%281%29.png[/img]
img "como é feito o site":
[img:descricao=img-como é feito o site]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122754%20%281%29.png[/img]
img "contato":
[img:descricao=img-contato]http://arquivo.devmedia.com.br/forum/imagem/443867-20150805-122840.png[/img]
tinha esquecido do css heheh aki está:
/* grid de 1200px*/
*{
margin: 0;
padding: 0;
}
body{
overflow-x: hidden;
}
.linha{
width: 1200px;
margin: 0 auto;
overflow: auto;
padding: 5px 0;
}
.coluna{
padding: 0 10px;
float: left;
}
.col1{
width: 80px;
}
.col2{
width: 180px;
}
.col3{
width: 280px;
}
.col4{
width: 380px;
}
.col5{
width: 480px;
}
.col6{
width: 580px;
}
.col7{
width: 680px;
}
.col8{
width: 780px;
}
.col9{
width: 880px;
}
.col10{
width: 980px;
}
.col11{
width: 1080px;
}
.col12{
width: 1180px;
}
.cabecalho{
background: #dee3e6;
width: 100%;
}
.titulo-home{
font-size: 30pt !important;
margin-top: 20px;
}
.text-busca{
background:#BBBBBB;
font-style:italic;
font-size:18px;
border: 1px solid rgb(51,51,51,05);
height:30px;
width:210px;
color:#555555;
margin-top: 15px;
border-radius: 10px;
}
.img-busca{
width: 38px;
height: 30px;
}
.buscar{
float: right;
margin-top: 20px;
}
.menu{
width: 870px;
height: 50px;
background: #CFBFFF;
margin:-25px 230px 0 230px;
border-radius: 20px;
}
.menu ul{
margin: 10px 0 10px 250px;
}
.menu ul li{
display:inline;
padding-right: 50px;
}
.menu ul li a:link, a:active, a:visited{
text-decoration: none;
color: #30003F;
font-size: 14pt;
}
.menu ul li a:hover{
text-decoration: underline;
color: #006CD8;
}
#baner{
width: 100%;
height: 260px;
background: #dee3e6;
margin-top: 30px;
}
#baner .linha .col3{
margin-top: 22px;
}
#img1-baner{
width: 312px;
height: 205px;
}
#img2-baner{
width: 237px;
height: 205px;
}
#baner .col3 p{
border: 1px dotted black;
margin-top: 0px;
}
.conteudo{
border-right: 1px solid rgba(0,0,0,0.5);
border-left: 1px solid rgba(0,0,0,0.5);
width: 1080px;
margin: 0 auto;
}
.conteudo .col12 h3{
margin: 30px 90px 0 0px;
}
.setas{
padding-right: 150px;
margin: 20px 0 0 150px;
}
.img-html-css3-fireworks{
width: 282px;
padding-right: 30px;
margin: 0 0 30px 32px;
}
.rodape{
background: #777777;
width: 100%;
height: 60px;
}
.rodape .col12 h6{
text-align: center;
font-size: 10pt;
color: #30003F;
font-family: 'Cabin',arial;
margin-top: 20px;
}
/* estilo dos textos */
.texto{
font-size: 15pt;
}
.largura-texto{
max-width: 1060px;
}
.img-texto-direita{
float:right;
margin: 20px 10px 10px 20px;
}
.titulo-texto{
text-align: center;
font-size: 22pt;
font-family: 'Dancing Script', arial;
font-weight: 700;
text-shadow: 2px -2px 5px #9672FF;
}
.subtitulo-texto{
font-size: 20pt;
font-family: 'Dancing Script', arial;
font-weight: 400;
text-shadow: 2px -2px 5px #9672FF;
}
/* fim estilo dos textos */
#titulo-form-contato{
font-size: 30pt;
font-family: 'Dancing Script', arial;
font-weight: 700;
text-shadow: 2px -2px 5px #9672FF;
margin: 60px 0 0 480px;
}
#img-email-form{
margin-top: 70px;
}
#form-contato{
margin: 30px 0 30px 0;
width: 250px;
}
#nome{
height: 25px;
width: 200px;
border-radius: 5px;
border-color: #CFBFFF;
}
#email{
height: 25px;
width: 200px;
border-radius: 5px;
border-color: #CFBFFF;
}
#mensagem{
height: 80px;
width: 200px;
border-radius: 5px;
border-color: #CFBFFF;
border: 2px solid #CFBFFF;
}
#enviar{
cursor: pointer;
background: #CFBFFF;
width: 60px;
height: 25px;
border-radius: 5px;
}
.font-label{
font-size: 14pt;
font-family: 'Dancing Script', arial;
text-shadow: 2px -2px 5px #9672FF;
}
Responder
Gostei + 0
05/08/2015
Jothaz
Para uma avaliação verdadeira seria melhor postar o link para acessar o site e termos a experiência da usabilidade.
Só vendo códigos e prints das telas acho que fica complicado externar uma opinião.
Mesmo porque navegando pelo site usando as ferramenta para desenvolvedor fica mais fácil verificar como esta a estrutura do site.
Pelo que notei, me corrija se estiver errado, o site é totalmente estático!
Como você pretende enviar o formulário de contato?
Só vendo códigos e prints das telas acho que fica complicado externar uma opinião.
Mesmo porque navegando pelo site usando as ferramenta para desenvolvedor fica mais fácil verificar como esta a estrutura do site.
Pelo que notei, me corrija se estiver errado, o site é totalmente estático!
Como você pretende enviar o formulário de contato?
Responder
Gostei + 0
05/08/2015
Juliana
Para uma avaliação verdadeira seria melhor postar o link para acessar o site e termos a experiência da usabilidade.
Só vendo códigos e prints das telas acho que fica complicado externar uma opinião.
Mesmo porque navegando pelo site usando as ferramenta para desenvolvedor fica mais fácil verificar como esta a estrutura do site.
Pelo que notei, me corrija se estiver errado, o site é totalmente estático!
Como você pretende enviar o formulário de contato?
Só vendo códigos e prints das telas acho que fica complicado externar uma opinião.
Mesmo porque navegando pelo site usando as ferramenta para desenvolvedor fica mais fácil verificar como esta a estrutura do site.
Pelo que notei, me corrija se estiver errado, o site é totalmente estático!
Como você pretende enviar o formulário de contato?
bom não dá para postar o link do site porque ainda não botei no ar, e com relação ao formulario de contato eu vou tratar por php um sistema bem simples mesmo.
Responder
Gostei + 0
05/08/2015
Randrade
Aparentemente, não vejo nada errado em seu código.
Existem algumas melhorias que podem ser feitos, como por exemplo:
- Seu menu você repete em todas as páginas. Como você possui apenas três páginas, é fácil de dar manutenção. Agora, imagine 10 páginas, 50 páginas ou 100 páginas? Parece muito, mas você chega a essa quantidade rapidamente.
- Em seu css você possui "/* grid de 1200px*/". Você fez algo para telas maiores ou menores?
Não existe desenvolver para web sem pensar em responsividade, atualmente.
Fora isso, creio que está "dentro dos padrões", tendo em vista o que você postou. Claro, que se tivesse acesso ao mesmo, poderia dar mais detalhes.
Existem algumas melhorias que podem ser feitos, como por exemplo:
- Seu menu você repete em todas as páginas. Como você possui apenas três páginas, é fácil de dar manutenção. Agora, imagine 10 páginas, 50 páginas ou 100 páginas? Parece muito, mas você chega a essa quantidade rapidamente.
- Em seu css você possui "/* grid de 1200px*/". Você fez algo para telas maiores ou menores?
Não existe desenvolver para web sem pensar em responsividade, atualmente.
Fora isso, creio que está "dentro dos padrões", tendo em vista o que você postou. Claro, que se tivesse acesso ao mesmo, poderia dar mais detalhes.
Responder
Gostei + 1
05/08/2015
Juliana
Obrigado gente, bom já que é meu primeiro site eu não me preocupei em fazer um site responsivo mas de forma alguma deixei isso de lado até to vendo varias videoaulas e apostilas sobre o assunto afinal de contas isso não é moda é algo que veio para ficar. Vou com certeza levar em consideração as observações apontadas por vocês e procurar melhorar e desenvolver cada vez melhor minhas "habilidades" com relação a criação de sites :)
Responder
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)