In this video we will make responsive image gallery with HTML, CSS & Perfundo CSS library
Perfundo is an extremely lightweight, pure CSS Lightbox which is completely functional without JavaScript.
Getting started
It’s pretty easy to get started with Statusfy.
Create a new index.html file with this HTML code..
<div class="c-hero qa-hero">
<div class="o-vertical-spacing o-vertical-spacing--xl c-hero__inner">
<div class="c-quick-demo">
<div class="perfundo">
<a href="#perfundo-lightbox" class="c-quick-demo__link perfundo__link qa-hero-link" >
<img src="image.png" class="c-hero__img c-quick-demo__img">
</a>
<div id="perfundo-lightbox" class="perfundo__overlay bounceIn qa-hover-overlay">
<figure class="perfundo__content perfundo__figure">
<img src="image.png">
<div class="perfundo__images perfundo__images-bg"></div>
</figure>
<a href="#" class="perfundo__close perfundo__control">close</a>
</div>
</div>
</div>
</div>
</div>
then import perfundo.css on header in html file.
<head>
<link rel="stylesheet" href="perfundo.css">
</head>
Create a style.css file with this CSS code.
.perfundo__images-bg {
width: 800px;
padding-top: 56.25%;
background-image: url(image.png);
background-size: contain;
}
.c-hero {
background: #e5e5e5;
}
.c-quick-demo__link {
box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
}
.perfundo__overlay {
background-color: rgb(0 0 0 / 62%);
}
then,
connect the style.css file in index.html file
I hope you know how to add css and js file in html. Or follow tutorial video..
0 Comments