<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DEVSPOT</title>
<link rel="stylesheet" type="text/css" href="/home/keyur/Documents/bootstrap/devspot/stylesheets/screen.css">
<link rel="stylesheet" type="text/css" href="/home/keyur/Documents/bootstrap/devspot/stylesheets/print.css">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="/home/keyur/Documents/bootstrap/devspot/js/style.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/master/devicon.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body id="backC">
<nav class="navbar navbar-default" style="background-color: #1e104d;border: none;text-align:center;">
<div class="fluid-container posTitle">
<div class="navbar-header" style="float:none;display:inline-block;">
<a class="navbar-brand" id="fontStyle" href="#">Masonary Wall</a>
</div>
</div>
</nav>
<div class="container">
<div class="grid" style="position: relative;height: 860px;left: 8%;">
<div class="grid-item grid-item--height2" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2921563/exbp-6_1x.png');background-size: cover;
background-position: center;background-color:grey;">
</div>
<div class="grid-item grid-item--height3" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2930599/bugsnag-2_1x.png');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height4" style="background:url('https://d13yacurqjgara.cloudfront.net/users/594316/screenshots/2930910/pointer-01_1x.jpg');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height1" style="background:url('https://d13yacurqjgara.cloudfront.net/users/594316/screenshots/2841126/radio_polaris_1x.jpg ');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height3" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2924180/bugsnag-1_1x.png');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height0" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2916925/exbp-5_1x.png');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height1" style="background:url('https://d13yacurqjgara.cloudfront.net/users/103909/screenshots/2928524/victim-01_1x.png');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height3" style="background:url('https://d13yacurqjgara.cloudfront.net/users/594316/screenshots/2929354/castle_in_the_sky-01_1x.jpg');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height4" style="background:url('https://d13yacurqjgara.cloudfront.net/users/59947/screenshots/2934030/muti-1.jpg');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height1" style="background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT8WewMd60_EzwXg5va6825dSPPi9SoEseFp-UpcPEJLixRaUQ_');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height2" style="background:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQN5OLCjrc7fM1e3kRe-aGy67vD6iBwT7GR2f-_JXAgFbVEK7Zg1Q');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height1" style="background:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRwJqEJIbDW3ka7QAIWo6tGgvQGhkgBaiT1n48jAsUwpU2Ki5okuQ');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--height1" style="background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSdE8699mCd02F5B2gSipoL0wHXdO0XCkecZAVaJKwB646Qqdsv');background-size:cover;background-position:center;">
</div>
<div class="grid-item grid-item--width1" style="background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQyWJpv-jEmCVp-hm8vsQYRxUP7pl0sElUDw7SN3KEFf-wpJFmQ');background-size:cover;background-position:center;">
</div>
</div>
</div>
</body>
</html>
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import "compass/reset";
$colColor:#99ccff;
$backColor:#f2f2f2;
$colPost:white;
#backC{
background-color:#1e104d;
font-family: 'Lobster', cursive;
}
#fontStyle{
color:white;
font-weight: 40px;
font-size: 30px;
font-stretch: 80px;
}
.grid{
display: block;
}
/* fluid 5 columns */
.grid-sizer,
.grid-item {
float:left;
background-color:grey;
width: 20%;
height: 200px;
margin:5px;
}
/* 2 columns */
.grid-item--width2 {
background-color:grey;
width: 40%;
height:100px;
margin:5px;
}
.grid-item--width1 { width: 120px; }
.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }
.grid-item--height0 { height: 100px; }
.grid-item--height1 { height: 160px; }
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }
nav{
background-color: transparent;
}
.cont{
position:relative;
}
.block{
position:absolute;
}
//ANIMATION STARTS HERE
.grid-item{
transition: transform 300ms ease-In-out;
}
.grid-item:hover{
transform: translate(15px,15px) scale(1.0,1.0) rotate(-2deg);
}
View Compiled
$(document).ready(function(){
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.