Skip to content

Instantly share code, notes, and snippets.

@kakobotasso

kakobotasso/index.html

Created March 27, 2016 00:47
Show Gist options
  • Save kakobotasso/f0a3f43e783ab7dcab6f to your computer and use it in GitHub Desktop.
Save kakobotasso/f0a3f43e783ab7dcab6f to your computer and use it in GitHub Desktop.
Download ZIP
Projeto classificacao
Raw
index.html
<html>
<head>
<title>Armando Gay</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="guardaProjetos">
<ul id="projetos">
<!-- PROJETO -->
<li>
<!-- NOME PROJETO -->
<div class="nomeProjeto">
<p>Projeto A</p>
</div>
<!-- / NOME PROJETO -->
<div class="guardaAnalistas">
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao umaEstrela">
<span></span>
</div>
</div>
<!-- / ANALISTA -->
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao duasEstrela">
<span></span>
<span></span>
</div>
</div>
<!-- / ANALISTA -->
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao tresEstrela">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- / ANALISTA -->
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao umaEstrela">
<span></span>
</div>
</div>
<!-- / ANALISTA -->
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao duasEstrela">
<span></span>
<span></span>
</div>
</div>
<!-- / ANALISTA -->
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao tresEstrela">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- / ANALISTA -->
</div>
</li>
<!-- / PROJETO -->
<!-- PROJETO -->
<li>
<!-- NOME PROJETO -->
<div class="nomeProjeto">
<p>Projeto B</p>
</div>
<!-- / NOME PROJETO -->
<div class="guardaAnalistas">
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao umaEstrela">
<span></span>
</div>
</div>
<!-- / ANALISTA -->
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao duasEstrela">
<span></span>
<span></span>
</div>
</div>
<!-- / ANALISTA -->
</div>
</li>
<!-- / PROJETO -->
<!-- PROJETO -->
<li>
<!-- NOME PROJETO -->
<div class="nomeProjeto">
<p>Projeto C</p>
</div>
<!-- / NOME PROJETO -->
<div class="guardaAnalistas">
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao umaEstrela">
<span></span>
</div>
</div>
<!-- / ANALISTA -->
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao duasEstrela">
<span></span>
<span></span>
</div>
</div>
<!-- / ANALISTA -->
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao tresEstrela">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- / ANALISTA -->
<!-- ANALISTA -->
<div class="analista">
<div class="foto"></div>
<div class="classificacao umaEstrela">
<span></span>
</div>
</div>
<!-- / ANALISTA -->
</div>
</li>
<!-- / PROJETO -->
</ul>
</div>
</body>
</html>
Raw
style.css
*{
padding:0px;
margin:0px;
border:0px;
}
ul,
ul li{
list-style-type: none;
}
#guardaProjetos{
float:left;
width:100%;
}
#projetos{
float: left;
width: 100%;
}
#projetos li{
float: left;
width: 85%;
padding:10px;
border-bottom: 1px solid #f00;
}
.nomeProjeto{
float: left;
width:100px;
height: 100px;
background: #f0f;
}
.guardaAnalistas{
float:left;
}
.analista{
float: left;
width:80px;
padding-left:20px;
}
.analista .foto{
float: left;
margin: 10px;
width: 60px;
height: 60px;
background: #00c;
}
.analista .classificacao{
margin: 0 auto;
}
.analista .classificacao span{
float: left;
width:10px;
height: 10px;
background: #fc0;
margin:0px 5px;
}
.analista .umaEstrela{
width: 20px;
}
.analista .duasEstrela{
width: 40px;
}
.analista .tresEstrela{
width: 60px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment