main
|
Last change
on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago |
|
Update repo after prototype presentation
|
-
Property mode
set to
100644
|
|
File size:
1.9 KB
|
| Line | |
|---|
| 1 | .cards {
|
|---|
| 2 | padding: 4rem;
|
|---|
| 3 | background: #fff;
|
|---|
| 4 | }
|
|---|
| 5 |
|
|---|
| 6 | h1 {
|
|---|
| 7 | text-align: center;
|
|---|
| 8 | }
|
|---|
| 9 |
|
|---|
| 10 | .cards__container {
|
|---|
| 11 | display: flex;
|
|---|
| 12 | flex-flow: column;
|
|---|
| 13 | align-items: center;
|
|---|
| 14 | max-width: 1120px;
|
|---|
| 15 | width: 90%;
|
|---|
| 16 | margin: 0 auto;
|
|---|
| 17 | }
|
|---|
| 18 |
|
|---|
| 19 | .cards__wrapper {
|
|---|
| 20 | position: relative;
|
|---|
| 21 | margin: 50px 0 45px;
|
|---|
| 22 | }
|
|---|
| 23 |
|
|---|
| 24 | .cards__items {
|
|---|
| 25 | margin-bottom: 24px;
|
|---|
| 26 | }
|
|---|
| 27 |
|
|---|
| 28 | .cards__item {
|
|---|
| 29 | display: flex;
|
|---|
| 30 | flex: 1;
|
|---|
| 31 | margin: 0 1rem;
|
|---|
| 32 | border-radius: 10px;
|
|---|
| 33 | }
|
|---|
| 34 |
|
|---|
| 35 | .cards__item__link {
|
|---|
| 36 | display: flex;
|
|---|
| 37 | flex-flow: column;
|
|---|
| 38 | width: 100%;
|
|---|
| 39 | box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
|
|---|
| 40 | -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
|---|
| 41 | filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
|
|---|
| 42 | border-radius: 10px;
|
|---|
| 43 | overflow: hidden;
|
|---|
| 44 | text-decoration: none;
|
|---|
| 45 | }
|
|---|
| 46 |
|
|---|
| 47 | .cards__item__pic-wrap {
|
|---|
| 48 | position: relative;
|
|---|
| 49 | width: 100%;
|
|---|
| 50 | padding-top: 67%;
|
|---|
| 51 | overflow: hidden;
|
|---|
| 52 | }
|
|---|
| 53 |
|
|---|
| 54 | .fade-img {
|
|---|
| 55 | animation-name: fade-img;
|
|---|
| 56 | animation-duration: 2s;
|
|---|
| 57 | }
|
|---|
| 58 |
|
|---|
| 59 | .cards__item__pic-wrap::after {
|
|---|
| 60 | content: attr(data-category);
|
|---|
| 61 | position: absolute;
|
|---|
| 62 | bottom: 0;
|
|---|
| 63 | margin-left: 10px;
|
|---|
| 64 | padding: 6px 8px;
|
|---|
| 65 | max-width: calc((100%) - 60px);
|
|---|
| 66 | font-size: 12px;
|
|---|
| 67 | font-weight: 700;
|
|---|
| 68 | color: #fff;
|
|---|
| 69 | background-color: #1f98f4;
|
|---|
| 70 | box-sizing: border-box;
|
|---|
| 71 | }
|
|---|
| 72 |
|
|---|
| 73 | .cards__item__img {
|
|---|
| 74 | position: absolute;
|
|---|
| 75 | top: 0;
|
|---|
| 76 | right: 0;
|
|---|
| 77 | bottom: 0;
|
|---|
| 78 | left: 0;
|
|---|
| 79 | display: block;
|
|---|
| 80 | width: 100%;
|
|---|
| 81 | max-width: 100%;
|
|---|
| 82 | height: 100%;
|
|---|
| 83 | max-height: 100%;
|
|---|
| 84 | object-fit: cover;
|
|---|
| 85 | transition: all 0.2s linear;
|
|---|
| 86 | }
|
|---|
| 87 |
|
|---|
| 88 | .cards__item__img:hover {
|
|---|
| 89 | transform: scale(1.1);
|
|---|
| 90 | }
|
|---|
| 91 |
|
|---|
| 92 | .cards__item__info {
|
|---|
| 93 | padding: 20px 30px 30px;
|
|---|
| 94 | }
|
|---|
| 95 |
|
|---|
| 96 | .cards__item__text {
|
|---|
| 97 | color: #252e48;
|
|---|
| 98 | font-size: 18px;
|
|---|
| 99 | line-height: 24px;
|
|---|
| 100 | }
|
|---|
| 101 |
|
|---|
| 102 | @media only screen and (min-width: 1200px) {
|
|---|
| 103 | .content__blog__container {
|
|---|
| 104 | width: 84%;
|
|---|
| 105 | }
|
|---|
| 106 | }
|
|---|
| 107 |
|
|---|
| 108 | @media only screen and (min-width: 1024px) {
|
|---|
| 109 | .cards__items {
|
|---|
| 110 | display: flex;
|
|---|
| 111 | }
|
|---|
| 112 | }
|
|---|
| 113 |
|
|---|
| 114 | @media only screen and (max-width: 1024px) {
|
|---|
| 115 | .cards__item {
|
|---|
| 116 | margin-bottom: 2rem;
|
|---|
| 117 | }
|
|---|
| 118 | }
|
|---|
Note:
See
TracBrowser
for help on using the repository browser.
