├── README.md
├── finished
    ├── README.md
    ├── data.json
    ├── index.html
    ├── styles.css
    ├── styles.css.map
    └── styles.scss
└── starter
    ├── README.md
    ├── index.html
    ├── styles.css
    ├── styles.min.css
    └── styles.scss


/README.md:
--------------------------------------------------------------------------------
1 | # How to build Skeleton Screens with CSS for better UX
2 | 
3 | Tech Stack: HTML, CSS(SCSS), Javascript
4 | 
5 | Live demo: <https://daily-dev-ui.netlify.app//>
6 | 
7 | This repository is based on the tutorial ["How to build Skeleton Screens with CSS for better UX"](https://www.freecodecamp.org/news/how-to-build-skeleton-screens-using-css-for-better-user-experience)
8 | 


--------------------------------------------------------------------------------
/finished/README.md:
--------------------------------------------------------------------------------
1 | ### This folder contains the finished code for the project
2 | 


--------------------------------------------------------------------------------
/finished/data.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": 1,
 4 |     "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4",
 5 |     "title": "Writing Cleaner CSS Using BEM ",
 6 |     "details": "Mar 12, 2022 · 4m read time",
 7 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/dd19e7a56475f39ab1c38167c02c7b58",
 8 |     "link": "https://israelmitolu.hashnode.dev/writing-cleaner-css-using-bem-methodology"
 9 |   },
10 |   {
11 |     "id": 2,
12 |     "logoImage": "https://daily-now-res.cloudinary.com/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp",
13 |     "title": "The Beginner's Guide to Sass",
14 |     "details": "Apr 05, 2022 · 8m read time",
15 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/bec6719be210973098293a32dc732d1e",
16 |     "link": "https://www.freecodecamp.org/news/the-beginners-guide-to-sass/"
17 |   },
18 |   {
19 |     "id": 3,
20 |     "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/devto",
21 |     "title": "I made Squid Game with Javascript",
22 |     "details": "Oct 25, 2021 · 3m read time",
23 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/1f947033365381cbe322ddf294ad7169",
24 |     "link": "https://dev.to/0shuvo0/i-made-squid-game-with-javascript-10j9"
25 |   },
26 |   {
27 |     "id": 4,
28 |     "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4",
29 |     "title": "Using Custom Cursors with Javascript for a Better User Experience",
30 |     "details": "Feb 12, 2022 · 9m read time",
31 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/3d056b99c95b37cd35ae5cfc6a8b38be",
32 |     "link": "https://israelmitolu.hashnode.dev/using-custom-cursors-with-javascript-for-a-better-user-experience"
33 |   },
34 |   {
35 |     "id": 5,
36 |     "logoImage": "https://daily-now-res.cloudinary.com/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp",
37 |     "title": "React Best Practices - Tips for Writing Better React Code in 2022",
38 |     "details": "Feb 03, 2022 · 31m read time",
39 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/5a629fff5583f9ab5f0931d14736b299",
40 |     "link": "https://www.freecodecamp.org/news/best-practices-for-react/"
41 |   },
42 |   {
43 |     "id": 6,
44 |     "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/tnw",
45 |     "title": "You suck at Googling: 5 tips to improve your search skills",
46 |     "details": "Mar 31, 2022 · 4m read time",
47 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/e318150ae67c2083ff3585a96f366f7b",
48 |     "link": "https://thenextweb.com/news/5-tips-to-improve-your-google-search-skills"
49 |   },
50 |   {
51 |     "id": 7,
52 |     "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/logrocket",
53 |     "title": "A better way of solving prop drilling in React apps",
54 |     "details": "Jan 14, 2022 · 13m read time",
55 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/6fe4c4060bca638b419d8b2c63d8eaf7",
56 |     "link": "https://blog.logrocket.com/solving-prop-drilling-react-apps/"
57 |   },
58 |   {
59 |     "id": 8,
60 |     "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/dz",
61 |     "title": "Golang and Event-Driven Architecture",
62 |     "details": "Apr 18, 2022 · 6m read time",
63 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/d06eddd82c62288df6e2600bcda61579",
64 |     "link": "https://dzone.com/articles/golang-and-event-driven-architecture"
65 |   },
66 |   {
67 |     "id": 9,
68 |     "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4",
69 |     "title": "Introduction to Git In 16 Minutes",
70 |     "details": "Mar 18, 2021 · 8m read time",
71 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/3c02111a8f242f607551500432e17a78",
72 |     "link": "https://vickyikechukwu.hashnode.dev/introduction-to-git-in-16-minutes"
73 |   },
74 |   {
75 |     "id": 10,
76 |     "logoImage": "https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4",
77 |     "title": "How to Create a Sleek Preloader Animation Using GSAP Timeline",
78 |     "details": "Jan 25, 2022 · 7m read time",
79 |     "coverImage": "https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/e238c35cb9d41dd9a5475602aef00119",
80 |     "link": "https://israelmitolu.hashnode.dev/how-to-create-a-sleek-preloader-animation-using-gsap-timeline"
81 |   }
82 | ]
83 | 


--------------------------------------------------------------------------------
/finished/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="styles.css" />
 8 |     <title>Skeleton Loading using CSS</title>
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <template id="card-template">
13 |         <a class="card" id="card-link" target="_blank">
14 |           <div class="card__header">
15 |             <div>
16 |               <img class="header__img skeleton" id="logo-img" alt="" />
17 |             </div>
18 |             <h3 class="card__header header__title" id="card-title">
19 |               <div class="skeleton skeleton-text"></div>
20 |               <div class="skeleton skeleton-text"></div>
21 |             </h3>
22 |           </div>
23 | 
24 |           <div class="card__body">
25 |             <div class="card__body body__text" id="card-details">
26 |               <div class="skeleton skeleton-text skeleton-text__body"></div>
27 |             </div>
28 | 
29 |             <div class="card__body body__img">
30 |               <img class="skeleton" alt="" id="cover-img" />
31 |             </div>
32 |           </div>
33 | 
34 |           <div class="card__footer" id="card-footer">
35 |             <div class="skeleton skeleton-text skeleton-footer"></div>
36 |           </div>
37 |         </a>
38 |       </template>
39 |     </div>
40 | 
41 |     <!-- Install ION ICONS via CDN -->
42 |     <script
43 |       type="module"
44 |       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
45 |     ></script>
46 |     <script
47 |       nomodule
48 |       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
49 |     ></script>
50 | 
51 |     <script>
52 |       //Clone the card template
53 |       const container = document.querySelector(".container");
54 |       const cardTemplate = document.getElementById("card-template");
55 |       for (let i = 0; i < 10; i++) {
56 |         container.append(cardTemplate.content.cloneNode(true));
57 |       }
58 | 
59 |       fetch("data.json")
60 |         .then((response) => response.json())
61 |         .then((posts) => {
62 |           container.innerHTML = "";
63 |           posts.forEach((post) => {
64 |             const div = cardTemplate.content.cloneNode(true);
65 |             div.getElementById("card-link").href = post.link;
66 |             div.getElementById("logo-img").src = post.logoImage;
67 |             div.getElementById("card-title").textContent = post.title;
68 |             div.getElementById("card-details").textContent = post.details;
69 |             div.getElementById("cover-img").src = post.coverImage;
70 |             div.getElementById(
71 |               "card-footer"
72 |             ).innerHTML = ` <ion-icon name="arrow-up"></ion-icon>
73 |           <ion-icon name="chatbox-ellipses"></ion-icon>
74 |           <ion-icon name="bookmark"></ion-icon>`;
75 |             container.append(div);
76 |           });
77 |         });
78 |     </script>
79 |   </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/finished/styles.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
  2 | * {
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   -webkit-box-sizing: border-box;
  6 |           box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 |   font-family: "Source Sans Pro", sans-serif;
 11 |   min-height: 100vh;
 12 | }
 13 | 
 14 | a {
 15 |   text-decoration: none;
 16 | }
 17 | 
 18 | img[alt] {
 19 |   text-indent: -10000px;
 20 | }
 21 | 
 22 | .container {
 23 |   display: -webkit-box;
 24 |   display: -ms-flexbox;
 25 |   display: flex;
 26 |   -ms-flex-wrap: wrap;
 27 |       flex-wrap: wrap;
 28 |   -webkit-box-pack: center;
 29 |       -ms-flex-pack: center;
 30 |           justify-content: center;
 31 |   -webkit-box-align: center;
 32 |       -ms-flex-align: center;
 33 |           align-items: center;
 34 |   margin: 5rem;
 35 | }
 36 | 
 37 | @media screen and (max-width: 600px) {
 38 |   .container {
 39 |     margin: -0.5rem;
 40 |   }
 41 | }
 42 | 
 43 | .card {
 44 |   background-color: #f5f8fc;
 45 |   -webkit-box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4);
 46 |           box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4);
 47 |   padding: 0.5rem;
 48 |   border-radius: 1rem;
 49 |   border: 1px solid rgba(82, 88, 102, 0.2);
 50 |   display: -webkit-box;
 51 |   display: -ms-flexbox;
 52 |   display: flex;
 53 |   -webkit-box-orient: vertical;
 54 |   -webkit-box-direction: normal;
 55 |       -ms-flex-direction: column;
 56 |           flex-direction: column;
 57 |   -ms-flex-pack: distribute;
 58 |       justify-content: space-around;
 59 |   width: 330px;
 60 |   height: auto;
 61 |   -webkit-transition: all 0.2s ease;
 62 |   transition: all 0.2s ease;
 63 |   margin: 2rem;
 64 | }
 65 | 
 66 | .card__header {
 67 |   margin-bottom: 1rem;
 68 |   display: -webkit-box;
 69 |   display: -ms-flexbox;
 70 |   display: flex;
 71 |   -webkit-box-orient: vertical;
 72 |   -webkit-box-direction: normal;
 73 |       -ms-flex-direction: column;
 74 |           flex-direction: column;
 75 |   margin: 0.5rem 0 0.5rem 0.5rem;
 76 | }
 77 | 
 78 | .card__header .header__img {
 79 |   height: 2rem;
 80 |   width: 2rem;
 81 |   -o-object-fit: cover;
 82 |      object-fit: cover;
 83 |   border-radius: 50%;
 84 | }
 85 | 
 86 | .card__header .header__title {
 87 |   font-size: 1.0625rem;
 88 |   line-height: 1.375rem;
 89 |   color: #0e1217;
 90 |   font-weight: 700;
 91 |   margin: 0.5rem;
 92 | }
 93 | 
 94 | .card__body {
 95 |   margin: 0 0.5rem;
 96 | }
 97 | 
 98 | .card__body .body__text {
 99 |   color: #525866;
100 |   font-size: 0.8125rem;
101 | }
102 | 
103 | .card__body .body__img {
104 |   height: 10rem;
105 |   margin: 0.5rem 0;
106 | }
107 | 
108 | .card__body .body__img img {
109 |   width: 100%;
110 |   height: 100%;
111 |   -o-object-fit: cover;
112 |      object-fit: cover;
113 |   margin: auto;
114 |   border-radius: 0.75rem;
115 | }
116 | 
117 | .card__footer {
118 |   display: -webkit-box;
119 |   display: -ms-flexbox;
120 |   display: flex;
121 |   -ms-flex-pack: distribute;
122 |       justify-content: space-around;
123 |   -webkit-box-align: center;
124 |       -ms-flex-align: center;
125 |           align-items: center;
126 |   margin: 0.5rem;
127 | }
128 | 
129 | .card:hover {
130 |   border-color: rgba(82, 88, 102, 0.4);
131 | }
132 | 
133 | ion-icon {
134 |   font-size: 1.5rem;
135 |   color: #525866;
136 |   cursor: pointer;
137 |   -webkit-transition: color 0.2s ease;
138 |   transition: color 0.2s ease;
139 | }
140 | 
141 | ion-icon:hover:nth-of-type(1) {
142 |   color: #15ce5c;
143 | }
144 | 
145 | ion-icon:hover:nth-of-type(2) {
146 |   color: #15ce5c;
147 | }
148 | 
149 | ion-icon:hover:nth-of-type(3) {
150 |   color: #fa6620;
151 | }
152 | 
153 | .skeleton {
154 |   -webkit-animation: skeleton-loading 1s linear infinite alternate;
155 |           animation: skeleton-loading 1s linear infinite alternate;
156 | }
157 | 
158 | @-webkit-keyframes skeleton-loading {
159 |   0% {
160 |     background-color: #c2cfd6;
161 |   }
162 |   100% {
163 |     background-color: #f0f3f5;
164 |   }
165 | }
166 | 
167 | @keyframes skeleton-loading {
168 |   0% {
169 |     background-color: #c2cfd6;
170 |   }
171 |   100% {
172 |     background-color: #f0f3f5;
173 |   }
174 | }
175 | 
176 | .skeleton-text {
177 |   width: 100%;
178 |   height: 0.7rem;
179 |   margin-bottom: 0.5rem;
180 |   border-radius: 0.25rem;
181 | }
182 | 
183 | .skeleton-text__body {
184 |   width: 75%;
185 | }
186 | 
187 | .skeleton-footer {
188 |   width: 30%;
189 | }
190 | /*# sourceMappingURL=styles.css.map */
191 | 


--------------------------------------------------------------------------------
/finished/styles.css.map:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": 3,
 3 |     "mappings": "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",
 4 |     "sources": [
 5 |         "styles.scss"
 6 |     ],
 7 |     "names": [],
 8 |     "file": "styles.css"
 9 | }
10 | 


--------------------------------------------------------------------------------
/finished/styles.scss:
--------------------------------------------------------------------------------
  1 | // Import Google Fonts
  2 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
  3 | 
  4 | * {
  5 |   margin: 0;
  6 |   padding: 0;
  7 |   box-sizing: border-box;
  8 | }
  9 | 
 10 | body {
 11 |   font-family: "Source Sans Pro", sans-serif;
 12 |   min-height: 100vh;
 13 | }
 14 | 
 15 | a {
 16 |   text-decoration: none;
 17 | }
 18 | 
 19 | //Hides the broken image icon
 20 | img[alt] {
 21 |   text-indent: -10000px;
 22 | }
 23 | 
 24 | .container {
 25 |   display: flex;
 26 |   flex-wrap: wrap;
 27 |   justify-content: center;
 28 |   align-items: center;
 29 |   margin: 5rem;
 30 | 
 31 |   @media screen and (max-width: 600px) {
 32 |     margin: -0.5rem;
 33 |   }
 34 | }
 35 | 
 36 | .card {
 37 |   background-color: #f5f8fc;
 38 |   box-shadow: 0 0 transparent, 0 0 transparent,
 39 |     0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4);
 40 |   padding: 0.5rem;
 41 |   border-radius: 1rem;
 42 |   border: 1px solid rgba(82, 88, 102, 0.2);
 43 |   display: flex;
 44 |   flex-direction: column;
 45 |   justify-content: space-around;
 46 |   width: 330px;
 47 |   height: auto;
 48 |   transition: all 0.2s ease;
 49 |   margin: 2rem;
 50 | 
 51 |   &__header {
 52 |     margin-bottom: 1rem;
 53 |     display: flex;
 54 |     flex-direction: column;
 55 |     margin: 0.5rem 0 0.5rem 0.5rem;
 56 | 
 57 |     .header__img {
 58 |       height: 2rem;
 59 |       width: 2rem;
 60 |       object-fit: cover;
 61 |       border-radius: 50%;
 62 |     }
 63 | 
 64 |     .header__title {
 65 |       font-size: 1.0625rem;
 66 |       line-height: 1.375rem;
 67 |       color: #0e1217;
 68 |       font-weight: 700;
 69 |       margin: 0.5rem;
 70 |     }
 71 |   }
 72 | 
 73 |   &__body {
 74 |     margin: 0 0.5rem;
 75 | 
 76 |     .body__text {
 77 |       color: #525866;
 78 |       font-size: 0.8125rem;
 79 |     }
 80 | 
 81 |     .body__img {
 82 |       height: 10rem;
 83 |       margin: 0.5rem 0;
 84 | 
 85 |       img {
 86 |         width: 100%;
 87 |         height: 100%;
 88 |         object-fit: cover;
 89 |         margin: auto;
 90 |         border-radius: 0.75rem;
 91 |       }
 92 |     }
 93 |   }
 94 | 
 95 |   &__footer {
 96 |     display: flex;
 97 |     justify-content: space-around;
 98 |     align-items: center;
 99 |     margin: 0.5rem;
100 |   }
101 | 
102 |   &:hover {
103 |     border-color: rgba(82, 88, 102, 0.4);
104 |   }
105 | }
106 | 
107 | ion-icon {
108 |   font-size: 1.5rem;
109 |   color: #525866;
110 |   cursor: pointer;
111 |   transition: color 0.2s ease;
112 | 
113 |   &:hover {
114 |     &:nth-of-type(1) {
115 |       color: #15ce5c;
116 |     }
117 |     &:nth-of-type(2) {
118 |       color: #15ce5c;
119 |     }
120 |     &:nth-of-type(3) {
121 |       color: #fa6620;
122 |     }
123 |   }
124 | }
125 | 
126 | .skeleton {
127 |   animation: skeleton-loading 1s linear infinite alternate;
128 | }
129 | 
130 | @keyframes skeleton-loading {
131 |   0% {
132 |     background-color: hsl(200, 20%, 80%);
133 |   }
134 |   100% {
135 |     background-color: hsl(200, 20%, 95%);
136 |   }
137 | }
138 | 
139 | .skeleton-text {
140 |   width: 100%;
141 |   height: 0.7rem;
142 |   margin-bottom: 0.5rem;
143 |   border-radius: 0.25rem;
144 | }
145 | 
146 | .skeleton-text__body {
147 |   width: 75%;
148 | }
149 | 
150 | .skeleton-footer {
151 |   width: 30%;
152 | }
153 | 


--------------------------------------------------------------------------------
/starter/README.md:
--------------------------------------------------------------------------------
1 | ### This folder contains the code for the card layout.
2 | 
3 | ### Continue working on the project from the [tutorial](https://www.freecodecamp.org/news/how-to-build-skeleton-screens-using-css-for-better-user-experience).
4 | 


--------------------------------------------------------------------------------
/starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="styles.css" />
 8 |     <title>Skeleton Loading using CSS</title>
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |   <!--       <template id="card-template"> -->
13 |   <a class="card" id="card-link" target="_blank">
14 |     <div class="card__header">
15 |       <div>
16 |         <img class="header__img" id="logo-img" src="https://res.cloudinary.com/daily-now/image/upload/t_logo,f_auto/v1/logos/4a287b2e7cb5499bae863f8e7137cdb4" />
17 |       </div>
18 |       <h3 class="card__header header__title" id="card-title">
19 |         Writing Cleaner CSS Using BEM
20 |       </h3>
21 |     </div>
22 | 
23 |     <div class="card__body">
24 |       <div class="card__body body__text" id="card-details">
25 |         Mar 12, 2022 · 4m read time
26 |       </div>
27 | 
28 |       <div class="card__body body__img">
29 |         <img src="https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/dd19e7a56475f39ab1c38167c02c7b58" id="cover-img" />
30 |       </div>
31 |     </div>
32 | 
33 |     <div class="card__footer" id="card-footer">
34 |       <ion-icon name="arrow-up"></ion-icon>
35 |       <ion-icon name="chatbox-ellipses"></ion-icon>
36 |       <ion-icon name="bookmark"></ion-icon>
37 |     </div>
38 |   </a>
39 |   <!--       </template> -->
40 | </div>
41 | 
42 | <!-- Install ION ICONS via CDN -->
43 | <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
44 | <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/starter/styles.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
  2 | * {
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   -webkit-box-sizing: border-box;
  6 |           box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 |   font-family: "Source Sans Pro", sans-serif;
 11 |   min-height: 100vh;
 12 | }
 13 | 
 14 | a {
 15 |   text-decoration: none;
 16 | }
 17 | 
 18 | img[alt] {
 19 |   text-indent: -10000px;
 20 | }
 21 | 
 22 | .container {
 23 |   display: -webkit-box;
 24 |   display: -ms-flexbox;
 25 |   display: flex;
 26 |   -ms-flex-wrap: wrap;
 27 |       flex-wrap: wrap;
 28 |   -webkit-box-pack: center;
 29 |       -ms-flex-pack: center;
 30 |           justify-content: center;
 31 |   -webkit-box-align: center;
 32 |       -ms-flex-align: center;
 33 |           align-items: center;
 34 |   margin: 5rem;
 35 | }
 36 | 
 37 | @media screen and (max-width: 600px) {
 38 |   .container {
 39 |     margin: -0.5rem;
 40 |   }
 41 | }
 42 | 
 43 | .card {
 44 |   background-color: #f5f8fc;
 45 |   -webkit-box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4);
 46 |           box-shadow: 0 0 transparent, 0 0 transparent, 0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4);
 47 |   padding: 0.5rem;
 48 |   border-radius: 1rem;
 49 |   border: 1px solid rgba(82, 88, 102, 0.2);
 50 |   display: -webkit-box;
 51 |   display: -ms-flexbox;
 52 |   display: flex;
 53 |   -webkit-box-orient: vertical;
 54 |   -webkit-box-direction: normal;
 55 |       -ms-flex-direction: column;
 56 |           flex-direction: column;
 57 |   -ms-flex-pack: distribute;
 58 |       justify-content: space-around;
 59 |   width: 330px;
 60 |   height: auto;
 61 |   -webkit-transition: all 0.2s ease;
 62 |   transition: all 0.2s ease;
 63 |   margin: 2rem;
 64 | }
 65 | 
 66 | .card__header {
 67 |   margin-bottom: 1rem;
 68 |   display: -webkit-box;
 69 |   display: -ms-flexbox;
 70 |   display: flex;
 71 |   -webkit-box-orient: vertical;
 72 |   -webkit-box-direction: normal;
 73 |       -ms-flex-direction: column;
 74 |           flex-direction: column;
 75 |   margin: 0.5rem 0 0.5rem 0.5rem;
 76 | }
 77 | 
 78 | .card__header .header__img {
 79 |   height: 2rem;
 80 |   width: 2rem;
 81 |   -o-object-fit: cover;
 82 |      object-fit: cover;
 83 |   border-radius: 50%;
 84 | }
 85 | 
 86 | .card__header .header__title {
 87 |   font-size: 1.0625rem;
 88 |   line-height: 1.375rem;
 89 |   color: #0e1217;
 90 |   font-weight: 700;
 91 |   margin: 0.5rem;
 92 | }
 93 | 
 94 | .card__body {
 95 |   margin: 0 0.5rem;
 96 | }
 97 | 
 98 | .card__body .body__text {
 99 |   color: #525866;
100 |   font-size: 0.8125rem;
101 | }
102 | 
103 | .card__body .body__img {
104 |   height: 10rem;
105 |   margin: 0.5rem 0;
106 | }
107 | 
108 | .card__body .body__img img {
109 |   width: 100%;
110 |   height: 100%;
111 |   -o-object-fit: cover;
112 |      object-fit: cover;
113 |   margin: auto;
114 |   border-radius: 0.75rem;
115 | }
116 | 
117 | .card__footer {
118 |   display: -webkit-box;
119 |   display: -ms-flexbox;
120 |   display: flex;
121 |   -ms-flex-pack: distribute;
122 |       justify-content: space-around;
123 |   -webkit-box-align: center;
124 |       -ms-flex-align: center;
125 |           align-items: center;
126 |   margin: 0.5rem;
127 | }
128 | 
129 | .card:hover {
130 |   border-color: rgba(82, 88, 102, 0.4);
131 | }
132 | 
133 | ion-icon {
134 |   font-size: 1.5rem;
135 |   color: #525866;
136 |   cursor: pointer;
137 |   -webkit-transition: color 0.2s ease;
138 |   transition: color 0.2s ease;
139 | }
140 | 
141 | ion-icon:hover:nth-of-type(1) {
142 |   color: #15ce5c;
143 | }
144 | 
145 | ion-icon:hover:nth-of-type(2) {
146 |   color: #15ce5c;
147 | }
148 | 
149 | ion-icon:hover:nth-of-type(3) {
150 |   color: #fa6620;
151 | }
152 | /*# sourceMappingURL=starter.css.map */
153 | 


--------------------------------------------------------------------------------
/starter/styles.min.css:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": 3,
 3 |     "mappings": "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",
 4 |     "sources": [
 5 |         "starter.scss"
 6 |     ],
 7 |     "names": [],
 8 |     "file": "starter.css"
 9 | }
10 | 


--------------------------------------------------------------------------------
/starter/styles.scss:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 |   font-family: "Source Sans Pro", sans-serif;
 11 |   min-height: 100vh;
 12 | }
 13 | 
 14 | a {
 15 |   text-decoration: none;
 16 | }
 17 | 
 18 | //Hides the broken image icon
 19 | img[alt] {
 20 |   text-indent: -10000px;
 21 | }
 22 | 
 23 | .container {
 24 |   display: flex;
 25 |   flex-wrap: wrap;
 26 |   justify-content: center;
 27 |   align-items: center;
 28 |   margin: 5rem;
 29 |   
 30 |     @media screen and (max-width: 600px) {
 31 |     margin: -0.5rem;
 32 |   }
 33 | }
 34 | 
 35 | .card {
 36 |   background-color: #f5f8fc;
 37 |   box-shadow: 0 0 transparent, 0 0 transparent,
 38 |     0 0.375rem 0.375rem -0.125rem rgba(168, 179, 207, 0.4);
 39 |   padding: 0.5rem;
 40 |   border-radius: 1rem;
 41 |   border: 1px solid rgba(82, 88, 102, 0.2);
 42 |   display: flex;
 43 |   flex-direction: column;
 44 |   justify-content: space-around;
 45 |   width: 330px;
 46 |   height: auto;
 47 |   transition: all 0.2s ease;
 48 |   margin: 2rem;
 49 | 
 50 |   &__header {
 51 |     margin-bottom: 1rem;
 52 |     display: flex;
 53 |     flex-direction: column;
 54 |     margin: 0.5rem 0 0.5rem 0.5rem;
 55 | 
 56 |     .header__img {
 57 |       height: 2rem;
 58 |       width: 2rem;
 59 |       object-fit: cover;
 60 |       border-radius: 50%;
 61 |     }
 62 | 
 63 |     .header__title {
 64 |       font-size: 1.0625rem;
 65 |       line-height: 1.375rem;
 66 |       color: #0e1217;
 67 |       font-weight: 700;
 68 |       margin: 0.5rem;
 69 |     }
 70 |   }
 71 | 
 72 |   &__body {
 73 |     margin: 0 0.5rem;
 74 | 
 75 |     .body__text {
 76 |       color: #525866;
 77 |       font-size: 0.8125rem;
 78 |     }
 79 | 
 80 |     .body__img {
 81 |       height: 10rem;
 82 |       margin: 0.5rem 0;
 83 | 
 84 |       img {
 85 |         width: 100%;
 86 |         height: 100%;
 87 |         object-fit: cover;
 88 |         margin: auto;
 89 |         border-radius: 0.75rem;
 90 |       }
 91 |     }
 92 |   }
 93 | 
 94 |   &__footer {
 95 |     display: flex;
 96 |     justify-content: space-around;
 97 |     align-items: center;
 98 |     margin: 0.5rem;
 99 |   }
100 | 
101 |   &:hover {
102 |     border-color: rgba(82, 88, 102, 0.4);
103 |   }
104 | }
105 | 
106 | ion-icon {
107 |   font-size: 1.5rem;
108 |   color: #525866;
109 |   cursor: pointer;
110 |   transition: color 0.2s ease;
111 | 
112 |   &:hover {
113 |     &:nth-of-type(1) {
114 |       color: #15ce5c;
115 |     }
116 |     &:nth-of-type(2) {
117 |       color: #15ce5c;
118 |     }
119 |     &:nth-of-type(3) {
120 |       color: #fa6620;
121 |     }
122 |   }
123 | }
124 | 


--------------------------------------------------------------------------------