In order to use the template correctly, you need to run it on localhost server.
You can use for example WAMP
To change colors go to index.html file line 13
<link rel="stylesheet" type="text/css" href="css/colors/blue.css" id="csscolors" />
and change the color name with one of colors name in css/colors folder .
by default the layout is on light mode ,for dark layout add "darkmode" class to body tag :
<body class="darkmode">...</body>
the template comes with 67 page transitions . page transitions list :
<li> <a class="pt-trigger" data-animation="21" data-goto="3" id="services"><i class="peicon pe-7s-tools" aria-hidden="true"></i><span>Services</span></a> </li>
by default the title icon have a shape with border radius ,you have two additional shape : square and rounded
<div class="icon-title roundedtitle">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
by default the page header text border have a shape with border radius ,you have two additional shape : square and none .
<fieldset class="squarefildset">
<legend>STUDIES AND WORKS</legend>
<i class="peicon pe-7s-id" aria-hidden="true"></i>
<h3>ABOUT ME</h3>
</fieldset>
RAKIA have two homepage variants :
image HOMEPAGE
<div id="fullpage">
<div class="section one">
<h1>HELLO , MY NAME IS</h1>
<h2>JOHNATAN DOE</h2>
</div>
<div class="section two">
<h1>I LIKE TO MAKE</h1>
<h2>COOL WEBBY STUFF</h2>
</div>
<div class="section three">
<h1>LIKE THIS</h1>
<h2>HTML TEMPLATE</h2>
</div>
</div>
video HOMEPAGE
<div id="fullpage-video">
<div class="section fp-noscroll">
<div id="video_overlays"></div>
<video autoplay loop muted id="myVideo">
<source src="https://s3.amazonaws.com/distill-videos/videos/processed/9/MVI_0358.mp4.mp4" type="video/mp4">
<source src="https://s3.amazonaws.com/distill-videos/videos/processed/9/MVI_0358.mp4.webm" type="video/webm">
</video>
<div class="layer-video">
<h5>Hi, I am</h5>
<h4>Johnatan Doe</h4>
<h5>DEVELOPER AND BUSINESSMAN</h5>
</div>
</div>
</div>
To add stories items (photos or videos ) go to js/main.js line 750 and your files path :
items: [
buildItem("johndoe-1", "photo", 5, "images/portfolio5.jpeg", "images/portfolio5.jpeg", '', false, 1500997696),
buildItem("johndoe-2", "video", 0, "images/storyvideo.mp4", "images/storyvideo.mp4", '', false, 1500997696),
buildItem("johndoe-3", "photo", 3, "images/portrait.jpg", "images/portrait.jpg", '', false, 1500997696),
]
to edit the stories time or the last updated date you must use the unix time format : www.unixtimestamp.com/
lastUpdated: 1500997696,
To receive emails from the contact form , open the file "contact.php" :
- enter your mail in the variable : "$to_Email" line 4 .
- enter subject of the mail in the avriable : "$subject" line 5