Hompark is a high quality luxury real estate template for construction companies. If you want to present your property in best way soo with Hompark you can create your own website very easily and quickly. Based on Bootstrap and all files and codes has been well organized.
| Home | Score | Away | League | Time (CST) |
|---|---|---|---|---|
| No matches right now — check back soon. | ||||
This theme is a builted on bootstrap framework with four columns. All of the information within the main content area is nested within a 'section'.
The general template structure is the same throughout the template. Here is the general structure.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="format-detection" content="telephone=no"> <meta name="theme-color" content="#282828"/> <title>Hompark | Real Estate & Luxury Homes</title> <meta name="author" content="Themezinho"> <meta name="description" content="Hompark | Real Estate & Luxury Homes"> <meta name="keywords" content="Hompark, realestate, flat, apartment, benefits, facility, consultation, home, house, studio, pool, animation, transportation"> <!-- SOCIAL MEDIA META --> <meta property="og:description" content="Hompark | Real Estate & Luxury Homes"> <meta property="og:image" content="http://www.themezinho.net/Hompark/preview.png"> <meta property="og:site_name" content="Hompark"> <meta property="og:title" content="Hompark"> <meta property="og:type" content="website"> <meta property="og:url" content="http://www.themezinho.net/Hompark"> <!-- TWITTER META --> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Hompark"> <meta name="twitter:creator" content="@Hompark"> <meta name="twitter:title" content="Hompark"> <meta name="twitter:description" content="Hompark | Real Estate & Luxury Homes"> <meta name="twitter:image" content="http://www.themezinho.net/Hompark/preview.png"> <!-- FAVICON FILES --> <link href="ico/apple-touch-icon-144-precomposed.webp" rel="apple-touch-icon" sizes="144x144"> <link href="ico/apple-touch-icon-114-precomposed.webp" rel="apple-touch-icon" sizes="114x114"> <link href="ico/apple-touch-icon-72-precomposed.webp" rel="apple-touch-icon" sizes="72x72"> <link href="ico/apple-touch-icon-57-precomposed.webp" rel="apple-touch-icon"> <link href="ico/favicon.webp" rel="shortcut icon"> <!-- CSS FILES --> <link rel="stylesheet" href="css/fontawesome.min.css"> <link rel="stylesheet" href="css/animate.min.css"> <link rel="stylesheet" href="css/fancybox.min.css"> <link rel="stylesheet" href="css/odometer.min.css"> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> content goes here </body> </html>
It is very easy to change main color or size of hamburger
/* SANDWICH BUTTON */
.sandwich-btn {
width: 46px;
height: 46px;
float: right;
position: relative;
cursor: pointer;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
border-radius: 50%;
}
.sandwich-btn span {
display: block;
height: 2px;
width: 22px;
background: #405089;
opacity: 1;
position: absolute;
right: 12px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.sandwich-btn span:nth-child(1) {
top: 18px;
}
.sandwich-btn span:nth-child(2) {
top: 22px;
opacity: 0;
}
.sandwich-btn span:nth-child(3) {
top: 26px;
}
.sandwich-btn:hover span {
width: 22px;
right: 12px;
background: #f65935;
}
.sandwich-btn.open span:nth-child(1) {
top: 22px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.sandwich-btn.open span:nth-child(2) {
opacity: 0;
right: -10px;
}
.sandwich-btn.open span:nth-child(3) {
top: 22px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* SANDWICH MENU */
.sandwich-menu {
width: 400px;
height: 100%;
min-height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
position: fixed;
left: -100%;
top: 0;
background: #262d57;
z-index: 9;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
transition-duration: 500ms;
-webkit-transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
padding: 30px 40px;
}
.sandwich-menu .logo {
width: 100%;
float: left;
margin-bottom: 40px;
}
.sandwich-menu .logo img {
height: 41px;
}
.sandwich-menu .nav-menu {
display: none;
}
.sandwich-menu p {
display: block;
margin-bottom: 30px;
color: #fff;
}
.sandwich-menu address {
display: block;
}
.sandwich-menu address a {
color: #fff;
opacity: 0.7;
text-decoration: underline;
}
.sandwich-menu .photo-gallery {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
padding: 0;
}
.sandwich-menu .photo-gallery li {
flex: 1;
margin: 0;
padding: 0;
margin-right: 4px;
list-style: none;
}
.sandwich-menu .photo-gallery li:last-child {
margin-right: 0;
}
.sandwich-menu .photo-gallery li a {
float: left;
border: 1px solid #fff;
}
.sandwich-menu .social-media {
display: inline-block;
margin-bottom: 40px;
padding: 0;
}
.sandwich-menu .social-media li {
float: left;
margin-right: 16px;
padding: 0;
list-style: none;
}
.sandwich-menu .social-media li a {
color: #fff;
float: left;
font-size: 12px;
}
.sandwich-menu .social-media li a:hover {
opacity: 0.7;
}
.sandwich-menu .copyright {
display: block;
color: #fff;
opacity: 0.7;
font-size: 11px;
}
.sandwich-menu.open {
left: 0;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.1);
}
.sandwich-menu .nav-menu {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
.sandwich-menu .nav-menu li {
width: 100%;
float: left;
margin: 0;
padding: 4px 0;
list-style: none;
}
.sandwich-menu .nav-menu li a {
width: 100%;
float: left;
color: #fff;
font-weight: 600;
}
.sandwich-menu .nav-menu li a:hover {
text-decoration: none;
opacity: 0.7;
}
.sandwich-menu .nav-menu li .dropdown {
display: none;
margin: 0;
padding-left: 20px;
}
Here is the css style for site header.
/* HEADER */
.header{ width: 100%; position: absolute; left: 0; top: -100%; z-index: 5; padding: 30px 100px; opacity: 0;}
.header{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transform:all 1s ease; transition: all 1s ease; }
.header .logo{float: left; margin-right: 20px;}
.header .logo img{ width: 35px;}
.header .phone{float: left; color: #fff; line-height: 32px; font-family: "Fjalla One";}
.header .language{ float: right; margin-right: 30px; margin-bottom: 0;}
.header .language li{ float: left; list-style: none; margin: 0; margin-left: 20px; font-family: "Fjalla One";}
.header .language li a{float: left; color: #fff; line-height: 35px;}
.header .language li a:hover{text-decoration: none; opacity: 0.8;}
.header .hamburger{float: right; margin-top: -5px;}
.header .equalizer{float: right; margin-top: 5px; margin-right: 20px;}
.overflow-hidden .header .logo img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
/* DROPDOWN */
.hamburger-navigation li:hover ul{display: block;}
.hamburger-navigation li ul{ width: 100%; float: left; margin: 0; padding: 0; text-align: center; display: none;}
.hamburger-navigation li ul li{width: auto; float: none; display: inline-block; padding: 0; margin: 0; position: relative;}
.hamburger-navigation li ul li:after{content: ""; width: 6px; height: 6px; background: #fff; position: absolute; right: -5px; top: 7px; border-radius: 50%;}
.hamburger-navigation li ul li:last-child:after{display: none;}
.hamburger-navigation li ul li a{font-size: 15px; padding: 0 10px;}
Here is the css style for loading elements and classes.
/* PAGE TRANSITION */
.transition-overlay{ width:100%; height:100%; position:fixed; left:0; top:0; background:#F50C19; z-index:99999; opacity:0; visibility:hidden;}
.transition-overlay{ -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
.transition-overlay.show-me{ opacity:1; visibility:visible;}
/* PRELOADER */
.preloader{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99; background:#f50c1a; }
.preloader{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease; }
.preloader *{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;}
.preloader img{ width: 80px; height: 80px; position: absolute; left: 50%; top:50%; margin-left: -40px; margin-top: -40px; z-index: 4; border-radius: 50%; padding: 10px; background: #fff;}
/* PAGE LOADED */
.page-loaded .preloader{ top: -100%; transition-delay: 0.60s;}
.page-loaded .preloader img{ opacity: 0; margin-top: -120px; transition-delay: 0.30s;}
.page-loaded .header{top: 0; opacity: 1; transition-delay: 0.6s;}
.page-loaded .slider{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}
.page-loaded .int-hero .inner h2{transform: translateY(0); transition-delay: 0.6s; opacity: 1;}
Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:
| File Name | Description |
|---|---|
bootstrap.min.css |
Detault bootstrap css file |
font-awesome.min.css |
Font Awesome font icons |
jquery.fancybox.css |
Litebox plug-in css |
odometer.css |
Counter for odometer |
swiper.min.css |
Swiper plug-in css |
style.css |
Template main css |
The second file contains all of the specific stylings for the page. The file is separated into sections using:
01. GOOGLE FONTS 02. BODY 03. CUSTOM CLASSES 04. FORM ELEMENTS 05. SECTIONS 06. HTML TAGS 07. LINKS 08. MODAL 09. PAGINATION 10. PRELOADER 11. TRANSITION OVERLAY 12. SANDWICH BUTTON 13. SCROLL DOWN 14. NAVIGATION MENU 15. HEADER 16. SOCIAL MEDIA 17. NAVBAR 18. SLIDER 19. PAGE HEADER 20. VIDEO BG 21. WORKS 22. FEATURES CONTENT 23. LISTING CONTENT 24. FULL MEDIA CONTENT 25. INTRODUCTION 26. OUR TEAM 27. NEWS 28. SAY HELLO 29. LOGOS 30. FOOTER 31. RESPONSIVE TABLET FIXES 32. REPSONSIVE MOBILE FIXES
This is the list of all the jquery files are we used for our theme.
| Tag | Description |
|---|---|
bootstrap-datepicker.min.js |
Datepicker jQuery |
bootstrap-min.js |
Bootstrap min |
google-maps.js |
Customized Google Maps |
instagram.js |
Instagram API plugin |
isotope.js |
Masonry grid jquery |
jquery.dateFormat.js |
Date format jQuery file |
jquery.fancybox.js |
Litebox jQuery |
jquery.min.js |
jQuery library |
jquery.stellar.js |
Parallax backgrounds - elements |
npm.js |
Bootstrap plug-in |
odometer.min.js |
Counter plugin |
owl.carousel.min.js |
Carousel plugin |
scripts.js |
All the plug-ins initializing |
If you want to change the equalizer, open up the file scripts.js and change the following code:
// EQUALIZER TOGGLE
var source = "http://themezinho.net/Hompark/audio/audio.mp3";
var audio = new Audio(); // use the constructor in JavaScript, just easier that way
audio.addEventListener("load", function() {
audio.play();
}, true);
audio.src = source;
audio.autoplay = true;
audio.volume = 0.2;
$('.equalizer').click();
var playing = true;
$('.equalizer').click(function() {
if (playing == false) {
audio.play();
playing = true;
} else {
audio.pause();
playing = false;
}
});
// EQUALIZER
function randomBetween(range) {
var min = range[0],
max = range[1];
if (min < 0) {
return min + Math.random() * (Math.abs(min)+max);
}else {
return min + Math.random() * max;
}
}
$.fn.equalizerAnimation = function(speed, barsHeight){
var $equalizer = $(this);
setInterval(function(){
$equalizer.find('span').each(function(i){
$(this).css({ height:randomBetween(barsHeight[i])+'px' });
});
},speed);
$equalizer.on('click',function(){
$equalizer.toggleClass('paused');
});
}
var barsHeight = [
[2, 10],
[5, 14],
[11, 8],
[4, 18],
[8, 3]
];
$('.equalizer').equalizerAnimation(180, barsHeight);
If you want to change values of counter, open up the file scripts.ks and change the numbers.
// COUNTER
if (!document.getElementById("counter")) {
}
else {
var lastWasLower = false;
$(document).scroll(function(){
var p = $( "#counter" );
var position = p.position();
var position2 = position.top;
if ($(document).scrollTop() > position2-300){
if (!lastWasLower)
$('#1').html('21');
$('#2').html('37');
$('#3').html('78');
lastWasLower = true;
} else {
lastWasLower = false;
}
});
};
There is no included psd file with this item:
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.