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 |
Slider and Product Functionality | 11,046 Kb |
Scroll Depth Example | 2,707 Kb |
Magnific - open popup with URL param | 3,607 Kb |
A Pen by Jeff Pannone | 1,716 Kb |
Geolocation API | 1,952 Kb |
Slide Toggle for Adam | 2,764 Kb |
JQuery Viewport Size | 2,317 Kb |
Photoswipe Drug Facts | 5,320 Kb |
DWSG Templates | 11,029 Kb |
JQuery Division | 1,970 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 |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Loading animation | Hafizfattah | 0 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Out of the blue | Giaco | 2,537 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
A Pen by Ash | Littleginger | 2,386 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!