name : bootstrap-masonry-template.php
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>interior visions | design firm in bangkok | บริษัทออกแบบตกแต่งภายใน</title>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700">
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
	<script src="script.js"></script>
	<link href="css/main.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
</head>
<style type="text/css">
	@font-face {
	  font-family: 'db_pradit_xregular';
	  src: url('font/db_pradit_x-webfont.woff2') format('woff2'),
		  url('font/db_pradit_x-webfont.woff') format('woff');
	  font-weight: normal;
	  font-style: normal;

	}

  body{
	  font-family: 'db_pradit_xregular';
	  font-size:20px;
	}
	
	.nav_menu{
	  font-family: 'db_pradit_xregular';
	}

	p.title_content{
	  font-family: 'db_pradit_xregular';
	  text-decoration:none;
	  font-size:30px;
	  color:black;
	  margin:0px;
	}
	
	p.content{
	  font-family: 'db_pradit_xregular';
	  text-decoration:none;
	  font-size:24px;
	  color:black;
	  margin:0px;
	}

	a {
	  font-family: 'db_pradit_xregular';
	  text-decoration:none;
	  font-size:24px;
	  color:black;
	}

	a:hover {
	  font-family: 'db_pradit_xregular';
	  text-decoration:none;
	  color:black;
	  font-weight:bold;
	}

	.content_video{
	  font-family: 'db_pradit_xregular';
	  font-size:30px;
	}

	h2{
	  font-size:80px;
	}      

	h3{
	  font-size:40px;
	}

	h4{
	  font-size:30px;
	}

	h5{
	  font-size:28px;
	}
	

	.blur:hover .image {
		  opacity: 0.3;
	}
	  
   .blur:hover .middle {
		  opacity: 1;
   } 

  .image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  }

  .col-big{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width:20%;
}

.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}

.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
background-color: rgba(255, 255, 255, 0.4);
}

.hovereffect img {
display: block;
position: relative;
}

.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
margin:0px;
}

.hovereffect p.info {
display: inline-block;
text-decoration: none;
padding: 100px 14px;
text-transform: uppercase;
color:black;
font-size:50px;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}

.hovereffect:hover p.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.active{
  font-weight:bold;
  text-decoration:none;
}

.star {
visibility: hidden;
}

.fadeIn {
-webkit-animation: animat_show 0.8s;
animation: animat_show 0.8s;
visibility: visible !important;
}

@-webkit-keyframes animat_show{
0%{opacity:0}
100%{opacity:1}
}
  </style>
<body>

<?php include('layout/navbar.php'); ?>
        <div class="container">
          
            <?php include('layout/header.php'); ?>
            <div class="row">
              <div class="col-md-12">  <hr class="style-three"/></div>
						</div>
						<div class="row">
                <div class="col-md-12">  
                      <div class="nav_menu"> 
                          <span><a href="IV_002.php" style="font-weight: bold;">Select Project</a></span>
                          <?php 
                          include('config/config.php');
                          $sql = "SELECT * FROM types";
                          $res = $conn->query($sql);
                          while($row = $res->fetch_assoc()){
                          
                          ?>
                          <span style="padding-left:20px;"><a href="<?php echo $row['t_page']; ?>" class="select_menu" atr="<?php echo $row['t_id']; ?>"><?php echo $row['t_name']; ?></a> </span>
                          <?php 
                              
                          }
                          ?>
                      </div>
                  </div>
							</div>
							
						<div id="grid" width="100%">
							<div id="posts">

                         <?php 
                        include('config/config.php');

                        $sql = "SELECT projects.*,types.*,categorys.* 
                        FROM projects 
                        LEFT JOIN types on (types.t_id = projects.p_t_id)  
                        LEFT JOIN categorys on (categorys.c_id = projects.p_c_id)
                        WHERE p_status = 1";
                        $res = $conn->query($sql);
                        $num_rows = $res->num_rows;
                        if($num_rows > 0 ){
                        while($row = $res->fetch_assoc()){
                          $check_title =  substr($row['p_tt'],0,6);
                        ?>

												<div class="post star">
												
												<a href="IV_PROJECT.php?q=<?php echo $row['p_id'];  ?>">
												<div class="hovereffect">
													<img src="<?php echo $row['p_im_show']; ?>">
													<div class="overlay">
                            <p class="info"><?php echo $row['c_name']; ?></p>
                            </div>
													</div>
													</a>
													<div class="title_project"> 
                          <p class="title_content"><?php echo $row['p_name']; ?> </p>
                          <p class="content"><?php echo $row['p_location']; ?></p>
                        	</div>
												</div>
												
		
												<?php 
                            }
                          }else{
                        ?>
                          <div class="col-md-12">
                          <h1 class="text-center">---------  No Project  ----------</h1>
                          </div>
                        <?php
                          
                          }
                        ?>
							</div>
						</div>
						<div class="row">
              <div class="col-md-12">  <hr class="style-three"/></div>
            </div>
            <div class="row footer_logo">
                <div class="col-md-12">
                  <p class="text-right">
                    <a href="https://www.facebook.com/interiorvisions" target="_blank"><img src="images/icon/facebook.png" width="25px" height="25px"/></a>
                    <img src="images/icon/instagram.png" width="25px" height="25px"/>
                    <img src="images/icon/pinterest.png" width="25px" height="25px"/>
                    <img src="images/icon/email.png" width="25px" height="25px"/>
                  </p>
                </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <p class="text-right">copyright © 2017. interior visions. </p>
                <a href="#" class="scrollToTop"></a>
              </div>
            </div>
</div>
</div>
</body>
<script>
    function openNav() {
        document.getElementById("mySidenav").style.width = "100%";
    }

    /* Close/hide the sidenav */
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
		}
		</script>
		<script>
    function showImages(el) {
        var windowHeight = jQuery( window ).height();
        $(el).each(function(){
            var thisPos = $(this).offset().top;

						var topOfWindow = $(window).scrollTop();
						
            if (topOfWindow + windowHeight - 5 > thisPos ) {
                $(this).addClass("fadeIn");
            }
        });
    }

    $(document).ready(function(){
            showImages('.star');
    });

    $(window).scroll(function() {
            showImages('.star');
    });


jQuery(window).load(function () {

	var gutter = parseInt(jQuery('.post').css('marginBottom'));
	var container = jQuery('#posts');



	// Creates an instance of Masonry on #posts

	container.masonry({
		gutter: gutter,
		itemSelector: '.post',
		columnWidth: '.post'
	});
	
	jQuery(window).bind('resize', function () {
		if (!jQuery('#posts').parent().hasClass('container')) {
			
			
			post_width = jQuery('.post').width() + gutter;
			jQuery('#posts, body > #grid').css('width', 'auto');

			
			posts_per_row = jQuery('#posts').innerWidth() / post_width;
			floor_posts_width = (Math.floor(posts_per_row) * post_width) - gutter;
			ceil_posts_width = (Math.ceil(posts_per_row) * post_width) - gutter;
			posts_width = (ceil_posts_width > jQuery('#posts').innerWidth()) ? floor_posts_width : ceil_posts_width;
			if (posts_width == jQuery('.post').width()) {
				posts_width = '100%';
			}
			jQuery('#posts, #grid').css('width', posts_width);
			jQuery('#grid').css({'margin': '0 auto'});

		}
	}).trigger('resize');
	


});
</script>
</html>

© 2024 UnknownSec