Skip to content

Commit 71cfd84

Browse files
nuria-flnuria-fl
committed
add lesson 8-2: skeleton screens step 1
1 parent a48cfd9 commit 71cfd84

File tree

3 files changed

+139
-5
lines changed

3 files changed

+139
-5
lines changed

‎82-skeleton-screens/index.html‎

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -726,7 +726,120 @@ <h4>🔥 ¡Nueva serie de cursos!</h4>
726726
<h2 class="as-h1">Nuestros clientes<br /></h2>
727727
</div>
728728
</div>
729-
<div class="row" id="clients"></div>
729+
<div class="row" id="clients">
730+
<div class="col-sm-6 col-md-3">
731+
<div
732+
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
733+
>
734+
<div class="testimonial-placeholder__img"></div>
735+
<h5>
736+
<span class="testimonial-placeholder__text"></span>
737+
</h5>
738+
<span>
739+
<span class="testimonial-placeholder__text"></span>
740+
<span class="testimonial-placeholder__text"></span>
741+
</span>
742+
</div>
743+
</div>
744+
<div class="col-sm-6 col-md-3">
745+
<div
746+
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
747+
>
748+
<div class="testimonial-placeholder__img"></div>
749+
<h5>
750+
<span class="testimonial-placeholder__text"></span>
751+
</h5>
752+
<span>
753+
<span class="testimonial-placeholder__text"></span>
754+
<span class="testimonial-placeholder__text"></span>
755+
</span>
756+
</div>
757+
</div>
758+
<div class="col-sm-6 col-md-3">
759+
<div
760+
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
761+
>
762+
<div class="testimonial-placeholder__img"></div>
763+
<h5>
764+
<span class="testimonial-placeholder__text"></span>
765+
</h5>
766+
<span>
767+
<span class="testimonial-placeholder__text"></span>
768+
<span class="testimonial-placeholder__text"></span>
769+
</span>
770+
</div>
771+
</div>
772+
<div class="col-sm-6 col-md-3">
773+
<div
774+
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
775+
>
776+
<div class="testimonial-placeholder__img"></div>
777+
<h5>
778+
<span class="testimonial-placeholder__text"></span>
779+
</h5>
780+
<span>
781+
<span class="testimonial-placeholder__text"></span>
782+
<span class="testimonial-placeholder__text"></span>
783+
</span>
784+
</div>
785+
</div>
786+
<div class="col-sm-6 col-md-3">
787+
<div
788+
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
789+
>
790+
<div class="testimonial-placeholder__img"></div>
791+
<h5>
792+
<span class="testimonial-placeholder__text"></span>
793+
</h5>
794+
<span>
795+
<span class="testimonial-placeholder__text"></span>
796+
<span class="testimonial-placeholder__text"></span>
797+
</span>
798+
</div>
799+
</div>
800+
<div class="col-sm-6 col-md-3">
801+
<div
802+
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
803+
>
804+
<div class="testimonial-placeholder__img"></div>
805+
<h5>
806+
<span class="testimonial-placeholder__text"></span>
807+
</h5>
808+
<span>
809+
<span class="testimonial-placeholder__text"></span>
810+
<span class="testimonial-placeholder__text"></span>
811+
</span>
812+
</div>
813+
</div>
814+
<div class="col-sm-6 col-md-3">
815+
<div
816+
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
817+
>
818+
<div class="testimonial-placeholder__img"></div>
819+
<h5>
820+
<span class="testimonial-placeholder__text"></span>
821+
</h5>
822+
<span>
823+
<span class="testimonial-placeholder__text"></span>
824+
<span class="testimonial-placeholder__text"></span>
825+
</span>
826+
</div>
827+
</div>
828+
<div class="col-sm-6 col-md-3">
829+
<div
830+
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
831+
>
832+
<div class="testimonial-placeholder__img"></div>
833+
<h5>
834+
<span class="testimonial-placeholder__text"></span>
835+
</h5>
836+
<span>
837+
<span class="testimonial-placeholder__text"></span>
838+
<span class="testimonial-placeholder__text"></span>
839+
</span>
840+
</div>
841+
</div>
842+
</div>
730843
</div>
731844
</section>
732845
<section id="services" class="text-center bg--secondary space--xs">

‎82-skeleton-screens/src/assets/css/custom.css‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -195,13 +195,33 @@ button.stripe-button-el.disabled > span:hover {
195195
max-height: none;
196196
}
197197

198-
.testimonial__image img {
198+
.imagebg {
199+
background-size: cover;
200+
}
201+
202+
.testimonial-placeholder {
203+
min-height: 252px;
204+
}
205+
206+
.testimonial__image img,
207+
.testimonial-placeholder__img {
208+
width: 5rem;
209+
height: 5rem;
210+
margin-bottom: 1.85714286em;
199211
border-radius: 50%;
200-
max-width: 5rem;
212+
background: rgba(0, 0, 0, 0.7);
201213
}
202214

203-
.imagebg {
204-
background-size: cover;
215+
.testimonial-placeholder__text {
216+
display: block;
217+
width: 100%;
218+
height: 1em;
219+
border-radius: 0.5em;
220+
background: rgba(0, 0, 0, 0.7);
221+
margin: 1.2em 0;
222+
}
223+
.testimonial-placeholder__text:nth-child(even) {
224+
width: 80%;
205225
}
206226

207227
/* courses masonry */

‎82-skeleton-screens/src/users.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export function renderUsers() {
22
const clients = document.getElementById("clients");
33
loadUsers().then((users) => {
4+
clients.innerHTML = "";
45
users.slice(0, 8).forEach((user) => clients.appendChild(userHtml(user)));
56
});
67
}

0 commit comments

Comments
 (0)