.icone-rede-social não está indo | HTML5 e CSS3 I: Suas primeiras páginas da Web

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Mais seletores e atividade Usando Mais Seletores

por edmundo.filho

| 96k xp | 20 posts

Analista de Sistemas Senior

eu não estou conseguindo fazer com que portfolio,home, sobre mim,blog fiquem uma embaixo da outra e coloquei certo o codigo na bio.html no site.css e no blog.html a bio e esse aqui

 <aside>
    <h1>João da Silva</h1>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="bio.html">Sobre mim</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contato.html">Contato</a></li>
        </ul>
    </nav>
    <ul class="icone-rede-social">
        <li>
            <a href="https://github.com/joaodasilva">
                <img src="github.png" alt="Github">
            </a>
        </li>
        <li>
            <a href="https://twitter.com/joaodasilva">
                <img src="twitter.png" alt="Twitter">
            </a>
        </li>
        <li>
            <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                <img src="linkedin.png" alt="LinkedIn">
            </a>
        </li>
    </ul>
</aside>
        <footer>
        &copy; João da silva 2014
      </footer>
        </main>
    </body>
    </html>

3 respostas

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

26/12/2018

Oi Edmundo tudo bem?

Poderia me mostra o CSS da classe icone-rede-social por gentileza.

por edmundo.filho

| 96k xp | 20 posts

Analista de Sistemas Senior

26/12/2018

body {
     font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;}
font-size:120%;
line-height:1.5;}
h1, h2  {

    font-family: "Open Sans Condensed", "Arial", sans-serif;}


main h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
padding:25px;
border-bottom: 10px solid black;
font-size:60px;
}

p {
    text-align: justify;
    font-family: "Crimson Text"
margin:20px;
}
blockquote {
    background-color: #D9E5E3;
padding:20px;
border: 10px solid #C2CCCA;
width:198PX;
box-sizing:border-box;
margin:20px 40px;
}



aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
}

footer {
    background-color: #000;
    color: #F2FFFC;
}

nav a {
    color: #F2FFFC;
}
main a {
    color: #851944;
}

aside a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
text-decoration:none;
}



blockquote, aside, footer {
    padding: 20px;}

main div {
    width: 720px;
    margin: auto;
padding:30px 0;
}
aside h1 {
    font-size: 30px;
    margin-bottom: 25px;
}
strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

h2 {
    font-size: 30px;
}
 aside li{
    display: inline-block;
}
 .icone-rede-social li   {
    display:inline-block;
}

solução!

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

26/12/2018

Coloque o código do CSS assim :

 aside li{
    display: block;
}

Veja como ficou só essa parte do HTML em:

https://codepen.io/neoandrevictor/pen/GPvomv

Espero ter ajudado!!!