Doctype html
description
Transcript of Doctype html
Mockup
Wireframes
<!DOCTYPE HTML>
<html>
<head>
<title>site pessoal marcelo simião de oliveira</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700" rel="stylesheet"
/>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->
</head>
<body>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#top">Home</a></li>
<li><a href="#work">Estudos</a></li>
<li><a href="#portfolio">Galeria</a></li>
<li><a href="#contact">Contato</a></li>
</ul>
</nav>
<!-- Home -->
<div class="wrapper wrapper-style1 wrapper-first">
<article class="5grid-layout" id="top">
<div class="row">
<div class="4u">
<span class="me image image-full"><img src="images/me.jpg" alt="" /></span>
</div>
<div class="8u">
<header>
<h2><strong>marcelo Simião de Oliveira</strong>.</h2>
<div class="row row-special">
<div class="12u">
<h3>Redes Sociais</h3>
<ul class="social">
<li class="facebook"><a
href="http://www.facebook.com/groups/190160301118922">Facebook</a></li>
<li class="twitter"><a href="http://twitter.com/n33co">Twitter</a></li>
<li class="dribbble"><a href="http://dribbble.com/n33">Dribbble</a></li>
<li class="linkedin"><a href="#">LinkedIn</a></li>
<li class="tumblr"><a href="#">Tumblr</a></li>
<li class="googleplus"><a href="#">Google+</a></li>
</ul>
</div>
</header>
<p>Estudante <strong> de </strong>Sistema para Internet <a
href="http://marcelinhoneon.blogspot.com.br/2013/03/tabelas-html_1180.html>AJ</a> for
<a href=">blogger</a> </p>
<a href="#work" class="button button-big">Estudos</a>
<a id="doc" href="doc.pdf" target="blank">Documentação do site</a>
</div>
</div>
</article>
</div>
<!-- Work -->
<div class="wrapper wrapper-style2">
<article id="work">
<header>
<h2>Faculdade de Tecnologia (FATEC) - Carapicuíba .</h2>
<span>Curso de Sistema para internet.</span>
</header>
<div class="5grid-layout">
<div class="row">
<div class="4u">
<section class="box box-style1">
<span class="image image-centered"><img src="images/work01.png" alt="" /></span>
<h3>Sobre o curso</h3>
<p>Esse profissional faz projetos e administra redes de computadores, instala e configura
equipamentos e softwares, monta microcomputadores.<br ></p>
<p>configura servidores web e constrói banco de dados para a internet. Lida com ferramentas
digitais usadas na criação e na administração de websites.<br ></p>
<p>Monta sites para a internet ou intranet e faz sua manutenção. Soluciona problemas de
tecnologia web, além da implantação de sistemas de comércio eletrônico, atuando na
definição de estratégias de negócios virtuais. Também administra redes em geral..</p>
</section>
</div>
<div class="4u">
<section class="box box-style1">
<span class="image image-centered"><img src="images/work02.png" alt="" /></span>
<h3>Meu curriculo virtual</h3
<p> Nome: Marcelo Simião de Oliveira
E-mail: [email protected]
Sexo:Masculino
Estado Civil:Casado
Data de nascimento:11/06/1979<br ></p>
Cidade:Osasco
Endereço:Rua São Jorge
Bairro:Vila Isabel
CEP:06180-080
Telefone Residencial:(011)3695-0402
Celular(011)998616882<br ></P>
ÁREA DE ATUAÇÃO:
Nível de atuação:Progamador
Faixa Salarial:2.500 Reais
Forma de Contratação:noturno
FORMAÇÃO ACADÊMICA:
Nível de escolaridade:Ensino superior
Curso/área: Sistema para internet
Instituição:Fatec carapicuiba
</p>
</section>
</div>
<div class="4u">
<section class="box box-style1">
<span class="image image-centered"><img src="images/work03.png" alt="" /></span>
<h3>Dados pessoais</h3>
<p>Nome:Marcelo Simião de oliveira</P>
Data de Nascimento: 11-06-1979
Local: osasco- SP
Signo: Gemeos
Altura: 1,75 cm
Peso: 86 kg
Animal de Estimação: Cachorro
Ator: Wagner Moura
Atriz: Camila Pitanga
Cantor: Cazuza
Cantora: Ivete Sangalo
Dupla: Zezé di Camargo e Luciano
Cor: Vermelha
Sapato: 42<br ></P>
Manequim: 40
Hobby: Jogar futebol
Time: Sao Paulo
Qualidade: Sinceridade
Defeito: Muito quieto
Perfume: Hugo Boss
Roupa: Calça jeans, camiseta e tênis
Frase:A força não provém da capacidade física e sim de uma vontade indomável.
Mahatma Gandhi</p>
</section>
</div>
</div>
</div>
<footer>
<p>Aprenda a argumentar e nunca mais precisará ter razão.</p>
<a href="#portfolio" class="button button-big">Galeria</a>
</footer>
</article>
</div>
<!-- Portfolio -->
<div class="wrapper wrapper-style3">
<article id="portfolio">
<header>
<h2>Galeria</h2>
<span>fotos pessoais</span>
</header>
<div class="5grid-layout">
<div class="row">
<div class="12u">
</div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<a href="#" class="image image-full"><img src="images/portfolio01.jpg" alt="" /></a>
<h3><a href="#">musico </a></h3>
<p>Estudio de São Paulo</p>
</article>
</div>
<div class="4u">
<article class="box box-style2">
<a href="#" class="image image-full"><img src="images/portfolio02.jpg" alt="" /></a>
<h3><a href="#"></a>Computador portátil</h3>
<p>Anunciado em 1981</p>
</article>
</div>
<div class="4u">
<article class="box box-style2">
<a href="#" class="image image-full"><img src="images/portfolio03.jpg" alt="" /></a>
<h3><a href="#">Marcelo e Suelen</a></h3>
<p>Parque Zoologico de Sao Paulo.</p>
</article>
</div>
</div>
<div class="row">
<div class="4u">
<article class="box box-style2">
<a href="#" class="image image-full"><img src="images/portfolio04.jpg" alt="" /></a>
<h3><a href="#">Feira do Estudante</a></h3>
<p>BIENAL DO PARQUE DO IBIRAPUERA / SP.</p>
</article>
</div>
<div class="4u">
<article class="box box-style2">
<a href="#" class="image image-full"><img src="images/portfolio05.jpg" alt="" /></a>
<h3><a href="#">IAG-USP</a></h3>
<p>O Instituto de Astronomia e Geofísica .</p>
</article>
</div>
<div class="4u">
<article class="box box-style2">
<a href="#" class="image image-full"><img src="images/portfolio06.jpg" alt="" /></a>
<h3><a href="#"> Praia Grande</a></h3>
<p>a cidade e suas atrações turísticas.</p>
</article>
</div>
</div>
</div>
<footer>
<p>Aprenda a argumentar e nunca mais precisará ter razão.</p>
<a href="#contact" class="button button-big">Contatos</a>
</footer>
</article>
</div>
<!-- Contact -->
<div class="wrapper wrapper-style4">
<article id="contact">
<header>
<h2>Contatos</h2>
<span>[email protected]</span>
</header>
<div class="5grid">
<div class="row">
<div class="12u">
<form method="post" action="#">
<div class="5grid">
<div class="row">
<div class="6u">
<input type="text" name="name" id="name" placeholder="Nome" />
</div>
<div class="6u">
<input type="text" name="email" id="email" placeholder="Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text"name="assunto" id="assunto" placeholder="assunto" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="mensagen" id="mensagen" placeholder="mensagen"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<input type="submit" class="button" value="Enviar mensagen" />
<input type="reset" class="button button-alt" value="limpar" />
</div>
</div>
</div>
</form>
</div>
</div>
<footer>
<p id="copyright">
desenvolvido por marcelo simiao de oliveira aluno de sistema para internet.
<a id="doc" href="doc.pdf" target="blank">Documentação do site</a>
</p>
</footer>
</article>
</div>
</body>
</html>
Códigos CSS
/*
Miniport 1.0 by HTML5 Up!
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license
(html5up.net/license)
*/
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body, input, textarea
{
font-family: 'Open Sans', sans-serif;
line-height: 1.85em;
color: #888;
font-weight: 300;
}
a
{
color: #3B95C6;
text-decoration: underline;
-moz-transition: color .2s ease-in-out;
-webkit-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
a:hover
{
color: #1B75A6 !important;
}
strong, b
{
font-weight: 600;
color: #3e3e3e;
}
h1, h2, h3, h4, h5, h6
{
color: #3e3e3e;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
text-decoration: none;
color: inherit;
}
h2, h3, h4, h5, h6
{
font-weight: 700;
}
h1
{
font-weight: 300;
}
h1 strong
{
font-weight: 700;
}
em, i
{
font-style: italic;
}
form
{
}
form input,
form select,
form textarea
{
-webkit-appearance: none;
}
form input[type=text],
form input[type=password],
form select,
form textarea
{
width: 100%;
border: 0;
padding: 0.75em;
font-size: 1em;
border-radius: 8px;
background: #282828;
color: #bbb;
box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.05), 0px
1px 0px 0px rgba(255,255,255,0.025);
}
form input[type=text]:focus,
form input[type=password]:focus,
form select:focus,
form textarea:focus
{
box-shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.05), 0px
1px 0px 0px rgba(255,255,255,0.025), 0px 0px 2px 2px #74CAEE;
}
form textarea
{
height: 15em;
}
form .formerize-placeholder
{
color: #555 !important;
}
form ::-webkit-input-placeholder
{
color: #555 !important;
}
form :-moz-placeholder
{
color: #555 !important;
}
form ::-moz-placeholder
{
color: #555 !important;
}
form :-ms-input-placeholder
{
color: #555 !important;
}
form ::-moz-focus-inner
{
border: 0;
}
br.clear
{
clear: both;
}
p, ul, ol, dl, table
{
margin-bottom: 2em;
}
section,
article
{
margin-bottom: 3em;
}
section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
.image
{
display: inline-block;
}
.image img
{
display: block;
width: 100%;
}
.image-full
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}
.image-left
{
float: left;
margin: 0 2em 2em 0;
}
.image-centered
{
display: block;
margin: 0 0 2em 0;
}
.image-centered img
{
margin: 0 auto;
width: auto;
}
.button
{
position: relative;
display: inline-block;
color: #fff;
text-decoration: none;
font-weight: 700;
border: 0;
outline: 0;
cursor: pointer;
border-radius: 8px;
text-shadow: -1px -1px 0.5px rgba(0,0,0,0.5);
overflow: hidden;
background: #61b8db;
background-image: -moz-linear-gradient(top, rgba(97,184,219,0),
rgba(48,141,196,1));
background-image: -webkit-linear-gradient(top,
rgba(97,184,219,0), rgba(48,141,196,1));
background-image: -o-linear-gradient(top, rgba(97,184,219,0),
rgba(48,141,196,1));
background-image: -ms-linear-gradient(top, rgba(97,184,219,0),
rgba(48,141,196,1));
background-image: linear-gradient(top, rgba(97,184,219,0),
rgba(48,141,196,1));
box-shadow: inset 0px 0px 0px 1px #135c86, inset 0px 2px 1px
0px rgba(255,255,255,0.75);
-moz-transition: background-color .2s ease-in-out;
-webkit-transition: background-color .2s ease-in-out;
-o-transition: background-color .2s ease-in-out;
-ms-transition: background-color .2s ease-in-out;
transition: background-color .2s ease-in-out;
}
.button:before
{
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('images/bg.png');
}
.button:hover
{
background-color: #76cdf0;
color: #fff !important;
}
.button:active
{
background-image: -moz-linear-gradient(top,
rgba(48,141,196,1), rgba(77,164,199,0));
background-image: -webkit-linear-gradient(top,
rgba(48,141,196,1), rgba(77,164,199,0));
background-image: -o-linear-gradient(top,
rgba(48,141,196,1), rgba(77,164,199,0));
background-image: -ms-linear-gradient(top,
rgba(48,141,196,1), rgba(77,164,199,0));
background-image: linear-gradient(top, rgba(48,141,196,1),
rgba(77,164,199,0));
box-shadow: inset 0px 0px 0px 1px #135c86, inset 0px -2px
1px 0px rgba(255,255,255,0.75);
top: 1px;
}
.button-alt
{
background-color: #393939;
background-image: -moz-linear-gradient(top,
rgba(50,50,50,0), rgba(45,45,45,1));
background-image: -webkit-linear-gradient(top,
rgba(50,50,50,0), rgba(45,45,45,1));
background-image: -o-linear-gradient(top, rgba(50,50,50,0),
rgba(45,45,45,1));
background-image: -ms-linear-gradient(top,
rgba(50,50,50,0), rgba(45,45,45,1));
background-image: linear-gradient(top, rgba(50,50,50,0),
rgba(45,45,45,1));
box-shadow: inset 0px 0px 0px 1px #242424, inset 0px 2px
1px 0px rgba(255,255,255,0.2);
}
.button-alt:hover
{
background-color: #444;
}
.button-alt:active
{
background-image: -moz-linear-gradient(top,
rgba(45,45,45,1), rgba(50,50,50,0));
background-image: -webkit-linear-gradient(top,
rgba(45,45,45,1), rgba(50,50,50,0));
background-image: -o-linear-gradient(top,
rgba(45,45,45,1), rgba(50,50,50,0));
background-image: -ms-linear-gradient(top,
rgba(45,45,45,1), rgba(50,50,50,0));
background-image: linear-gradient(top,
rgba(45,45,45,1), rgba(50,50,50,0));
box-shadow: inset 0px 0px 0px 1px #242424, inset
0px -2px 1px 0px rgba(255,255,255,0.2);
}
.button-big
{
}
ul.social
{
cursor: default;
margin: 0;
}
ul.social li
{
position: relative;
display: inline-block;
margin: 0.25em;
top: 0;
border-radius: 6px;
overflow: hidden;
background: #444;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0),
rgba(0,0,0,0.2));
background-image: -webkit-linear-gradient(top,
rgba(0,0,0,0), rgba(0,0,0,0.2));
background-image: -o-linear-gradient(top, rgba(0,0,0,0),
rgba(0,0,0,0.2));
background-image: -ms-linear-gradient(top, rgba(0,0,0,0),
rgba(0,0,0,0.2));
background-image: linear-gradient(top, rgba(0,0,0,0),
rgba(0,0,0,0.2));
-moz-transition: background-color .2s ease-in-out, top .2s
ease-in-out;
-webkit-transition: background-color .2s ease-in-out, top .2s
ease-in-out;
-o-transition: background-color .2s ease-in-out, top .2s
ease-in-out;
-ms-transition: background-color .2s ease-in-out, top .2s
ease-in-out;
transition: background-color .2s ease-in-out, top .2s ease-
in-out;
box-shadow: inset 0px 0px 0px 1px #282828, inset 0px 2px
1px 0px rgba(255,255,255,0.1);
}
ul.social li a
{
display: block;
position: relative;
background: url('images/social.png');
width: 48px;
height: 48px;
text-indent: -9999em;
outline: 0;
}
ul.social li.facebook a
{ background-position: 0px 0px; }
ul.social li.facebook:hover
{ background-color: #3C5A98; }
ul.social li.twitter a
{ background-position: -48px 0px; }
ul.social li.twitter:hover
{ background-color: #2DAAE4; }
ul.social li.rss a
{ background-position: -96px 0px; }
ul.social li.rss:hover
{ background-color: #F2600B; }
ul.social li.dribbble a
{ background-position: -144px 0px; }
ul.social li.dribbble:hover
{ background-color: #C4376B; }
ul.social li.linkedin a
{ background-position: -192px 0px; }
ul.social li.linkedin:hover
{ background-color: #006599; }
ul.social li.tumblr a
{ background-position: -240px 0px; }
ul.social li.tumblr:hover
{ background-color: #51718A; }
ul.social li.googleplus a
{ background-position: -288px 0px; }
ul.social li.googleplus:hover
{ background-color: #DA2713; }
ul.social li:hover
{
top: -5px;
}
ul.social li:active
{
top: 0;
}
.box
{
background: #fff;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.15), 0px 2px 3px
0px rgba(0,0,0,0.1);
text-align: center;
}
.box .image-full
{
position: relative;
}
/*********************************************************************************/
/* Wrappers */
/*********************************************************************************/
.wrapper
{
background-image: url('images/bg.png');
box-shadow: inset 0px 1px 0px 0px rgba(0,0,0,0.05), inset 0px 2px
3px 0px rgba(0,0,0,0.1);
}
.wrapper-first
{
box-shadow: none;
}
.wrapper-style1
{
background-image: none;
background-color: #fff;
}
.wrapper-style2
{
background-color: #fafafa;
text-shadow: 1px 1px 0px #fff;
}
.wrapper-style3
{
background-color: #f4f4f4;
text-shadow: 1px 1px 0px #fff;
}
.wrapper-style4
{
background-color: #303030;
color: #999;
text-shadow: -1px -1px 0px #181818;
}
.wrapper-style4 h1,
.wrapper-style4 h2,
.wrapper-style4 h3,
.wrapper-style4 h4,
.wrapper-style4 h5,
.wrapper-style4 h6
{
color: #fff;
}
.wrapper-style4 .row-special
{
border-top: solid 1px rgba(0,0,0,0.5);
border-bottom: solid 1px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.1),
0px 1px 0px 0px rgba(255,255,255,0.1);
}
/*********************************************************************************/
/* Nav */
/*********************************************************************************/
#nav
{
background-color: #282828;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10000;
cursor: default;
}
#nav ul
{
margin: 0;
}
#nav li
{
display: inline-block;
}
#nav a
{
position: relative;
display: block;
color: #fff;
text-decoration: none;
outline: 0;
}
#nav a:hover
{
color: #fff !important;
}
#nav a.active:before
{
content: '';
display: block;
position: absolute;
bottom: -0.6em;
left: 50%;
margin-left: -0.75em;
border-left: solid 0.75em transparent;
border-right: solid 0.75em transparent;
border-top: solid 0.6em #282828;
}
/*********************************************************************************/
/* Articles */
/*********************************************************************************/
#top
{
}
#top .me
{
border-radius: 50%;
overflow: hidden;
}
#top p
{
}
#top p a
{
color: inherit;
}
/*********************************************************************************/
/* Copyright */
/*********************************************************************************/
#copyright
{
color: #666;
}
#copyright a
{
color: inherit;
-moz-transition: color .2s ease-in-out;
-webkit-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
#copyright a:hover
{
color: #777;
}