Hompage Grid
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 - 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;
}
Developer | Jeff Pannone |
Username | jeffpannone |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 5,086 Kb |
Views | 26,312 |
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!
Name | Size |
A Pen by Jeff Pannone | 1,716 Kb |
DWSG Templates | 11,029 Kb |
Magnific - open popup with URL param | 3,607 Kb |
Slick dropdown navigation | 5,966 Kb |
URL Parameter Conditional | 1,853 Kb |
JQuery Division | 1,970 Kb |
Slider and Product Functionality | 11,046 Kb |
Cart Design | 7,316 Kb |
Scroll Depth Example | 2,707 Kb |
Geolocation API | 1,952 Kb |
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!
Name | Username | Size |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Template | Indra_z85 | 2,323 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!