Styles

This is the head part of document.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kayden - Personal Bootstrap 5 HTML Portfolio Template</title>
    <!--Usefull Meta-->
    <meta name="description" content="A slick, customizable CV, Resume or Portfolio template, perfect for photographers, freelancers or designers.">
    <meta name="keywords" content="angus, resume, cv, vCard, portfolio, html template, template, responsive">
    <meta name="robots" content="index, follow, noodp">
    <meta name="googlebot" content="index, follow">
    <meta name="google" content="notranslate">
    <meta property="og:title" content="Kayden - Personal Bootstrap 5 HTML Portfolio Template">
    <meta property="og:description" content="A slick, customizable CV, Resume or Portfolio template, perfect for photographers, freelancers or designers.">
    <meta property="og:image" content="https://demo.themesuccess.com/templates/kayden/assets/images/preview.jpg">
    <meta property="og:url" content="https://demo.themesuccess.com/templates/kayden/">
    <!--Favicon-->
    <link rel="icon" type="image/svg+xml" href="./assets/images/favicon.svg">
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon_32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon_16x16.png">
    <!--Google Fonts-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
    <!--AOS Animation Stylesheet-->
    <link rel="stylesheet" href="./assets/css/aos.css">
    <!--Font Awesome-->
    <link rel="stylesheet" href="./assets/css/all.min.css">
    <!--Magnific Popup-->
    <link rel="stylesheet" href="./assets/css/magnific-popup.css">
    <!--OWL Carousel-->
    <link rel="stylesheet" href="./assets/css/owl.carousel.min.css">
    <!--OWL Carousel Theme-->
    <link rel="stylesheet" href="./assets/css/owl_theme.css">
    <!--Keyden Styelsheet with Bootstrap 5-->
    <link rel="stylesheet" href="./assets/css/kayden_1.css">
</head>

All CSS files are located in the assets/css folder.

All SCSS files are located in the assets/scss folder.

CSS and SCSS files are well structured and there is a table of contents so you can search for anything easily.

Main Stylesheet

Kayden template has 16 demo stylesheets:

For example to activate 1 demo stylesheet, copy paste the kayden_1.css stylesheet into the head section.

<head>
    <!--Theme Stylesheet-->
    <!--Main Stylesheet-->
    <link rel="stylesheet" href="./assets/css/kayden_1.css">
</head>

Auto Detection ( Dark & Light Mode )

If you want to change the layout of your website by user requesting theme, you should use prefers-color-scheme for that.

In our template you can find 2 additional stylesheets ( kayden_dark.css and kayden_light.css ) that have same structure, but different color schemes. In the demo_auto.html file, we linked two stylesheets in the head using prefers-color-scheme. In this way, if the user requested dark mode from his device, browser automatically turn you’re website to kayden_dark.css stylesheets, otherwise into the kayden_light.css. See example bellow.


<!--Keyden Styelsheet with Bootstrap 5 Dark Mode-->
<link rel="stylesheet" href="./assets/css/kayden_dark.css" media="(prefers-color-scheme: dark)" id="dark_stylesheet">
<!--Keyden Styelsheet with Bootstrap 5 Light Mode-->
<link rel="stylesheet" href="./assets/css/kayden_light.css" media="(prefers-color-scheme: light)" id="light_stylesheet">

SCSS

In SCSS folder you can find kayden_*.scss files. All files are structured using the Bootstrap framework. Read more here.

Using SCSS you can easily change all the settings for this template.

Body Colors

Here’s an example of how you can change the background-color and color for the <body>:

//Body Colors
$body-bg: #01010D;
$body-color: #fff;

Section Colors

By default sections inherit the background color from the $body-bg variable. But in our template we have two additional section colors: $section-primary-* and $section-secondary-*

//Secondary Color ( Used at Secondary Section Background color )
$section-primary-bg: #316CE2;
$section-primary-color: #E9F1FF;

$section-secondary-bg: #000c1b;
$section-secondary-color: #fff;

To change a section color just add a secondary-section or primary-section class name in your section class list.

<!--Section START-->
<section id="example" class="secondary-section">

<!--Section START-->
<section id="example" class="primary-section">

Secondary Font Family

Secondary font family is used for paragraphs.

//Secondary Font FAMILY
$font-family-secondary: 'Open Sans', sans-serif;

Another Variables

$shadow-color : Set the image shadow.
$kayden-img-radius: Set the border radius of images.
$primary: Set the primary color of template.
$input-background: Set the background color of form input fields.
$input-text: Set the text color of form input fields.