├── .gitignore ├── README.md ├── .gitattributes ├── img ├── landscape1.jpg ├── landscape2.jpg ├── landscape3.jpg ├── landscape4.jpg └── landscape5.jpg ├── package.json ├── dist ├── style.css └── style.css.map ├── gulpfile.js ├── app └── scss │ └── style.scss └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cards-flexbox 2 | 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /img/landscape1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/cards-flexbox/HEAD/img/landscape1.jpg -------------------------------------------------------------------------------- /img/landscape2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/cards-flexbox/HEAD/img/landscape2.jpg -------------------------------------------------------------------------------- /img/landscape3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/cards-flexbox/HEAD/img/landscape3.jpg -------------------------------------------------------------------------------- /img/landscape4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/cards-flexbox/HEAD/img/landscape4.jpg -------------------------------------------------------------------------------- /img/landscape5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/cards-flexbox/HEAD/img/landscape5.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-browsersync", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "browser-sync": "^2.26.13", 14 | "cssnano": "^4.1.10", 15 | "dart-sass": "^1.25.0", 16 | "gulp": "^4.0.2", 17 | "gulp-postcss": "^9.0.0", 18 | "gulp-sass": "^4.1.0", 19 | "gulp-terser": "^1.4.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /dist/style.css: -------------------------------------------------------------------------------- 1 | html{font-size:100%;box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{margin:0;padding:0;background-color:#101010;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:1.25rem;line-height:1.3}.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;padding:3rem}.card{display:flex;flex-direction:column;flex:1 0 300px;max-width:450px;overflow:hidden;background:#fff;color:#000;border-radius:5px;box-shadow:3px 2px 14px hsla(0,0%,100%,.2);text-decoration:none;font-size:1rem;transition:all .2s ease-in-out}.card:hover{transform:translateY(-1rem);box-shadow:2px 3px 18px hsla(0,0%,100%,.4)}.card__image{flex:0 0 120px;background-size:cover;background-repeat:no-repeat;background-position:50%}.card__content{display:flex;flex-direction:column;height:100%;padding:1rem}.card__title{font-size:1.75rem;font-weight:700}.card__snippet,.card__title{margin-bottom:.5rem}.card__readmore{margin-top:auto;text-transform:uppercase;font-weight:700} 2 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const { src, dest, watch, series } = require('gulp'); 2 | const sass = require('gulp-sass'); 3 | const postcss = require('gulp-postcss'); 4 | const cssnano = require('cssnano'); 5 | const browsersync = require('browser-sync').create(); 6 | 7 | // Use dart-sass for @use 8 | sass.compiler = require('dart-sass'); 9 | 10 | // Sass Task 11 | function scssTask(){ 12 | return src('app/scss/style.scss', { sourcemaps: true }) 13 | .pipe(sass()) 14 | .pipe(postcss([cssnano()])) 15 | .pipe(dest('dist', { sourcemaps: '.' })); 16 | } 17 | 18 | // Browsersync Tasks 19 | function browsersyncServe(cb){ 20 | browsersync.init({ 21 | server: { 22 | baseDir: '.' 23 | } 24 | }); 25 | cb(); 26 | } 27 | 28 | function browsersyncReload(cb){ 29 | browsersync.reload(); 30 | cb(); 31 | } 32 | 33 | // Watch Task 34 | function watchTask(){ 35 | watch('*.html', browsersyncReload); 36 | watch(['app/scss/**/*.scss', 'app/js/**/*.js'], series(scssTask, browsersyncReload)); 37 | } 38 | 39 | // Default Gulp task 40 | exports.default = series( 41 | scssTask, 42 | browsersyncServe, 43 | watchTask 44 | ); -------------------------------------------------------------------------------- /app/scss/style.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 100%; 3 | box-sizing: border-box; 4 | } 5 | 6 | *, *::before, *::after { 7 | box-sizing: inherit; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | background-color: #101010; 14 | font-family: 'Roboto', Arial, Helvetica, sans-serif; 15 | font-size: 1.25rem; 16 | line-height: 1.3; 17 | } 18 | 19 | .cards { 20 | display: flex; 21 | flex-wrap: wrap; 22 | justify-content: center; 23 | gap: 1.5rem; 24 | padding: 3rem; 25 | } 26 | 27 | .card { 28 | display: flex; 29 | flex-direction: column; 30 | flex: 1 0 300px; 31 | max-width: 450px; 32 | overflow: hidden; 33 | background: #ffffff; 34 | color: #000000; 35 | border-radius: 5px; 36 | box-shadow: 3px 2px 14px rgba(255,255,255,0.2); 37 | text-decoration: none; 38 | font-size: 1rem; 39 | transition: all 200ms ease-in-out; 40 | 41 | &:hover { 42 | transform: translateY(-1rem); 43 | box-shadow: 2px 3px 18px rgba(255,255,255,0.4); 44 | } 45 | 46 | &__image { 47 | flex: 0 0 120px; 48 | background-size: cover; 49 | background-repeat: no-repeat; 50 | background-position: center center; 51 | } 52 | 53 | &__content { 54 | display: flex; 55 | flex-direction: column; 56 | height: 100%; 57 | padding: 1rem; 58 | } 59 | 60 | &__title { 61 | font-size: 1.75rem; 62 | font-weight: 700; 63 | margin-bottom: 0.5rem; 64 | } 65 | 66 | &__snippet { 67 | margin-bottom: 0.5rem; 68 | } 69 | 70 | &__readmore { 71 | margin-top: auto; 72 | text-transform: uppercase; 73 | font-weight: 700; 74 | } 75 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flexbox Cards 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 |
17 |
Best place to travel in the fall
18 |
19 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus iste similique molestias necessitatibus nulla commodi sunt aliquam... 20 |
21 |
Read More
22 |
23 | 24 | 25 | 26 |
27 |
28 |
How about mountains?
29 |
30 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum necessitatibus incidunt accusamus voluptate, at nam reiciendis magni. Distinctio corporis aut sequi ea id labore inventore, cupiditate consequatur officiis itaque ad. 31 |
32 |
Read More
33 |
34 | 35 | 36 | 37 |
38 |
39 |
Best place to travel in the fall
40 |
41 | Possimus iste similique molestias necessitatibus nulla aliquam... 42 |
43 |
Read More
44 |
45 | 46 | 47 | 48 |
49 |
50 |
The most breath-taking view you will ever see!
51 |
52 | Lorem ipsum dolor sit possimus iste similique molestias necessitatibus nulla commodi sunt aliquam... 53 |
54 |
Read More
55 |
56 | 57 | 58 | 59 |
60 |
61 |
Best place to travel in the fall
62 |
63 | Asperiores, nihil rem, at tempora animi quod esse odio quaerat aliquid ut vero fugiat eum sunt mollitia maiores totam est molestias illo aperiam unde assumenda necessitatibus veritatis quae architecto? Commodi! 64 |
65 |
Read More
66 |
67 | 68 | 69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /dist/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,KACE,cAAA,CACA,qBCCF,CDEA,iBACE,kBCCF,CDEA,KACE,QAAA,CACA,SAAA,CACA,wBAAA,CACA,6CAAA,CACA,iBAAA,CACA,eCCF,CDEA,OACE,YAAA,CACA,cAAA,CACA,sBAAA,CACA,UAAA,CACA,YCCF,CDEA,MACE,YAAA,CACA,qBAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CACA,eAAA,CACA,UAAA,CACA,iBAAA,CACA,0CAAA,CACA,oBAAA,CACA,cAAA,CACA,8BCCF,CDCE,YACE,2BAAA,CACA,0CCCJ,CDEE,aACE,cAAA,CACA,qBAAA,CACA,2BAAA,CACA,uBCAJ,CDGE,eACE,YAAA,CACA,qBAAA,CACA,WAAA,CACA,YCDJ,CDIE,aACE,iBAAA,CACA,eCDJ,CDKE,4BAHE,mBCCJ,CDME,gBACE,eAAA,CACA,wBAAA,CACA,eCJJ","file":"style.css","sourcesContent":["html {\r\n font-size: 100%;\r\n box-sizing: border-box;\r\n}\r\n\r\n*, *::before, *::after {\r\n box-sizing: inherit;\r\n}\r\n\r\nbody {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #101010; \r\n font-family: 'Roboto', Arial, Helvetica, sans-serif;\r\n font-size: 1.25rem;\r\n line-height: 1.3;\r\n}\r\n\r\n.cards {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 1.5rem;\r\n padding: 3rem;\r\n}\r\n\r\n.card {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1 0 300px;\r\n max-width: 450px;\r\n overflow: hidden;\r\n background: #ffffff;\r\n color: #000000;\r\n border-radius: 5px;\r\n box-shadow: 3px 2px 14px rgba(255,255,255,0.2);\r\n text-decoration: none;\r\n font-size: 1rem;\r\n transition: all 200ms ease-in-out;\r\n\r\n &:hover {\r\n transform: translateY(-1rem);\r\n box-shadow: 2px 3px 18px rgba(255,255,255,0.4);\r\n }\r\n\r\n &__image {\r\n flex: 0 0 120px;\r\n background-size: cover;\r\n background-repeat: no-repeat;\r\n background-position: center center;\r\n }\r\n\r\n &__content {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n padding: 1rem;\r\n }\r\n\r\n &__title {\r\n font-size: 1.75rem;\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n &__snippet {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n &__readmore {\r\n margin-top: auto;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n }\r\n}","html {\n font-size: 100%;\n box-sizing: border-box;\n}\n\n*, *::before, *::after {\n box-sizing: inherit;\n}\n\nbody {\n margin: 0;\n padding: 0;\n background-color: #101010;\n font-family: \"Roboto\", Arial, Helvetica, sans-serif;\n font-size: 1.25rem;\n line-height: 1.3;\n}\n\n.cards {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 1.5rem;\n padding: 3rem;\n}\n\n.card {\n display: flex;\n flex-direction: column;\n flex: 1 0 300px;\n max-width: 450px;\n overflow: hidden;\n background: #ffffff;\n color: #000000;\n border-radius: 5px;\n box-shadow: 3px 2px 14px rgba(255, 255, 255, 0.2);\n text-decoration: none;\n font-size: 1rem;\n transition: all 200ms ease-in-out;\n}\n.card:hover {\n transform: translateY(-1rem);\n box-shadow: 2px 3px 18px rgba(255, 255, 255, 0.4);\n}\n.card__image {\n flex: 0 0 120px;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center center;\n}\n.card__content {\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: 1rem;\n}\n.card__title {\n font-size: 1.75rem;\n font-weight: 700;\n margin-bottom: 0.5rem;\n}\n.card__snippet {\n margin-bottom: 0.5rem;\n}\n.card__readmore {\n margin-top: auto;\n text-transform: uppercase;\n font-weight: 700;\n}"]} --------------------------------------------------------------------------------