Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Loja Integrada - depoimentos
<!--
1. Crie um novo código HTML (https://app.lojaintegrada.com.br/painel/configuracao/html/criar)
2. Descrição: Depoimentos
3. Local de publicação: Rodapé
4. Página: home
5. Tipo: HTML
6. Conteúdo: cole todo o código abaixo
7. Divirta-se
-->
<div id="depoimentos">
<div class="conteiner">
<div class="row-fluid">
<h4>Depoimentos</h4>
<div class="span8 offset2">
<div class="flexslider">
<ul class="slides"></ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var depoimentos =
[
{
"nome": "Cristiano Ronaldo",
"avatar": "https://instagram.fcpq4-1.fna.fbcdn.net/t51.2885-19/s150x150/14733352_1693934057601947_5708220546672492544_a.jpg",
"conteudo": "Adoro os produtos de vocês!",
"instagram_handle": "cristiano"
},
{
"nome": "Anitta",
"avatar": "https://instagram.fcpq4-1.fna.fbcdn.net/t51.2885-19/s150x150/16110162_236405696802697_6722489378704195584_n.jpg",
"conteudo": "A-do-ro!",
"instagram_handle": "anitta"
},
{
"nome": "Neymar Jr",
"avatar": "https://instagram.fcpq4-1.fna.fbcdn.net/t51.2885-19/s150x150/16464919_657546871036654_5563932799695585280_a.jpg",
"conteudo": "Sem palavras pra descrever como eu amo essa marca.",
"instagram_handle": "neymarjr"
}
];
var slides = $('#depoimentos ul.slides');
$.each(depoimentos, function(i, item) {
var depoimento = depoimentos[i];
var li = $('<li/>').appendTo(slides);
var img = $('<img/>').addClass('avatar').attr('src', depoimento.avatar).appendTo(li);
var blockquote = $('<blockquote/>').addClass('text-center').appendTo(li);
var p = $('<p/>').text(depoimento.conteudo).appendTo(blockquote);
var cite = $('<cite/>').text(depoimento.nome + ", ").appendTo(blockquote);
var a = $('<a/>').
attr("target", "_blank").
attr("href", "https://instagram.com/" + depoimento.instagram_handle).
text("@" + depoimento.instagram_handle).appendTo(cite);
});
$('#depoimentos').appendTo('#corpo .secao-secundaria');
$('#depoimentos .flexslider').flexslider({
randomize: true
});
</script>
<style>
#depoimentos .conteiner {
padding: 0;
background: transparent;
box-shadow: none;
max-width: 1180px;
margin: 50px auto 15px;
}
#depoimentos .flexslider {
margin-top: 40px;
}
#depoimentos .avatar {
width: 100px;
overflow: hidden;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#depoimentos blockquote {
border-left: none;
}
#depoimentos blockquote p {
margin-bottom: 20px;
}
#depoimentos blockquote cite::before {
content: '\2014 \0020';
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment