This is the head part of the document.
<head>
<!--Useful meta tags-->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="index, follow, noodp">
<meta name="googlebot" content="index, follow">
<meta name="google" content="notranslate">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Angus - Responsive and Creative Personal HTML Portfolio Template</title>
<!--Preloader-->
<script src="./assets/js/preloader.js"></script>
<link rel="stylesheet" href="./assets/css/preload.css">
<!--Mobirise-->
<link rel="preload" href="./assets/css/mobirise/style.css" as="style" onload="this.rel='stylesheet';this.removeAttribute('onload');">
<!--OWL Carousel-->
<link rel="preload" href="./assets/css/owl.carousel.min.css" as="style" onload="this.rel='stylesheet';this.removeAttribute('onload');">
<!--Magnific Popup-->
<link rel="preload" href="./assets/css/magnific-popup.css" as="style" onload="this.rel='stylesheet';this.removeAttribute('onload');">
<!--Font Awesome-->
<link rel="preload" href="./assets/css/all.min.css" as="style" onload="this.rel='stylesheet';this.removeAttribute('onload');">
<!--AOS-->
<link rel="preload" href="./assets/css/aos.css" as="style" onload="this.rel='stylesheet';this.removeAttribute('onload');">
<!--Main Stylesheet-->
<link rel="preload" href="./assets/css/main.css" as="style" onload="this.rel='stylesheet';this.removeAttribute('onload');">
</head>All CSS files are located in the assets/css folder, and all scss files are located in the scss folder.
CSS files are well structured and there is a table of contents so you can easily search for anything.
Main Stylesheet
<head>
<!--Theme Stylesheet-->
<!--Main Stylesheet-->
< <!--Main Stylesheet-->
<link rel="preload" href="./assets/css/main.css" as="style" onload="this.rel='stylesheet';this.removeAttribute('onload');">
</head> Layout
The Angus template has two styles or layouts: Dark and Light.
To activate the dark layout, set the data-theme attribute to dark in the html element.
<!DOCTYPE html>
<html lang="en" data-theme="dark" data-color="blue">
...To activate the light layout, set the data-theme attribute to light in the html element.
<!DOCTYPE html>
<html lang="en" data-theme="dark" data-color="blue">
...Color Schemes
The Angus template has 7 color schemes: black, blue, green, pink, red, violet and orange.
For example, if you want to activate the green color scheme, set data-color attribute to green in the html element.
<!DOCTYPE html>
<html lang="en" data-theme="dark" data-color="green">
...