felvieira
1/30/2019 - 6:45 PM
Template Literal with Axios and Promises
function $all(el) {
return document.querySelectorAll(el);
}
function $sel(el) {
return document.querySelector(el);
}
function mountCollapse(cta, content, line) {
[].forEach.call(cta, box => {
box.parentNode.querySelector(`${content}`).style.opacity = "0";
box.addEventListener("click", e => {
const item = e.target.parentNode;
const target = item.querySelector(`${content}`);
const size =
target.querySelectorAll(`${line}`).length *
target.querySelectorAll(`${line}`)[0].offsetHeight;
if (target.style.opacity == "0") {
target.style.opacity = "1";
target.style.maxHeight = `${size + 100}px`;
} else {
target.style.opacity = "0";
target.style.maxHeight = "0";
}
});
});
}
function convertMinsToHrsMins(mins) {
let h = Math.floor(mins / 60);
let m = mins % 60;
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
return `${h}:${m}`;
}
function parseVideo(url) {
url.match(
/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/
);
if (RegExp.$3.indexOf("youtu") > -1) {
var type = "youtube";
} else if (RegExp.$3.indexOf("vimeo") > -1) {
var type = "vimeo";
}
return {
type,
id: RegExp.$6
};
}
function vimeoGetVideoLenght(url) {
const videoObj = parseVideo(url);
return axios
.get(`https://vimeo.com/api/v2/video/${videoObj.id}.json`)
.then(response => response.data[0].duration)
.then(response => convertMinsToHrsMins(response));
}
const mock = "https://api-chat-mock.herokuapp.com/cursos";
//INICIA AQUI
function baseTemplate(name,videos,quizzes,res){
return `<li class="course">
<span class="icon svg-icon calc-icon"></span>
<div class="timeline-content">
<div class="timeline-content-progress"><i class="fa fa-check-circle"></i>
3/3</div>
<div class="timeline-content-title collapsed">${name}</div>
<div class="timeline-content-vids collapsed-content " style="opacity: 0;">
${videos.map( (video, index) => { return `<div class="timeline-content-vids-line">
<div class="title-content" data-video="${video.endpoint}">
<span class="title">${video.videoName}</span>
<span class="lenght">${res[index]}</span>
</div>
<div class="action-content"><i class="fa fa-play"></i></div>
<div class="status-content ${video.complete === "S" ? "complete" : "uncomplete"}">
<i class="fa fa-check-circle"></i>
</div>
</div>`;
}).join("")}
${quizzes
? `<div class="timeline-content-vids-line">
<div class="title-content">
<span class="title">Responda as questões deste tópico</span>
<span class="lenght"></span>
</div>
</div>`
: ""
}
</div>
</div>
</li>`
}
function makeTemplate(dado){
return new Promise((resolve, reject) => {
let data = [];
const videoPromises = [];
const { name, videos, quizzes } = dado;
videos.forEach((video, index) => videoPromises[index] = vimeoGetVideoLenght(video.endpoint));
Promise.all(videoPromises).then(res => {
data += baseTemplate(name,videos,quizzes,res)
resolve(data);
})
});
};
axios.get(mock).then(async (response) => {
const modulosCursos = (await Promise.all(response.data.map(async (data) => await makeTemplate(data)))).join('');
$sel(".timeline ul").innerHTML = modulosCursos;
mountCollapse(
$all(".collapsed"),
".timeline-content-vids",
".timeline-content-vids-line"
);
});
$color-marron: #68554b;
$color-white: #ffffff;
$color-white-gray: #f5f5f5;
$color-gray-lighter: #e7e7e7;
$color-gray-light: #a4a4a4;
$color-gray-medium: #626262;
$color-gray-dark: #484846;
$color-orange: #d95234;
.no__horizontal--padding {
padding-left: 0px;
padding-right: 0px;
}
.no__horizontal--padding-right {
padding-right: 0px;
}
.no__horizontal--padding-left {
padding-left: 0px;
}
$mobile-width: 390px;
$tablet-width: 980px;
$desktop-width: 1280px;
$smartphone-width: 576px;
$sm-desktop-width: 992px;
@mixin mobile {
@media (min-width: 0px) and (max-width: #{$tablet-width - 1px}) {
@content;
}
}
@mixin onlyMobile {
@media screen and (max-width: #{$mobile-width}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$desktop-width}) {
@content;
}
}
@mixin smartphone {
@media (min-width: 0px) and (max-width: #{$smartphone-width - 1px}) {
@content;
}
}
@mixin sm-desktop {
@media (min-width: #{$sm-desktop-width}) {
@content;
}
}
// Fazer Gradiente de background que some mesclando com a imagem
// ex de uso:
// @include linear-gradient(#000, 0.5, 0)
@mixin linear-gradient($color: #000000, $alpha-from: 1, $alpha-to: 0) {
background-image: linear-gradient(rgba($color, $alpha-from) 0%,
rgba($color, $alpha-to) 100%);
}
@mixin clothoid-gradient($color: #000000, $alpha-from: 1, $alpha-to: 0) {
$diff: $alpha-from - $alpha-to;
background-image: linear-gradient(rgba($color, $alpha-from) 0%,
rgba($color, $alpha-from - $diff*0.7) 50%,
rgba($color, $alpha-from - $diff*0.85) 65%,
rgba($color, $alpha-from - $diff*0.925) 75.5%,
rgba($color, $alpha-from - $diff*0.963) 82.85%,
rgba($color, $alpha-from - $diff*0.981) 88%,
rgba($color, $alpha-to) 100%);
}
@mixin line($display: block, $pos: absolute, $content: '') {
content: $content;
display: $display;
position: $pos;
background: $line;
height: 1px;
top: 50%;
width: 1240px;
}
// @include text-shadow(2px, 2px, 2px, rgba(51, 51, 51, 0.5))
@mixin text-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $color: $default) {
-webkit-text-shadow: $x-axis $y-axis $blur $color;
-moz-text-shadow: $x-axis $y-axis $blur $color;
text-shadow: $x-axis $y-axis $blur $color;
}
// @include box-shadow(0, 0, 0, 4px, #000, inset);
@mixin box-shadow($offset-x, $offset-y, $blur-radius, $spread-radius, $color, $inset: false) {
@if $inset {
-webkit-box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
-moz-box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
box-shadow: inset $offset-x $offset-y $blur-radius $spread-radius $color;
}
@else {
-webkit-box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
-moz-box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
}
}
// .foo {
// @include placeholder {
// color: green;
// }
// }
// OR
// @include placeholder {
// color: red;
// }
@mixin optional-at-root($sel) {
@at-root #{if(not &, $sel, selector-append(&, $sel))} {
@content;
}
}
@mixin placeholder {
@include optional-at-root('::-webkit-input-placeholder') {
@content;
}
@include optional-at-root(':-moz-placeholder') {
@content;
}
@include optional-at-root('::-moz-placeholder') {
@content;
}
@include optional-at-root(':-ms-input-placeholder') {
@content;
}
}
// USAGE
// >.advanced-search-container {
// @include animateHide;
// }
// &:hover {
// >.advanced-search-container {
// @include animateShow;
// }
// }
@mixin animateHide {
visibility: hidden;
opacity: 0;
transition: visibility 0s,
opacity 0.5s linear;
}
@mixin animateShow {
visibility: visible;
opacity: 1;
}
.content.cursos-single {
background: white;
div.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
div {
&.cursos-single-container.container {
flex: 3;
.header-title div.container div.row.flex-column div {
&.header-title-breadcumb ul li a,
&.header-title-name.flex-column.d-flex span {}
}
div {
&.cursos-single-video-container div {
&.cursos-single-video-container-vid {}
&.cursos-single-video-container-controls span {
&.category,
&.reproduction-automatic {}
}
}
&.cursos-single-timeline {
section.timeline {
ul {
li.course {
div.timeline-content div {
&.timeline-content-progress,
&.timeline-content-title.collapse {}
&.timeline-content-vids.collapsed div.timeline-content-vids-line div {
&.title-content span {
&.title,
&.lenght {}
}
&.action-content,
&.status-content {}
}
}
&.finished div.timeline-content div.timeline-content-title.collapse {}
}
}
}
}
}
}
&.cursos-single-lateral {
flex: 1;
div {
&.cursos-single-lateral--progress {
display: flex;
flex-direction: column;
div {
&.cursos-single-lateral--progress-desc {
.txt {
font-family: Nunito;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #a4a4a4;
}
.icon {}
}
&.cursos-single-lateral--progress-bar {
background: #e4e4e4;
border-radius: 25px;
height: 10px;
overflow: hidden;
.bar {
background: #d95234;
height: 100%;
width: 25%;
}
}
}
}
&.cursos-single-lateral--instructor {
background-color: #f5f5f5;
padding: 20px;
margin-top: 33px;
div {
&.cursos-single-lateral--instructor-img {
display: flex;
width: 100%;
.name {
font-family: Nunito;
font-size: 18px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #68554b;
}
div.cursos-single-lateral--instructor-desc {
font-family: Nunito;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.57;
letter-spacing: normal;
color: #626262;
}
}
&.cursos-single-lateral--about div {
&.cursos-single-lateral--about-title,
&.cursos-single-lateral--about-txt {}
}
}
}
}
}
}
}
+.cursos-single.container {
div {
&.row div.col-md-12 h3 {}
&.card-container-content div.card-container div.cards div.label-container div {
&.label-container-img div.icon.svg-icon.calc-icon {}
&.label-container-text div {
&.title,
&.time {}
}
&.label-container-img div.icon.svg-icon {
&.paper-icon,
&.dolar-icon,
&.squares-icon {}
}
}
}
}
}
.cursos-single-lateral--about-title {
font-family: Nunito;
font-size: 18px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #68554b;
}
.cursos-single-lateral--about {
margin-top: 30px;
}
.cursos-single-lateral--about-txt {
font-family: Nunito;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.57;
letter-spacing: normal;
color: #626262;
margin-top: 30px;
}
section.timeline>ul {
padding: 0px 0 50px 0;
}
section.timeline>ul>li {
list-style-type: none;
position: relative;
/* width: 6px; */
margin: 0 auto;
// background: #b7b7b7;
/* margin-left: 0px; */
width: 100%;
padding-bottom: 30px;
}
section.timeline>ul>li::before {
content: '';
list-style-type: none;
position: absolute;
width: 6px;
height: 100%;
margin: 0 auto;
/* background: #f15b3a; */
background: #f5f5f5;
margin-left: 0px;
}
section.timeline>ul>li.goal>.icon {
background: #f15b3a;
color: white;
}
section.timeline>ul>li>.icon {
position: absolute;
left: 0px;
top: 0;
transform: translateX(-50%);
width: 100px;
height: 100px;
border-radius: 50%;
background: inherit;
transition: background .5s ease-in-out;
background: #f5f5f5;
color: #292929;
display: flex;
align-items: center;
justify-content: center;
font-size: 3em;
}
section.timeline>ul>li>div {
position: relative;
bottom: 0;
// width: 400px;
padding: 15px 0px 15px 60px;
/* background: #ffffff; */
margin-left: 30px;
}
li>.timeline-content>.timeline-content-progress {
background: #f5f5f5;
color: white;
font-family: Nunito;
font-size: 10px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1;
letter-spacing: normal;
color: #272727;
border-radius: 10px;
padding: 2px 5px;
text-align: center;
max-width: 60px;
}
li.course.goal:before {
background: #f5f5f5;
background: #f15b3a;
}
section.timeline>ul>li.goal>.icon {
background: #f15b3a;
}
li>.timeline-content>.timeline-content-progress>i {
visibility: hidden;
width: 0;
opacity: 0;
}
li.goal>.timeline-content>.timeline-content-progress {
background: #292929;
color: #ffffff;
}
li.goal>.timeline-content>.timeline-content-progress>i {
visible: inherit;
opacity: 1;
visibility: visible;
width: auto;
/* opacity: 0; */
}
.timeline-content-title.collapse {
font-family: Nunito;
font-size: 14px;
font-weight: 800;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #68554b;
}
.timeline-content {
display: flex;
flex-direction: column;
}
.timeline-content-vids {
/* border: 1px solid #f5f5f5; */
/* padding: 10px 20px; */
}
.timeline-content-vids-line {
border: 1px solid #f5f5f5;
// padding: 0px 20px;
display: flex;
}
.action-content {
border-left: 1px solid #f5f5f5;
/* padding: 10px 20px; */
border-right: 1px solid #f5f5f5;
flex: 1;
/* align-items: center; */
/* justify-items: center; */
/* justify-content: center; */
/* align-self: center; */
text-align: center;
}
.title-content {
display: flex;
align-items: center;
justify-items: center;
flex-basis: 80% !important;
padding-left: 20px;
padding-right: 20px;
justify-content: space-between;
}
.action-content {}
.status-content {
text-align: center;
}
.timeline-content-vids-line>div {
padding-bottom: 10px;
padding-top: 10px;
flex: 1;
}
section.timeline {
padding-left: 50px !important;
}
section.timeline>ul {
max-width: 90%;
}
.title-content>.title {
font-family: Nunito;
font-size: 14px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #626262;
text-transform: inherit;
}
.timeline-content-title {
font-family: Nunito;
font-size: 14px;
font-weight: 800;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #68554b;
margin-top: 10px;
}
.timeline-content-vids-line {
margin-bottom: 10px;
}
.title-content>.lenght {
font-family: Nunito;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #a4a4a4;
}
.action-content {
color: #a4a4a4;
}
.timeline-content-vids {
margin-top: 10%;
}
.content.cursos-single i.fa.fa-check-circle {
color: #a4a4a4;
font-size: 1.4em;
}
.status-content.complete>i {
color: #5fc955!important;
}
.cursos-single-video-container-controls>span.category {
font-family: Nunito;
font-size: 18px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #68554b;
}
.cursos-single-video-container-controls {
display: flex;
justify-content: space-between;
}
.cursos-single-video-container-controls>span.reproduction-automatic {
font-family: Nunito;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #626262;
}
.cursos-single-lateral--progress-desc {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.cursos-single-lateral--progress-desc>.icon {
color: #c1c1c1;
font-size: 1.2em;
}
.cursos-single-lateral--progress-desc>.icon>.icon {
display: flex;
}
span.reproduction-automatic {
display: flex;
/* align-content: center; */
/* justify-content: center; */
align-items: center;
}
span.reproduction-automatic>.switch__container {
padding-top: 7px;
padding-right: 15px;
}
.cursos-single-video-container-controls>span.category {
/* justify-content: center; */
align-items: center;
/* justify-items: center; */
/* align-content: center; */
display: flex;
}
.cursos-single-video-container-controls>span.category>i {
margin-right: 7px;
}
.cursos-single-video-container {
padding-right: 10%;
}
section.header-title.cursos-single {
min-height: 50px;
}
.cursos-single-container.container>section.header-title.cursos-single {
margin-top: 0px;
}
.cursos-single-container.container>section.header-title.cursos-single .header-title-name {
height: auto;
margin-bottom: 60px;
}
@include mobile{
.cursos-single>.container>.row {
flex-direction: column !important;
}
.content.cursos-single div.row div.cursos-single-lateral {
padding: 15px;
}
section.timeline>ul>li>.icon,
section.timeline>ul>li::before {
display: none;
}
section.timeline {
padding-left: 0px !important;
}
section.timeline>ul {
max-width: 100%;
padding: 0px;
}
section.timeline>ul>li>.timeline-content {
padding: 15px !important;
margin: 0px;
}
.cursos-single-video-container {
padding: 0px;
}
}
<div class="content cursos-single">
<div class="container">
<div class="row">
<section class="header-title cursos-single">
<div class="container">
<div class="row flex-column">
<div class="header-title-breadcumb">
<ul>
<li>
<a href="/index.html">Home</a>
</li>
<li>/</li>
<li>
<a href="/">Cursos</a>
</li>
<li>/</li>
<li>
<a href="/">Vendedor Externo</a>
</li>
<li>/</li>
<li>
<a href="/">Cursos para o setor vendendor externo parte 1</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<div class="row">
<div class="cursos-single-container container">
<section class="header-title cursos-single">
<div class="container">
<div class="row flex-column">
<div class="header-title-name flex-column d-flex">
Cursos para o setor
<span>vendendor externo parte 1</span>
</div>
</div>
</div>
</section>
<div class="cursos-single-video-container">
<div class="cursos-single-video-container-vid">
<div class="video-container video-container--16-9">
<iframe src="https://player.vimeo.com/video/79531196" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<!-- <figure><img alt=""></figure>
<div class="overlay-desc">
<header>
<p>Desc</p>
</header>
<i class="conficon-icon-play-01"></i>
<img src="./img/branding.png" alt="">
</div> -->
</div>
<div class="cursos-single-video-container-controls">
<span class="category"><i class="fa fa-check-circle"></i> Categoria de empresas</span>
<span class="category"><i class="fa fa-check-circle"></i> <a href="#modal" class="modal-trigger">Teste de Modal</a>
<div class="data-html">
<div class="title">CATEGORIA DE EMPRESAS</div>
<div class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make?</div>
<form action="">
<textarea name="" id="" cols="30" rows="10"></textarea>
<button type="submit">Enviar Resposta</button>
</form>
<div class="footer">
<div class="button modal-close">Responder Depois</div>
</div>
</div>
</span>
<span class="reproduction-automatic">
<div class="switch__container">
<input id="switch-shadow" class="switch switch--shadow" type="checkbox">
<label for="switch-shadow"></label>
</div>
Reprodução automática
</span>
</div>
</div>
<div class="cursos-single-timeline">
<section class="timeline">
<ul>
<!-- <li class="course goal">
<span class="icon svg-icon calc-icon"></span>
<div class="timeline-content">
<div class="timeline-content-progress"><i class="fa fa-check-circle"></i>
3/3</div>
<div class="timeline-content-title collapsed">ORGANIZAÇÃO DE EMPRESAS</div>
<div class="timeline-content-vids collapsed-content " style="opacity: 0;">
<div class="timeline-content-vids-line">
<div class="title-content">
<span class="title">Empresa e seus elementos</span>
<span class="lenght">2:21</span>
</div>
<div class="action-content"><i class="fa fa-play"></i></div>
<div class="status-content"><i class="fa fa-check-circle"></i>
</div>
</div>
<div class="timeline-content-vids-line">
<div class="title-content">
<span class="title">Categorias de empresas</span>
<span class="lenght">2:21</span>
</div>
<div class="action-content"><i class="fa fa-play"></i></div>
<div class="status-content"><i class="fa fa-check-circle"></i>
</div>
</div>
<div class="timeline-content-vids-line">
<div class="title-content">
<span class="title">Classificação em função do porte</span>
<span class="lenght">2:21</span>
</div>
<div class="action-content"><i class="fa fa-play"></i></div>
<div class="status-content"><i class="fa fa-check-circle"></i>
</div>
</div>
</div>
</div>
</li>
<li class="course">
<span class="icon svg-icon calc-icon"></span>
<div class="timeline-content">
<div class="timeline-content-progress"><i class="fa fa-check-circle"></i>
1/5</div>
<div class="timeline-content-title collapsed">O COMÉRCIO</div>
<div class="timeline-content-vids collapsed-content" style="opacity: 0;">
<div class="timeline-content-vids-line">
<div class="title-content">
<span class="title">Empresa e seus elementos</span>
<span class="lenght">2:21</span>
</div>
<div class="action-content"><i class="fa fa-play"></i></div>
<div class="status-content"><i class="fa fa-check-circle"></i>
</div>
</div>
</div>
</div>
</li>
<li class="course finished">
<span class="icon svg-icon taca-icon"></span>
<div class="timeline-content">
<div class="timeline-content-title">Certificado</div>
</div>
</li> -->
</ul>
</section>
</div>
</div>
</div>
<div class="cursos-single-lateral">
<div class="cursos-single-lateral--progress">
<div class="cursos-single-lateral--progress-desc">
<span class="txt">5 de 26 itens concluídos</span>
<span class="icon"><span class="icon svg-icon taca-icon"></span></span>
</div>
<div class="cursos-single-lateral--progress-bar">
<div class="bar"></div>
</div>
</div>
<div class="cursos-single-lateral--instructor">
<div class="cursos-single-lateral--instructor-img">
<img src="" alt="">
<span class="name">Gabriel Lopes</span>
</div>
<div class="cursos-single-lateral--instructor-desc">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has
been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen
book. It has survived not only five centurie
</div>
</div>
<div class="cursos-single-lateral--about">
<div class="cursos-single-lateral--about-title">
O que irá aprender neste módulo
</div>
<div class="cursos-single-lateral--about-txt">
it is a long established fact that a reader will be distracted by the readable content
of a
page when looking at its
layout. The point of using Lorem Ipsum is that it has a more-or-less normal
distribution of
letters,
There are many variations of passages of Lorem Ipsum available, but the majority have
suffered alteration in some form,
by injected humour
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those
interested. Sections 1.10.32 and
1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
exact
original form, accompanied by
English versions from the 1914
</div>
</div>
</div>
</div>
</div>
<section class="horizontal-card dark cursos-single container">
<div class="row">
<div class="col-md-12">
<h3>CURSOS RECOMENDADOS PARA VOCÊ</h3>
</div>
</div>
<div class="card-container-content">
<div class="card-container">
<div class="cards">
<div class="label-container">
<div class="label-container-img">
<div class="icon svg-icon calc-icon"></div>
</div>
<div class="label-container-text">
<div class="title">Vendedor externo parte 1</div>
<div class="time">Gabriel Lopes</div>
</div>
</div>
</div>
<div class="cards">
<div class="label-container">
<div class="label-container-img">
<div class="icon svg-icon paper-icon"></div>
</div>
<div class="label-container-text">
<div class="title">Administrativo parte 1</div>
<div class="time">Pedro Henrique</div>
</div>
</div>
</div>
<div class="cards">
<div class="label-container">
<div class="label-container-img">
<div class="icon svg-icon dolar-icon"></div>
</div>
<div class="label-container-text">
<div class="title">Financeiro parte 1</div>
<div class="time">Arthur Paulo</div>
</div>
</div>
</div>
<div class="cards">
<div class="label-container">
<div class="label-container-img">
<div class="icon svg-icon squares-icon"></div>
</div>
<div class="label-container-text">
<div class="title">produção parte 1</div>
<div class="time">Manuel Silveira</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>