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" />

<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>

<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">



<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">



<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>




<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">


<h3><a href="#"></a>Computador portátil</h3>

<p>Anunciado em 1981</p>

</article>

</div>

<div class="4u">



<h3><a href="#">Marcelo e Suelen</a></h3>

<p>Parque Zoologico de Sao Paulo.</p>

</article>

</div>

</div>

<div class="row">

<div class="4u">



<h3><a href="#">Feira do Estudante</a></h3>

<p>BIENAL DO PARQUE DO IBIRAPUERA / SP.</p>

</article>

</div>

<div class="4u">



<h3><a href="#">IAG-USP</a></h3>

<p>O Instituto de Astronomia e Geofísica .</p>

</article>

</div>

<div class="4u">



<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>




<article id="contact">

<header>

<h2>Contatos</h2>

<span>[email protected]</span>

</header>

<div class="5grid">

<div class="row">

<div class="12u">

</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

{


}

form :-moz-placeholder

{


}

form ::-moz-placeholder

{


}

form :-ms-input-placeholder

{


}

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;


color: #fff;


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));


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));


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;


rgba(50,50,50,0), rgba(45,45,45,1));


rgba(50,50,50,0), rgba(45,45,45,1));


rgba(45,45,45,1));


rgba(50,50,50,0), rgba(45,45,45,1));


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

{


}

.button-alt:active

{


rgba(45,45,45,1), rgba(50,50,50,0));


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));


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;


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));


rgba(0,0,0,0), rgba(0,0,0,0.2));


rgba(0,0,0,0.2));

background-image: -ms-linear-gradient(top, rgba(0,0,0,0),

rgba(0,0,0,0.2));


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


ul.social li.rss:hover

{ background-color: #F2600B; }

ul.social li.dribbble a


ul.social li.dribbble:hover

{ background-color: #C4376B; }

ul.social li.linkedin a


ul.social li.linkedin:hover

{ background-color: #006599; }

ul.social li.tumblr a


ul.social li.tumblr:hover

{ background-color: #51718A; }

ul.social li.googleplus a


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

{


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

{


text-align: center;

position: fixed;

left: 0;

top: 0;

width: 100%;

z-index: 10000;

cursor: default;

}

#nav ul

{

margin: 0;

}

#nav li

{


}

#nav a

{

position: relative;

display: block;

color: #fff;


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;

}

doctype html

Documents