├── .gitignore ├── 404.html ├── LICENCE ├── README.md ├── about.html ├── assets ├── css │ ├── animate.css │ ├── bootstrap.min.css │ ├── lineicons.css │ ├── ud-styles.css │ └── ud-styles.css.map ├── fonts │ ├── LineIcons.eot │ ├── LineIcons.svg │ ├── LineIcons.ttf │ ├── LineIcons.woff │ └── LineIcons.woff2 ├── images │ ├── 404 │ │ ├── dotted-shape.svg │ │ ├── shape-1.svg │ │ └── shape-2.svg │ ├── about │ │ └── about-image.svg │ ├── banner │ │ └── banner-bg.svg │ ├── blog │ │ ├── article-author-01.png │ │ ├── article-author-02.png │ │ ├── article-author-03.png │ │ ├── article-author-04.png │ │ ├── author-01.png │ │ ├── bannder-ad.png │ │ ├── blog-01.jpg │ │ ├── blog-02.jpg │ │ ├── blog-03.jpg │ │ ├── blog-details-01.jpg │ │ ├── dotted-shape.svg │ │ └── quote-bg.svg │ ├── brands │ │ ├── ayroui.svg │ │ ├── ecommerce-html.svg │ │ ├── graygrids.svg │ │ ├── lineicons.svg │ │ ├── tailwindtemplates.svg │ │ └── uideck.svg │ ├── faq │ │ └── shape.svg │ ├── favicon.svg │ ├── footer │ │ ├── brands │ │ │ ├── ayroui.svg │ │ │ ├── ecommerce-html.svg │ │ │ ├── graygrids.svg │ │ │ ├── lineicons.svg │ │ │ ├── plainadmin.svg │ │ │ ├── tailwindtemplates.svg │ │ │ └── uideck.svg │ │ ├── shape-1.svg │ │ ├── shape-2.svg │ │ └── shape-3.svg │ ├── hero │ │ ├── brand.svg │ │ ├── dotted-shape.svg │ │ └── hero-image.svg │ ├── logo │ │ ├── logo-2.svg │ │ └── logo.svg │ ├── team │ │ ├── dotted-shape.svg │ │ ├── shape-2.svg │ │ ├── team-01.png │ │ ├── team-02.png │ │ ├── team-03.png │ │ └── team-04.png │ └── testimonials │ │ ├── author-01.png │ │ ├── author-02.png │ │ └── author-03.png ├── js │ ├── bootstrap.bundle.min.js │ ├── main.js │ └── wow.min.js └── scss │ ├── _404.scss │ ├── _about.scss │ ├── _banner.scss │ ├── _blog-details.scss │ ├── _blog.scss │ ├── _common.scss │ ├── _contact.scss │ ├── _default.scss │ ├── _faq.scss │ ├── _features.scss │ ├── _footer.scss │ ├── _header.scss │ ├── _hero.scss │ ├── _login.scss │ ├── _mixin.scss │ ├── _pricing.scss │ ├── _team.scss │ ├── _testimonials.scss │ ├── _variables.scss │ └── ud-styles.scss ├── blog-details.html ├── blog.html ├── contact.html ├── index.html ├── login.html └── pricing.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Play | Open source Project by UIdeck 18 | 19 | 20 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 |
36 |
37 |
38 | 116 |
117 |
118 |
119 |
120 | 121 | 122 | 123 |
124 |
125 |
126 |
127 |
128 |

404 Page

129 |
130 |
131 |
132 |
133 |
134 | 135 | 136 | 137 |
138 |
139 |
140 |
141 |
142 |
143 |

404 - We couldn't find that page.

144 |
145 | Maybe you can find what you need here? 146 |
147 | 158 |
159 |
160 |
161 |
162 |
163 |
164 | 165 | 166 | 167 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 UIdeck 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Play - Free HTML Template for Startup, Apps and SaaS 2 | 3 | Play is an open-source and free bootstrap 5 based HTML template created by the UIdeck team. It's a part of our new initiative to give back to the community and create some impactful open source projects. 4 | 5 | This template is designed and developed in such a way so, that almost anyone can use it for almost any kind of website or landing pages such as SaaS, Startup, Business, Apps, Software and Agency, etc. 6 | 7 | Play comes with all essential sections and elements a complete website needs, additionally, we also created some separate pages including blogs, login, 404, and some other essential pages from homepage sections. 8 | 9 | ### This template crafted using 🥞 [TailGrids](https://tailgrids.com/) UI components (design) 10 | 11 | 12 | ### [🚀 View Demo](https://preview.uideck.com/items/play-bootstrap/) 13 | 14 | ### [⬇️ Download Now](https://links.uideck.com/play-bootstrap-download) 15 | 16 | [![playbootstrap-demo](https://uideck.com/wp-content/uploads/2021/09/play-bootstrap.jpg)](https://preview.uideck.com/items/play-bootstrap/) 17 | 18 | 19 | 20 | ## 📃 License 21 | Play is an open-source template, you can use it with your personal or commercial projects without any attribution or backlink. 22 | 23 | ## 💙 Support 24 | You can always support this project by [Starring🌟 This Repository](https://github.com/uideck/play-bootstrap) 25 | and sharing with friends. Also open an issue if you find bug or feel free to contribute by pull requests after fixing any issue or adding more values. 26 | -------------------------------------------------------------------------------- /assets/css/animate.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | * animate.css -https://daneden.github.io/animate.css/ 5 | * Version - 3.7.2 6 | * Licensed under the MIT license - http://opensource.org/licenses/MIT 7 | * 8 | * Copyright (c) 2019 Daniel Eden 9 | */ 10 | 11 | @-webkit-keyframes fadeIn { 12 | from { 13 | opacity: 0; 14 | } 15 | 16 | to { 17 | opacity: 1; 18 | } 19 | } 20 | 21 | @keyframes fadeIn { 22 | from { 23 | opacity: 0; 24 | } 25 | 26 | to { 27 | opacity: 1; 28 | } 29 | } 30 | 31 | .fadeIn { 32 | -webkit-animation-name: fadeIn; 33 | animation-name: fadeIn; 34 | } 35 | 36 | @-webkit-keyframes fadeInDown { 37 | from { 38 | opacity: 0; 39 | -webkit-transform: translate3d(0, -20px, 0); 40 | transform: translate3d(0, -20px, 0); 41 | } 42 | 43 | to { 44 | opacity: 1; 45 | -webkit-transform: translate3d(0, 0, 0); 46 | transform: translate3d(0, 0, 0); 47 | } 48 | } 49 | 50 | @keyframes fadeInDown { 51 | from { 52 | opacity: 0; 53 | -webkit-transform: translate3d(0, -20px, 0); 54 | transform: translate3d(0, -20px, 0); 55 | } 56 | 57 | to { 58 | opacity: 1; 59 | -webkit-transform: translate3d(0, 0, 0); 60 | transform: translate3d(0, 0, 0); 61 | } 62 | } 63 | 64 | .fadeInDown { 65 | -webkit-animation-name: fadeInDown; 66 | animation-name: fadeInDown; 67 | } 68 | 69 | @-webkit-keyframes fadeInLeft { 70 | from { 71 | opacity: 0; 72 | -webkit-transform: translate3d(-20px, 0, 0); 73 | transform: translate3d(-20px, 0, 0); 74 | } 75 | 76 | to { 77 | opacity: 1; 78 | -webkit-transform: translate3d(0, 0, 0); 79 | transform: translate3d(0, 0, 0); 80 | } 81 | } 82 | 83 | @keyframes fadeInLeft { 84 | from { 85 | opacity: 0; 86 | -webkit-transform: translate3d(-20px, 0, 0); 87 | transform: translate3d(-20px, 0, 0); 88 | } 89 | 90 | to { 91 | opacity: 1; 92 | -webkit-transform: translate3d(0, 0, 0); 93 | transform: translate3d(0, 0, 0); 94 | } 95 | } 96 | 97 | .fadeInLeft { 98 | -webkit-animation-name: fadeInLeft; 99 | animation-name: fadeInLeft; 100 | } 101 | 102 | @-webkit-keyframes fadeInRight { 103 | from { 104 | opacity: 0; 105 | -webkit-transform: translate3d(20px, 0, 0); 106 | transform: translate3d(20px, 0, 0); 107 | } 108 | 109 | to { 110 | opacity: 1; 111 | -webkit-transform: translate3d(0, 0, 0); 112 | transform: translate3d(0, 0, 0); 113 | } 114 | } 115 | 116 | @keyframes fadeInRight { 117 | from { 118 | opacity: 0; 119 | -webkit-transform: translate3d(20px, 0, 0); 120 | transform: translate3d(20px, 0, 0); 121 | } 122 | 123 | to { 124 | opacity: 1; 125 | -webkit-transform: translate3d(0, 0, 0); 126 | transform: translate3d(0, 0, 0); 127 | } 128 | } 129 | 130 | .fadeInRight { 131 | -webkit-animation-name: fadeInRight; 132 | animation-name: fadeInRight; 133 | } 134 | 135 | @-webkit-keyframes fadeInUp { 136 | from { 137 | opacity: 0; 138 | -webkit-transform: translate3d(0, 20px, 0); 139 | transform: translate3d(0, 20px, 0); 140 | } 141 | 142 | to { 143 | opacity: 1; 144 | -webkit-transform: translate3d(0, 0, 0); 145 | transform: translate3d(0, 0, 0); 146 | } 147 | } 148 | 149 | @keyframes fadeInUp { 150 | from { 151 | opacity: 0; 152 | -webkit-transform: translate3d(0, 20px, 0); 153 | transform: translate3d(0, 20px, 0); 154 | } 155 | 156 | to { 157 | opacity: 1; 158 | -webkit-transform: translate3d(0, 0, 0); 159 | transform: translate3d(0, 0, 0); 160 | } 161 | } 162 | 163 | .fadeInUp { 164 | -webkit-animation-name: fadeInUp; 165 | animation-name: fadeInUp; 166 | } 167 | 168 | .animated { 169 | -webkit-animation-duration: 1s; 170 | animation-duration: 1s; 171 | -webkit-animation-fill-mode: both; 172 | animation-fill-mode: both; 173 | } 174 | 175 | .animated.infinite { 176 | -webkit-animation-iteration-count: infinite; 177 | animation-iteration-count: infinite; 178 | } 179 | 180 | .animated.delay-1s { 181 | -webkit-animation-delay: 1s; 182 | animation-delay: 1s; 183 | } 184 | 185 | .animated.delay-2s { 186 | -webkit-animation-delay: 2s; 187 | animation-delay: 2s; 188 | } 189 | 190 | .animated.delay-3s { 191 | -webkit-animation-delay: 3s; 192 | animation-delay: 3s; 193 | } 194 | 195 | .animated.delay-4s { 196 | -webkit-animation-delay: 4s; 197 | animation-delay: 4s; 198 | } 199 | 200 | .animated.delay-5s { 201 | -webkit-animation-delay: 5s; 202 | animation-delay: 5s; 203 | } 204 | 205 | .animated.fast { 206 | -webkit-animation-duration: 800ms; 207 | animation-duration: 800ms; 208 | } 209 | 210 | .animated.faster { 211 | -webkit-animation-duration: 500ms; 212 | animation-duration: 500ms; 213 | } 214 | 215 | .animated.slow { 216 | -webkit-animation-duration: 2s; 217 | animation-duration: 2s; 218 | } 219 | 220 | .animated.slower { 221 | -webkit-animation-duration: 3s; 222 | animation-duration: 3s; 223 | } 224 | 225 | @media (print), (prefers-reduced-motion: reduce) { 226 | .animated { 227 | -webkit-animation-duration: 1ms !important; 228 | animation-duration: 1ms !important; 229 | -webkit-transition-duration: 1ms !important; 230 | transition-duration: 1ms !important; 231 | -webkit-animation-iteration-count: 1 !important; 232 | animation-iteration-count: 1 !important; 233 | } 234 | } 235 | -------------------------------------------------------------------------------- /assets/fonts/LineIcons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/fonts/LineIcons.eot -------------------------------------------------------------------------------- /assets/fonts/LineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/fonts/LineIcons.ttf -------------------------------------------------------------------------------- /assets/fonts/LineIcons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/fonts/LineIcons.woff -------------------------------------------------------------------------------- /assets/fonts/LineIcons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/fonts/LineIcons.woff2 -------------------------------------------------------------------------------- /assets/images/404/dotted-shape.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/404/shape-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/404/shape-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/images/banner/banner-bg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/blog/article-author-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/article-author-01.png -------------------------------------------------------------------------------- /assets/images/blog/article-author-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/article-author-02.png -------------------------------------------------------------------------------- /assets/images/blog/article-author-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/article-author-03.png -------------------------------------------------------------------------------- /assets/images/blog/article-author-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/article-author-04.png -------------------------------------------------------------------------------- /assets/images/blog/author-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/author-01.png -------------------------------------------------------------------------------- /assets/images/blog/bannder-ad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/bannder-ad.png -------------------------------------------------------------------------------- /assets/images/blog/blog-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/blog-01.jpg -------------------------------------------------------------------------------- /assets/images/blog/blog-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/blog-02.jpg -------------------------------------------------------------------------------- /assets/images/blog/blog-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/blog-03.jpg -------------------------------------------------------------------------------- /assets/images/blog/blog-details-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/blog/blog-details-01.jpg -------------------------------------------------------------------------------- /assets/images/blog/dotted-shape.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/blog/quote-bg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/brands/ayroui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/brands/ecommerce-html.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/brands/graygrids.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/brands/lineicons.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/brands/tailwindtemplates.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/brands/uideck.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/faq/shape.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/footer/brands/ayroui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/footer/brands/ecommerce-html.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/footer/brands/graygrids.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/footer/brands/lineicons.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/footer/brands/plainadmin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/footer/brands/tailwindtemplates.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/footer/brands/uideck.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/footer/shape-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/footer/shape-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/footer/shape-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/images/hero/brand.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/hero/dotted-shape.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/logo/logo-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/logo/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/team/dotted-shape.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/team/shape-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/team/team-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/team/team-01.png -------------------------------------------------------------------------------- /assets/images/team/team-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/team/team-02.png -------------------------------------------------------------------------------- /assets/images/team/team-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/team/team-03.png -------------------------------------------------------------------------------- /assets/images/team/team-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/team/team-04.png -------------------------------------------------------------------------------- /assets/images/testimonials/author-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/testimonials/author-01.png -------------------------------------------------------------------------------- /assets/images/testimonials/author-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/testimonials/author-02.png -------------------------------------------------------------------------------- /assets/images/testimonials/author-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uideck/play-bootstrap/96e57206252039b92ea5bfe84c71fbfd0c29a19c/assets/images/testimonials/author-03.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | // ======= Sticky 5 | window.onscroll = function () { 6 | const ud_header = document.querySelector(".ud-header"); 7 | const sticky = ud_header.offsetTop; 8 | const logo = document.querySelector(".navbar-brand img"); 9 | 10 | if (window.pageYOffset > sticky) { 11 | ud_header.classList.add("sticky"); 12 | } else { 13 | ud_header.classList.remove("sticky"); 14 | } 15 | 16 | // === logo change 17 | if (ud_header.classList.contains("sticky")) { 18 | logo.src = "assets/images/logo/logo-2.svg"; 19 | } else { 20 | logo.src = "assets/images/logo/logo.svg"; 21 | } 22 | 23 | // show or hide the back-top-top button 24 | const backToTop = document.querySelector(".back-to-top"); 25 | if ( 26 | document.body.scrollTop > 50 || 27 | document.documentElement.scrollTop > 50 28 | ) { 29 | backToTop.style.display = "flex"; 30 | } else { 31 | backToTop.style.display = "none"; 32 | } 33 | }; 34 | 35 | //===== close navbar-collapse when a clicked 36 | let navbarToggler = document.querySelector(".navbar-toggler"); 37 | const navbarCollapse = document.querySelector(".navbar-collapse"); 38 | 39 | document.querySelectorAll(".ud-menu-scroll").forEach((e) => 40 | e.addEventListener("click", () => { 41 | navbarToggler.classList.remove("active"); 42 | navbarCollapse.classList.remove("show"); 43 | }) 44 | ); 45 | navbarToggler.addEventListener("click", function () { 46 | navbarToggler.classList.toggle("active"); 47 | navbarCollapse.classList.toggle("show"); 48 | }); 49 | 50 | // ===== submenu 51 | const submenuButton = document.querySelectorAll(".nav-item-has-children"); 52 | submenuButton.forEach((elem) => { 53 | elem.querySelector("a").addEventListener("click", () => { 54 | elem.querySelector(".ud-submenu").classList.toggle("show"); 55 | }); 56 | }); 57 | 58 | // ===== wow js 59 | new WOW().init(); 60 | 61 | // ====== scroll top js 62 | function scrollTo(element, to = 0, duration = 500) { 63 | const start = element.scrollTop; 64 | const change = to - start; 65 | const increment = 20; 66 | let currentTime = 0; 67 | 68 | const animateScroll = () => { 69 | currentTime += increment; 70 | 71 | const val = Math.easeInOutQuad(currentTime, start, change, duration); 72 | 73 | element.scrollTop = val; 74 | 75 | if (currentTime < duration) { 76 | setTimeout(animateScroll, increment); 77 | } 78 | }; 79 | 80 | animateScroll(); 81 | } 82 | 83 | Math.easeInOutQuad = function (t, b, c, d) { 84 | t /= d / 2; 85 | if (t < 1) return (c / 2) * t * t + b; 86 | t--; 87 | return (-c / 2) * (t * (t - 2) - 1) + b; 88 | }; 89 | 90 | document.querySelector(".back-to-top").onclick = () => { 91 | scrollTo(document.documentElement); 92 | }; 93 | })(); 94 | -------------------------------------------------------------------------------- /assets/js/wow.min.js: -------------------------------------------------------------------------------- 1 | /*! WOW wow.js - v1.3.0 - 2016-10-04 2 | * https://wowjs.uk 3 | * Copyright (c) 2016 Thomas Grainger; Licensed MIT */!function(a,b){if("function"==typeof define&&define.amd)define(["module","exports"],b);else if("undefined"!=typeof exports)b(module,exports);else{var c={exports:{}};b(c,c.exports),a.WOW=c.exports}}(this,function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){return b.indexOf(a)>=0}function e(a,b){for(var c in b)if(null==a[c]){var d=b[c];a[c]=d}return a}function f(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)}function g(a){var b=arguments.length<=1||void 0===arguments[1]?!1:arguments[1],c=arguments.length<=2||void 0===arguments[2]?!1:arguments[2],d=arguments.length<=3||void 0===arguments[3]?null:arguments[3],e=void 0;return null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e}function h(a,b){null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)&&a["on"+b]()}function i(a,b,c){null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c}function j(a,b,c){null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]}function k(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight}Object.defineProperty(b,"__esModule",{value:!0});var l,m,n=function(){function a(a,b){for(var c=0;c=0){var b=a.target||a.srcElement;b.className=b.className.replace(this.config.animateClass,"").trim()}}},{key:"customStyle",value:function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a}},{key:"vendorSet",value:function(a,b){for(var c in b)if(b.hasOwnProperty(c)){var d=b[c];a[""+c]=d;for(var e=0;e=e&&f>=c}},{key:"disabled",value:function(){return!this.config.mobile&&f(navigator.userAgent)}}]),a}();b["default"]=r,a.exports=b["default"]}); -------------------------------------------------------------------------------- /assets/scss/_404.scss: -------------------------------------------------------------------------------- 1 | /* ====== Error 404 CSS ======= */ 2 | 3 | .ud-404 { 4 | padding-top: 120px; 5 | padding-bottom: 120px; 6 | 7 | @media #{$xs} { 8 | padding-top: 80px; 9 | padding-bottom: 80px; 10 | } 11 | } 12 | 13 | .ud-404-wrapper { 14 | text-align: center; 15 | max-width: 850px; 16 | margin: 0px auto; 17 | background: var(--white); 18 | padding: 100px 60px; 19 | box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1); 20 | border-radius: 10px; 21 | position: relative; 22 | overflow: hidden; 23 | z-index: 1; 24 | 25 | @media #{$xs} { 26 | padding: 50px 30px; 27 | } 28 | 29 | .shape { 30 | position: absolute; 31 | z-index: -1; 32 | 33 | &.shape-1 { 34 | top: 0; 35 | left: 0; 36 | } 37 | 38 | &.shape-2 { 39 | right: 0; 40 | bottom: 0; 41 | } 42 | } 43 | } 44 | 45 | .ud-404-title { 46 | font-size: 42px; 47 | font-weight: 700; 48 | margin-bottom: 30px; 49 | 50 | @media #{$md} { 51 | font-size: 35px; 52 | } 53 | 54 | @media #{$xs} { 55 | font-size: 30px; 56 | } 57 | } 58 | 59 | .ud-404-subtitle { 60 | font-size: 24px; 61 | font-weight: 400; 62 | margin-bottom: 30px; 63 | 64 | @media #{$md} { 65 | font-size: 22px; 66 | } 67 | 68 | @media #{$xs} { 69 | font-size: 18px; 70 | } 71 | } 72 | 73 | .ud-404-links { 74 | display: flex; 75 | align-items: center; 76 | justify-content: center; 77 | flex-wrap: wrap; 78 | 79 | a { 80 | font-size: 16px; 81 | font-weight: 500; 82 | padding: 12px 24px; 83 | color: var(--heading-color); 84 | background: rgba(48, 86, 211, 0.06); 85 | border-radius: 5px; 86 | margin: 5px 10px; 87 | 88 | &:hover { 89 | background: var(--heading-color); 90 | color: var(--white); 91 | } 92 | 93 | @media #{$xs} { 94 | margin: 5px 10px; 95 | font-size: 14px; 96 | padding: 10px 20px; 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /assets/scss/_about.scss: -------------------------------------------------------------------------------- 1 | /* ===== About CSS ===== */ 2 | 3 | .ud-about { 4 | background: #f3f4fe; 5 | padding: 120px 0; 6 | 7 | @media #{$xs} { 8 | padding: 80px 0; 9 | } 10 | } 11 | 12 | .ud-about-wrapper { 13 | background: var(--white); 14 | border: 1px solid rgba(0, 0, 0, 0.08); 15 | display: flex; 16 | justify-content: space-between; 17 | 18 | @media #{$md, $xs} { 19 | display: block; 20 | } 21 | } 22 | 23 | .ud-about-content-wrapper { 24 | padding: 70px; 25 | 26 | @media #{$xs} { 27 | padding: 50px 30px; 28 | } 29 | 30 | @media #{$sm} { 31 | padding: 50px; 32 | } 33 | } 34 | 35 | .ud-about-content { 36 | max-width: 500px; 37 | 38 | .tag { 39 | font-weight: 500; 40 | font-size: 14px; 41 | color: var(--white); 42 | background: var(--primary-color); 43 | padding: 5px 20px; 44 | display: inline-block; 45 | margin-bottom: 20px; 46 | } 47 | 48 | h2 { 49 | font-weight: bold; 50 | font-size: 36px; 51 | line-height: 45px; 52 | margin-bottom: 30px; 53 | 54 | @media #{$xs} { 55 | font-size: 26px; 56 | line-height: 38px; 57 | } 58 | } 59 | 60 | p { 61 | font-size: 16px; 62 | line-height: 28px; 63 | margin-bottom: 40px; 64 | } 65 | 66 | .ud-main-btn { 67 | &:hover { 68 | background: #2748b4; 69 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); 70 | } 71 | } 72 | } 73 | 74 | .ud-about-image { 75 | @media #{$md, $xs} { 76 | text-align: center; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /assets/scss/_banner.scss: -------------------------------------------------------------------------------- 1 | /* ====== Banner CSS ======= */ 2 | .ud-page-banner { 3 | padding-top: 130px; 4 | padding-bottom: 80px; 5 | background: var(--primary-color); 6 | background-image: url("../images/banner/banner-bg.svg"); 7 | background-position: center; 8 | background-repeat: no-repeat; 9 | background-size: cover; 10 | } 11 | 12 | .ud-banner-content { 13 | text-align: center; 14 | max-width: 600px; 15 | margin: auto; 16 | 17 | h1 { 18 | color: var(--white); 19 | font-size: 38px; 20 | font-weight: 600; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /assets/scss/_blog-details.scss: -------------------------------------------------------------------------------- 1 | /* ====== Blog Details CSS ====== */ 2 | 3 | .ud-blog-details { 4 | padding-top: 120px; 5 | 6 | @media #{$xs} { 7 | padding-top: 80px; 8 | } 9 | } 10 | 11 | .ud-blog-details-image { 12 | position: relative; 13 | border-radius: 5px; 14 | overflow: hidden; 15 | height: 500px; 16 | 17 | @media #{$xs} { 18 | height: 300px; 19 | } 20 | 21 | & > img { 22 | position: absolute; 23 | left: 0; 24 | top: 0; 25 | width: 100%; 26 | height: 100%; 27 | object-fit: cover; 28 | object-position: center center; 29 | } 30 | } 31 | 32 | .ud-blog-overlay { 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100%; 38 | display: flex; 39 | align-items: flex-end; 40 | background: linear-gradient( 41 | 180deg, 42 | rgba(48, 86, 211, 0) 46.88%, 43 | rgba(13, 21, 49, 0.72) 93.23% 44 | ); 45 | border-radius: 5px; 46 | padding: 30px; 47 | } 48 | 49 | .ud-blog-overlay-content { 50 | display: flex; 51 | align-items: center; 52 | 53 | @media #{$xs} { 54 | flex-direction: column; 55 | align-items: flex-start; 56 | } 57 | 58 | .ud-blog-author { 59 | display: flex; 60 | align-items: center; 61 | margin-right: 40px; 62 | 63 | @media #{$xs} { 64 | margin-right: 0px; 65 | margin-bottom: 20px; 66 | } 67 | 68 | img { 69 | width: 40px; 70 | height: 40px; 71 | border-radius: 50%; 72 | overflow: hidden; 73 | margin-right: 15px; 74 | } 75 | 76 | span { 77 | font-weight: 500; 78 | font-size: 14px; 79 | line-height: 28px; 80 | color: #ffffff; 81 | } 82 | 83 | a { 84 | color: inherit; 85 | 86 | &:hover { 87 | color: var(--primary-color); 88 | } 89 | } 90 | } 91 | 92 | .ud-blog-meta { 93 | display: flex; 94 | align-items: center; 95 | 96 | p { 97 | display: flex; 98 | align-items: center; 99 | 100 | font-weight: 500; 101 | font-size: 14px; 102 | line-height: 28px; 103 | color: #ffffff; 104 | margin-right: 30px; 105 | 106 | &:last-child { 107 | margin-right: 0px; 108 | } 109 | 110 | i { 111 | font-size: 16px; 112 | margin-right: 10px; 113 | } 114 | } 115 | } 116 | } 117 | 118 | .ud-blog-details-content { 119 | padding-top: 60px; 120 | 121 | @media #{$desktop, $laptop} { 122 | padding-right: 50px; 123 | } 124 | } 125 | 126 | .ud-blog-details-title { 127 | font-weight: 700; 128 | font-size: 35px; 129 | line-height: 50px; 130 | margin-bottom: 35px; 131 | 132 | @media #{$xs} { 133 | font-size: 26px; 134 | line-height: 35px; 135 | } 136 | 137 | @media #{$sm} { 138 | font-size: 30px; 139 | line-height: 40px; 140 | } 141 | } 142 | 143 | .ud-blog-details-para { 144 | font-size: 16px; 145 | line-height: 28px; 146 | margin-bottom: 30px; 147 | } 148 | 149 | .ud-blog-details-subtitle { 150 | font-weight: 700; 151 | font-size: 26px; 152 | margin-bottom: 30px; 153 | 154 | @media #{$xs} { 155 | font-size: 22px; 156 | margin-bottom: 25px; 157 | } 158 | } 159 | 160 | .ud-blog-quote { 161 | background-image: url("../images/blog/quote-bg.svg"); 162 | background-repeat: no-repeat; 163 | background-size: cover; 164 | padding: 40px; 165 | text-align: center; 166 | margin-bottom: 40px; 167 | 168 | @media #{$xs} { 169 | padding: 30px; 170 | } 171 | 172 | i { 173 | font-size: 40px; 174 | font-weight: 700; 175 | color: var(--primary-color); 176 | line-height: 1; 177 | margin-bottom: 20px; 178 | 179 | @media #{$xs} { 180 | margin-bottom: 15px; 181 | } 182 | } 183 | 184 | p { 185 | font-style: italic; 186 | font-weight: 600; 187 | font-size: 16px; 188 | line-height: 27px; 189 | text-align: center; 190 | color: var(--heading-color); 191 | margin-bottom: 15px; 192 | 193 | @media #{$xs} { 194 | font-size: 14px; 195 | line-height: 24px; 196 | } 197 | } 198 | 199 | h6 { 200 | color: var(--body-color); 201 | font-style: italic; 202 | font-weight: 500; 203 | font-size: 12px; 204 | line-height: 20px; 205 | text-align: center; 206 | } 207 | } 208 | 209 | .ud-blog-details-action { 210 | display: flex; 211 | align-items: center; 212 | justify-content: space-between; 213 | 214 | @media #{$xs} { 215 | flex-direction: column; 216 | align-items: flex-start; 217 | } 218 | } 219 | 220 | .ud-blog-tags { 221 | display: flex; 222 | align-items: center; 223 | 224 | @media #{$xs} { 225 | margin-bottom: 20px; 226 | } 227 | 228 | li { 229 | margin-right: 14px; 230 | 231 | &:last-child { 232 | margin-right: 0px; 233 | } 234 | } 235 | 236 | a { 237 | padding: 8px 16px; 238 | font-size: 12px; 239 | font-weight: 500; 240 | 241 | color: var(--primary-color); 242 | background: rgba(48, 86, 211, 0.06); 243 | border-radius: 3px; 244 | 245 | &:hover { 246 | background: var(--primary-color); 247 | color: var(--white); 248 | } 249 | } 250 | } 251 | 252 | .ud-blog-share { 253 | display: flex; 254 | align-items: center; 255 | 256 | h6 { 257 | font-weight: 500; 258 | font-size: 12px; 259 | color: var(--body-color); 260 | margin-right: 20px; 261 | } 262 | } 263 | 264 | .ud-blog-share-links { 265 | display: flex; 266 | align-items: center; 267 | 268 | li { 269 | margin-right: 14px; 270 | 271 | &:last-child { 272 | margin-right: 0px; 273 | } 274 | } 275 | 276 | a { 277 | font-size: 18px; 278 | width: 35px; 279 | height: 35px; 280 | display: flex; 281 | align-items: center; 282 | justify-content: center; 283 | border-radius: 50%; 284 | color: var(--white); 285 | 286 | &.facebook { 287 | background: #4064ac; 288 | 289 | &:hover { 290 | background: #315294; 291 | } 292 | } 293 | 294 | &.twitter { 295 | background: #1c9cea; 296 | 297 | &:hover { 298 | background: #0f8bd8; 299 | } 300 | } 301 | 302 | &.linkedin { 303 | background: #007ab9; 304 | 305 | &:hover { 306 | background: #03689b; 307 | } 308 | } 309 | } 310 | } 311 | 312 | .ud-blog-sidebar { 313 | padding-top: 60px; 314 | } 315 | 316 | .ud-newsletter-box { 317 | background: var(--primary-color); 318 | padding: 60px 45px; 319 | position: relative; 320 | z-index: 1; 321 | text-align: center; 322 | border-radius: 5px; 323 | margin-bottom: 50px; 324 | 325 | @media #{$lg, $xs} { 326 | padding: 50px 30px; 327 | } 328 | 329 | @media #{$sm} { 330 | padding: 60px 45px; 331 | } 332 | 333 | .shape { 334 | position: absolute; 335 | z-index: -1; 336 | 337 | &.shape-1 { 338 | top: 0; 339 | right: 0; 340 | } 341 | 342 | &.shape-2 { 343 | left: 0; 344 | bottom: 0; 345 | } 346 | } 347 | 348 | .ud-newsletter-title { 349 | font-weight: 600; 350 | font-size: 25px; 351 | color: var(--white); 352 | margin-bottom: 5px; 353 | 354 | @media #{$lg } { 355 | font-size: 23px; 356 | } 357 | } 358 | 359 | p { 360 | font-size: 16px; 361 | line-height: 24px; 362 | color: var(--white); 363 | } 364 | 365 | .ud-newsletter-form { 366 | margin-top: 30px; 367 | 368 | input { 369 | width: 100%; 370 | box-shadow: 0px 4px 42px rgba(0, 0, 0, 0.01); 371 | border-radius: 5px; 372 | background: rgba(255, 255, 255, 0.2); 373 | color: var(--white); 374 | text-align: center; 375 | margin-bottom: 15px; 376 | border: 2px solid transparent; 377 | padding: 12px 20px; 378 | 379 | &::placeholder { 380 | color: var(--white); 381 | opacity: 1; 382 | } 383 | 384 | &:focus { 385 | border-color: var(--white); 386 | } 387 | } 388 | 389 | .ud-main-btn { 390 | background: #13c296; 391 | box-shadow: 0px 4px 42px rgba(0, 0, 0, 0.01); 392 | border-radius: 5px; 393 | width: 100%; 394 | margin-bottom: 24px; 395 | 396 | &:hover { 397 | background: var(--heading-color); 398 | } 399 | } 400 | 401 | .ud-newsletter-note { 402 | font-weight: 500; 403 | font-size: 14px; 404 | line-height: 22px; 405 | } 406 | } 407 | } 408 | 409 | .ud-articles-box { 410 | margin-bottom: 50px; 411 | 412 | .ud-articles-box-title { 413 | font-weight: 600; 414 | font-size: 28px; 415 | padding-bottom: 25px; 416 | position: relative; 417 | margin-bottom: 20px; 418 | 419 | &::after { 420 | content: ""; 421 | position: absolute; 422 | width: 80px; 423 | height: 2px; 424 | background: var(--primary-color); 425 | left: 0; 426 | bottom: 0; 427 | } 428 | } 429 | 430 | .ud-articles-list { 431 | li { 432 | padding: 20px 0; 433 | border-bottom: 1px solid #f2f3f8; 434 | display: flex; 435 | align-items: center; 436 | 437 | &:last-child { 438 | padding-bottom: 0px; 439 | border-bottom: 0px; 440 | } 441 | } 442 | 443 | .ud-article-image { 444 | max-width: 80px; 445 | width: 100%; 446 | height: 80px; 447 | border-radius: 50%; 448 | overflow: hidden; 449 | margin-right: 20px; 450 | 451 | @media #{$lg, $xs} { 452 | max-width: 65px; 453 | height: 65px; 454 | } 455 | 456 | @media #{$sm} { 457 | max-width: 80px; 458 | height: 80px; 459 | } 460 | 461 | img { 462 | width: 100%; 463 | } 464 | } 465 | 466 | .ud-article-title { 467 | font-weight: 500; 468 | font-size: 18px; 469 | line-height: 22px; 470 | margin-bottom: 5px; 471 | 472 | @media #{$lg} { 473 | font-size: 16px; 474 | } 475 | 476 | a { 477 | color: inherit; 478 | 479 | &:hover { 480 | color: var(--primary-color); 481 | } 482 | } 483 | } 484 | 485 | .ud-article-author { 486 | font-size: 14px; 487 | } 488 | } 489 | } 490 | 491 | .ud-banner-ad { 492 | border-radius: 5px; 493 | overflow: hidden; 494 | 495 | a { 496 | display: block; 497 | } 498 | 499 | img { 500 | width: 100%; 501 | } 502 | } 503 | -------------------------------------------------------------------------------- /assets/scss/_blog.scss: -------------------------------------------------------------------------------- 1 | /* ====== Blog CSS ====== */ 2 | 3 | .ud-blog-grids { 4 | padding-top: 120px; 5 | padding-bottom: 80px; 6 | 7 | &.ud-related-articles { 8 | padding-top: 100px; 9 | } 10 | 11 | @media #{$xs} { 12 | padding-top: 80px; 13 | padding-bottom: 40px; 14 | } 15 | } 16 | 17 | .ud-single-blog { 18 | margin-bottom: 40px; 19 | 20 | &:hover { 21 | .ud-blog-image { 22 | img { 23 | @include transform(scale(1.1) rotate(3deg)); 24 | } 25 | } 26 | } 27 | 28 | .ud-blog-image { 29 | border-radius: 4px; 30 | overflow: hidden; 31 | margin-bottom: 30px; 32 | 33 | a { 34 | display: block; 35 | } 36 | 37 | img { 38 | width: 100%; 39 | @include transition(0.3s); 40 | } 41 | } 42 | 43 | .ud-blog-date { 44 | display: inline-flex; 45 | font-size: 12px; 46 | 47 | font-weight: 600; 48 | padding: 8px 16px; 49 | background: var(--primary-color); 50 | color: var(--white); 51 | border-radius: 5px; 52 | margin-bottom: 20px; 53 | } 54 | 55 | .ud-blog-title { 56 | font-weight: 600; 57 | font-size: 24px; 58 | line-height: 32px; 59 | margin-bottom: 15px; 60 | 61 | @media #{$lg} { 62 | font-size: 20px; 63 | line-height: 28px; 64 | } 65 | 66 | a { 67 | color: inherit; 68 | 69 | &:hover { 70 | color: var(--primary-color); 71 | } 72 | } 73 | } 74 | 75 | .ud-blog-desc { 76 | font-size: 16px; 77 | line-height: 28px; 78 | } 79 | } 80 | 81 | .ud-related-articles-title { 82 | font-weight: 800; 83 | font-size: 28px; 84 | padding-bottom: 25px; 85 | position: relative; 86 | margin-bottom: 50px; 87 | 88 | &::after { 89 | content: ""; 90 | position: absolute; 91 | width: 80px; 92 | height: 2px; 93 | background: var(--primary-color); 94 | left: 0; 95 | bottom: 0; 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /assets/scss/_common.scss: -------------------------------------------------------------------------------- 1 | /*=========================== 2 | COMMON css 3 | ===========================*/ 4 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap"); 5 | 6 | :root { 7 | --font: "Inter", sans-serif; 8 | --body-color: #637381; 9 | --heading-color: #212b36; 10 | --primary-color: #3056d3; 11 | --white: #ffffff; 12 | } 13 | 14 | body { 15 | font-family: var(--font); 16 | font-weight: normal; 17 | font-style: normal; 18 | color: var(--body-color); 19 | overflow-x: hidden; 20 | } 21 | 22 | * { 23 | margin: 0; 24 | padding: 0; 25 | @include box-sizing(border-box); 26 | } 27 | 28 | img { 29 | max-width: 100%; 30 | } 31 | 32 | a, 33 | button, 34 | input, 35 | textarea { 36 | @include transition(0.3s); 37 | } 38 | 39 | a, 40 | a:focus, 41 | input:focus, 42 | textarea:focus, 43 | button:focus, 44 | .navbar-toggler:focus { 45 | text-decoration: none; 46 | outline: none; 47 | box-shadow: none; 48 | } 49 | 50 | a:focus, 51 | a:hover { 52 | text-decoration: none; 53 | } 54 | 55 | i, 56 | span, 57 | a { 58 | display: inline-block; 59 | } 60 | 61 | audio, 62 | canvas, 63 | iframe, 64 | img, 65 | svg, 66 | video { 67 | vertical-align: middle; 68 | } 69 | 70 | h1, 71 | h2, 72 | h3, 73 | h4, 74 | h5, 75 | h6 { 76 | font-weight: 700; 77 | color: var(--heading-color); 78 | margin: 0px; 79 | } 80 | 81 | h1 { 82 | font-size: 48px; 83 | } 84 | h2 { 85 | font-size: 36px; 86 | } 87 | h3 { 88 | font-size: 28px; 89 | } 90 | h4 { 91 | font-size: 22px; 92 | } 93 | h5 { 94 | font-size: 18px; 95 | } 96 | h6 { 97 | font-size: 16px; 98 | } 99 | 100 | ul, 101 | ol { 102 | margin: 0px; 103 | padding: 0px; 104 | list-style-type: none; 105 | } 106 | 107 | p { 108 | font-size: 16px; 109 | font-weight: 400; 110 | line-height: 26px; 111 | color: var(--body-color); 112 | margin: 0px; 113 | } 114 | 115 | .bg_cover { 116 | background-position: center center; 117 | background-size: cover; 118 | background-repeat: no-repeat; 119 | width: 100%; 120 | height: 100%; 121 | } 122 | 123 | /*===== All Button Style =====*/ 124 | 125 | .ud-main-btn { 126 | display: inline-block; 127 | text-align: center; 128 | white-space: nowrap; 129 | vertical-align: middle; 130 | 131 | font-weight: 500; 132 | font-size: 16px; 133 | border-radius: 5px; 134 | padding: 15px 25px; 135 | border: 1px solid transparent; 136 | color: var(--white); 137 | cursor: pointer; 138 | z-index: 5; 139 | @include transition(0.4s); 140 | background: var(--primary-color); 141 | 142 | &:hover { 143 | color: var(--white); 144 | background: var(--heading-color); 145 | } 146 | } 147 | 148 | .container { 149 | @media #{$xs} { 150 | padding-left: 40px; 151 | padding-right: 40px; 152 | } 153 | @media #{$sm} { 154 | padding-left: 20px; 155 | padding-right: 20px; 156 | } 157 | } 158 | 159 | .back-to-top { 160 | width: 40px; 161 | height: 40px; 162 | line-height: 40px; 163 | background: var(--primary-color); 164 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); 165 | text-align: center; 166 | justify-content: center; 167 | align-items: center; 168 | border-radius: 5px; 169 | position: fixed; 170 | right: 30px; 171 | bottom: 30px; 172 | z-index: 99; 173 | color: var(--white); 174 | 175 | &:hover { 176 | color: var(--white); 177 | background: var(--heading-color); 178 | } 179 | } 180 | -------------------------------------------------------------------------------- /assets/scss/_contact.scss: -------------------------------------------------------------------------------- 1 | /* ===== Contact CSS ===== */ 2 | .ud-contact { 3 | padding: 120px 0px; 4 | position: relative; 5 | 6 | @media #{$xs} { 7 | padding: 80px 0; 8 | } 9 | 10 | &::after { 11 | content: ""; 12 | position: absolute; 13 | z-index: -1; 14 | width: 100%; 15 | top: 0; 16 | left: 0; 17 | height: 50%; 18 | background: #f3f4fe; 19 | 20 | @media #{$lg} { 21 | height: 45%; 22 | } 23 | } 24 | } 25 | 26 | .ud-contact-title { 27 | margin-bottom: 150px; 28 | 29 | @media #{$md, $xs} { 30 | margin-bottom: 50px; 31 | } 32 | 33 | span { 34 | color: var(--heading-color); 35 | font-weight: 600; 36 | font-size: 15px; 37 | margin-bottom: 20px; 38 | } 39 | 40 | h2 { 41 | font-weight: 600; 42 | font-size: 35px; 43 | line-height: 41px; 44 | } 45 | } 46 | 47 | .ud-contact-info-wrapper { 48 | display: flex; 49 | justify-content: space-between; 50 | flex-wrap: wrap; 51 | 52 | @media #{$md, $xs} { 53 | margin-bottom: 50px; 54 | } 55 | 56 | .ud-single-info { 57 | display: flex; 58 | max-width: 100%; 59 | width: 330px; 60 | margin-bottom: 30px; 61 | } 62 | 63 | .ud-info-icon { 64 | font-size: 32px; 65 | color: var(--primary-color); 66 | margin-right: 24px; 67 | } 68 | 69 | .ud-info-meta { 70 | h5 { 71 | font-weight: 600; 72 | font-size: 18px; 73 | margin-bottom: 15px; 74 | } 75 | 76 | p { 77 | font-size: 15px; 78 | line-height: 24px; 79 | } 80 | } 81 | } 82 | 83 | .ud-contact-form-wrapper { 84 | box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.05); 85 | border-radius: 8px; 86 | background: var(--white); 87 | padding: 60px; 88 | 89 | @media #{$xs} { 90 | padding: 40px 30px; 91 | } 92 | 93 | @media #{$laptop, $lg, $sm} { 94 | padding: 50px 40px; 95 | } 96 | 97 | .ud-contact-form-title { 98 | font-style: normal; 99 | font-weight: 600; 100 | font-size: 28px; 101 | margin-bottom: 30px; 102 | 103 | @media #{$xs} { 104 | font-size: 24px; 105 | } 106 | } 107 | 108 | .ud-form-group { 109 | margin-bottom: 25px; 110 | 111 | label { 112 | display: block; 113 | font-weight: normal; 114 | font-size: 12px; 115 | } 116 | 117 | input, 118 | textarea { 119 | display: block; 120 | width: 100%; 121 | padding: 15px 0; 122 | border: none; 123 | outline: none; 124 | border-bottom: 1px solid #f1f1f1; 125 | resize: none; 126 | 127 | &:focus { 128 | border-color: var(--primary-color); 129 | } 130 | } 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /assets/scss/_default.scss: -------------------------------------------------------------------------------- 1 | /* ====================== 2 | DEFAULT CSS 3 | ========================= */ 4 | 5 | // Margin-top 6 | @for $i from 1 through 45 { 7 | .mt-#{5 * $i} { 8 | margin-top: 5px * $i; 9 | } 10 | } 11 | 12 | // Margin-bottom 13 | @for $i from 1 through 45 { 14 | .mb-#{5 * $i} { 15 | margin-bottom: 5px * $i; 16 | } 17 | } 18 | 19 | // Padding-top 20 | @for $i from 1 through 45 { 21 | .pt-#{5 * $i} { 22 | padding-top: 5px * $i; 23 | } 24 | } 25 | 26 | // Padding-bottom 27 | @for $i from 1 through 45 { 28 | .pb-#{5 * $i} { 29 | padding-bottom: 5px * $i; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /assets/scss/_faq.scss: -------------------------------------------------------------------------------- 1 | /* ===== FAQ CSS ===== */ 2 | 3 | .ud-faq { 4 | padding-top: 120px; 5 | padding-bottom: 90px; 6 | background: #f3f4fe; 7 | position: relative; 8 | z-index: 1; 9 | 10 | @media #{$xs } { 11 | padding-top: 80px; 12 | padding-bottom: 50px; 13 | } 14 | 15 | .shape { 16 | position: absolute; 17 | z-index: -1; 18 | left: 0; 19 | bottom: 0; 20 | } 21 | } 22 | 23 | .ud-single-faq { 24 | background: var(--white); 25 | border: 1px solid #f3f4fe; 26 | box-shadow: 0px 20px 95px rgba(201, 203, 204, 0.3); 27 | border-radius: 10px; 28 | margin-bottom: 30px; 29 | 30 | .ud-faq-btn { 31 | text-align: left; 32 | display: flex; 33 | width: 100%; 34 | align-items: center; 35 | border: none; 36 | background: transparent; 37 | 38 | font-weight: 600; 39 | font-size: 18px; 40 | color: var(--heading-color); 41 | opacity: 0.88; 42 | padding: 30px; 43 | 44 | @media #{$lg, $xs} { 45 | padding: 15px; 46 | } 47 | 48 | &.collapsed { 49 | span.icon i { 50 | @include transform(rotate(0deg)); 51 | } 52 | } 53 | 54 | span.icon { 55 | display: flex; 56 | align-items: center; 57 | justify-content: center; 58 | width: 42px; 59 | height: 42px; 60 | background: rgba(48, 86, 211, 0.06); 61 | border-radius: 10px; 62 | color: var(--primary-color); 63 | margin-right: 24px; 64 | 65 | i { 66 | @include transform(rotate(180deg)); 67 | transition: all 0.3s; 68 | font-size: 14px; 69 | font-weight: 700; 70 | } 71 | } 72 | } 73 | 74 | .ud-faq-body { 75 | padding: 0px 30px 40px 95px; 76 | 77 | @media #{$lg, $xs} { 78 | padding: 0px 16px 20px 82px; 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /assets/scss/_features.scss: -------------------------------------------------------------------------------- 1 | /* ===== Features CSS ===== */ 2 | 3 | .ud-features { 4 | padding-top: 120px; 5 | padding-bottom: 90px; 6 | 7 | @media #{$xs} { 8 | padding-top: 80px; 9 | padding-bottom: 40px; 10 | } 11 | } 12 | 13 | .ud-section-title { 14 | max-width: 620px; 15 | margin-bottom: 70px; 16 | 17 | span { 18 | font-weight: 600; 19 | font-size: 18px; 20 | color: var(--primary-color); 21 | margin-bottom: 10px; 22 | } 23 | 24 | h2 { 25 | font-weight: 700; 26 | font-size: 42px; 27 | line-height: 55px; 28 | text-transform: capitalize; 29 | color: var(--heading-color); 30 | margin-bottom: 20px; 31 | } 32 | 33 | p { 34 | font-size: 20px; 35 | line-height: 30px; 36 | 37 | @media #{$xs} { 38 | font-size: 16px; 39 | line-height: 26px; 40 | } 41 | } 42 | } 43 | 44 | .ud-single-feature { 45 | margin-bottom: 40px; 46 | 47 | &:hover { 48 | .ud-feature-icon::before { 49 | @include transform(rotate(45deg)); 50 | } 51 | } 52 | 53 | .ud-feature-icon { 54 | width: 70px; 55 | height: 70px; 56 | display: flex; 57 | align-items: center; 58 | justify-content: center; 59 | border-radius: 14px; 60 | background: var(--primary-color); 61 | font-size: 32px; 62 | color: var(--white); 63 | position: relative; 64 | z-index: 1; 65 | text-align: center; 66 | margin-bottom: 40px; 67 | 68 | &::before { 69 | content: ""; 70 | position: absolute; 71 | width: 100%; 72 | height: 100%; 73 | top: 0; 74 | left: 0; 75 | border-radius: 14px; 76 | background: var(--primary-color); 77 | opacity: 0.2; 78 | z-index: -1; 79 | @include transform(rotate(23deg)); 80 | @include transition(0.3s); 81 | } 82 | } 83 | 84 | .ud-feature-title { 85 | font-weight: 700; 86 | font-size: 20px; 87 | line-height: 28px; 88 | margin-bottom: 12px; 89 | 90 | @media #{$lg} { 91 | font-size: 18px; 92 | line-height: 26px; 93 | } 94 | } 95 | 96 | .ud-feature-desc { 97 | font-size: 16px; 98 | line-height: 24px; 99 | margin-bottom: 40px; 100 | } 101 | 102 | .ud-feature-link { 103 | font-weight: 500; 104 | color: var(--body-color); 105 | 106 | &:hover { 107 | color: var(--primary-color); 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /assets/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | /* ===== Footer CSS ===== */ 2 | 3 | .ud-footer { 4 | background: var(--heading-color); 5 | padding-top: 100px; 6 | position: relative; 7 | z-index: 1; 8 | overflow: hidden; 9 | 10 | .shape { 11 | position: absolute; 12 | z-index: -1; 13 | 14 | &.shape-1 { 15 | top: 0; 16 | left: 0; 17 | } 18 | 19 | &.shape-2 { 20 | top: 0; 21 | right: 0; 22 | } 23 | 24 | &.shape-3 { 25 | bottom: 0; 26 | right: 0; 27 | } 28 | } 29 | } 30 | 31 | .ud-widget { 32 | margin-bottom: 50px; 33 | 34 | .ud-footer-logo { 35 | max-width: 160px; 36 | display: block; 37 | margin-bottom: 10px; 38 | 39 | img { 40 | width: 100%; 41 | } 42 | } 43 | 44 | .ud-widget-desc { 45 | font-size: 15px; 46 | line-height: 24px; 47 | color: #f3f4fe; 48 | margin-bottom: 30px; 49 | max-width: 260px; 50 | } 51 | 52 | .ud-widget-socials { 53 | display: flex; 54 | align-items: center; 55 | 56 | a { 57 | font-size: 16px; 58 | color: #dddddd; 59 | margin-right: 20px; 60 | 61 | &:hover { 62 | color: var(--primary-color); 63 | } 64 | } 65 | } 66 | 67 | .ud-widget-title { 68 | font-weight: 600; 69 | font-size: 18px; 70 | margin-bottom: 35px; 71 | color: var(--white); 72 | } 73 | 74 | .ud-widget-links { 75 | a { 76 | display: inline-block; 77 | margin-bottom: 12px; 78 | font-size: 15px; 79 | line-height: 30px; 80 | color: #f3f4fe; 81 | 82 | &:hover { 83 | color: var(--primary-color); 84 | padding-left: 10px; 85 | } 86 | } 87 | } 88 | 89 | .ud-widget-brands { 90 | display: flex; 91 | flex-wrap: wrap; 92 | justify-content: space-between; 93 | 94 | a { 95 | display: block; 96 | max-width: 120px; 97 | margin-bottom: 20px; 98 | margin-right: 20px; 99 | 100 | @media #{$laptop} { 101 | max-width: 100px; 102 | } 103 | } 104 | } 105 | } 106 | 107 | .ud-footer-bottom { 108 | padding: 35px 0; 109 | border-top: 1px solid rgba(136, 144, 164, 0.43); 110 | 111 | .ud-footer-bottom-left { 112 | display: flex; 113 | align-items: center; 114 | 115 | @media #{$xs} { 116 | justify-content: center; 117 | } 118 | 119 | a { 120 | font-weight: normal; 121 | font-size: 15px; 122 | color: #f3f4fe; 123 | margin-right: 30px; 124 | display: inline-block; 125 | 126 | @media #{$xs} { 127 | margin: 0px 8px 8px; 128 | } 129 | 130 | &:hover { 131 | color: var(--primary-color); 132 | } 133 | } 134 | } 135 | 136 | .ud-footer-bottom-right { 137 | text-align: right; 138 | font-weight: normal; 139 | font-size: 15px; 140 | color: #f3f4fe; 141 | 142 | a { 143 | color: var(--primary-color); 144 | 145 | &:hover { 146 | text-decoration: underline; 147 | } 148 | } 149 | 150 | @media #{$xs} { 151 | text-align: center; 152 | margin-top: 10px; 153 | } 154 | } 155 | } 156 | -------------------------------------------------------------------------------- /assets/scss/_header.scss: -------------------------------------------------------------------------------- 1 | /* ===== Header CSS ===== */ 2 | .ud-header { 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | z-index: 99; 8 | @include transition(0.3s); 9 | } 10 | 11 | .sticky { 12 | position: fixed; 13 | z-index: 99; 14 | background-color: rgba(255, 255, 255, 0.8); 15 | backdrop-filter: blur(5px); 16 | @include box-shadow(inset 0 -1px 0 0 rgba(0, 0, 0, 0.1)); 17 | @include transition(0.3s); 18 | 19 | & .navbar { 20 | padding: 0; 21 | } 22 | } 23 | 24 | .navbar { 25 | padding: 0px 0; 26 | border-radius: 5px; 27 | position: relative; 28 | @include transition(0.3s); 29 | } 30 | 31 | .navbar-brand { 32 | padding: 0; 33 | 34 | @media #{$md, $xs} { 35 | padding: 5px 0px; 36 | } 37 | 38 | img { 39 | max-width: 160px; 40 | } 41 | } 42 | 43 | .navbar-toggler { 44 | padding: 0; 45 | 46 | & .toggler-icon { 47 | width: 30px; 48 | height: 2px; 49 | background-color: var(--white); 50 | display: block; 51 | margin: 5px 0; 52 | position: relative; 53 | @include transition(0.3s); 54 | } 55 | 56 | &.active { 57 | & .toggler-icon { 58 | &:nth-of-type(1) { 59 | @include transform(rotate(45deg)); 60 | top: 7px; 61 | } 62 | 63 | &:nth-of-type(2) { 64 | opacity: 0; 65 | } 66 | 67 | &:nth-of-type(3) { 68 | @include transform(rotate(135deg)); 69 | top: -7px; 70 | } 71 | } 72 | } 73 | } 74 | 75 | .navbar-collapse { 76 | @media #{$md, $xs} { 77 | position: absolute; 78 | top: 100%; 79 | right: 0; 80 | max-width: 300px; 81 | width: 100%; 82 | background-color: var(--white); 83 | z-index: 9; 84 | @include box-shadow(0px 15px 20px 0px rgba(0, 0, 0, 0.1)); 85 | padding: 0px; 86 | display: none; 87 | border-radius: 5px; 88 | 89 | &.show { 90 | display: block; 91 | } 92 | } 93 | } 94 | 95 | .navbar-nav { 96 | @media #{$md, $xs} { 97 | padding: 20px 30px; 98 | } 99 | 100 | & .nav-item { 101 | position: relative; 102 | padding: 0px 20px; 103 | 104 | @media #{$lg} { 105 | padding: 0px 12px; 106 | } 107 | 108 | @media #{$md, $xs} { 109 | padding: 0px; 110 | } 111 | 112 | & > a { 113 | font-size: 16px; 114 | font-weight: 400; 115 | color: var(--white); 116 | @include transition(0.3s); 117 | padding: 25px 8px; 118 | position: relative; 119 | 120 | @media #{$md, $xs} { 121 | display: block; 122 | padding: 8px 0; 123 | color: var(--heading-color); 124 | } 125 | 126 | &:hover, 127 | &.active { 128 | color: var(--white); 129 | opacity: 0.5; 130 | 131 | @media #{$md, $xs} { 132 | color: var(--primary-color); 133 | opacity: 1; 134 | } 135 | } 136 | } 137 | 138 | .ud-submenu { 139 | position: absolute; 140 | width: 250px; 141 | background: var(--white); 142 | top: 110%; 143 | padding: 20px 30px; 144 | box-shadow: 0 15px 44px rgba(140, 140, 140, 0.18); 145 | border-radius: 5px; 146 | opacity: 0; 147 | visibility: hidden; 148 | @include transition(0.3s); 149 | 150 | @media #{$md, $xs} { 151 | position: static; 152 | box-shadow: none; 153 | width: 100%; 154 | padding: 0px; 155 | opacity: 1; 156 | visibility: visible; 157 | display: none; 158 | } 159 | 160 | &.show { 161 | display: block; 162 | } 163 | 164 | .ud-submenu-link { 165 | padding: 7px 0; 166 | color: var(--heading-color); 167 | font-size: 14px; 168 | 169 | &:hover { 170 | color: var(--primary-color); 171 | } 172 | } 173 | } 174 | 175 | &:hover { 176 | & > a { 177 | color: var(--white); 178 | opacity: 0.5; 179 | 180 | @media #{$md, $xs} { 181 | color: var(--primary-color); 182 | opacity: 1; 183 | } 184 | } 185 | 186 | & > .ud-submenu { 187 | opacity: 1; 188 | visibility: visible; 189 | top: 100%; 190 | } 191 | } 192 | 193 | &.nav-item-has-children { 194 | & > a { 195 | position: relative; 196 | 197 | &::after { 198 | content: ""; 199 | box-sizing: border-box; 200 | position: absolute; 201 | width: 10px; 202 | height: 10px; 203 | border-bottom: 2px solid; 204 | border-right: 2px solid; 205 | transform: rotate(45deg) translateY(-50%); 206 | right: -15px; 207 | top: 50%; 208 | margin-top: -2px; 209 | 210 | @media #{$md, $xs} { 211 | right: 5px; 212 | } 213 | } 214 | } 215 | } 216 | } 217 | } 218 | 219 | .navbar-btn { 220 | @media #{$md, $xs} { 221 | position: absolute; 222 | top: 50%; 223 | right: 50px; 224 | @include transform(translateY(-50%)); 225 | } 226 | 227 | .ud-main-btn { 228 | padding: 8px 16px; 229 | background: transparent; 230 | } 231 | 232 | .ud-login-btn { 233 | &:hover { 234 | opacity: 0.5; 235 | } 236 | } 237 | 238 | .ud-white-btn { 239 | background: rgba(255, 255, 255, 0.2); 240 | 241 | &:hover { 242 | background: rgba(255, 255, 255, 1); 243 | color: var(--heading-color); 244 | } 245 | } 246 | } 247 | 248 | .sticky { 249 | & .navbar-toggler { 250 | & .toggler-icon { 251 | background-color: var(--heading-color); 252 | } 253 | } 254 | 255 | & .navbar-nav { 256 | & .nav-item { 257 | &:hover { 258 | & > a { 259 | color: var(--primary-color); 260 | opacity: 1; 261 | } 262 | } 263 | 264 | & a { 265 | color: var(--heading-color); 266 | 267 | &.active, 268 | &:hover { 269 | color: var(--primary-color); 270 | opacity: 1; 271 | } 272 | } 273 | } 274 | } 275 | 276 | .navbar-btn { 277 | .ud-main-btn { 278 | &.ud-login-btn { 279 | color: var(--heading-color); 280 | 281 | &:hover { 282 | color: var(--primary-color); 283 | opacity: 1; 284 | } 285 | } 286 | } 287 | 288 | .ud-white-btn { 289 | background: var(--primary-color); 290 | color: var(--white); 291 | 292 | &:hover { 293 | background: var(--heading-color); 294 | } 295 | } 296 | } 297 | } 298 | -------------------------------------------------------------------------------- /assets/scss/_hero.scss: -------------------------------------------------------------------------------- 1 | /* ===== Hero CSS ===== */ 2 | 3 | .ud-hero { 4 | background: var(--primary-color); 5 | padding-top: 180px; 6 | 7 | @media #{$md} { 8 | padding-top: 160px; 9 | } 10 | 11 | @media #{$xs} { 12 | padding-top: 130px; 13 | } 14 | } 15 | 16 | .ud-hero-content { 17 | max-width: 780px; 18 | margin: auto; 19 | margin-bottom: 30px; 20 | 21 | .ud-hero-title { 22 | color: var(--white); 23 | font-weight: 700; 24 | font-size: 45px; 25 | line-height: 60px; 26 | text-align: center; 27 | margin-bottom: 30px; 28 | 29 | @media #{$md} { 30 | font-size: 38px; 31 | line-height: 50px; 32 | } 33 | 34 | @media #{$xs} { 35 | font-size: 26px; 36 | line-height: 38px; 37 | } 38 | } 39 | 40 | .ud-hero-desc { 41 | font-weight: normal; 42 | font-size: 20px; 43 | line-height: 35px; 44 | text-align: center; 45 | color: var(--white); 46 | opacity: 0.8; 47 | max-width: 600px; 48 | margin: auto; 49 | margin-bottom: 30px; 50 | 51 | @media #{$xs} { 52 | font-size: 16px; 53 | line-height: 30px; 54 | } 55 | } 56 | } 57 | 58 | .ud-hero-buttons { 59 | display: flex; 60 | align-items: center; 61 | justify-content: center; 62 | 63 | .ud-main-btn { 64 | margin: 8px; 65 | 66 | @media #{$xs} { 67 | margin: 5px; 68 | } 69 | } 70 | 71 | .ud-main-btn { 72 | @media #{$xs} { 73 | padding: 12px 16px; 74 | } 75 | } 76 | 77 | .ud-white-btn { 78 | background: var(--white); 79 | color: var(--heading-color); 80 | 81 | &:hover { 82 | box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2); 83 | background: #fefefe; 84 | color: var(--primary-color); 85 | } 86 | } 87 | 88 | .ud-link-btn { 89 | &:hover { 90 | color: var(--white); 91 | background: transparent; 92 | opacity: 0.5; 93 | } 94 | } 95 | } 96 | 97 | .ud-hero-brands-wrapper { 98 | text-align: center; 99 | margin-bottom: 40px; 100 | 101 | img { 102 | transition: all 0.3s; 103 | opacity: 0.5; 104 | max-width: 250px; 105 | 106 | &:hover { 107 | opacity: 1; 108 | } 109 | } 110 | } 111 | 112 | .ud-hero-image { 113 | max-width: 845px; 114 | margin: auto; 115 | text-align: center; 116 | position: relative; 117 | z-index: 1; 118 | 119 | img { 120 | max-width: 100%; 121 | text-align: center; 122 | } 123 | 124 | .shape { 125 | position: absolute; 126 | z-index: -1; 127 | 128 | &.shape-1 { 129 | bottom: 0; 130 | left: -30px; 131 | } 132 | 133 | &.shape-2 { 134 | top: -20px; 135 | right: -20px; 136 | } 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /assets/scss/_login.scss: -------------------------------------------------------------------------------- 1 | /* ====== Login CSS ====== */ 2 | .ud-login { 3 | padding-top: 80px; 4 | padding-bottom: 80px; 5 | } 6 | 7 | .ud-login-wrapper { 8 | max-width: 500px; 9 | margin: auto; 10 | background: var(--white); 11 | text-align: center; 12 | padding: 60px; 13 | box-shadow: 0px 10px 35px rgba(0, 0, 0, 0.05); 14 | 15 | .ud-login-logo { 16 | margin-bottom: 30px; 17 | } 18 | } 19 | 20 | .ud-login-form { 21 | .ud-form-group { 22 | margin-bottom: 25px; 23 | 24 | input { 25 | width: 100%; 26 | border: 2px solid #dddddd; 27 | border-radius: 4px; 28 | padding: 12px 24px; 29 | background: #fcfdfe; 30 | color: var(--body-color); 31 | 32 | &:focus { 33 | border-color: var(--primary-color); 34 | } 35 | } 36 | } 37 | } 38 | 39 | .ud-socials-connect { 40 | padding-top: 10px; 41 | padding-bottom: 30px; 42 | 43 | p { 44 | font-size: 16px; 45 | color: var(--body-color); 46 | margin-bottom: 10px; 47 | } 48 | 49 | ul { 50 | display: flex; 51 | align-items: center; 52 | margin-left: -10px; 53 | margin-right: -10px; 54 | 55 | li { 56 | width: 100%; 57 | 58 | a { 59 | height: 45px; 60 | background: var(--primary-color); 61 | display: flex; 62 | align-items: center; 63 | justify-content: center; 64 | margin: 10px; 65 | border-radius: 6px; 66 | color: var(--white); 67 | font-size: 20px; 68 | 69 | &.facebook { 70 | background: #4064ac; 71 | 72 | &:hover { 73 | background: #315294; 74 | } 75 | } 76 | 77 | &.twitter { 78 | background: #1c9cea; 79 | 80 | &:hover { 81 | background: #0f8bd8; 82 | } 83 | } 84 | 85 | &.google { 86 | background: #d64937; 87 | 88 | &:hover { 89 | background: #c53b29; 90 | } 91 | } 92 | } 93 | } 94 | } 95 | } 96 | 97 | .forget-pass { 98 | font-size: 16px; 99 | color: var(--body-color); 100 | margin-bottom: 8px; 101 | } 102 | 103 | .signup-option { 104 | color: var(--body-color); 105 | font-size: 16px; 106 | 107 | a { 108 | color: var(--primary-color); 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /assets/scss/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin transition($time) { 2 | -webkit-transition: all $time ease-out 0s; 3 | -moz-transition: all $time ease-out 0s; 4 | -ms-transition: all $time ease-out 0s; 5 | -o-transition: all $time ease-out 0s; 6 | transition: all $time ease-out 0s; 7 | } 8 | 9 | 10 | @mixin transform($value) { 11 | -webkit-transform: $value; 12 | -moz-transform: $value; 13 | -ms-transform: $value; 14 | -o-transform: $value; 15 | transform: $value; 16 | } 17 | 18 | @mixin user-select($value) { 19 | -webkit-user-select: $value; 20 | -moz-user-select: $value; 21 | -ms-user-select: $value; 22 | user-select: $value; 23 | } 24 | 25 | 26 | @mixin box-sizing($value) { 27 | -webkit-box-sizing: $value; 28 | -moz-box-sizing: $value; 29 | box-sizing: $value; 30 | } 31 | 32 | 33 | @mixin animation($value) { 34 | -webkit-animation: $value; 35 | -moz-animation: $value; 36 | -o-animation: $value; 37 | animation: $value; 38 | } 39 | 40 | 41 | @mixin animation-delay($value) { 42 | -webkit-animation-delay: $value; 43 | -moz-animation-delay: $value; 44 | -o-animation-delay: $value; 45 | animation-delay: $value; 46 | } 47 | 48 | 49 | 50 | @mixin box-shadow($value) { 51 | -webkit-box-shadow: $value; 52 | -moz-box-shadow: $value; 53 | box-shadow: $value; 54 | } 55 | 56 | 57 | // Placeholder Mixins 58 | @mixin placeholder { 59 | &::placeholder { @content; } 60 | &::-moz-placeholder { @content; } 61 | &::-moz-placeholder { @content; } 62 | &::-webkit-input-placeholder { @content; } 63 | } 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /assets/scss/_pricing.scss: -------------------------------------------------------------------------------- 1 | /* ===== Pricing CSS ===== */ 2 | 3 | .ud-pricing { 4 | padding-top: 120px; 5 | padding-bottom: 90px; 6 | 7 | @media #{$xs} { 8 | padding-top: 80px; 9 | padding-bottom: 40px; 10 | } 11 | } 12 | 13 | .ud-single-pricing { 14 | margin-bottom: 40px; 15 | background: var(--white); 16 | border: 2px solid #d4deff; 17 | border-radius: 8px; 18 | text-align: center; 19 | padding: 45px 30px; 20 | position: relative; 21 | 22 | &.active { 23 | background: linear-gradient(180deg, #3056d3 0%, #179bee 100%); 24 | border: none; 25 | padding: 55px 30px; 26 | 27 | .ud-pricing-header { 28 | h3, 29 | h4 { 30 | color: var(--white); 31 | } 32 | } 33 | .ud-pricing-body { 34 | li { 35 | color: var(--white); 36 | } 37 | } 38 | } 39 | 40 | &.first-item::after, 41 | &.last-item::after { 42 | content: ""; 43 | position: absolute; 44 | width: 55px; 45 | height: 55px; 46 | z-index: 1; 47 | } 48 | 49 | &.first-item::after { 50 | background: var(--primary-color); 51 | left: -2px; 52 | bottom: -2px; 53 | border-radius: 0px 55px 0px 8px; 54 | } 55 | 56 | &.last-item::after { 57 | background: #13c296; 58 | top: -2px; 59 | right: -2px; 60 | border-radius: 0px 8px 0px 55px; 61 | } 62 | 63 | .ud-popular-tag { 64 | display: inline-block; 65 | padding: 10px 25px; 66 | background: var(--white); 67 | border-radius: 30px; 68 | color: var(--primary-color); 69 | margin-bottom: 20px; 70 | font-weight: 600; 71 | } 72 | 73 | .ud-pricing-header { 74 | h3 { 75 | font-weight: 500; 76 | font-size: 15px; 77 | margin-bottom: 8px; 78 | } 79 | h4 { 80 | font-weight: 600; 81 | font-size: 26px; 82 | color: var(--primary-color); 83 | margin-bottom: 40px; 84 | } 85 | } 86 | 87 | .ud-pricing-body { 88 | margin-bottom: 40px; 89 | 90 | li { 91 | font-weight: 500; 92 | font-size: 15px; 93 | margin-bottom: 18px; 94 | } 95 | } 96 | 97 | .ud-main-btn { 98 | border-radius: 30px; 99 | padding: 15px 40px; 100 | } 101 | 102 | .ud-border-btn { 103 | border: 1px solid #d4deff; 104 | color: var(--primary-color); 105 | background: var(--white); 106 | 107 | &:hover { 108 | color: var(--white); 109 | border-color: var(--primary-color); 110 | background: var(--primary-color); 111 | } 112 | } 113 | .ud-white-btn { 114 | background: var(--white); 115 | color: var(--heading-color); 116 | 117 | &:hover { 118 | color: var(--white); 119 | background: var(--heading-color); 120 | } 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /assets/scss/_team.scss: -------------------------------------------------------------------------------- 1 | /* ===== Team CSS ===== */ 2 | .ud-team { 3 | padding-top: 120px; 4 | padding-bottom: 80px; 5 | 6 | @media #{$xs} { 7 | padding-top: 80px; 8 | padding-bottom: 40px; 9 | } 10 | } 11 | 12 | .ud-single-team { 13 | margin-bottom: 40px; 14 | 15 | .ud-team-image-wrapper { 16 | width: 170px; 17 | height: 170px; 18 | position: relative; 19 | margin: 0px auto 25px; 20 | } 21 | .ud-team-image { 22 | border-radius: 50%; 23 | 24 | img { 25 | width: 100%; 26 | border-radius: 50%; 27 | } 28 | } 29 | 30 | .shape { 31 | position: absolute; 32 | z-index: -1; 33 | 34 | &.shape-1 { 35 | top: 0; 36 | left: 0; 37 | } 38 | &.shape-2 { 39 | bottom: 0; 40 | right: 0; 41 | } 42 | } 43 | 44 | .ud-team-info { 45 | text-align: center; 46 | margin-bottom: 20px; 47 | 48 | h5 { 49 | font-weight: 500; 50 | font-size: 18px; 51 | text-transform: capitalize; 52 | margin-bottom: 10px; 53 | } 54 | 55 | h6 { 56 | font-weight: 500; 57 | font-size: 12px; 58 | color: var(--body-color); 59 | } 60 | } 61 | 62 | .ud-team-socials { 63 | display: flex; 64 | align-items: center; 65 | justify-content: center; 66 | 67 | a { 68 | width: 32px; 69 | height: 32px; 70 | display: flex; 71 | align-items: center; 72 | justify-content: center; 73 | margin: 0px 10px; 74 | color: #cdced6; 75 | 76 | &:hover { 77 | color: var(--primary-color); 78 | } 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /assets/scss/_testimonials.scss: -------------------------------------------------------------------------------- 1 | /* ===== Testimonials CSS ===== */ 2 | .ud-testimonials { 3 | padding-top: 120px; 4 | 5 | @media #{$xs} { 6 | padding-top: 80px; 7 | } 8 | } 9 | 10 | .ud-single-testimonial { 11 | padding: 30px; 12 | box-shadow: 0px 60px 120px -20px #ebeffd; 13 | background: var(--white); 14 | margin-bottom: 50px; 15 | 16 | .ud-testimonial-ratings { 17 | margin-bottom: 10px; 18 | 19 | i { 20 | color: #fbb040; 21 | } 22 | } 23 | 24 | .ud-testimonial-content { 25 | margin-bottom: 25px; 26 | 27 | p { 28 | font-size: 16px; 29 | line-height: 30px; 30 | color: #637381; 31 | } 32 | } 33 | 34 | .ud-testimonial-info { 35 | display: flex; 36 | align-items: center; 37 | 38 | .ud-testimonial-image { 39 | width: 50px; 40 | height: 50px; 41 | border-radius: 50%; 42 | overflow: hidden; 43 | margin-right: 20px; 44 | } 45 | 46 | .ud-testimonial-meta { 47 | h4 { 48 | font-weight: 600; 49 | font-size: 14px; 50 | } 51 | 52 | p { 53 | font-size: 12px; 54 | color: #969696; 55 | } 56 | } 57 | } 58 | } 59 | 60 | .ud-brands { 61 | .ud-title { 62 | margin-bottom: 30px; 63 | 64 | h6 { 65 | font-weight: normal; 66 | font-size: 12px; 67 | color: var(--body-color); 68 | display: inline-block; 69 | position: relative; 70 | 71 | &::after { 72 | content: ""; 73 | position: absolute; 74 | width: 30px; 75 | height: 1px; 76 | background: #afb2b5; 77 | right: -40px; 78 | top: 50%; 79 | } 80 | } 81 | } 82 | 83 | .ud-brands-logo { 84 | display: flex; 85 | align-items: center; 86 | flex-wrap: wrap; 87 | margin-right: -40px; 88 | 89 | .ud-single-logo { 90 | margin-right: 40px; 91 | margin-bottom: 20px; 92 | max-width: 140px; 93 | 94 | &:hover { 95 | img { 96 | filter: none; 97 | } 98 | } 99 | 100 | img { 101 | filter: grayscale(1); 102 | @include transition(0.3s); 103 | } 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Responsive Variables 2 | $xl-desktop: "only screen and (min-width: 1921px)"; 3 | $desktop: "only screen and (min-width: 1400px) and (max-width: 1920px)"; 4 | $laptop: "only screen and (min-width: 1200px) and (max-width: 1399px)"; 5 | $lg: "only screen and (min-width: 992px) and (max-width: 1199px)"; 6 | $md: "only screen and (min-width: 768px) and (max-width: 991px)"; 7 | $xs: "(max-width: 767px)"; 8 | $sm: "only screen and (min-width: 576px) and (max-width: 767px)"; 9 | -------------------------------------------------------------------------------- /assets/scss/ud-styles.scss: -------------------------------------------------------------------------------- 1 | /* ======= 2 | 3 | Template Name: Play Bootstrap 4 | Author: UIdeck 5 | Author URI: https://uideck.com/ 6 | Support: https://github.com/uideck/ 7 | Version: 1.0 8 | 9 | ======== */ 10 | 11 | @import "variables"; 12 | @import "mixin"; 13 | @import "common"; 14 | @import "header"; 15 | @import "hero"; 16 | @import "features"; 17 | @import "about"; 18 | @import "pricing"; 19 | @import "faq"; 20 | @import "testimonials"; 21 | @import "team"; 22 | @import "contact"; 23 | @import "footer"; 24 | @import "banner"; 25 | @import "login"; 26 | @import "blog"; 27 | @import "blog-details"; 28 | @import "404"; 29 | // @import "default"; 30 | --------------------------------------------------------------------------------