Skip to content

Instantly share code, notes, and snippets.

@keviocastro

keviocastro/Untitled-1

Last active May 29, 2018 22:53
Show Gist options
  • Save keviocastro/7bc3967573b378cee93b31e579cc3209 to your computer and use it in GitHub Desktop.
Save keviocastro/7bc3967573b378cee93b31e579cc3209 to your computer and use it in GitHub Desktop.
Download ZIP
tvAula
Raw
inde.xhtml
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><head><link type="text/css" rel="stylesheet" href="/TreinoWeb/javax.faces.resource/theme.css.xhtml?ln=primefaces-bootstrap" /><link type="text/css" rel="stylesheet" href="/TreinoWeb/javax.faces.resource/tv-aula.css.xhtml?ln=css" /><link type="text/css" rel="stylesheet" href="/TreinoWeb/javax.faces.resource/font-awesome3.2.3.min.css.xhtml?ln=css" />
<title>TV Aula</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="TVGestor" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
<link rel="shortcut icon" sizes="256x256" href="/TreinoWeb/javax.faces.resource/imagens/favicon_ac.png.xhtml" />
<link rel="shortcut icon" sizes="196x196" href="/TreinoWeb/javax.faces.resource/imagens/favicon_ac.png.xhtml" />
<link rel="shortcut icon" sizes="152x152" href="/TreinoWeb/javax.faces.resource/imagens/favicon_ac.png.xhtml" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/TreinoWeb/javax.faces.resource/imagens/icones_treino_152-precomposed.png.xhtml" />
<link rel="apple-touch-icon-precomposed" href="/TreinoWeb/javax.faces.resource/imagens/icones_treino_128-precomposed.png.xhtml" />
<link rel="icon" type="image/png" href="/TreinoWeb/javax.faces.resource/imagens/favicon_ac.png.xhtml" /></head>
<body>
<div class="cabecario">
<div class="esquerda">
<div class="logo">
<img src="/TreinoWeb/javax.faces.resource/imagens/logos_turmacheia.png.xhtml" />
<span>Aula Cheia</span>
</div>
</div>
<div class="centro">
<div class="professor">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/67.jpg" />
</div>
<div class="descricao">
<span class="titulo">PROFESSOR</span>
<span class="nome">Fábio de Melo</span>
</div>
</div>
<div class="titulo">
<span class="nome-aula">ZUMBA</span>
</div>
<div class="horario">
<i class="fa-icon-time" style="font-size: 40px; color: white;"><span class="horario">19:00 - 20:00</span></i>
</div>
</div>
</div>
<div class="conteudo">
<div class="lista-alunos">
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/16.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/35.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/21.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/30.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/33.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/10.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/7.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/24.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/15.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/26.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/33.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/29.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/40.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/32.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/4.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/34.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/36.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/26.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/29.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/39.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/35.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/2.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/13.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/12.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/7.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<!--&lt;div class="aluno"&gt;-->
<!--&lt;div class="avatar"&gt;-->
<!--&lt;img src="https://randomuser.me/api/portraits/women/10.jpg" class="foto" /&gt;-->
<!--&lt;div class="icone"&gt;-->
<!--&lt;img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" /&gt;-->
<!--&lt;/div&gt;-->
<!--&lt;/div&gt;-->
<!--&lt;span class="nome"&gt;Isa Fernanda&lt;/span&gt;-->
<!--&lt;/div&gt;-->
</div>
</div>
</body>
</html>
Raw
styles.css
body {
font-family: 'Lato', sans-serif;
margin: 0px;
padding: 0px;
}
@media only screen and (max-width: 1000px) {
.cabecario .centro .titulo span {
font-size: 34px;
}
}
.cabecario {
display: flex;
height: 115px;
background-color: #490247;
align-items: center;
justify-content: flex-start;
}
.cabecario .esquerda {
display: flex;
background-image: url(/TreinoWeb/javax.faces.resource/imagens/bg-topo.svg.xhtml);
-webkit-background-size: auto 100%;
background-size: auto 100%;
background-repeat: no-repeat;
align-items: center;
min-width: 403px;
height: 100%;
padding-left: 32px;
}
.cabecario .esquerda span {
color: #FFFFFF;
font-size: 40.52px;
font-weight: bold;
font-style: italic;
}
.cabecario .logo img {
margin-bottom: -15px;
}
.cabecario .centro {
display: flex;
justify-content: center;
align-items: center;
}
.cabecario .centro span {
color: #FFFFFF;
font-size: 64px;
font-weight: bold;
font-style: italic;
}
.cabecario .centro .professor {
display: flex;
min-width: 330px; /*Refactory: Utilizar display flex sem atribuir width.*/
}
.cabecario .centro .professor .avatar img {
border-radius: 50%;
border: 4px solid #ffff;
width: 90px;
height: 90px;
}
.cabecario .centro .professor .descricao {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 16px;
}
.cabecario .centro .professor .titulo {
font-style: italic;
font-size: 20px;
font-weight: bold;
color: #FF1428;
}
.cabecario .centro .professor .nome {
font-style: italic;
font-size: 30px;
font-weight: bold;
}
.cabecario .centro .titulo {
min-width: 330px;
}
.cabecario .centro .horario {
padding-left: 5%;
min-width: 340px;
}
.cabecario .centro .horario span {
font-size: 35px;
}
.conteudo {
background-image: url(/TreinoWeb/javax.faces.resource/imagens/backgroundCrossBlack.jpg.xhtml);
background-size: auto;
miin-height: 100vh;
}
.lista-alunos {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 43px;
padding-left: 54px;
align-items: center;
}
.aluno {
align-items: center;
display: flex;
flex-direction: column;
padding-bottom: 63px;
}
.aluno .avatar {
display: flex;
flex-direction: row;
align-items: flex-end;
}
.aluno .avatar .foto {
border-radius: 50%;
width: 200px;
border: 4px solid #FFFFFF;
height: 200px;
}
.aluno span.nome {
font-weight: bold;
font-style: italic;
color: #FFFFFF;
font-size: 28px;
margin-top: 14px;
margin-left: -40px;
}
.aluno .avatar .icone {
background-color: #FFFFFF;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
position: relative;
right: 60px;
}
.aluno .avatar .icone img {
width: 23px;
height: auto;
}
Raw
Untitled-1
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><head><link type="text/css" rel="stylesheet" href="/TreinoWeb/javax.faces.resource/theme.css.xhtml?ln=primefaces-bootstrap" /><link type="text/css" rel="stylesheet" href="/TreinoWeb/javax.faces.resource/tv-aula.css.xhtml?ln=css" /><link type="text/css" rel="stylesheet" href="/TreinoWeb/javax.faces.resource/font-awesome3.2.3.min.css.xhtml?ln=css" />
<title>TV Aula</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="TVGestor" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
<link rel="shortcut icon" sizes="256x256" href="/TreinoWeb/javax.faces.resource/imagens/favicon_ac.png.xhtml" />
<link rel="shortcut icon" sizes="196x196" href="/TreinoWeb/javax.faces.resource/imagens/favicon_ac.png.xhtml" />
<link rel="shortcut icon" sizes="152x152" href="/TreinoWeb/javax.faces.resource/imagens/favicon_ac.png.xhtml" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/TreinoWeb/javax.faces.resource/imagens/icones_treino_152-precomposed.png.xhtml" />
<link rel="apple-touch-icon-precomposed" href="/TreinoWeb/javax.faces.resource/imagens/icones_treino_128-precomposed.png.xhtml" />
<link rel="icon" type="image/png" href="/TreinoWeb/javax.faces.resource/imagens/favicon_ac.png.xhtml" /></head>
<body>
<div class="cabecario">
<div class="esquerda">
<div class="logo">
<img src="/TreinoWeb/javax.faces.resource/imagens/logos_turmacheia.png.xhtml" />
<span>Aula Cheia</span>
</div>
</div>
<div class="centro">
<div class="professor">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/67.jpg" />
</div>
<div class="descricao">
<span class="titulo">PROFESSOR</span>
<span class="nome">Fábio de Melo</span>
</div>
</div>
<div class="titulo">
<span class="nome-aula">ZUMBA</span>
</div>
<div class="horario">
<i class="fa-icon-time" style="font-size: 40px; color: white;"><span class="horario">19:00 - 20:00</span></i>
</div>
</div>
</div>
<div class="conteudo">
<div class="lista-alunos">
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/16.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/35.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/21.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/30.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/33.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/10.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/7.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/24.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/15.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/26.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/33.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/29.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/22.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/40.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/32.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/4.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/34.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/36.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/men/26.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-face.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/29.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/39.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/35.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-keyboard.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/2.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/13.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/12.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<div class="aluno">
<div class="avatar">
<img src="https://randomuser.me/api/portraits/women/7.jpg" class="foto" />
<div class="icone">
<img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" />
</div>
</div>
<span class="nome">Bruna Santos</span>
</div>
<!--&lt;div class="aluno"&gt;-->
<!--&lt;div class="avatar"&gt;-->
<!--&lt;img src="https://randomuser.me/api/portraits/women/10.jpg" class="foto" /&gt;-->
<!--&lt;div class="icone"&gt;-->
<!--&lt;img src="/TreinoWeb/javax.faces.resource/imagens/icon-mobile.svg.xhtml" /&gt;-->
<!--&lt;/div&gt;-->
<!--&lt;/div&gt;-->
<!--&lt;span class="nome"&gt;Isa Fernanda&lt;/span&gt;-->
<!--&lt;/div&gt;-->
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment