├── Readme.md ├── css ├── style.css └── style.css.map ├── images └── preview.png ├── index.html ├── js └── script.js └── scss └── style.scss /Readme.md: -------------------------------------------------------------------------------- 1 | # 🙈 🙉 🙊 Bootstrap 4 Sample Admin Template 2 | 3 | ## 😃 Click here for the 👉 [💥LIVE DEMO](https://frontendfunn.github.io/bootstrap4-admin-dashboard/) 4 | 5 | --- 6 | 7 | ![Preview](./images/preview.png) 8 | 9 | # 👉 Subscribe to My Channel [💙❤️Youtube❤️💙](https://www.youtube.com/channel/UCpOHt5d6GG-mvo-_pU06rhQ?sub_confirmation=1) 10 | 11 | Made with ❤️ - by [FrontEndFunn](https://www.youtube.com/channel/UCpOHt5d6GG-mvo-_pU06rhQ?sub_confirmation=1) 12 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Poppins:400,600,700"); 2 | @import url("https://fonts.googleapis.com/css?family=Courgette"); 3 | .bg-mattBlackLight { 4 | background-color: #303337; 5 | } 6 | 7 | .text-mattBlackLight { 8 | color: #303337; 9 | } 10 | 11 | .bg-mattBlackDark, body, .nav-link:hover, .nav-link.active { 12 | background-color: #212121; 13 | } 14 | 15 | .text-mattBlackDark { 16 | color: #212121; 17 | } 18 | 19 | .bg-mattGray { 20 | background-color: #878d8d; 21 | } 22 | 23 | .text-mattGray, body, .nav-link .icon, .nav-link .text { 24 | color: #878d8d; 25 | } 26 | 27 | .bg-mattRed { 28 | background-color: #ec6271; 29 | } 30 | 31 | .text-mattRed, .nav-link:hover .icon, 32 | .nav-link:hover .text, .nav-link.active .icon, 33 | .nav-link.active .text { 34 | color: #ec6271; 35 | } 36 | 37 | * { 38 | font-family: 'Poppins', sans-serif; 39 | } 40 | 41 | body { 42 | height: 1000px; 43 | } 44 | 45 | .wrapper { 46 | margin-top: 3.5rem; 47 | } 48 | 49 | .wrapper .sideMenu { 50 | position: fixed; 51 | top: 0; 52 | bottom: 0; 53 | margin: 3.5rem auto auto; 54 | left: 0; 55 | width: 12.5rem; 56 | -webkit-transition: all ease 0.25s; 57 | transition: all ease 0.25s; 58 | -webkit-transform: translateX(-100%); 59 | transform: translateX(-100%); 60 | z-index: 2000; 61 | } 62 | 63 | .wrapper .content { 64 | width: 100%; 65 | margin-left: 0rem; 66 | -webkit-transition: all ease 0.25s; 67 | transition: all ease 0.25s; 68 | } 69 | 70 | .wrapper.active .sideMenu { 71 | -webkit-transform: translateX(0); 72 | transform: translateX(0); 73 | } 74 | 75 | .nav-link { 76 | -webkit-box-align: center; 77 | -ms-flex-align: center; 78 | align-items: center; 79 | display: block; 80 | white-space: nowrap; 81 | } 82 | 83 | .nav-link .icon { 84 | margin-right: 0.25rem; 85 | font-size: 1.875rem; 86 | vertical-align: middle; 87 | height: 2rem; 88 | width: 2rem; 89 | display: -webkit-inline-box; 90 | display: -ms-inline-flexbox; 91 | display: inline-flex; 92 | -webkit-box-pack: center; 93 | -ms-flex-pack: center; 94 | justify-content: center; 95 | -webkit-box-align: center; 96 | -ms-flex-align: center; 97 | align-items: center; 98 | } 99 | 100 | .nav-link .text { 101 | font-size: 0.875rem; 102 | } 103 | 104 | @media (min-width: 992px) { 105 | .wrapper .sideMenu { 106 | -webkit-transform: translateX(0); 107 | transform: translateX(0); 108 | } 109 | .wrapper .content { 110 | margin-left: 12.5rem; 111 | } 112 | .wrapper.active .sideMenu { 113 | width: 5rem; 114 | } 115 | .wrapper.active .sideMenu .nav-link { 116 | text-align: center; 117 | } 118 | .wrapper.active .sideMenu .nav-link .icon { 119 | margin-right: 0; 120 | } 121 | .wrapper.active .sideMenu .nav-link .text { 122 | display: none; 123 | } 124 | .wrapper.active .content { 125 | margin-left: 5rem; 126 | } 127 | } 128 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "../scss/style.scss" 6 | ], 7 | "names": [], 8 | "file": "style.css" 9 | } -------------------------------------------------------------------------------- /images/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontendfunn/bootstrap4-admin-dashboard/d36fa523a684ac25251e10d6544d076600a17fa6/images/preview.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FrontendFunn - 8 | 14 | 15 | 21 | 22 | 23 | 24 | 25 | 75 |
76 |
77 |
78 | 134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |

New Clients

143 |
144 |
152 | 25 153 |
154 |
155 |
156 |
157 |
158 |
159 |

New Projects

160 |
161 |
169 | 50 170 |
171 |
172 |
173 |
174 |
175 |
176 |

Completed

177 |
178 |
186 | 80 187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. 196 | Ratione libero totam rerum eos nam ab perspiciatis voluptatum 197 | in. Quidem natus autem quae. Velit accusamus sit, perspiciatis 198 | sunt earum tempora veniam. 199 |
200 |
201 |
202 |
203 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. 204 | Ratione libero totam rerum eos nam ab perspiciatis voluptatum 205 | in. Quidem natus autem quae. Velit accusamus sit, perspiciatis 206 | sunt earum tempora veniam. 207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 | 219 | 224 | 229 | 230 | 231 | 232 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $('.sideMenuToggler').on('click', function() { 3 | $('.wrapper').toggleClass('active'); 4 | }); 5 | 6 | var adjustSidebar = function() { 7 | $('.sidebar').slimScroll({ 8 | height: document.documentElement.clientHeight - $('.navbar').outerHeight() 9 | }); 10 | }; 11 | 12 | adjustSidebar(); 13 | $(window).resize(function() { 14 | adjustSidebar(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700'); 2 | @import url('https://fonts.googleapis.com/css?family=Courgette'); 3 | @function rem($value) { 4 | @return unquote(($value/1px)/16+'rem'); 5 | } 6 | $easeTime: 0.25s; 7 | $margin-top: 56px; 8 | $colors: ( 9 | 'mattBlackLight': '#303337', 10 | 'mattBlackDark': '#212121', 11 | 'mattGray': '#878d8d', 12 | 'mattRed': '#ec6271' 13 | ); 14 | 15 | @each $colorName, $colorValue in $colors { 16 | .bg-#{$colorName} { 17 | background-color: #{$colorValue}; 18 | } 19 | .text-#{$colorName} { 20 | color: #{$colorValue}; 21 | } 22 | } 23 | * { 24 | font-family: 'Poppins', sans-serif; 25 | } 26 | body { 27 | height: 1000px; 28 | @extend .bg-mattBlackDark; 29 | @extend .text-mattGray; 30 | } 31 | .wrapper { 32 | margin-top: rem($margin-top); 33 | .sideMenu { 34 | position: fixed; 35 | top: 0; 36 | bottom: 0; 37 | margin: rem($margin-top) auto auto; 38 | left: 0; 39 | width: rem(200px); 40 | transition: all ease $easeTime; 41 | transform: translateX(-100%); 42 | z-index: 2000; 43 | } 44 | .content { 45 | width: 100%; 46 | margin-left: rem(0px); 47 | transition: all ease $easeTime; 48 | } 49 | &.active { 50 | .sideMenu { 51 | transform: translateX(0); 52 | } 53 | } 54 | } 55 | 56 | .nav-link { 57 | align-items: center; 58 | display: block; 59 | white-space: nowrap; 60 | .icon { 61 | margin-right: rem(4px); 62 | font-size: rem(30px); 63 | vertical-align: middle; 64 | @extend .text-mattGray; 65 | height: rem(32px); 66 | width: rem(32px); 67 | display: inline-flex; 68 | justify-content: center; 69 | align-items: center; 70 | } 71 | .text { 72 | font-size: rem(14px); 73 | @extend .text-mattGray; 74 | } 75 | &:hover, 76 | &.active { 77 | @extend .bg-mattBlackDark; 78 | .icon, 79 | .text { 80 | @extend .text-mattRed; 81 | } 82 | } 83 | } 84 | 85 | @media (min-width: 992px) { 86 | .wrapper { 87 | .sideMenu { 88 | transform: translateX(0); 89 | } 90 | .content { 91 | margin-left: rem(200px); 92 | } 93 | &.active { 94 | .sideMenu { 95 | width: rem(80px); 96 | .nav-link { 97 | text-align: center; 98 | .icon { 99 | margin-right: 0; 100 | } 101 | .text { 102 | display: none; 103 | } 104 | } 105 | } 106 | .content { 107 | margin-left: rem(80px); 108 | } 109 | } 110 | } 111 | } 112 | --------------------------------------------------------------------------------