Hompage Grid

Developer
Size
5,086 Kb
Views
26,312

How do I make an hompage grid?

What is a hompage grid? How do you make a hompage grid? This script and codes were developed by Jeff Pannone on 12 August 2022, Friday.

Hompage Grid Previews

Hompage Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hompage Grid</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.typekit.net/psy5toq.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="https://i.icomoon.io/public/c88de6d4a5/BrandShopv30/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header>
<div class="header-inner gov"> <a class="logo" href="#"></hre><img src="http://brandshop.com/wp-content/themes/brandshop/img/logo-horizontal-black.png" alt="" /></a>
</div>
</header>
<div class="hp-hero gov"> <img src="https://unsplash.it/2400/1400?image=844" alt="" />
</div>
<div class="grid gov"> <ul class="grid-list cf"> <li class="grid-sizer"></li> <li class="grid-item tall"> <img src="https://unsplash.it/640/1280/?image=200"> </li> <li class="grid-item square gi-copy stats-block"> <img src="https://unsplash.it/640/640/?image=234"> <div class="gi-inner"> <div class="vert-center"> <div class="vc-content"> <h2>88%</h2> <p>of consumers expect to be able to transact directly with a brand</p> </div> </div> </div> </li> <li class="grid-item wide"> <img src="https://unsplash.it/1280/640/?image=400"> </li> <li class="grid-item wide"> <img src="https://unsplash.it/1280/640/?image=500"> </li> <li class="grid-item tall"> <img src="https://unsplash.it/640/1280/?image=603"> </li> <li class="grid-item wide gi-copy capabilities-block"> <img src="https://unsplash.it/1280/640/?image=700"> <a href="#"> <div class="gi-inner"> <div class="vert-center"> <div class="vc-content"> <p>The world's most recognized brands work with BrandShop to provide an immersive online shopping experience for their best customers.</p> <span>Read about our capabilities <i class="i-arrow-right on-right"></i></span> </div> </div> </div> </a> </li> <li class="grid-item square"> <img src="https://unsplash.it/640/640/?image=800"> </li> <li class="grid-item square"> <img src="https://unsplash.it/640/640/?image=900"> </li> <li class="grid-item tall"> <img src="https://unsplash.it/640/1280/?image=103"> </li> <li class="grid-item wide"> <img src="https://unsplash.it/1280/640/?image=330"> </li> <li class="grid-item square"> <img src="https://unsplash.it/640/640/?image=250"> </li> <li class="grid-item wide"> <img src="https://unsplash.it/1280/640/?image=350"> </li> <li class="grid-item wide"> <img src="https://unsplash.it/1280/640/?image=450"> </li> <li class="grid-item square"> <img src="https://unsplash.it/640/640/?image=650"> </li> <li class="grid-item square"> <img src="https://unsplash.it/640/640/?image=340"> </li> </ul>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/packery.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hompage Grid - Script Codes CSS Codes

html { box-sizing: border-box; overflow-y: scroll;
}
*,
*:before,
*:after { box-sizing: inherit;
}
.cf:before,
.cf:after { content: "\0020"; display: block; height: 0; overflow: hidden;
}
.cf:after { clear: both;
}
.cf { zoom: 1;
}
.sr-text { position: absolute !important; top: -9999px !important; left: -9999px !important;
}
body { font-family: "proxima-nova", helvetica, sans-serif; font-weight: 400;
}
h1,
h2,
h3,
h4 { font-size: 1em; line-height: 1;
}
p { font-size: 100%; line-height: 1.4;
}
i { position: relative; top: .15em;
}
i.on-left { margin-right: 4px;
}
i.on-right { margin-left: 4px;
}
.gov { margin: 0 auto; width: 100%; max-width: 1440px;
}
header { padding: 30px 0; display: none;
}
header .logo { display: block; max-width: 160px;
}
img { display: block; width: 100%; max-width: 100%; margin: 0 auto;
}
.vert-center { display: table; width: 100%; height: 100%; margin: 0 auto;
}
.vert-center .vc-content { display: table-cell; vertical-align: middle;
}
.hp-hero { position: relative; display: none;
}
.grid ul { width: 100%; margin: 4px auto;
}
.grid ul li { display: block; position: relative; z-index: 1; float: left; width: 25%;
}
.grid ul li.square { width: 25%;
}
.grid ul li.square-lg { width: 50%;
}
.grid ul li.wide { width: 50%;
}
.grid ul li.tall { width: 25%;
}
@media only screen and (max-width: 1140px) { .grid ul li.square { width: 25%; } .grid ul li.square-lg { width: 50%; } .grid ul li.wide { width: 50%; } .grid ul li.tall { width: 25%; }
}
@media only screen and (max-width: 860px) { .grid ul li.square { width: 50%; } .grid ul li.square-lg { width: 50%; } .grid ul li.wide { width: 100%; } .grid ul li.tall { width: 50%; }
}
@media only screen and (max-width: 630px) { .grid ul li.square { width: 100%; } .grid ul li.square-lg { width: 100%; } .grid ul li.wide { width: 100%; } .grid ul li.tall { width: 100%; }
}
.grid ul li.gi-copy { position: relative; display: table;
}
.grid ul li.gi-copy .gi-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; color: #fff; padding: 20px; text-align: center;
}
.grid ul li.gi-copy .gi-inner a,
.grid ul li.gi-copy .gi-inner p,
.grid ul li.gi-copy .gi-inner span,
.grid ul li.gi-copy .gi-inner h1,
.grid ul li.gi-copy .gi-inner h2,
.grid ul li.gi-copy .gi-inner h3,
.grid ul li.gi-copy .gi-inner h4,
.grid ul li.gi-copy .gi-inner h5 { display: block;
}
.grid ul li.stats-block .gi-inner { background: #75a40a; color: #fff; text-align: center; font-weight: 100;
}
.grid ul li.stats-block .gi-inner .vert-center { max-width: 180px;
}
.grid ul li.stats-block h2 { display: block; font-size: 6em; margin-bottom: 10px;
}
.grid ul li.stats-block p { display: block; font-size: 1.2em; line-height: 1.4;
}
.grid ul li.capabilities-block .gi-inner { background: #14b7cf; padding: 50px;
}
.grid ul li.capabilities-block .gi-inner .vert-center { max-width: 500px;
}
.grid ul li.capabilities-block .gi-inner p { font-size: 1.4em; font-weight: 300; margin-bottom: 1em;
}
.grid ul li.capabilities-block .gi-inner span { text-transform: uppercase; font-size: 1.1em; letter-spacing: 1px; font-weight: 700;
}
.grid ul li.capabilities-block .gi-inner span i { top: .05em;
}

Hompage Grid - Script Codes JS Codes

// Loading Order
// 1. Default, show grid loader
// 2. Load updateImgData() funtion
// to determine mobile or desktop images
// 3. Load packery/layout
// 4. Initiate lazy loading
$(window).load(function(){ $('.grid').packery({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true, transitionDuration: 0 });
}); //run on page load once //also run when window is resized, //for crazy window resizers and demo purposes
function updateImgData(windowWidth){ var defer = $.Deferred(); // console.log(windowWidth); $('.hero-slider img').each(function (index, value) { var imgSrcDesktop = $(this).data('src-desktop'); var imgSrcMobile = $(this).data('src-mobile'); if (windowWidth >= 630){ $(this) .attr('src', 'https://s3.amazonaws.com/f.cl.ly/items/1c3Y3d1L2a1f2S451T0r/lazy-default-1000x500.png') .attr('data-lazy', imgSrcDesktop) } else{ $(this) .attr('src', 'https://s3.amazonaws.com/f.cl.ly/items/3i2V0a3a2j18302b463h/lazy-default-800x600.png') .attr('data-lazy', imgSrcMobile); } defer.resolve(); }); return defer;
}
Hompage Grid - Script Codes
Hompage Grid - Script Codes
Home Page Home
Developer Jeff Pannone
Username jeffpannone
Uploaded August 12, 2022
Rating 3
Size 5,086 Kb
Views 26,312
Do you need developer help for Hompage Grid?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Pannone (jeffpannone) Script Codes
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!