Não consigo deixar meu portfolio igual o do exemplo, falta alguns detalhes nos quadrados dos links, meu codigo tá um pouco desorganizado kkk
body{
background-color: #F2FFFC;
font-family: "Crimson Text", serif;
line-height: 1.5;
margin: auto;
}
main h1{
background-color: rgb(120, 10, 60);
font-size: 60px;
text-align: center;
color: #ffffff;
font-family: "Open Sans Condensed", "Arial", sans-serif;
border-bottom: 10px solid #000000;
}
.paragrafo{
margin-top: 60px;
margin-bottom: 40px;
}
.quadrado1{
background-color: #FFFFFF;
border: 10px solid #000000;
width: 400px;
height: 20px; /* A mágica está aqui */
padding-bottom: 20%; /* ... e está aqui */
margin: 1%;
}
.quadrado2{
background-color: #FFFFFF;
border: 10px solid #000000;
width: 400px;
height: 20px; /* A mágica está aqui */
padding-bottom: 20%; /* ... e está aqui */
margin: 1%;
}
.quadrado3{
background-color: #FFFFFF;
border: 10px solid #000000;
width: 400px;
height: 20px; /* A mágica está aqui */
padding-bottom: 20%; /* ... e está aqui */
margin: 1%;
}
.quadrado4{
background-color: #FFFFFF;
border: 10px solid #000000;
width: 400px;
height: 20px; /* A mágica está aqui */
padding-bottom: 20%; /* ... e está aqui */
margin: 1%;
}
.sitestrabalhados{
font-size: 25px;
/*text-decoration: none;*/
list-style: none;
}
#quadradostextos ul li{
/* margin-top: 50px;
margin-left: 30px;
margin-bottom: 20px;*/
font-size: 20px;/*fonte dos links*/
}
.links-naveg {
color: #F2FFFC;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 28px;
}
#icones-sociais li {
display: inline-block; /*lista horizontal*/
height: 60px;
text-align: center;
}
.links-naveg {
background-color: #3C1D3D;
font-family: "Open Sans Condensed";
color: #FFFFFF:
}
nav ul li a, #icones-sociais a{
color: #FFFFFF;
font-size: 16px;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: none;
color: pink;
}
.links-naveg h2{
font-size: 25px;
}
.quadrado1 ul li {
margin-top: 20px;
margin-left: 30px;
margin-right: 20px;
}
.quadrado2 ul li {
margin-top: 5px;
margin-left: 30px;
margin-right: 20px;
}
.quadrado3 ul li {
margin-top: 10px;
margin-left: 30px;
margin-right: 20px;
}
.quadrado4 ul li {
margin-top: 10px;
margin-left: 30px;
margin-right: 20px;
}
.bmwfoto{
width: 300px;
margin-left: 35px;
margin-top: 15px;
/*border: 10px solid #000000;*/
}
.ibmfoto{
width: 300px;
margin-left: 35px;
margin-top: 15px;
/*border: 10px solid #000000;*/
}
.uolfoto{
width: 300px;
margin-left: 35px;
margin-top: 15px;
/*border: 10px solid #000000;*/
}
.g1foto{
width: 300px;
margin-left: 35px;
margin-top: 15px;
/*border: 10px solid #000000;*/
}
/*.quadrado1{
float: left;
}
.quadrado2{
float: left;
}
.quadrado3{
float: right;
}
.quadrado4{
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<title>Portfolio João da Silva</title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="portfolio.css"/>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<h1>Portfolio</h1>
<div class="container">
<p class="paragrafo">Veja abaixo os meus projetos mais relevantes</p>
</div>
</main>
<aside>
<div id="quadradostextos">
<div class="quadrado1">
<img class="bmwfoto" src="bmw.png" alt="empresa de veiculos BMW">
<ul>
<li><a class="link-bmw" href="http://www.bmw.com.br/pt/index.html">BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</a></li>
</ul>
</div>
<div class="quadrado2">
<img class="ibmfoto" src="ibm.png" alt="empresa do ramo de computação IBM">
<ul>
<li><a class="sites-trabalhados2" href="https://www.ibm.com/br-pt/">IBM.com:aplicação de progressive enhancement em conjunto com aplicação back-end</a></li>
</ul>
</div>
<div class="quadrado3">
<img class="uolfoto" src="uol.png" alt="site de noticias UOL">
<ul>
<li><a class="sites-trabalhados3" href="https://www.uol.com.br/">UOL.com.br: reformulação de design e implementação de HTML, CSS e Java Script</a></li>
</ul>
</div>
<div class="quadrado4">
<img class="g1foto" src="g1.png" alt="foto do globo">
<ul>
<li><a class="sitestra-balhados4" href="http://g1.globo.com/">G1.com.br: reformulação de design e implementação de HTML, CSS e Java Script</a></li>
</ul>
</div>
</div>
<img src="eu.jpg" alt="João da Silva"/>
<div class="links-naveg">
<h2>João da Silva</h2>
<nav>
<ul>
<li><a href="home.html" class="barra-naveg">Home</a></li>
<li><a href="portfolio.html" class="barra-naveg">PortFolio</a></li>
<li><a href="biografia.html" class="barra-naveg">Sobre mim</a></li>
<li><a href="blog.html" class="barra-naveg">Blog</a></li>
<li><a href="contato.html" class="barra-naveg">Contato</a></li>
</ul>
</nav>
<ul id="icones-sociais"> <!-- id é único-->
<li>
<a class="github" href="https://github.com/joaodasilva">
Github
</a>
</li>
<li>
<a class="twitter" href="https://twitter.com/joaodasilva">
Twitter
</a>
</li>
<li>
<a class="linkedin" href="https://www.linkedin.com/joaodasilva">
Linkedin
</a>
</li>
</ul>
</div>
</aside>
<footer class="rodape">
© João da Silva 2014
</footer>
</body>
</html>insira seu código aqui