Pararealizar esta atividade, crie o projeto de um site web para umaempresa de produtos do ramo alimentício. Este site deverá conter,pelo menos, três páginas HTML e toda formatação deve ser definida por meiode estilos em cascata. Lembre-se de utilizar a codificação externa.O conteúdodo site pode ser definido por você, mas é importante que as principaisformatações dos estilos em cascata (descritas a seguir) sejam utilizadas:plano de fundo(background);tipos de letra e texto;margens;bordas;espaçamentos;dimensões;pseudoclasses.
Soluções para a tarefa
Respondido por
1
Página de Index.html:
<html><head> <title>Alimentos SA</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div id="header"> <div id="header-content"> <h2 class="logo">Alimentos SA</h2> </div> <div id="header-content"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="servicos.html">Serviços</a></li> <li><a href="contato.html">Contato</a></li> </ul> </div> </div> <div id="content"> <h1>Bem Vindo!</h1> <p>A empresa Alimentos SA agradece sua visita! Somos uma empresa consagrada com mais de 9000 anos em experiência neste setor.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, ligula quis interdum porta, diam elit suscipit tortor, id laoreet dui lacus at nulla. Donec eget ultricies justo. Fusce sed accumsan augue. Aenean eu sem sit amet purus faucibus elementum a sed magna. Duis massa massa, blandit vel porttitor et, faucibus suscipit urna. Curabitur sit amet consectetur sapien, non scelerisque quam. Integer efficitur eros augue, eget consectetur metus consectetur a. In varius metus ex, sodales auctor diam scelerisque mattis. Integer feugiat nulla nisl, quis vehicula augue luctus eget. Praesent nec fermentum urna. Aenean fringilla, mauris eget egestas suscipit, lectus neque aliquam nunc, non bibendum urna turpis sit amet neque. Pellentesque facilisis metus leo, at lacinia arcu hendrerit vel. Aliquam mattis augue a elit tempus tempor.</p> </div> <div id="footer"> <p>Copyright ©. Todos os direitos autorais reservados.<br> Desenvolvido por aluno</p> </div></body></html>
Página Servicos.html
<html><head> <title>Alimentos SA - Serviços</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div id="header"> <div id="header-content"> <h2 class="logo">Alimentos SA</h2> </div> <div id="header-content"> <ul> <li><a href="index.html">Home</a></li> <li class="active"><a href="#">Serviços</a></li> <li><a href="contato.html">Contato</a></li> </ul> </div> </div> <div id="content"> <h1>Serviços</h1> <p>Prestamos diversos serviços com relação a alimentos!</p> <div id="services-box"> <h2>Serviço 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, ligula quis interdum porta, diam elit suscipit tortor, id laoreet dui lacus at nulla.</p> </div> <div id="services-box"> <h2>Serviço 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, ligula quis interdum porta, diam elit suscipit tortor, id laoreet dui lacus at nulla.</p> </div> <div id="services-box"> <h2>Serviço 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, ligula quis interdum porta, diam elit suscipit tortor, id laoreet dui lacus at nulla.</p> </div> </div> <div id="footer"> <p>Copyright ©. Todos os direitos autorais reservados.<br> Desenvolvido por aluno</p> </div></body></html>
Página de contato.html:
<html>
<head> <title>Alimentos SA - Serviços</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"></head>
<body> <div id="header"> <div id="header-content"> <h2 class="logo">Alimentos SA</h2> </div> <div id="header-content"> <ul> <li><a href="index.html">Home</a></li> <li><a href="servicos.html">Serviços</a></li> <li class="active"><a href="#">Contato</a></li> </ul> </div> </div> <div id="content"> <h1>Contato</h1> <p>Precisa de um orçamento? Entre em contato!</p> <form action="..." method="post"> <div id="form-input"> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome"></input> </div> <div id="form-input"> <label for="email">Email:</label> <input type="email" id="email" name="email"></input> </div> <div id="form-input"> <label for="msg">Mensagem:</label><br> <textarea cols="30" rows="10" name="msg" id="msg"></textarea> </div> <button type="submit">Enviar!</button> </form> <div id="footer"> <p>Copyright ©. Todos os direitos autorais reservados.<br> Desenvolvido por aluno</p> </div></body>
</html>
Arquivo Style.css:
body{ margin-top: 80px; margin-bottom: 750px; width: 100%; position: relative; font-family: Arial, sans-serif; overflow-x: hidden; } .logo { font-family: cursive; } #content{ width: 60%; margin: auto; position: absolute; left:0; right: 0; top: 0; bottom: 0; } #header{ background-color: #ffeeff; width: 100%; height: 70px; position: fixed; top: 0; left: 0; z-index: 999; } #footer{ width: 100%; background-color: #220000; position: fixed; bottom: 0; left: 0; color: #fff; padding-left: 50px; height: 70px; z-index: 998; } #header-content{ display: inline-block; padding-left: 50px; } #services-box{ width: 300px; display: inline-block; } #form-input{ margin-bottom: 10px; } li{ list-style: none; display: inline; margin-left: 10px; padding: 10px; border: 0px solid #fff; } a:link,a:visited{ text-decoration: none; color: black; } a:hover,a:active{ color: red; } li:hover, li.active{ color: red; background-color: rgba(255,255,255,.6); border: 2px solid #fff; }
<html><head> <title>Alimentos SA</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div id="header"> <div id="header-content"> <h2 class="logo">Alimentos SA</h2> </div> <div id="header-content"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="servicos.html">Serviços</a></li> <li><a href="contato.html">Contato</a></li> </ul> </div> </div> <div id="content"> <h1>Bem Vindo!</h1> <p>A empresa Alimentos SA agradece sua visita! Somos uma empresa consagrada com mais de 9000 anos em experiência neste setor.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, ligula quis interdum porta, diam elit suscipit tortor, id laoreet dui lacus at nulla. Donec eget ultricies justo. Fusce sed accumsan augue. Aenean eu sem sit amet purus faucibus elementum a sed magna. Duis massa massa, blandit vel porttitor et, faucibus suscipit urna. Curabitur sit amet consectetur sapien, non scelerisque quam. Integer efficitur eros augue, eget consectetur metus consectetur a. In varius metus ex, sodales auctor diam scelerisque mattis. Integer feugiat nulla nisl, quis vehicula augue luctus eget. Praesent nec fermentum urna. Aenean fringilla, mauris eget egestas suscipit, lectus neque aliquam nunc, non bibendum urna turpis sit amet neque. Pellentesque facilisis metus leo, at lacinia arcu hendrerit vel. Aliquam mattis augue a elit tempus tempor.</p> </div> <div id="footer"> <p>Copyright ©. Todos os direitos autorais reservados.<br> Desenvolvido por aluno</p> </div></body></html>
Página Servicos.html
<html><head> <title>Alimentos SA - Serviços</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div id="header"> <div id="header-content"> <h2 class="logo">Alimentos SA</h2> </div> <div id="header-content"> <ul> <li><a href="index.html">Home</a></li> <li class="active"><a href="#">Serviços</a></li> <li><a href="contato.html">Contato</a></li> </ul> </div> </div> <div id="content"> <h1>Serviços</h1> <p>Prestamos diversos serviços com relação a alimentos!</p> <div id="services-box"> <h2>Serviço 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, ligula quis interdum porta, diam elit suscipit tortor, id laoreet dui lacus at nulla.</p> </div> <div id="services-box"> <h2>Serviço 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, ligula quis interdum porta, diam elit suscipit tortor, id laoreet dui lacus at nulla.</p> </div> <div id="services-box"> <h2>Serviço 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, ligula quis interdum porta, diam elit suscipit tortor, id laoreet dui lacus at nulla.</p> </div> </div> <div id="footer"> <p>Copyright ©. Todos os direitos autorais reservados.<br> Desenvolvido por aluno</p> </div></body></html>
Página de contato.html:
<html>
<head> <title>Alimentos SA - Serviços</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"></head>
<body> <div id="header"> <div id="header-content"> <h2 class="logo">Alimentos SA</h2> </div> <div id="header-content"> <ul> <li><a href="index.html">Home</a></li> <li><a href="servicos.html">Serviços</a></li> <li class="active"><a href="#">Contato</a></li> </ul> </div> </div> <div id="content"> <h1>Contato</h1> <p>Precisa de um orçamento? Entre em contato!</p> <form action="..." method="post"> <div id="form-input"> <label for="nome">Nome:</label> <input type="text" id="nome" name="nome"></input> </div> <div id="form-input"> <label for="email">Email:</label> <input type="email" id="email" name="email"></input> </div> <div id="form-input"> <label for="msg">Mensagem:</label><br> <textarea cols="30" rows="10" name="msg" id="msg"></textarea> </div> <button type="submit">Enviar!</button> </form> <div id="footer"> <p>Copyright ©. Todos os direitos autorais reservados.<br> Desenvolvido por aluno</p> </div></body>
</html>
Arquivo Style.css:
body{ margin-top: 80px; margin-bottom: 750px; width: 100%; position: relative; font-family: Arial, sans-serif; overflow-x: hidden; } .logo { font-family: cursive; } #content{ width: 60%; margin: auto; position: absolute; left:0; right: 0; top: 0; bottom: 0; } #header{ background-color: #ffeeff; width: 100%; height: 70px; position: fixed; top: 0; left: 0; z-index: 999; } #footer{ width: 100%; background-color: #220000; position: fixed; bottom: 0; left: 0; color: #fff; padding-left: 50px; height: 70px; z-index: 998; } #header-content{ display: inline-block; padding-left: 50px; } #services-box{ width: 300px; display: inline-block; } #form-input{ margin-bottom: 10px; } li{ list-style: none; display: inline; margin-left: 10px; padding: 10px; border: 0px solid #fff; } a:link,a:visited{ text-decoration: none; color: black; } a:hover,a:active{ color: red; } li:hover, li.active{ color: red; background-color: rgba(255,255,255,.6); border: 2px solid #fff; }
maotrodrigues:
Reenviando os códigos porque eles acabam bugando na formatação:
Index:
http://pastebin.com/6fMMrx3W
Servicos:
http://pastebin.com/aKys6hjs
Contato:
http://pastebin.com/D56dauyA
Style.css:
http://pastebin.com/fZ4KmdaF
Perguntas interessantes
Matemática,
9 meses atrás
Matemática,
1 ano atrás