/
githubmirror
/
50projects50days
Обзор
Документация
Войти
/
githubmirror
/
50projects50days
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
content-placeholder/style.css
106 строк
1 KB
Brad Traversy
Content placeholder
08 окт 2020, 18:23
08 окт 2020, 18:23
9b3a81d
Код
Авторство
О чём код?
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #ecf0f1; font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } img { max-width: 100%; } .card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); border-radius: 10px; overflow: hidden; width: 350px; } .card-header { height: 200px; } .card-header img { object-fit: cover; height: 100%; width: 100%; } .card-content { background-color: #fff; padding: 30px; } .card-title { height: 20px; margin: 0; } .card-excerpt { color: #777; margin: 10px 0 20px; } .author { display: flex; } .profile-img { border-radius: 50%; overflow: hidden; height: 40px; width: 40px; } .author-info { display: flex; flex-direction: column; justify-content: space-around; margin-left: 10px; width: 100px; } .author-info small { color: #aaa; margin-top: 5px; } .animated-bg { background-image: linear-gradient( to right, #f6f7f8 0%, #edeef1 10%, #f6f7f8 20%, #f6f7f8 100% ); background-size: 200% 100%; animation: bgPos 1s linear infinite; } .animated-bg-text { border-radius: 50px; display: inline-block; margin: 0; height: 10px; width: 100%; } @keyframes bgPos { 0% { background-position: 50% 0; } 100% { background-position: -150% 0; } }