Preloader
For activating the preloader first copy and paste the below code into the body element.
<!--PRELOADER START-->
<div id="preloader">
<div class="text-center w-100">
<div class="loader"></div>
</div>
</div>
<!--PRELOADER END-->Header
To use the horizontal header copy – paste this example into your document
<header class="navigation horizontal_header transparentOnScroll navbar navbar-expand-lg fixed-top shadow-header">
<div class="header-ins">
<div class="container">
<!--LOGO AREA-->
<div class="site-logo">
<a href="#" class="hoveroff" title="">
<img src="./assets/images/logo.jpg" alt="">
</a>
</div>
<button class="button-toggler navbar-toggler collapsed" type="button" data-target="#navigation" data-toggle="collapse" aria-controls="navigation" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>
<!--Main Menu START-->
<ul class="justify-content-end scrollspy collapse navbar-collapse" id="navigation">
<li>
<a href="#home" class="nav-link">Home</a>
</li>
<li>
<a href="#about" class="nav-link">About</a>
</li>
<li>
<a href="#service" class="nav-link">Services</a>
</li>
<li>
<a href="#portfolio" class="nav-link">Portfolio</a>
</li>
<li>
<a href="#resume" class="nav-link">Resume</a>
</li>
<li>
<a href="#clients" class="nav-link">Clients</a>
</li>
<li>
<a href="#blog" class="nav-link">Blog</a>
</li>
<li>
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
<!--Main Menu END-->
</div>
</div>
</header>
<!--HEADER END-->Transparent Setting
If you want to make header transparent in top position add transparentOnScroll classname into header element.
<body>
<header class="navigation horizontal_header transparentOnScroll navbar navbar-expand-lg fixed-top shadow-header">Logo
If you want to change the logo of website, upload your logo file into assets/images folder, then add your logo url path into img tag that located inside of site-logo div element.
<!--LOGO AREA-->
<div class="site-logo">
<a href="#" class="hoveroff" title="">
<img src="./assets/images/logo.jpg" alt="">
</a>
</div>Section
RectCV theme sections contains two parts: head and content. In the head part you need to write the title of the section, in the content part write the content of the section.
<section class="section_class" id="section_id">
<div class="container d-flex justify-content-between flex-column h-100 ">
<div class="section-title flex-grow-1">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<h2>Section Name</h2>
</div>
</div>
</div>
</div>
<div class="section-content flex-grow-1">
</div>
</div>
</section> Each section has an ID attribute. Make sure that the ID name of the section is the same as the navigation of “a href” attribute.
RectCV has two types of heading. Rectangular and With Background Text
Rectangular Title
For rectangular title set “rect_heading” classname to h2 tag.
<div class="text-center">
<h2 data-aos="heading-show" class="rect_heading">Who Am I</h2>
<p class="m-0">Get to know me</p>
</div>Title with background text
For background text style set “text_background” classname to h2 tag and add <span class=”heading_background”></span> element inside of h2 tag. Inside of span write text that you prefer to see in your wesite.
<div class="text-left">
<h2 data-aos="heading-show" class="text_background">
Who Am I
<span class="heading_background">About Me</span>
</h2>
<p class="m-0">Get to know me</p>
</div>