<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>单页面相册</title><linkrel="stylesheet"href="day_13.css"><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><linkhref="https://cdn.bootcdn.net/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css"rel="stylesheet"></head><body><sectionclass="section"id="projects"><divclass="container"><divclass="row"><divclass="col-lg-3"><divclass="section-heading"><h6>Our Projects</h6><h2>some of our latest projects</h2></div><divclass="filters"><ul><liclass="active"data-filter="*">all</li><lidata-filter=".des">Web Design</li><lidata-filter=".dev">Web Development</li><lidata-filter=".gra">Graphics</li><lidata-filter=".tsh">Artworks</li></ul></div></div><divclass="col-lg-9"><divclass="filters-content"><divclass="row grid"><divclass="col-md-4 all des"><divclass="item"><ahref="images/1.jpg"data-lightbox="image-1"><imgsrc="images/1.jpg"alt=""></a></div></div><divclass="col-md-4 all dev">
iv class="item">
<ahref="images/2.jpg"data-lightbox="image-1"><imgsrc="images/2.jpg"alt=""></a></div></div><divclass="col-md-4 all gra"><divclass="item"><ahref="images/3.jpg"data-lightbox="image-1"><imgsrc="images/3.jpg"alt=""></a></div></div><divclass="col-md-4 all tsh"><divclass="item"><ahref="images/4.png"data-lightbox="image-1"><imgsrc="images/4.png"alt=""></a></div></div><divclass="col-md-4 all dev"><divclass="item"><ahref="images/5.png"data-lightbox="image-1"><imgsrc="images/5.png"alt=""></a></div></div><divclass="col-md-4 all des"><divclass="item"><ahref="images/6.jpg"data-lightbox="image-1"><imgsrc="images/6.jpg"alt=""></a></div></div></div></div></div></div></div></section><scriptsrc="./jquery-1.8.3.js"></script><scriptsrc="https://cdn.bootcdn.net/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"integrity="sha512-Zq2BOxyhvnRFXu0+WE6ojpZLOU2jdnqbrM1hmVdGzyeCa1DgM3X5Q4A/Is9xA1IkbUeDd7755dNNI/PzSf2Pew=="crossorigin="anonymous"></script><script>(function($){"use strict"$(".filters ul li").click(function(){$(".filters ul li").removeClass("active");$(this).addClass("active");var data =$(this).attr('data-filter');
$grid.isotope({
filter:data
})});var $grid =$(".grid").isotope({
itemSelector:".all",
percentPosition:true,
masonry:{
columnWidth:".all"}})})(window.jQuery)</script></body></html>
body{font-family: sans-serif;background-color: #4c4177;background-image:linear-gradient(315deg, #4c4177 0%, #2a5470 74%);height: 100vh;overflow: hidden;color: white;}#projects{padding-top: 120px;}#projects .section-heading{margin-bottom: 60px;}#projects .section-heading h6,
#projects .section-heading h2{color: #5fb759;}.filters{margin-top: 50px;}.filters ul{padding: 0;}.filters ul li{list-style: none;display: block;padding: 15px 0;cursor: pointer;position: relative;font-size: 17px;font-weight: 500;color: white;text-transform: capitalize;transition: all 0.3s ease-in-out;}.filters ul li .active,
.filters ul li:hover{color: #5fb759;}.filters-content .show{opacity: 1;visibility: visible;transition: all 350ms;}.filters-content .hide{opacity: 0;visibility: hidden;transition: all 350ms;}.filters-content .all{margin-bottom: 30px;}.filters-content .item{text-align: center;cursor: pointer;transition: all 0.3s ease-in-out;}.filters-content .item:hover{opacity: 0.75;}.filters-content .item img{width: 100%;border: 4px solid white;}