Skip to content

Commit 5554445

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

File tree

2 files changed

+133
-33
lines changed

2 files changed

+133
-33
lines changed

‎82-skeleton-screens/index.html‎

Lines changed: 96 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -731,111 +731,175 @@ <h2 class="as-h1">Nuestros clientes<br /></h2>
731731
<div
732732
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
733733
>
734-
<div class="testimonial-placeholder__img"></div>
734+
<div
735+
class="testimonial-placeholder__item testimonial-placeholder__img"
736+
></div>
735737
<h5>
736-
<span class="testimonial-placeholder__text"></span>
738+
<span
739+
class="testimonial-placeholder__item testimonial-placeholder__text"
740+
></span>
737741
</h5>
738742
<span>
739-
<span class="testimonial-placeholder__text"></span>
740-
<span class="testimonial-placeholder__text"></span>
743+
<span
744+
class="testimonial-placeholder__item testimonial-placeholder__text"
745+
></span>
746+
<span
747+
class="testimonial-placeholder__item testimonial-placeholder__text"
748+
></span>
741749
</span>
742750
</div>
743751
</div>
744752
<div class="col-sm-6 col-md-3">
745753
<div
746754
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
747755
>
748-
<div class="testimonial-placeholder__img"></div>
756+
<div
757+
class="testimonial-placeholder__item testimonial-placeholder__img"
758+
></div>
749759
<h5>
750-
<span class="testimonial-placeholder__text"></span>
760+
<span
761+
class="testimonial-placeholder__item testimonial-placeholder__text"
762+
></span>
751763
</h5>
752764
<span>
753-
<span class="testimonial-placeholder__text"></span>
754-
<span class="testimonial-placeholder__text"></span>
765+
<span
766+
class="testimonial-placeholder__item testimonial-placeholder__text"
767+
></span>
768+
<span
769+
class="testimonial-placeholder__item testimonial-placeholder__text"
770+
></span>
755771
</span>
756772
</div>
757773
</div>
758774
<div class="col-sm-6 col-md-3">
759775
<div
760776
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
761777
>
762-
<div class="testimonial-placeholder__img"></div>
778+
<div
779+
class="testimonial-placeholder__item testimonial-placeholder__img"
780+
></div>
763781
<h5>
764-
<span class="testimonial-placeholder__text"></span>
782+
<span
783+
class="testimonial-placeholder__item testimonial-placeholder__text"
784+
></span>
765785
</h5>
766786
<span>
767-
<span class="testimonial-placeholder__text"></span>
768-
<span class="testimonial-placeholder__text"></span>
787+
<span
788+
class="testimonial-placeholder__item testimonial-placeholder__text"
789+
></span>
790+
<span
791+
class="testimonial-placeholder__item testimonial-placeholder__text"
792+
></span>
769793
</span>
770794
</div>
771795
</div>
772796
<div class="col-sm-6 col-md-3">
773797
<div
774798
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
775799
>
776-
<div class="testimonial-placeholder__img"></div>
800+
<div
801+
class="testimonial-placeholder__item testimonial-placeholder__img"
802+
></div>
777803
<h5>
778-
<span class="testimonial-placeholder__text"></span>
804+
<span
805+
class="testimonial-placeholder__item testimonial-placeholder__text"
806+
></span>
779807
</h5>
780808
<span>
781-
<span class="testimonial-placeholder__text"></span>
782-
<span class="testimonial-placeholder__text"></span>
809+
<span
810+
class="testimonial-placeholder__item testimonial-placeholder__text"
811+
></span>
812+
<span
813+
class="testimonial-placeholder__item testimonial-placeholder__text"
814+
></span>
783815
</span>
784816
</div>
785817
</div>
786818
<div class="col-sm-6 col-md-3">
787819
<div
788820
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
789821
>
790-
<div class="testimonial-placeholder__img"></div>
822+
<div
823+
class="testimonial-placeholder__item testimonial-placeholder__img"
824+
></div>
791825
<h5>
792-
<span class="testimonial-placeholder__text"></span>
826+
<span
827+
class="testimonial-placeholder__item testimonial-placeholder__text"
828+
></span>
793829
</h5>
794830
<span>
795-
<span class="testimonial-placeholder__text"></span>
796-
<span class="testimonial-placeholder__text"></span>
831+
<span
832+
class="testimonial-placeholder__item testimonial-placeholder__text"
833+
></span>
834+
<span
835+
class="testimonial-placeholder__item testimonial-placeholder__text"
836+
></span>
797837
</span>
798838
</div>
799839
</div>
800840
<div class="col-sm-6 col-md-3">
801841
<div
802842
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
803843
>
804-
<div class="testimonial-placeholder__img"></div>
844+
<div
845+
class="testimonial-placeholder__item testimonial-placeholder__img"
846+
></div>
805847
<h5>
806-
<span class="testimonial-placeholder__text"></span>
848+
<span
849+
class="testimonial-placeholder__item testimonial-placeholder__text"
850+
></span>
807851
</h5>
808852
<span>
809-
<span class="testimonial-placeholder__text"></span>
810-
<span class="testimonial-placeholder__text"></span>
853+
<span
854+
class="testimonial-placeholder__item testimonial-placeholder__text"
855+
></span>
856+
<span
857+
class="testimonial-placeholder__item testimonial-placeholder__text"
858+
></span>
811859
</span>
812860
</div>
813861
</div>
814862
<div class="col-sm-6 col-md-3">
815863
<div
816864
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
817865
>
818-
<div class="testimonial-placeholder__img"></div>
866+
<div
867+
class="testimonial-placeholder__item testimonial-placeholder__img"
868+
></div>
819869
<h5>
820-
<span class="testimonial-placeholder__text"></span>
870+
<span
871+
class="testimonial-placeholder__item testimonial-placeholder__text"
872+
></span>
821873
</h5>
822874
<span>
823-
<span class="testimonial-placeholder__text"></span>
824-
<span class="testimonial-placeholder__text"></span>
875+
<span
876+
class="testimonial-placeholder__item testimonial-placeholder__text"
877+
></span>
878+
<span
879+
class="testimonial-placeholder__item testimonial-placeholder__text"
880+
></span>
825881
</span>
826882
</div>
827883
</div>
828884
<div class="col-sm-6 col-md-3">
829885
<div
830886
class="testimonial__img testimonial-placeholder boxed boxed--border bg--secondary"
831887
>
832-
<div class="testimonial-placeholder__img"></div>
888+
<div
889+
class="testimonial-placeholder__item testimonial-placeholder__img"
890+
></div>
833891
<h5>
834-
<span class="testimonial-placeholder__text"></span>
892+
<span
893+
class="testimonial-placeholder__item testimonial-placeholder__text"
894+
></span>
835895
</h5>
836896
<span>
837-
<span class="testimonial-placeholder__text"></span>
838-
<span class="testimonial-placeholder__text"></span>
897+
<span
898+
class="testimonial-placeholder__item testimonial-placeholder__text"
899+
></span>
900+
<span
901+
class="testimonial-placeholder__item testimonial-placeholder__text"
902+
></span>
839903
</span>
840904
</div>
841905
</div>

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,13 +217,49 @@ button.stripe-button-el.disabled > span:hover {
217217
width: 100%;
218218
height: 1em;
219219
border-radius: 0.5em;
220-
background: rgba(0, 0, 0, 0.7);
220+
background: rgba(10, 10, 10, 0.4);
221221
margin: 1.2em 0;
222222
}
223223
.testimonial-placeholder__text:nth-child(even) {
224224
width: 80%;
225225
}
226226

227+
@supports (mix-blend-mode: overlay) {
228+
@keyframes aniHorizontal {
229+
0% {
230+
background-position: -100% 0;
231+
}
232+
233+
100% {
234+
background-position: 100% 0;
235+
}
236+
}
237+
238+
.testimonial-placeholder__item {
239+
position: relative;
240+
overflow: hidden;
241+
}
242+
243+
.testimonial-placeholder__item:before {
244+
content: "";
245+
position: absolute;
246+
width: 100%;
247+
height: 100%;
248+
animation-name: aniHorizontal;
249+
animation-duration: 3.5s;
250+
animation-timing-function: linear;
251+
animation-iteration-count: infinite;
252+
background: linear-gradient(
253+
to right,
254+
rgba(0, 0, 0, 0.2) 2%,
255+
rgba(0, 0, 0, 0.8) 33%,
256+
rgba(0, 0, 0, 0.2) 66%
257+
);
258+
background-size: 50%;
259+
mix-blend-mode: overlay;
260+
}
261+
}
262+
227263
/* courses masonry */
228264
.masonry-filter-container {
229265
margin-bottom: 4em;

0 commit comments

Comments
 (0)