├── .csscomb.json ├── .gitignore ├── README.md ├── gulpfile.js ├── package.json └── scss ├── config ├── _colors.scss ├── _general.scss ├── _labs-bar.scss ├── _mixins.scss ├── _reset.scss ├── _typography.scss └── _variables.scss ├── slider ├── _funtionality.scss └── _styling.scss └── styles.scss /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": [ 3 | ".git/**", 4 | "node_modules/**", 5 | "bower_components/**" 6 | ], 7 | "sort-order": [ 8 | [ 9 | "position", 10 | "z-index", 11 | "top", 12 | "right", 13 | "bottom", 14 | "left" 15 | ], 16 | [ 17 | "display", 18 | "visibility", 19 | "float", 20 | "clear", 21 | "overflow", 22 | "overflow-x", 23 | "overflow-y", 24 | "-ms-overflow-x", 25 | "-ms-overflow-y", 26 | "-webkit-overflow-scrolling", 27 | "clip", 28 | "zoom", 29 | "flex-direction", 30 | "flex-order", 31 | "flex-pack", 32 | "flex-align", 33 | "flex" 34 | ], 35 | [ 36 | "table-layout", 37 | "empty-cells", 38 | "caption-side", 39 | "border-spacing", 40 | "border-collapse", 41 | "list-style", 42 | "list-style-position", 43 | "list-style-type", 44 | "list-style-image" 45 | ], 46 | [ 47 | "-webkit-box-sizing", 48 | "-moz-box-sizing", 49 | "box-sizing", 50 | "width", 51 | "min-width", 52 | "max-width", 53 | "height", 54 | "min-height", 55 | "max-height", 56 | "margin", 57 | "margin-top", 58 | "margin-right", 59 | "margin-bottom", 60 | "margin-left", 61 | "padding", 62 | "padding-top", 63 | "padding-right", 64 | "padding-bottom", 65 | "padding-left" 66 | ], 67 | [ 68 | "font", 69 | "font-family", 70 | "font-size", 71 | "font-weight", 72 | "font-style", 73 | "font-variant", 74 | "font-size-adjust", 75 | "font-stretch", 76 | "font-effect", 77 | "font-emphasize", 78 | "font-emphasize-position", 79 | "font-emphasize-style", 80 | "font-smooth", 81 | "line-height" 82 | ], 83 | [ 84 | "opacity", 85 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", 86 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", 87 | "-ms-interpolation-mode", 88 | "color", 89 | "border", 90 | "border-collapse", 91 | "border-width", 92 | "border-style", 93 | "border-color", 94 | "border-top", 95 | "border-top-width", 96 | "border-top-style", 97 | "border-top-color", 98 | "border-right", 99 | "border-right-width", 100 | "border-right-style", 101 | "border-right-color", 102 | "border-bottom", 103 | "border-bottom-width", 104 | "border-bottom-style", 105 | "border-bottom-color", 106 | "border-left", 107 | "border-left-width", 108 | "border-left-style", 109 | "border-left-color", 110 | "-webkit-border-radius", 111 | "-moz-border-radius", 112 | "border-radius", 113 | "-webkit-border-top-left-radius", 114 | "-moz-border-radius-topleft", 115 | "border-top-left-radius", 116 | "-webkit-border-top-right-radius", 117 | "-moz-border-radius-topright", 118 | "border-top-right-radius", 119 | "-webkit-border-bottom-right-radius", 120 | "-moz-border-radius-bottomright", 121 | "border-bottom-right-radius", 122 | "-webkit-border-bottom-left-radius", 123 | "-moz-border-radius-bottomleft", 124 | "border-bottom-left-radius", 125 | "-webkit-border-image", 126 | "-moz-border-image", 127 | "-o-border-image", 128 | "border-image", 129 | "-webkit-border-image-source", 130 | "-moz-border-image-source", 131 | "-o-border-image-source", 132 | "border-image-source", 133 | "-webkit-border-image-slice", 134 | "-moz-border-image-slice", 135 | "-o-border-image-slice", 136 | "border-image-slice", 137 | "-webkit-border-image-width", 138 | "-moz-border-image-width", 139 | "-o-border-image-width", 140 | "border-image-width", 141 | "-webkit-border-image-outset", 142 | "-moz-border-image-outset", 143 | "-o-border-image-outset", 144 | "border-image-outset", 145 | "-webkit-border-image-repeat", 146 | "-moz-border-image-repeat", 147 | "-o-border-image-repeat", 148 | "border-image-repeat", 149 | "outline", 150 | "outline-width", 151 | "outline-style", 152 | "outline-color", 153 | "outline-offset", 154 | "background", 155 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", 156 | "background-color", 157 | "background-image", 158 | "background-repeat", 159 | "background-attachment", 160 | "background-position", 161 | "background-position-x", 162 | "-ms-background-position-x", 163 | "background-position-y", 164 | "-ms-background-position-y", 165 | "-webkit-background-clip", 166 | "-moz-background-clip", 167 | "background-clip", 168 | "background-origin", 169 | "-webkit-background-size", 170 | "-moz-background-size", 171 | "-o-background-size", 172 | "background-size", 173 | "box-decoration-break", 174 | "-webkit-box-shadow", 175 | "-moz-box-shadow", 176 | "box-shadow", 177 | "filter:progid:DXImageTransform.Microsoft.gradient", 178 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", 179 | "text-shadow" 180 | ], 181 | [ 182 | "content", 183 | "quotes", 184 | "counter-reset", 185 | "counter-increment", 186 | "resize", 187 | "cursor", 188 | "-webkit-user-select", 189 | "-moz-user-select", 190 | "-ms-user-select", 191 | "user-select", 192 | "nav-index", 193 | "nav-up", 194 | "nav-right", 195 | "nav-down", 196 | "nav-left", 197 | "-webkit-transition", 198 | "-moz-transition", 199 | "-ms-transition", 200 | "-o-transition", 201 | "transition", 202 | "-webkit-transition-delay", 203 | "-moz-transition-delay", 204 | "-ms-transition-delay", 205 | "-o-transition-delay", 206 | "transition-delay", 207 | "-webkit-transition-timing-function", 208 | "-moz-transition-timing-function", 209 | "-ms-transition-timing-function", 210 | "-o-transition-timing-function", 211 | "transition-timing-function", 212 | "-webkit-transition-duration", 213 | "-moz-transition-duration", 214 | "-ms-transition-duration", 215 | "-o-transition-duration", 216 | "transition-duration", 217 | "-webkit-transition-property", 218 | "-moz-transition-property", 219 | "-ms-transition-property", 220 | "-o-transition-property", 221 | "transition-property", 222 | "-webkit-transform", 223 | "-moz-transform", 224 | "-ms-transform", 225 | "-o-transform", 226 | "transform", 227 | "-webkit-transform-origin", 228 | "-moz-transform-origin", 229 | "-ms-transform-origin", 230 | "-o-transform-origin", 231 | "transform-origin", 232 | "-webkit-animation", 233 | "-moz-animation", 234 | "-ms-animation", 235 | "-o-animation", 236 | "animation", 237 | "-webkit-animation-name", 238 | "-moz-animation-name", 239 | "-ms-animation-name", 240 | "-o-animation-name", 241 | "animation-name", 242 | "-webkit-animation-duration", 243 | "-moz-animation-duration", 244 | "-ms-animation-duration", 245 | "-o-animation-duration", 246 | "animation-duration", 247 | "-webkit-animation-play-state", 248 | "-moz-animation-play-state", 249 | "-ms-animation-play-state", 250 | "-o-animation-play-state", 251 | "animation-play-state", 252 | "-webkit-animation-timing-function", 253 | "-moz-animation-timing-function", 254 | "-ms-animation-timing-function", 255 | "-o-animation-timing-function", 256 | "animation-timing-function", 257 | "-webkit-animation-delay", 258 | "-moz-animation-delay", 259 | "-ms-animation-delay", 260 | "-o-animation-delay", 261 | "animation-delay", 262 | "-webkit-animation-iteration-count", 263 | "-moz-animation-iteration-count", 264 | "-ms-animation-iteration-count", 265 | "-o-animation-iteration-count", 266 | "animation-iteration-count", 267 | "-webkit-animation-direction", 268 | "-moz-animation-direction", 269 | "-ms-animation-direction", 270 | "-o-animation-direction", 271 | "animation-direction", 272 | "text-align", 273 | "-webkit-text-align-last", 274 | "-moz-text-align-last", 275 | "-ms-text-align-last", 276 | "text-align-last", 277 | "vertical-align", 278 | "white-space", 279 | "text-decoration", 280 | "text-emphasis", 281 | "text-emphasis-color", 282 | "text-emphasis-style", 283 | "text-emphasis-position", 284 | "text-indent", 285 | "-ms-text-justify", 286 | "text-justify", 287 | "text-transform", 288 | "letter-spacing", 289 | "word-spacing", 290 | "-ms-writing-mode", 291 | "text-outline", 292 | "text-transform", 293 | "text-wrap", 294 | "text-overflow", 295 | "-ms-text-overflow", 296 | "text-overflow-ellipsis", 297 | "text-overflow-mode", 298 | "-ms-word-wrap", 299 | "word-wrap", 300 | "word-break", 301 | "-ms-word-break", 302 | "-moz-tab-size", 303 | "-o-tab-size", 304 | "tab-size", 305 | "-webkit-hyphens", 306 | "-moz-hyphens", 307 | "hyphens", 308 | "pointer-events" 309 | ] 310 | ] 311 | } 312 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Only Slider 2 | 3 | This tutorial will teach you how to create a SCSS only responsive slider. Feel free to read the whole tutorial and try it by yourself. 4 | 5 | [Article on Medium](https://medium.com/significa/css-only-slider-71727effff0b) 6 | 7 | [Demo](https://significa.github.io/css-only-slider/) 8 | 9 | ## Credits 10 | 11 | - Code by Rui Sereno 12 | - [Significa](http://significa.co) 13 | 14 | ## Social 15 | 16 | Follow Significa: [Behance](https://www.behance.net/significa), [Dribbble](https://www.dribbble.com/significa), [Twitter](http://www.twitter.com/significadesign), [Facebook](http://www.facebook.com/significadesignstudio), [Instagram](https://www.instagram.com/significadesign) 17 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass'); 3 | var connect = require('gulp-connect'); 4 | 5 | gulp.task('connect', function(){ 6 | connect.server({ 7 | root: 'public', 8 | livereload: true 9 | }); 10 | }); 11 | 12 | gulp.task('scss', function () { 13 | return gulp.src('./scss/**/*.scss') 14 | .pipe(sass({ errLogToConsole: true })) 15 | .pipe(gulp.dest('./public/css')); 16 | }); 17 | 18 | gulp.task('livereload', function (){ 19 | gulp.src('./public/**/*') 20 | .pipe(connect.reload()); 21 | }); 22 | 23 | gulp.task('watch', function () { 24 | gulp.watch('./scss/**/*.scss', ['scss']); 25 | gulp.watch('./public/**/*', ['livereload']); 26 | }); 27 | 28 | gulp.task('default', ['connect', 'watch', 'scss']); 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-only-slider", 3 | "version": "1.0.0", 4 | "description": "Static responsive slider using CSS and HTML only.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Significa/css-only-slider.git" 12 | }, 13 | "keywords": [ 14 | "html", 15 | "css", 16 | "no-javascript", 17 | "slider" 18 | ], 19 | "author": "Significa", 20 | "license": "GPL-2.0+", 21 | "bugs": { 22 | "url": "https://github.com/Significa/css-only-slider/issues" 23 | }, 24 | "homepage": "https://github.com/Significa/css-only-slider#readme", 25 | "devDependencies": { 26 | "gulp": "^3.9.1", 27 | "gulp-connect": "^5.0.0", 28 | "gulp-sass": "^2.3.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /scss/config/_colors.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> TABLE OF CONTENTS: 3 | ---------------------------------------------------------------- 4 | 1.0 Neutral 5 | 2.0 Main Colors 6 | 3.0 Color Pallete 7 | 3.0 Grey Scale 8 | --------------------------------------------------------------*/ 9 | 10 | /*-------------------------------------------------------------- 11 | 1.0 Neutral 12 | --------------------------------------------------------------*/ 13 | 14 | $white: #FFF; 15 | $black: #000; 16 | 17 | /*-------------------------------------------------------------- 18 | 2.0 Main color 19 | --------------------------------------------------------------*/ 20 | 21 | $significa: #5050FF; // Blue 22 | 23 | /*-------------------------------------------------------------- 24 | 3.0 Color Pallete 25 | --------------------------------------------------------------*/ 26 | 27 | /*-------------------------------------------------------------- 28 | 4.0 Grey Scale 29 | --------------------------------------------------------------*/ 30 | 31 | $night: #3E4954; // Dark grey 32 | $aluminum: #848995; // Grey 33 | $moon: #E9EFF5; // Lines 34 | $light: #F5F7F9; // Light grey background 35 | -------------------------------------------------------------------------------- /scss/config/_general.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> TABLE OF CONTENTS: 3 | ---------------------------------------------------------------- 4 | 1.0 General 5 | --------------------------------------------------------------*/ 6 | 7 | /*-------------------------------------------------------------- 8 | 1.0 General 9 | --------------------------------------------------------------*/ 10 | 11 | body { 12 | background-color: $significa; 13 | } 14 | -------------------------------------------------------------------------------- /scss/config/_labs-bar.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> TABLE OF CONTENTS: 3 | ---------------------------------------------------------------- 4 | 1.0 Labs bar 5 | --------------------------------------------------------------*/ 6 | 7 | /*-------------------------------------------------------------- 8 | 1.0 Labs bar 9 | --------------------------------------------------------------*/ 10 | 11 | .labs-bar { 12 | position: fixed; 13 | z-index: 1000; 14 | top: 0; 15 | right: 0; 16 | left: 0; 17 | 18 | display: block; 19 | 20 | width: 100%; 21 | padding: 8px 0px; 22 | 23 | background: rgba($black, 0.2); 24 | 25 | // .labs-bar__inner 26 | &__inner { 27 | position: relative; 28 | 29 | display: block; 30 | 31 | width: 100%; 32 | max-width: 1200px; 33 | margin: 0 auto; 34 | padding: 0 20px; 35 | } 36 | 37 | // .labs-bar__nav 38 | &__nav { 39 | position: relative; 40 | 41 | display: block; 42 | float: left; 43 | } 44 | 45 | // .labs-bar__link 46 | &__link { 47 | position: relative; 48 | 49 | display: inline-block; 50 | 51 | padding: 10px; 52 | padding-left: 30px; 53 | 54 | font-size: 12px; 55 | font-weight: 700; 56 | line-height: 20px; 57 | 58 | color: $white; 59 | 60 | letter-spacing: 0.5px; 61 | text-transform: uppercase; 62 | 63 | // .labs-bar__link:hover 64 | &:hover { 65 | // .labs-bar__link:hover:before 66 | &:before { 67 | left: -16px; 68 | } 69 | } 70 | 71 | // .labs-bar__link:before 72 | &:before { 73 | position: absolute; 74 | top: 50%; 75 | left: 0; 76 | 77 | display: block; 78 | 79 | width: 24px; 80 | height: 14px; 81 | 82 | background-image: url('/images/general/arrow__right--white.svg'); 83 | background-repeat: no-repeat; 84 | background-position: left; 85 | background-size: cover; 86 | 87 | content: ''; 88 | transform: translateY(-50%); 89 | 90 | @include default-transition(); 91 | } 92 | } 93 | 94 | // .labs-bar__ branding 95 | &__branding { 96 | display: inline-block; 97 | 98 | font-size: 20px; 99 | line-height: 20px; 100 | 101 | color: $white; 102 | } 103 | 104 | // .labs-bar__logo 105 | &__logo { 106 | width: auto; 107 | height: 18px; 108 | margin-top: 5px; 109 | margin-left: 10px; 110 | 111 | // .labs-bar__logo:hover 112 | &:hover { 113 | opacity: 0.8; 114 | } 115 | } 116 | 117 | // .labs-bar__button 118 | &__button { 119 | float: right; 120 | 121 | padding: 10px 16px; 122 | 123 | font-size: 12px; 124 | font-weight: 700; 125 | line-height: 20px; 126 | 127 | color: $white; 128 | border-radius: 3px; 129 | background: rgba($black, 0.2); 130 | 131 | letter-spacing: 0.5px; 132 | text-transform: uppercase; 133 | 134 | // .labs-bar:hover 135 | &:hover { 136 | background: rgba($black, 0.1); 137 | } 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /scss/config/_mixins.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> TABLE OF CONTENTS: 3 | ---------------------------------------------------------------- 4 | 1.0 Config 5 | 2.0 Translate 6 | --------------------------------------------------------------*/ 7 | 8 | /*-------------------------------------------------------------- 9 | 1.0 Transition 10 | --------------------------------------------------------------*/ 11 | 12 | @mixin default-transition($param: all) { 13 | transition: $param $normal-transition-time $default-ease; 14 | } 15 | 16 | /*-------------------------------------------------------------- 17 | 2.0 Translate 18 | --------------------------------------------------------------*/ 19 | 20 | @mixin translateX($value: -50%) { 21 | transform: translateX($value); 22 | } 23 | 24 | @mixin translateY($value: -50%) { 25 | transform: translateY($value); 26 | } 27 | 28 | @mixin translateXY($value: -50%) { 29 | transform: translate($value , $value); 30 | } 31 | -------------------------------------------------------------------------------- /scss/config/_reset.scss: -------------------------------------------------------------------------------- 1 | /*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */ 2 | pre,textarea{overflow:auto} 3 | [hidden],audio:not([controls]),template{display:none} 4 | details,main,summary{display:block} 5 | input[type=number]{width:auto} 6 | input[type=search],input[type=text],input[type=email]{-webkit-appearance:none} 7 | input[type="*"]{-webkit-appearance:none} 8 | input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none} 9 | progress{display:inline-block} 10 | small{font-size:100%} 11 | textarea{resize:vertical} 12 | [unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 13 | *,::after,::before{box-sizing:inherit;border-style:solid;border-width:0} 14 | *{font-size:inherit;line-height:inherit;margin:0;padding:0} 15 | ::after,::before{text-decoration:inherit;vertical-align:inherit} 16 | :root{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box;cursor:default;font:16px/1.5 sans-serif;text-rendering:optimizeLegibility} 17 | a{text-decoration:none} 18 | audio,canvas,iframe,img,svg,video{vertical-align:middle} 19 | button,input,select,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.5em} 20 | code,kbd,pre,samp{font-family:monospace,monospace} 21 | nav ol,nav ul{list-style:none} 22 | ul li{list-style: none} 23 | select{-moz-appearance:none;-webkit-appearance:none} 24 | select::-ms-expand{display:none} 25 | select::-ms-value{color:currentColor} 26 | table{border-collapse:collapse;border-spacing:0} 27 | ::-moz-selection{background-color:#B3D4FC;text-shadow:none} 28 | ::selection{background-color:#B3D4FC;text-shadow:none} 29 | @media screen{[hidden~=screen]{display:inherit} 30 | [hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0 0 0 0)!important;position:absolute!important} 31 | } 32 | -------------------------------------------------------------------------------- /scss/config/_typography.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> TABLE OF CONTENTS: 3 | ---------------------------------------------------------------- 4 | 1.0 HTML Settings 5 | 2.0 General Settings 6 | 3.0 Heading 2 7 | 4.0 Serif 8 | 5.0 Heading 3 9 | 6.0 Text 10 | 7.0 Links 11 | --------------------------------------------------------------*/ 12 | 13 | /*-------------------------------------------------------------- 14 | 1.0 HTML settings 15 | --------------------------------------------------------------*/ 16 | 17 | html { 18 | -webkit-overflow-scrolling: touch; 19 | 20 | box-sizing: border-box; 21 | 22 | -webkit-tap-highwhite-color: transparent; 23 | -webkit-text-size-adjust: 100%; 24 | -ms-text-size-adjust: 100%; 25 | -webkit-font-smoothing: antialiased; 26 | -moz-osx-font-smoothing: grayscale; 27 | text-rendering: optimizeLegibility 28 | } 29 | 30 | /*-------------------------------------------------------------- 31 | 2.0 General Settings 32 | --------------------------------------------------------------*/ 33 | 34 | h1, 35 | h2, 36 | h3, 37 | h4, 38 | h5, 39 | h6, 40 | p, 41 | a, 42 | li { 43 | display: block; 44 | 45 | font-family: $main-font; 46 | } 47 | 48 | /*-------------------------------------------------------------- 49 | 3.0 Heading 2 50 | --------------------------------------------------------------*/ 51 | 52 | .heading-2 { 53 | font-family: $main-font; 54 | font-size: 24px; 55 | font-weight: 500; 56 | line-height: 40px; 57 | 58 | color: $black; 59 | 60 | letter-spacing: 0.3px; 61 | 62 | // COLOR MODIFIERS 63 | //.heading-2--white 64 | &--white { 65 | color: $white; 66 | } 67 | } 68 | 69 | /*-------------------------------------------------------------- 70 | 4.0 Serif 71 | --------------------------------------------------------------*/ 72 | 73 | .serif { 74 | font-family: "Arnhem"; 75 | font-size: 24px; 76 | font-weight: 100; 77 | line-height: 38px; 78 | 79 | color: $night; 80 | 81 | @media (max-width: 400px) { 82 | font-size: 20px; 83 | line-height: 32px; 84 | } 85 | } 86 | 87 | /*-------------------------------------------------------------- 88 | 5.0 Heading-3 89 | --------------------------------------------------------------*/ 90 | 91 | .heading-3 { 92 | font-size: 18px; 93 | font-weight: 600; 94 | line-height: 25px; 95 | 96 | color: $night; 97 | 98 | letter-spacing: 0.3px; 99 | 100 | // .heading-3 + .heading-3 101 | & + & { 102 | margin-top: 5px; 103 | } 104 | 105 | 106 | //COLOR MODIFIERS 107 | // .heading-3--white 108 | &--white { 109 | color: $white; 110 | } 111 | 112 | // .heading-3--light 113 | &--light { 114 | color: $aluminum; 115 | } 116 | } 117 | 118 | /*-------------------------------------------------------------- 119 | 6.0 Text 120 | --------------------------------------------------------------*/ 121 | 122 | .text { 123 | font-family: $main-font; 124 | font-size: 18px; 125 | font-weight: 400; 126 | line-height: 30px; 127 | 128 | color: $aluminum; 129 | 130 | letter-spacing: 0px; 131 | 132 | @media (max-width: 600px) { 133 | font-size: 16px; 134 | line-height: 30px; 135 | } 136 | 137 | //COLOR MODIFIERS 138 | &--light-white { 139 | color: rgba($white, 0.7); 140 | } 141 | } 142 | 143 | /*-------------------------------------------------------------- 144 | 7.0 Links 145 | --------------------------------------------------------------*/ 146 | 147 | .link { 148 | position: relative; 149 | 150 | display: inline-block; 151 | 152 | font-weight: 600; 153 | 154 | color: $significa; 155 | 156 | //.text--link:after 157 | &:after { 158 | position: absolute; 159 | top: 50%; 160 | right: -32px; 161 | 162 | display: block; 163 | 164 | width: 24px; 165 | height: 14px; 166 | 167 | background-image: url('../images/slider/arrow__right--blue.svg'); 168 | background-repeat: no-repeat; 169 | background-position: center; 170 | background-size: cover; 171 | 172 | content: ''; 173 | 174 | @include translateY(); 175 | @include default-transition(); 176 | } 177 | 178 | //.text--link:hover 179 | &:hover { 180 | //.text--link:hover:after 181 | &:after { 182 | right: -48px; 183 | } 184 | } 185 | } 186 | -------------------------------------------------------------------------------- /scss/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> TABLE OF CONTENTS: 3 | ---------------------------------------------------------------- 4 | 1.0 Font 5 | 2.0 Trasnitions 6 | 3.0 Number of Slides 7 | --------------------------------------------------------------*/ 8 | 9 | /*-------------------------------------------------------------- 10 | 1.0 Font 11 | --------------------------------------------------------------*/ 12 | 13 | $main-font: -apple-system, BlinkMacSystemFont, 14 | "Segoe UI", "Roboto", "Oxygen", 15 | "Ubuntu", "Cantarell", "Fira Sans", 16 | "Droid Sans", "Helvetica Neue", sans-serif; 17 | 18 | /*-------------------------------------------------------------- 19 | 2.0 Transitions 20 | --------------------------------------------------------------*/ 21 | 22 | $normal-transition-time: 0.2s; 23 | $default-ease: ease; 24 | -------------------------------------------------------------------------------- /scss/slider/_funtionality.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> TABLE OF CONTENTS: 3 | ---------------------------------------------------------------- 4 | 1.0 Variables 5 | 2.0 Cards 6 | 3.0 Bullets 7 | --------------------------------------------------------------*/ 8 | 9 | /*-------------------------------------------------------------- 10 | 1.0 Variables 11 | --------------------------------------------------------------*/ 12 | 13 | // Define number of slides 14 | $start: 1; // Always 1 15 | $end: 5; // Number of slides: 5 slides in this case 16 | 17 | /*-------------------------------------------------------------- 18 | 2.0 Cards 19 | --------------------------------------------------------------*/ 20 | 21 | .slider { 22 | 23 | // .slider__item 24 | &__item { 25 | @include default-transition(all); 26 | 27 | // Loop through .slider__item--(slide-number) 28 | @for $slide from $start through $end { 29 | 30 | // .slider__item--(slide-number) 31 | &--#{$slide} { 32 | 33 | // Within each .slider__item--(slide-number) loop through #slide-(number) 34 | @for $i from $start through $end { 35 | 36 | @if $i <= $slide - 3 { 37 | // For the slides 3 or more positions on the right 38 | // #slide-(number):checked ~ .slider__holder .slider__item--(slide-number) 39 | #slide-#{$i}:checked ~ .slider__holder & { 40 | z-index: -1; 41 | 42 | opacity: 0; 43 | 44 | transform: translateX(210px) scale(0.65); 45 | } 46 | } 47 | 48 | @if $i == $slide - 2 { 49 | // For the slide 2 positions on the right 50 | // #slide-(number):checked ~ .slider__holder .slider__item--(slide-number) 51 | #slide-#{$i}:checked ~ .slider__holder & { 52 | z-index: 0; 53 | 54 | transform: translateX(210px) scale(0.65); 55 | 56 | @media (max-width: 900px) { 57 | transform: translateX(170px) scale(0.65); 58 | } 59 | 60 | @media (max-width: 768px) { 61 | opacity: 0; 62 | } 63 | } 64 | } 65 | 66 | @if $i == $slide - 1 { 67 | // For the slide 1 positions on the right 68 | // #slide-(number):checked ~ .slider__holder .slider__item--(slide-number) 69 | #slide-#{$i}:checked ~ .slider__holder & { 70 | z-index: 1; 71 | 72 | transform: translateX(100px) scale(0.85); 73 | 74 | @media (max-width: 768px) { 75 | opacity: 0.6; 76 | } 77 | } 78 | } 79 | 80 | @if $i == $slide { 81 | // For the slide 1 positions under the active one 82 | // #slide-(number):checked ~ .slider__holder .slider__item--(slide-number) 83 | #slide-#{$i}:checked ~ .slider__holder & { 84 | position: relative; 85 | z-index: 2; 86 | 87 | transform: translate(0) scale(1); 88 | } 89 | } 90 | 91 | @if $i == $slide + 1 { 92 | // For the slide 1 positions on the left 93 | // #slide-(number):checked ~ .slider__holder .slider__item--(slide-number) 94 | #slide-#{$i}:checked ~ .slider__holder & { 95 | z-index: 1; 96 | 97 | transform: translateX(-100px) scale(0.85); 98 | 99 | @media (max-width: 768px) { 100 | opacity: 0.6; 101 | } 102 | } 103 | } 104 | 105 | @if $i == $slide + 2 { 106 | // For the slide 2 positions on the left 107 | // #slide-(number):checked ~ .slider__holder .slider__item--(slide-number) 108 | #slide-#{$i}:checked ~ .slider__holder & { 109 | z-index: 0; 110 | 111 | transform: translateX(-210px) scale(0.65); 112 | 113 | @media (max-width: 900px) { 114 | transform: translateX(-170px) scale(0.65); 115 | } 116 | 117 | @media (max-width: 768px) { 118 | opacity: 0; 119 | } 120 | } 121 | } 122 | 123 | @if $i >= $slide + 3 { 124 | // For the slide 3 positions or more on the left 125 | // #slide-(number):checked ~ .slider__holder .slider__item--(slide-number) 126 | #slide-#{$i}:checked ~ .slider__holder & { 127 | z-index: -1; 128 | 129 | opacity: 0; 130 | 131 | transform: translateX(-210px) scale(0.65); 132 | } 133 | } 134 | 135 | } 136 | } 137 | } 138 | } 139 | } 140 | 141 | /*-------------------------------------------------------------- 142 | 3.0 Bullets 143 | --------------------------------------------------------------*/ 144 | 145 | .bullets { 146 | 147 | // .bullets__item 148 | &__item { 149 | @include default-transition(); 150 | 151 | // Loops through all the bullet points 152 | @for $bullet from $start through $end { 153 | // .bullets__item--(bullet-number) 154 | &--#{$bullet} { 155 | // #slide-(number):checked ~ .bullets .bullets__item--(bullet-number) 156 | #slide-#{$bullet}:checked ~ .bullets & { 157 | background: $white; 158 | } 159 | } 160 | } 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /scss/slider/_styling.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> TABLE OF CONTENTS: 3 | ---------------------------------------------------------------- 4 | 1.0 Card 5 | 2.0 Slider 6 | 3.0 Bullets 7 | 4.0 Section 8 | 5.0 Button 9 | --------------------------------------------------------------*/ 10 | 11 | /*-------------------------------------------------------------- 12 | 1.0 Card 13 | --------------------------------------------------------------*/ 14 | 15 | .card { 16 | position: relative; 17 | 18 | display: block; 19 | 20 | border-radius: 8px; 21 | background: $white; 22 | box-shadow: 0 5px 20px 0 rgba(0,0,0,0.05), 0 2px 4px 0 rgba(0,0,0,0.10); 23 | } 24 | 25 | /*-------------------------------------------------------------- 26 | 2.0 Slider 27 | --------------------------------------------------------------*/ 28 | 29 | .slider { 30 | -webkit-user-select: none; 31 | -moz-user-select: none; 32 | -ms-user-select: none; 33 | user-select: none; 34 | 35 | // .slider__radio 36 | &__radio { 37 | display: none; 38 | } 39 | 40 | // .slider__holder 41 | &__holder { 42 | position: relative; 43 | 44 | width: 100%; 45 | max-width: 600px; 46 | margin: 0 auto; 47 | margin-top: 80px; 48 | 49 | text-align: left; 50 | 51 | @media (max-width: 900px) { 52 | max-width: 540px; 53 | } 54 | 55 | @media (max-width: 600px) { 56 | margin-top: 60px; 57 | } 58 | } 59 | 60 | // .slider__item 61 | &__item { 62 | position: absolute; 63 | top: 0; 64 | left: 0; 65 | 66 | display: block; 67 | overflow: hidden; 68 | 69 | width: 100%; 70 | 71 | opacity: 1; 72 | 73 | cursor: pointer; 74 | } 75 | 76 | // .slider__item-content 77 | &__item-content { 78 | padding: 40px; 79 | 80 | @media (max-width: 600px) { 81 | padding: 32px 32px; 82 | } 83 | 84 | @media (max-width: 375px) { 85 | padding: 40px 24px; 86 | } 87 | } 88 | 89 | // .slider__item-text 90 | &__item-text { 91 | padding: 60px 0; 92 | } 93 | } 94 | 95 | /*-------------------------------------------------------------- 96 | 3.0 Bullets 97 | --------------------------------------------------------------*/ 98 | 99 | .bullets { 100 | z-index: 10; 101 | 102 | display: block; 103 | 104 | width: auto; 105 | height: 10px; 106 | height: 10px; 107 | margin: 0 auto; 108 | margin-top: 48px; 109 | margin-bottom: 56px; 110 | 111 | text-align: center; 112 | 113 | @media (max-width: 600px) { 114 | margin-top: 32px; 115 | } 116 | 117 | // .bullets__item 118 | &__item { 119 | display: inline-block; 120 | 121 | width: 10px; 122 | height: 10px; 123 | margin: 0 4px; 124 | 125 | border-radius: 6px; 126 | background: rgba($black, 0.2); 127 | 128 | cursor: pointer; 129 | 130 | // .bullets__item:hover 131 | &:hover { 132 | background: $white; 133 | } 134 | } 135 | } 136 | 137 | /*-------------------------------------------------------------- 138 | 4.0 Section 139 | --------------------------------------------------------------*/ 140 | 141 | .section { 142 | position: relative; 143 | 144 | width: 100%; 145 | padding: 120px 24px; 146 | 147 | text-align: center; 148 | 149 | // .section__entry 150 | &__entry { 151 | width: 100%; 152 | max-width: 380px; 153 | margin: 0 auto; 154 | 155 | // .section__entry--center 156 | &--center { 157 | text-align: center; 158 | } 159 | } 160 | 161 | // .section__title 162 | &__title { 163 | display: block; 164 | 165 | padding-bottom: 12px; 166 | } 167 | 168 | // .section__text 169 | &__text { 170 | display: block; 171 | } 172 | } 173 | 174 | /*-------------------------------------------------------------- 175 | 5.0 Button 176 | --------------------------------------------------------------*/ 177 | 178 | .button { 179 | display: inline-block; 180 | 181 | height: 44px; 182 | padding: 12px 16px; 183 | 184 | font-weight: 500; 185 | line-height: 20px; 186 | 187 | color: $white; 188 | border-radius: 3px; 189 | background: rgba($black, 0.2); 190 | 191 | // .button:hover 192 | &:hover { 193 | background: rgba($black, 0.1); 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /scss/styles.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | >>> TABLE OF CONTENTS: 3 | ---------------------------------------------------------------- 4 | 1.0 Config 5 | 2.0 General 6 | 3.0 Slider 7 | 4.0 All Tutorials 8 | --------------------------------------------------------------*/ 9 | 10 | /*-------------------------------------------------------------- 11 | 1.0 Config 12 | --------------------------------------------------------------*/ 13 | 14 | @import "config/reset"; 15 | 16 | @import "config/variables"; 17 | @import "config/mixins"; 18 | 19 | @import "config/colors"; 20 | @import "config/typography"; 21 | 22 | 23 | 24 | /*-------------------------------------------------------------- 25 | 2.0 General 26 | --------------------------------------------------------------*/ 27 | 28 | @import "config/general"; 29 | 30 | /*-------------------------------------------------------------- 31 | 3.0 Slider 32 | --------------------------------------------------------------*/ 33 | 34 | @import "slider/funtionality"; 35 | @import "slider/styling"; 36 | 37 | /*-------------------------------------------------------------- 38 | 4.0 All Tutorials 39 | --------------------------------------------------------------*/ 40 | 41 | @import "config/labs-bar"; 42 | --------------------------------------------------------------------------------