Neşeli Web – Web Tasarım & Yazılım

Giriş

Neşeli Web'e Hoş Geldiniz – Neşeli Web Tasarım & Yazılım ve İnteraktif Ajans Hizmetleri

Neşeli Tema - Modern Web Site Şablonu, Bu şablon formatlarıyla, web sayfasında bir varlık oluşturmak ve birinin dikkatini çekmek çok kolaydır Çünkü şablon HTML5, CSS3, Bootstrap 5 çerçevesi ve Sass kullanılarak oluşturulmuştur. Bu nedenle lütfen şablonla çalışmaya başlamadan önce belgelere hızlıca göz atın, böylece web sitenizi kolayca oluşturabilirsiniz.

Şablon Tasarımımızı Beğendiyseniz Lütfen Puan Vermeyi Unutmayın. Çok teşekkür ederiz..! 😊

Şablon Açıklaması

Neşeli Tema, modern ve minimal tasarımı kullanan Modern bir Web Site Şablonudur. Tamamen esnek, kullanıcı dostu ve duyarlıdır. Hostma Modern şablonu, Masaüstü Bilgisayarlarda, Tabletlerde ve Mobil Cihazlarda harika görünen HTML 5, SASS ve Bootstrap 5 ile güçlendirilmiştir. Bu Şablon 45+ HTML Sayfası İçerir. Bu şablon özelleştirmesi için çok çalışmanıza gerek yok. Biz zaten tasarladık ve web sitenizi kolayca istediğiniz gibi tasarlayabilirsiniz. Bu şablon Bootstrap 5 çerçevesini kullanıyor. Bu şablonu satın aldıktan sonra Tüm HTML dosyalarını, CSS, Scss ve JS Dosyalarını alacaksınız.

Süper temiz, düz kullanıcı arayüzü, yönetici Arka uç tasarımı, kolay özelleştirilebilir bileşenler ve widget'lara sahiptir. Şablon harika bir benzersiz tasarımla birlikte gelir, ayrıca şablonu kolayca tasarlayabilmenizi sağlarız.

Her tür cihaz için tamamen duyarlı bir düzendir. Tüm önemli web tarayıcılarında, Masaüstü, iPhone, iPad, Tablet ve diğer tüm akıllı telefon cihazlarında çalışır.

Neşeli Tema - Modern Web Site Şablonu olarak satın aldığınızda, gelecekteki tüm güncellemeleri ücretsiz olarak indirebileceksiniz.

Şablon Özellikleri

CSS Yapısı

style.css, paketin asset/css klasöründe bulunan ana CSS dosyasıdır. CSS dosyasının tamamı konu ve ilgili kodla iyi bir şekilde indekslenmiştir.

    
/* ######## FONT ######## */
/* ######## BOOTSTRAP ######## */
/* Start::button default */
.btn {
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
	font-weight: 500;
	border-radius: 0.3rem;
}

.btn-check:active + .btn,
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:active {
	color: #fff;
}

/* End::button default */
/* Start::btn-primary */
.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}
.btn-primary:hover, .btn-primary:focus:hover {
	background-color: var(--primary-hover);
	border-color: var(--primary-border);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus {
	background-color: var(--primary-color);
	border-color: var(--primary-border);
	outline: 0;
	box-shadow: none;
}

.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary.show:focus,
.btn-primary:active:focus {
	box-shadow: 0 0 0 0.2rem var(--primary05);
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary.show,
.btn-primary:active {
	background-color: var(--primary-color);
	border-color: var(--primary-border);
}

/* End::btn-primary */
/* Start::btn-secondary */
.btn-secondary {
	background-color: rgb(var(--secondary-rgb)) !important;
	border-color: rgb(var(--secondary-rgb)) !important;
}
.btn-secondary:hover, .btn-secondary:focus:hover {
	background-color: rgba(var(--secondary-rgb), 0.9);
	border-color: rgb(var(--secondary-rgb));
}

.btn-check:focus + .btn-secondary,
.btn-secondary:focus {
	background-color: rgb(var(--secondary-rgb));
	border-color: rgb(var(--secondary-rgb));
	outline: 0;
	box-shadow: none;
}

.btn-check:active + .btn-secondary:focus,
.btn-check:checked + .btn-secondary:focus,
.btn-secondary.active:focus,
.btn-secondary.show:focus,
.btn-secondary:active:focus {
	box-shadow: 0 0 0 0.2rem rgba(var(--secondary-rgb), 0.5);
}

.btn-check:active + .btn-secondary,
.btn-check:checked + .btn-secondary,
.btn-secondary.active,
.btn-secondary.show,
.btn-secondary:active {
	background-color: rgb(var(--secondary-rgb));
	border-color: rgb(var(--secondary-rgb));
}

/* End::btn-secondary */
 

JS Yapısı

custom.js tüm js kodlarını içeren ana javascript dosyasıdır. Dosya, asset/js/ klasöründe bulunur. Bu dosya kodu aynı zamanda iyi biçimlendirilmiştir ve farklı ilgili işlev adlarında bölümlenmiştir.

Bu grafik kütüphanesi based js code ve dashboard based js code da kullanıcının kullanım kolaylığı açısından ayrı dosyalar halinde eklenmiştir.

	
'use strict'

/* .. tooltip .. */
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

/* .. popover .. */
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

/* Start::back-to-top */
function backToTop() {
	var back_to_top = document.querySelector('.back-to-top');
	var windowTop = window.pageYOffset || document.documentElement.scrollTop;
	windowTop > 500 ? back_to_top.style.display = "inline-flex" : back_to_top.style.display = "none"
}
window.addEventListener('scroll', backToTop)
/* End::back-to-top */

// reveal items on scroll
function reveal(){
var reveals = document.querySelectorAll('.reveal');

	if(reveals) {
		for(var i = 0; i < reveals.length; i++){

			var windowHeight = window.innerHeight;
			var cardTop = reveals[i].getBoundingClientRect().top;
			var cardRevealPoint = 130;
			
			if(cardTop < windowHeight - cardRevealPoint){
				reveals[i].classList.add('reveal-active');
			}
			else{
				reveals[i].classList.remove('reveal-active');
			}
		}
	}
}
window.addEventListener('scroll', reveal);
reveal(); //Run