Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Eu fiz a pagina index por mim mesmo, não sei se fiz errado alguma coisa ou posso melhorar, estou disposto a aprender mais.

Index.HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Index - João da Silva</title>
        <meta charset = "utf8">
            <link rel= "icon" href= "css/img/favicon.png">
            <link rel= "stylesheet" href= "css/reset.css">
            <link rel= "stylesheet" href= "css/index/index.css">
            <link rel= "stylesheet" href= "http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
            <link rel= "stylesheet" href= "http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
        </head>

<body>
    <main>


    <h1 class= "titulo-principal">João da Silva</h1>    
     <h2 class= "titulo-principal subtitulo">Desenvolvedor web</h2>    

        <div>
            <nav class= "parte-1">
            <p class= "paragrafo-1"><em class= "ola">Olá,</em> <em>meu nome é</em> <strong class= "silva">João da Silva</strong></p>
            <p class= "paragrafo-2"><em>e eu construo</em> <strong>sites maravilhosos</strong></p>


            <li class= "box"><a class= "conheca" href= "bio.html" >Conheça mais um pouco sobre mim</a></li>
        </nav> 

        <nav class= "parte-2">
                <h1 class= "titulo">Trabalhos</h1>

                <ul class= "imagens">
                <li>
                <img src= "css/img/bmw.png">
                <img src= "css/img/ibm.png">       
                <img src= "css/img/uol.png">   
                </li>
                </ul>

                <li class= "box"><a class= "veja-mais" href= "portifolio.html" >Veja mais</a></li>   
        </nav>  

        <nav class= "parte-3">
             <h1 class= "titulo">Blog</h1>   
             <p>Últimos posts</p>   
                <ul > 
                    <li class= "informacao"><a class= "letras" href= "#">O essencial de design responsivo</a></li>
                    <li class= "informacao"><a class= "letras" href= "#">Por que fazer páginas acessiveis?</a></li>
                    <li class= "informacao"><a class= "letras" href= "#">JavaScript não obstrusivo</a></li>      
                </ul>    
            <li class= "box"><a class= "veja-mais" href= "blog.html" >Veja mais</a></li>
        </nav> 

         <nav class= "parte-4">            
             <h1 class= "titulo">Vamos Conversar?</h1>
             <p>Você pode entrar em contato comigo por <a class= "dados" href= "#">e-mail</a> ou pelo telofone <a class= "dados" href= "#">(12)3456-7890</a></p>             
         </nav>   


    </div>   
     </main>   

<img class= "minha-foto" src= "css/img/eu.jpg" alt= "Foto de João da Silva">

</body>
</html>
7 respostas

Index.CSS

html{
    font-size: 120%;
}

.titulo-principal{
    font-size: 285%;
    text-align: center;
    color: #FFF;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    background-color: #851944;
    padding-top: 16rem;
}

.subtitulo{
    font-size: 120%;
    text-transform: inherit;
    box-sizing: border-box;
    border-bottom: .4rem solid black;
    padding-bottom: 2.5rem;
    margin-top: -15rem;
}

.minha-foto{
    position: absolute;
    top: 1.7rem;
    margin-left: 43%;
    max-width:12rem;
    max-height:15rem;
}

.parte-1{
    background-color: #F2FFFC;
    padding-top: 1.5rem;
    padding-bottom: 4rem;
}

.conheca{
    color: #FFF;
     margin-left: 4.5rem;

}

.veja-mais{
    color: #FFF;
    margin-left: 9rem;
}

.box{
   background-color: #851944;
   border: .2rem solid #000;    
   margin: 1em;
   display: block;
   margin-left: 33%;
   padding: 1.4rem;
    margin-top: 3rem;
   margin-right: 35%; 
}

.silva{
    font-size: 2rem;
    color: #000000;
    font-weight: bold;
}

.ola{
    color: #6d6d6d;
    font-size: 3rem;
}

strong{
    color: #851944;
    font-size: 4rem;
    font-weight: 500;
}

.paragrafo-1{
    margin: 4rem 16.5rem .1rem;
    font-family: "Crimson Text", "Times New Roman", serif;
}

.paragrafo-2{
    margin-left: 26rem;
    margin-bottom: 3.5rem;
    font-family: "Crimson Text", "Times New Roman", serif;
}

em{
    color: #bcbcbc;
}

.parte-2{
    background-color: #3C1D3D;
    padding-top: .4rem;
    border-top: .4rem solid black;
    padding-bottom: 4rem;
    border-bottom: .4rem solid black;
}

.titulo{
    font-size: 220%;
    text-transform: uppercase;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    margin-top: 4%;
    color: #FFF;
    margin-left: 2.2%;
}

.imagens li{
   text-align: center;
    margin-top: 3rem;
     border: .4rem solid black;
   margin-left: 2rem;
    margin-right: 2rem;
}

.imagens img{
 width: 493px;
height: 151px;  
}

.parte-3{
  background-color: #b1b1b1;
    padding-top: .1rem;
    padding-bottom: 5rem;
    border-bottom: .4rem solid #851944;
}

p{
    margin-left: 1.8rem;
    color: #FFF;
    margin-bottom: 2rem;
}

.letras{
    color: #993399 ;
}

.informacao{
    margin-left: 1.8rem;
    padding: .5rem;
}

.parte-4{
    padding-top: .5rem;
    padding-bottom: 1rem;
    background-color: black;
}

.parte-4 .titulo{
    margin-bottom: 2rem;
}

p .dados{
    color: #8b0000;
}

Não consigo lançar meu código completo no site se puderem me ajudar fico agradecido!

Opa Gustavo!

Aprender mais é sempre bom! Estamos todos juntos nessa jornada do conhecimento!

Adoraria dar uma olhada no seu site amigo! Para inserir código, utilize o botão "<> INSERIR CÓDIGO" no canto superior esquerdo da caixa de digitação!

Espero que esteja aprendendo bastante e gostando de tudo aqui!

Abraços e bons estudos!

Reset.CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Agora sim, amigo se quiser dar uma olhada para me ajudar a melhorar. Já fiz as alteraçães necessárias no insira código . Mas já digo que estou aprendendo e não manjo muito kkkkk. Pode conferir kkk ^^, e outra pergunta, é recomendável colocar meu código igual o do professor antes de prosseguir o curso?

solução!

Fala Gustavo!

Dei uma olhada aqui e você está indo por um bom caminho! Mantenha esse espirito e continue colocando em prática o que aprendeu! Minha recomendação para você é que tenha sempre um projeto próprio, mas siga fielmente e entenda o que o instrutor está demonstrando nos vídeos! Dessa forma você terá dois momentos de fixação, em situações diferentes e projetos distintos.

Mas por que seguir fielmente?

Durante o curso, situações específicas serão apresentadas e soluções serão propostas, caso alteremos muito o código, podemos acabar gerando novas complicações. Por isso digo para seguir fielmente, para primeiro você experimentar em um "ambiente controlado" e entender o funcionamento das coisas e depois partir para seu próprio projeto e colocar a prova tudo que aprendeu! E não se esqueça, pode contar conosco quando se deparar com alguma situação inusitada ou com algo que você não conseguiu entender!

Não deixe de compartilhar tanto suas dúvidas quanto suas descobertas! Todos temos muito o que aprender ainda e se nos ajudarmos o caminho será mais tranquilo!

Antes de terminar, só mais uma coisa. Você ainda verá muita coisa nesse curso (vejo que ainda está no inicio!) e também aqui na Alura, que poderá utilizar para incrementar seu projeto, siga em frente!

Meus parabéns por todo o esforço e empenho, o diferencial é esse.

Espero que esteja gostando e qualquer problema é só nos procurar!

Um grande abraço e bons estudos!

Valeu Paulo! Vou colocar em prática o que você disse e seguir e vou seguir em frente.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software