You can do that very easily by simply replacing the current logo image file logo.png with your own in the /images folder keeping the original file name. The required size is 160×42 px but it can be a bit bigger. If you wish to have a file with a different name and extension as logo, change its name in the index.html file on line 38.
The slider code is located in the index.html file on lines 57 - 94. You can change the slider images by modifying the paths to the image files "images/slider/1.jpg" and add new slides copying the slider unit code as many times as you need
In index.html on line 137 find
<!-- section header -->
<header>
<div class="container" data-animated="pulse">
<h1>Right here we've got something you gonna love!</h1>
<p>In vulputate eget nulla sit amet lacinia. Nullam a congue tellus. Aliquam erat volutpat. Sed gravida magna nec arcu.<br/>Curabitur vulputate viverra orci, consequat tincidunt erat semper vitae. </p>
<a href="javascript:void(0);" class="shortcode_button btn_type1">Buy template!</a>
</div><!-- end .container -->
</header>
<!-- //section header -->
There's similar code for every page header across the entire index.html file
Text icons below the slider are represented by the code on lines 96 - 135. Here's an example of one such icon code
<div class="col-md-3">
<div class="service" data-animated="bounceIn">
<a href="javascript:void(0);">
<span class="service_icon"><img src="images/img1.png" width="58" height="58" alt="" /></span>
<span class="service_title">Flat design.</span>
Praesent tortor magna, lobortis vitae dolor sit amet ullamcorper.
</a>
</div>
</div>
The blue header code is found on lines 137 - 145
And 'The Fresh & Flat design!' section is on lines 148 - 172
The code starts on line 177 in the index.html file and ends on line 406
The code of each square icon in the 'Meet our team!' section carousel looks like this
<li>
<div class="item">
<div class="img_block hover_img">
<img src="images/team1.jpg" alt="" />
</div>
<div class="item_wrap">
<h4><a href="javascript:void(0);">Anna Smith</a></h4>
Designer
<div class="desc_block"><p>Praesent tortor magna, lobortis vitae dolor sit amet ullamcorper placerat morbi at diam varius.</p></div>
<div class="team_socials"><a href="javascript:void(0);" class="team_tweet">Twitter</a><a href="javascript:void(0);" class="team_mail">E-mail</a><a href="javascript:void(0);" class="team_fb">Facebook</a></div>
</div>
</div>
</li>
The code of each block in the 'Testimonials' section ' carousel looks like this
<li>
<div class="item">
<div class="testimonial">Integer dui enim. commodo quis feugiat pharetra, tincidunt in velit. Auctor blandit, elit felis ornare purus, at ultrices purus eros at sem. In eget a diam ut mauris commodo mollis et in libero praesent semper ac erat vel dolor tempor hiculas Vestibulum malesuada augue id quam fermentum malesa. justo egestas. Praesent felis sapien, porttitor at gravida eget, volutpat vitae est. Vivamus in ornare nunc, eu scelerisque felis. Integer quis nisi nunc donec congue mi metus, tristique consequat justo.</div>
<a href="javascript:void(0);">John Doe,</a> Company inc.
</div>
</li>
Each section of the About page is denoted in the code of the index.html file by a commentary as follows
<!-- section header -->
<!-- section content -->
<!--Carousel-->
!--diagramm-->
In index.html locate line 408
Portfolio categories and filter are defined on the lines 414 - 428
The following block of code defines one portfolio entry.
<div data-category="colors" class="colors element col-md-3">
<div class="img_block hover_img">
<img src="images/portfolio/1.jpg" alt="" />
</div>
<div class="portfolio_wrap">
<div class="portf_in">
<h4><a href="single_portfolio.html">Lorem ipsum dolor</a></h4>
in <a href="javascript:void(0);">Category</a>
<div class="desc_block"><p>Praesent tortor magna, lobortis vitae dolor sit amet ullamcorper placerat morbi at diam varius.</p></div>
<a href="single_portfolio.html" class="read_more">Read More</a>
</div>
</div>
To create new entries simply multiply this block of code across the Portfolio section and change its properties.
Multiply single_portfolio.html file, give its copies unique names and assign each to a different portfolio entry to make each entry have its own dedicated page.
In index.html locate line 587
Here is the exact code that defines one blog post from the set.
<div class="blog_post">
<iframe height="280" src="http://www.youtube.com/embed/JbeFIfS8uno" allowfullscreen></iframe>
<h4><a href="single_post.html">Smile & Burn! by Artcore</a></h4>
<div class="desc_block"><p>Phasellus ante dui, faucibus eu consequat ut, imperdiet at metus. Nunc lobortis, ipsum condimentum ullamcorper mollis, sem erat peleifend mi, nec elementum orci odio ultricies mauris vestibulums cursus lacinia ante, et faucibus nibh laoreet ut. Sed vestibulum vivamus ac tempor pretium. Ut diam metus, varius ut accumsan sit.</p></div>
<div class="post_info">
25 April 2019 <span class="separator">:</span> <a href="javascript:void(0);">4 comments</a> <span class="separator">:</span> <a href="javascript:void(0);">Video</a>
</div>
<div class="post_socials">
<ul>
<li><a href="javascript:void(0);" class="pinterest">Pinterest</a></li>
<li><a href="javascript:void(0);" class="fb">Facebook</a></li>
<li><a href="javascript:void(0);" class="google_plus">Google+</a></li>
<li><a href="javascript:void(0);" class="twitter">Twitter</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="post_type video_type"></div>
</div>
For editing the actual blog post open single_post.html file and edit it according to your needs. To add a new blog post simply duplicate the existing single_post.html file, assign it a unique name, change its content and reference it in the index.html file in the newly added block of post code.
To do this simply open css/style.css file line 44
body {
color: #9a9a9a; - change this to edit the text color
background: #27262e; - change this to edit the background color
You can setup your contact form in 2 clicks, just open mail.php file and find "yourname@yourdomain.com" on line 3, then simply replace it with your own email address and all form submissions will be sent there. That's all ;)
The Contact page code is located on lines 780 - 820, where you can configure links to social media websites and their icons. The actual paths to the icons image files are embedded in the css/style.css file on lines 1313 - 1329. For instance the following line of code in the index.html file
<p class="i5"><a href="#">Twitter</a></p>
means that the icon used is i5.png which corresponds to the line
.contact_info p.i5 {background-image:url(../images/i5.png);
in the css/style.css file
Google Map code in the index.html file is found on lines 821 - 852. To change the map to your preferred location simply overwrite the coordinates on line 834 with yours
var myLatlng = new google.maps.LatLng(40.714353, -74.005973);
To show posts from your Dribbble account all you need is insert your account ID on the index.html file line 972 replacing the default ID artcoreillustrations.
$.jribbble.getShotsByPlayerId('artcoreillustrations', callback, {per_page: 6, page: 1});
Then uncomment Dribbble code on lines 969 and 981 deleing the /* */ symbols
The block of code for sidebar Latest Posts starts on line 930 of the index.html file. One entry is represented by the following code
<li>
<a href="single_post.html"><img src="images/blog/featured1.png" width="56" height="56" alt="" /></a>
Lorem ipsum dolor amet aptent taciti, ac sociosqu.
</li>