HTML Website Template Download

Open File

You can view the code inside the file by opening it.

Style.css

/* ========================================================================
    Table Contents
  ========================================================================== 

  -on/Off switch
  -ripple effect 
  -Slider
  -Slideshow
  -Transform Origin
  -Animation
  -Transitions
  -Simplebar

*/
 

[hidden] {
  display: none !important;
}


 /* ========================================================================
  On/Off Switch
 ========================================================================== */
 
.switch-button {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  cursor: pointer;
  border-radius: 50px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  margin: 0 7px 0 0;
  top: 4px;
  position: absolute;
  top: 2px;
  left: 0;
}
   
.switch input {
  display: none;
}

.switch.interactive-effect input:checked + .switch-button:before {
  -webkit-animation: switch-shadow-color 0.4s;
  animation: switch-shadow-color 0.4s;
}

.switch.interactive-effect .switch-button:before {
  -webkit-animation: switch-shadow 0.4s;
  animation: switch-shadow 0.4s;
}

@-webkit-keyframes switch-shadow {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
  }
}

@keyframes switch-shadow {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
  }
  100% {
    -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
  }
}

@-webkit-keyframes switch-shadow-color {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6);
    box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6);
  }
  100% {
    -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
  }
}

@keyframes switch-shadow-color {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6);
    box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6);
  }
  100% {
    -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
  }
}

.switch-button:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  bottom: 2px;
  left: 2px;
  -webkit-transition: 0.4s, -webkit-box-shadow 0.3s;
  transition: 0.4s, -webkit-box-shadow 0.3s;
  transition: 0.4s, box-shadow 0.3s;
  transition: 0.4s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
  border-radius: 50px;
}

input:checked + .switch-button:before {
  -webkit-transform: translateX(14px);
  transform: translateX(14px);
}



/* ========================================================================
   Ripple Effect
 ========================================================================== */
 
.ripple-effect-dark {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.ripple-effect {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.ripple-effect span.ripple-overlay {
  -webkit-animation: ripple 0.9s;
  animation: ripple 0.9s;
  border-radius: 100%;
  background: #fff;
  height: 12px;
  position: absolute;
  width: 12px;
  line-height: 12px;
  opacity: 0.1;
  pointer-events: none;
}

.ripple-effect-dark span.ripple-overlay {
  -webkit-animation: ripple 0.9s;
  animation: ripple 0.9s;
  border-radius: 100%;
  background: #fff;
  height: 12px;
  position: absolute;
  width: 12px;
  line-height: 12px;
  opacity: 0.1;
  pointer-events: none;
  background: #000;
  opacity: 0.07;
}

@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(4);
    transform: scale(4);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(40);
    transform: scale(40);
  }
}

@keyframes ripple {
  0% {
    -webkit-transform: scale(4);
    transform: scale(4);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(40);
    transform: scale(40);
  }
} 


/* ========================================================================
    Component: modal
========================================================================== */
.uk-modal {
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.15s linear; 
} 
.uk-modal-dialog {
  transition: 0.3s linear;
  transition-property: opacity, transform;
  box-sizing: border-box; 
} 

/* ========================================================================
    Component: Slider and Slideshow
 ========================================================================== */
/*  Prevent tab highlighting on iOS. */
.uk-slider , .uk-slideshow { 
  -webkit-tap-highlight-color: transparent;
} 
.uk-slider-items , .uk-slideshow-items{ 
  touch-action: pan-y;
}
/*  Prevent displaying the callout information on iOS.*/
.uk-slider-items , .uk-slideshow-items { 
  -webkit-touch-callout: none;
} 

/* ========================================================================
    Component: Slideshow
========================================================================== */
/* Optimize animation */
.uk-slideshow-items > * { 
  will-change: transform, opacity;
} 


/* Transform Origin
========================================================================== */
.uk-transform-origin-top-left {
  transform-origin: 0 0;
}
.uk-transform-origin-top-center {
  transform-origin: 50% 0;
}
.uk-transform-origin-top-right {
  transform-origin: 100% 0;
}
.uk-transform-origin-center-left {
  transform-origin: 0 50%;
}
.uk-transform-origin-center-right {
  transform-origin: 100% 50%;
}
.uk-transform-origin-bottom-left {
  transform-origin: 0 100%;
}
.uk-transform-origin-bottom-center {
  transform-origin: 50% 100%;
}
.uk-transform-origin-bottom-right {
  transform-origin: 100% 100%;
}

.....

Uikit.js

/*! UIkit 3.2.1 | http://www.getuikit.com | (c) 2014 - 2019 YOOtheme | MIT License */

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define('uikit', factory) :
    (global = global || self, global.UIkit = factory());
}(this, function () { 'use strict';

    var objPrototype = Object.prototype;
    var hasOwnProperty = objPrototype.hasOwnProperty;

    function hasOwn(obj, key) {
        return hasOwnProperty.call(obj, key);
    }

    var hyphenateCache = {};
    var hyphenateRe = /([a-z\d])([A-Z])/g;

    function hyphenate(str) {

        if (!(str in hyphenateCache)) {
            hyphenateCache[str] = str
                .replace(hyphenateRe, '$1-$2')
                .toLowerCase();
        }

        return hyphenateCache[str];
    }

    var camelizeRe = /-(\w)/g;

    function camelize(str) {
        return str.replace(camelizeRe, toUpper);
    }

    function toUpper(_, c) {
        return c ? c.toUpperCase() : '';
    }

    function ucfirst(str) {
        return str.length ? toUpper(null, str.charAt(0)) + str.slice(1) : '';
    }

    var strPrototype = String.prototype;
    var startsWithFn = strPrototype.startsWith || function (search) { return this.lastIndexOf(search, 0) === 0; };

    function startsWith(str, search) {
        return startsWithFn.call(str, search);
    }

    var endsWithFn = strPrototype.endsWith || function (search) { return this.substr(-search.length) === search; };

    function endsWith(str, search) {
        return endsWithFn.call(str, search);
    }

    var arrPrototype = Array.prototype;

    var includesFn = function (search, i) { return ~this.indexOf(search, i); };
    var includesStr = strPrototype.includes || includesFn;
    var includesArray = arrPrototype.includes || includesFn;

    function includes(obj, search) {
        return obj && (isString(obj) ? includesStr : includesArray).call(obj, search);
    }

    var findIndexFn = arrPrototype.findIndex || function (predicate) {
        var arguments$1 = arguments;

        for (var i = 0; i < this.length; i++) {
            if (predicate.call(arguments$1[1], this[i], i, this)) {
                return i;
            }
        }
        return -1;
    };

    function findIndex(array, predicate) {
        return findIndexFn.call(array, predicate);
    }

    var isArray = Array.isArray;

    function isFunction(obj) {
        return typeof obj === 'function';
    }

    function isObject(obj) {
        return obj !== null && typeof obj === 'object';
    }

    var toString = objPrototype.toString;
    function isPlainObject(obj) {
        return toString.call(obj) === '[object Object]';
    }

    function isWindow(obj) {
        return isObject(obj) && obj === obj.window;
    }

    function isDocument(obj) {
        return isObject(obj) && obj.nodeType === 9;
    }

    function isJQuery(obj) {
        return isObject(obj) && !!obj.jquery;
    }

    function isNode(obj) {
        return obj instanceof Node || isObject(obj) && obj.nodeType >= 1;
    }

    function isNodeCollection(obj) {
        return toString.call(obj).match(/^\[object (NodeList|HTMLCollection)\]$/);
    }

    function isBoolean(value) {
        return typeof value === 'boolean';
    }

    function isString(value) {
        return typeof value === 'string';
    }

    function isNumber(value) {
        return typeof value === 'number';
    }

    function isNumeric(value) {
        return isNumber(value) || isString(value) && !isNaN(value - parseFloat(value));
    }

    function isEmpty(obj) {
        return !(isArray(obj)
            ? obj.length
            : isObject(obj)
                ? Object.keys(obj).length
                : false
        );
    }

    function isUndefined(value) {
        return value === void 0;
    }

    function toBoolean(value) {
        return isBoolean(value)
            ? value
            : value === 'true' || value === '1' || value === ''
                ? true
                : value === 'false' || value === '0'
                    ? false
                    : value;
    }

    function toNumber(value) {
        var number = Number(value);
        return !isNaN(number) ? number : false;
    }

    function toFloat(value) {
        return parseFloat(value) || 0;
    }

    function toNode(element) {
        return isNode(element) || isWindow(element) || isDocument(element)
            ? element
            : isNodeCollection(element) || isJQuery(element)
                ? element[0]
                : isArray(element)
                    ? toNode(element[0])
                    : null;
    }

    function toNodes(element) {
        return isNode(element)
            ? [element]
            : isNodeCollection(element)
                ? arrPrototype.slice.call(element)
                : isArray(element)
                    ? element.map(toNode).filter(Boolean)
                    : isJQuery(element)
                        ? element.toArray()
                        : [];
    }

    function toList(value) {
        return isArray(value)
            ? value
            : isString(value)
                ? value.split(/,(?![^(]*\))/).map(function (value) { return isNumeric(value)
                    ? toNumber(value)
                    : toBoolean(value.trim()); })
                : [value];
    }

    function toMs(time) {
        return !time
            ? 0
            : endsWith(time, 'ms')
                ? toFloat(time)
                : toFloat(time) * 1000;
    }

    function isEqual(value, other) {
        return value === other
            || isObject(value)
            && isObject(other)
            && Object.keys(value).length === Object.keys(other).length
            && each(value, function (val, key) { return val === other[key]; });
    }

    function swap(value, a, b) {
        return value.replace(new RegExp((a + "|" + b), 'mg'), function (match) {
            return match === a ? b : a;
        });
    }

    var assign = Object.assign || function (target) {
        var args = [], len = arguments.length - 1;
        while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];

        target = Object(target);
        for (var i = 0; i < args.length; i++) {
            var source = args[i];
            if (source !== null) {
                for (var key in source) {
                    if (hasOwn(source, key)) {
                        target[key] = source[key];
                    }
                }
            }
        }
        return target;
    };

    function last(array) {
        return array[array.length - 1];
    }

    function each(obj, cb) {
        for (var key in obj) {
            if (false === cb(obj[key], key)) {
                return false;
            }
        }
        return true;
    }

    function sortBy(array, prop) {
        return array.sort(function (ref, ref$1) {
                var propA = ref[prop]; if ( propA === void 0 ) propA = 0;
                var propB = ref$1[prop]; if ( propB === void 0 ) propB = 0;

                return propA > propB
                ? 1
                : propB > propA
                    ? -1
                    : 0;
        }
        );
    }

    function uniqueBy(array, prop) {
        var seen = new Set();
        return array.filter(function (ref) {
            var check = ref[prop];

            return seen.has(check)
            ? false
            : seen.add(check) || true;
        } // IE 11 does not return the Set object
        );
    }
}
.....

Script.js

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark')
    } else {
    document.documentElement.classList.remove('dark')
    }

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')



// add post upload image 
document.getElementById('addPostUrl').addEventListener('change', function(){
if (this.files[0] ) {
    var picture = new FileReader();
    picture.readAsDataURL(this.files[0]);
    picture.addEventListener('load', function(event) {
    document.getElementById('addPostImage').setAttribute('src', event.target.result);
    document.getElementById('addPostImage').style.display = 'block';
    });
}
});


// Create Status upload image 
document.getElementById('createStatusUrl').addEventListener('change', function(){
if (this.files[0] ) {
    var picture = new FileReader();
    picture.readAsDataURL(this.files[0]);
    picture.addEventListener('load', function(event) {
    document.getElementById('createStatusImage').setAttribute('src', event.target.result);
    document.getElementById('createStatusImage').style.display = 'block';
    });
}
});


// create product upload image
document.getElementById('createProductUrl').addEventListener('change', function(){
if (this.files[0] ) {
    var picture = new FileReader();
    picture.readAsDataURL(this.files[0]);
    picture.addEventListener('load', function(event) {
    document.getElementById('createProductImage').setAttribute('src', event.target.result);
    document.getElementById('createProductImage').style.display = 'block';
    });
}
});

Sample.html

                        

 

    
    
    

    
    

    
    HTML Website Template Download


    
   
    
    
      
    
  
    

        
        

            

                
                
                    

                        
                         

                        
                        
                        
                      
                    
                

                
                

                    
                    
                        
                        
                         Home 
                    

                    .........

                

            
            
        


        

        

            
            


                
                
                   
                    
                        
                        
                    

                

               
                
                    
                    
                         
                            
                                
                            
                        
                    
                
                    
                         
                            
                                
                            
                        
                    
                    
                    .........

tailwind.css

                        
@tailwind base;
@tailwind components;
@tailwind utilities;

/* google font */
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap);

@layer base {

    :root { 
        --w-side:               290px; 
        --w-side-md:            240px; 
        --w-side-small:         73px; 

        --color-primary:        219 39 119; 
        --color-primary-soft:   252 231 243; 
        --color-secondery:      241 245 249; 
        --color-bgbody:         246 249 251; 
    } 
    
    
    html {
        font-family: inter, system-ui, sans-serif;
    }

    /* Basic */
    body {
        @apply text-gray-600 font-normal bg-bgbody dark:bg-dark1 dark:text-white  
    }

    body:has(#mood.active) { @apply  overflow-hidden }

    /* Basic */ 
    input[type='text'],
    input[type='password'],
    input[type='email'], 
    input[type='number'],
    input[type='url'],
    input[type='date'],
    select, 
    textarea{
        @apply rounded-md py-2 px-4 text-sm font-medium !text-gray-600 dark:!text-white/90 placeholder:!text-gray-600 dark:placeholder:!text-white/90
    }
 
    input[type='text'],
    input[type='password'],
    input[type='email'],
    input[type='number'],
    input[type='url'],
    input[type='date'],
    input[type='datetime-local'],
    input[type='month'],
    input[type='week'],
    input[type='time'],
    input[type='search'],
    input[type='tel'],
    input[type='checkbox'],
    input[type='radio'],
    select,
    select[multiple],
    textarea {
        @apply bg-slate-100 border-transparent focus:ring-black focus:border-transparent dark:bg-dark3
    }                           

    select,
    select[multiple]                       {  @apply  focus:!ring-transparent focus:shadow}

    input[type='radio'],
    input[type='checkbox']                 {  @apply !text-sky-600 bg-slate-100 focus:ring-sky-600}

    .switch-button                         { @apply bg-slate-200 dark:bg-slate-800}
    .switch-button:before                  { @apply bg-white dark:bg-sky-600}
    input:checked + .switch-button         { @apply bg-sky-600 dark:bg-blue-300}
    input:checked + .switch-button:before  { @apply dark:bg-sky-600}

    
    
    .........
}

Instello

Open File

Style.css

Uikit.js

Script.js

Sample.html

tailwind.css

tailwind.config.js