├── README.md ├── index.html └── style.scss /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-Blog-Cards 2 | 3 | 4 | 5 | https://user-images.githubusercontent.com/42389395/174581907-0fd557c0-f22e-41c3-930e-ff369dc6355a.mov 6 | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 27 |
28 |
29 |

Agile Methodologies

30 |

A Beginner’s Guide

31 |

To understand Agile methodologies, it helps to start with Agile itself. Agile Alliance defines Agile as “the ability to create and respond to change. It is a way of dealing with, and ultimately succeeding in, an uncertain and turbulent environment.

32 |

33 | Read More 34 |

35 |
36 |
37 |
38 |
39 |
40 | 51 |
52 |
53 |

SCRUM Framework

54 |

WHAT IS SCRUM?

55 |

Scrum is a lightweight framework that helps people, teams and organizations generate value through adaptive solutions for complex problems.

56 |

57 | Read More 58 |

59 |
60 |
61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | background: #f2eee3; 8 | margin: 2rem; 9 | } 10 | 11 | $color_white: #fff; 12 | $color_prime: #5ad67d; 13 | $color_grey: #e2e2e2; 14 | $color_grey_dark: #a2a2a2; 15 | 16 | .card { 17 | display: flex; 18 | flex-direction: column; 19 | margin: 1rem auto; 20 | box-shadow: 0 3px 7px -1px rgba(#000, .1); 21 | margin-bottom: 1.6%; 22 | background: $color_white; 23 | line-height: 1.4; 24 | font-family: sans-serif; 25 | border-radius: 5px; 26 | overflow: hidden; 27 | z-index: 0; 28 | a { 29 | color: inherit; 30 | &:hover { 31 | color: $color_prime; 32 | } 33 | } 34 | &:hover { 35 | .photo { 36 | transform: scale(1.3) rotate(3deg); 37 | } 38 | } 39 | .meta { 40 | position: relative; 41 | z-index: 0; 42 | height: 200px; 43 | } 44 | .photo { 45 | position: absolute; 46 | top: 0; 47 | right: 0; 48 | bottom: 0; 49 | left: 0; 50 | background-size: cover; 51 | background-position: center; 52 | transition: transform .2s; 53 | } 54 | .details, 55 | .details ul { 56 | margin: auto; 57 | padding: 0; 58 | list-style: none; 59 | } 60 | 61 | .details { 62 | position: absolute; 63 | top: 0; 64 | bottom: 0; 65 | left: -100%; 66 | margin: auto; 67 | transition: left .2s; 68 | background: rgba(#000, .6); 69 | color: $color_white; 70 | padding: 10px; 71 | width: 100%; 72 | font-size: .9rem; 73 | a { 74 | text-decoration: dotted underline 75 | } 76 | ul li { 77 | display: inline-block; 78 | } 79 | .author:before { 80 | font-family: FontAwesome; 81 | margin-right: 10px; 82 | content: "\f007"; 83 | } 84 | 85 | .date:before { 86 | font-family: FontAwesome; 87 | margin-right: 10px; 88 | content: "\f133"; 89 | } 90 | 91 | .tags { 92 | ul:before { 93 | font-family: FontAwesome; 94 | content: "\f02b"; 95 | margin-right: 10px; 96 | } 97 | li { 98 | margin-right: 2px; 99 | &:first-child { 100 | margin-left: -4px; 101 | } 102 | } 103 | } 104 | } 105 | .description { 106 | padding: 1rem; 107 | background: $color_white; 108 | position: relative; 109 | z-index: 1; 110 | h1, 111 | h2 { 112 | font-family: Poppins, sans-serif; 113 | } 114 | h1 { 115 | line-height: 1; 116 | margin: 0; 117 | font-size: 1.7rem; 118 | } 119 | h2 { 120 | font-size: 1rem; 121 | font-weight: 300; 122 | text-transform: uppercase; 123 | color: $color_grey_dark; 124 | margin-top: 5px; 125 | } 126 | .read-more { 127 | text-align: right; 128 | a { 129 | color: $color_prime; 130 | display: inline-block; 131 | position: relative; 132 | &:after { 133 | content: "\f061"; 134 | font-family: FontAwesome; 135 | margin-left: -10px; 136 | opacity: 0; 137 | vertical-align: middle; 138 | transition: margin .3s, opacity .3s; 139 | } 140 | 141 | &:hover:after { 142 | margin-left: 5px; 143 | opacity: 1; 144 | } 145 | } 146 | } 147 | } 148 | p { 149 | position: relative; 150 | margin: 1rem 0 0; 151 | &:first-of-type { 152 | margin-top: 1.25rem; 153 | &:before { 154 | content: ""; 155 | position: absolute; 156 | height: 5px; 157 | background: $color_prime; 158 | width: 35px; 159 | top: -0.75rem; 160 | border-radius: 3px; 161 | } 162 | } 163 | } 164 | &:hover { 165 | .details { 166 | left: 0%; 167 | } 168 | } 169 | 170 | 171 | @media (min-width: 640px) { 172 | flex-direction: row; 173 | max-width: 700px; 174 | .meta { 175 | flex-basis: 40%; 176 | height: auto; 177 | } 178 | .description { 179 | flex-basis: 60%; 180 | &:before { 181 | transform: skewX(-3deg); 182 | content: ""; 183 | background: #fff; 184 | width: 30px; 185 | position: absolute; 186 | left: -10px; 187 | top: 0; 188 | bottom: 0; 189 | z-index: -1; 190 | } 191 | } 192 | &.alt { 193 | flex-direction: row-reverse; 194 | .description { 195 | &:before { 196 | left: inherit; 197 | right: -10px; 198 | transform: skew(3deg) 199 | } 200 | } 201 | .details { 202 | padding-left: 25px; 203 | } 204 | } 205 | } 206 | } --------------------------------------------------------------------------------