<!doctype html>
<html lang="en">
<head>
<!-- Required Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title, Description, and Author -->
<title>Concept - Bootstrap 5 Portfolio Template</title>
<meta name="description" content="Concept is a Bootstrap 5 Portfolio Template.">
<!-- Favicon and Touch Icons -->
<link rel="icon" type="image/png" sizes="512x512" href="./assets/favicon/favicon-512x512.png">
<!-- CSS Files -->
<link rel="stylesheet" href="./assets/css/concept-bsb.css">
</head>
<body>
<!-- Header -->
<header id="header">
<!-- Navbar 1 - Bootstrap Brain Component -->
<nav class="navbar navbar-expand-md bg-light bsb-navbar bsb-navbar-hover bsb-navbar-caret">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="./assets/img/header/concept-logo.svg" class="bsb-tpl-logo" alt="">
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
</svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#!" id="accountDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Explore</a>
<ul class="dropdown-menu border-0 shadow bsb-zoomIn" aria-labelledby="accountDropdown">
<li><a class="dropdown-item" href="blog.html">Blog</a></li>
<li><a class="dropdown-item" href="single.html">Post</a></li>
<li><a class="dropdown-item" href="project.html">Project</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Hero 1 - Bootstrap Brain Component -->
<section class="px-5 py-8 py-xxl-20 background-position-center background-size-cover bsb-overlay bsb-hover-pull" style="background-image: url('./assets/img/header/hero-home.jpg');">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-12 col-md-11 col-lg-9 col-xl-7 col-xxl-6 text-center text-white">
<h1 class="display-3 fw-bold mb-3">Art of Design</h1>
<p class="lead mb-5">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-light btn-lg px-4 gap-3">Free Consultation</button>
<button type="button" class="btn btn-outline-light btn-lg px-4">Buy Credits</button>
</div>
</div>
</div>
</div>
</section>
</header>
<!-- Main -->
<main id="main">
<!-- Project 1 - Bootstrap Brain Component -->
<section class="py-5 py-xl-8">
<div class="container mb-5 mb-md-6">
<div class="row justify-content-md-center">
<div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6 text-center">
<h2 class="mb-4 display-5">Portfolio</h2>
<p class="text-secondary mb-4 mb-md-5">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque et neque id ligula mattis commodo.</p>
<hr class="w-50 mx-auto mb-0 text-secondary">
</div>
</div>
</div>
<div class="container overflow-hidden">
<div class="row gy-3 gy-md-2 bsb-project-1-grid">
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/portfolio/masonry-img-1.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Charming Concept</h3>
<div class="text-white bsb-hover-fadeInRight">Photography</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-6 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale bsb-hover-scale-up" loading="lazy" src="./assets/img/portfolio/masonry-img-2.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInUp">Linear Architecture</h3>
<div class="text-white bsb-hover-fadeInDown">Inspiration</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/portfolio/masonry-img-3.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Endless Looks</h3>
<div class="text-white bsb-hover-fadeInRight">Nature</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/portfolio/masonry-img-4.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Sleek Typography</h3>
<div class="text-white bsb-hover-fadeInRight">Design</div>
</figcaption>
</figure>
</div>
<div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
<figure class="rounded rounded-4 overflow-hidden bsb-hover-overlay">
<a href="#!">
<img class="img-fluid bsb-scale-up bsb-hover-scale" loading="lazy" src="./assets/img/portfolio/masonry-img-5.jpg" alt="">
</a>
<figcaption>
<h3 class="text-white bsb-hover-fadeInLeft">Ebony Vintage</h3>
<div class="text-white bsb-hover-fadeInRight">Fashion</div>
</
HTML+CSS+JS+JQ+Bootstrap的创意商业艺术设计网页.7z （53个子文件） 
【web课设】创意商业艺术设计网页-HTML源码 html 
project.html 13KB portfolio.html 16KB assets favicon 
favicon-512x512.png 22KB controller 
project-1.js 1KB img portfolio 
masonry-img-8.jpg 93KB masonry-img-7.jpg 109KB testimonial-img-4.jpg 6KB masonry-img-2.jpg 58KB about-img-1.jpg 120KB masonry-img-4.jpg 65KB testimonial-img-1.jpg 5KB project-img-2.jpg 46KB testimonial-img-3.jpg 5KB project-img-4.jpg 51KB masonry-img-5.jpg 121KB masonry-img-9.jpg 84KB masonry-img-6.jpg 19KB project-img-3.jpg 78KB masonry-img-3.jpg 71KB project-img-1.jpg 68KB masonry-img-1.jpg 44KB testimonial-img-2.jpg 4KB project-img-6.jpg 46KB project-img-5.jpg 52KB header hero-single.jpg 329KB hero-home.jpg 262KB hero-project.jpg 149KB hero-blog.jpg 346KB hero-contact.jpg 266KB hero-about.jpg 129KB hero-services.jpg 45KB
concept-logo.svg 2KB hero-portfolio.jpg 113KB blog blog-image-2.jpg 53KB single-img-1.jpg 403KB author-img-1.jpg 28KB blog-image-1.jpg 96KB blog-image-3.jpg 90KB single-img-2.jpg 34KB blog-image-4.jpg 65KB css concept-bsb.css 359KB vendor isotope packery-mode.pkgd.min.js 13KB isotope.pkgd.min.js 35KB bootstrap bootstrap.bundle.min.js.map 326KB bootstrap.bundle.min.js 79KB imagesloaded imagesloaded.pkgd.min.js 5KB jquery jquery-3.6.0.min.js 87KB services.html 20KB index.html 54KB contact.html 13KB about.html 15KB single.html 22KB blog.html 16KB资源评论
master_chenchengg
- 粉丝: 1w+
- 资源: 2157
