maze.io/templates/portfolio-details.html

222 lines
9.0 KiB
HTML
Raw Permalink Normal View History

2024-06-20 17:28:02 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Portfolio Details - iPortfolio Bootstrap Template</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- =======================================================
* Template Name: iPortfolio
* Template URL: https://bootstrapmade.com/iportfolio-bootstrap-portfolio-websites-template/
* Updated: Jun 14 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body class="portfolio-details-page">
<header id="header" class="header d-flex flex-column">
<i class="header-toggle d-xl-none bi bi-list"></i>
<div class="profile-img">
<img src="assets/img/my-profile-img.jpg" alt="" class="img-fluid rounded-circle">
</div>
<a href="index.html" class="logo d-flex align-items-center justify-content-center">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="assets/img/logo.png" alt=""> -->
<h1 class="sitename">Alex Smith</h1>
</a>
<div class="social-links text-center">
<a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="google-plus"><i class="bi bi-skype"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="#hero"><i class="bi bi-house navicon"></i>Home</a></li>
<li><a href="#about"><i class="bi bi-person navicon"></i> About</a></li>
<li><a href="#resume"><i class="bi bi-file-earmark-text navicon"></i> Resume</a></li>
<li><a href="#portfolio"><i class="bi bi-images navicon"></i> Portfolio</a></li>
<li><a href="#services"><i class="bi bi-hdd-stack navicon"></i> Services</a></li>
<li class="dropdown"><a href="#"><i class="bi bi-menu-button navicon"></i> <span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="#">Deep Dropdown 1</a></li>
<li><a href="#">Deep Dropdown 2</a></li>
<li><a href="#">Deep Dropdown 3</a></li>
<li><a href="#">Deep Dropdown 4</a></li>
<li><a href="#">Deep Dropdown 5</a></li>
</ul>
</li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
</ul>
</li>
<li><a href="#contact"><i class="bi bi-envelope navicon"></i> Contact</a></li>
</ul>
</nav>
</header>
<main class="main">
<!-- Page Title -->
<div class="page-title" data-aos="fade">
<div class="container d-lg-flex justify-content-between align-items-center">
<h1 class="mb-2 mb-lg-0">Portfolio Details</h1>
<nav class="breadcrumbs">
<ol>
<li><a href="index.html">Home</a></li>
<li class="current">Portfolio Details</li>
</ol>
</nav>
</div>
</div><!-- End Page Title -->
<!-- Portfolio Details Section -->
<section id="portfolio-details" class="portfolio-details section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<div class="col-lg-8">
<div class="portfolio-details-slider swiper init-swiper">
<script type="application/json" class="swiper-config">
{
"loop": true,
"speed": 600,
"autoplay": {
"delay": 5000
},
"slidesPerView": "auto",
"pagination": {
"el": ".swiper-pagination",
"type": "bullets",
"clickable": true
}
}
</script>
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="assets/img/portfolio/app-1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/portfolio/product-1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/portfolio/branding-1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="assets/img/portfolio/books-1.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="col-lg-4">
<div class="portfolio-info" data-aos="fade-up" data-aos-delay="200">
<h3>Project information</h3>
<ul>
<li><strong>Category</strong>: Web design</li>
<li><strong>Client</strong>: ASU Company</li>
<li><strong>Project date</strong>: 01 March, 2020</li>
<li><strong>Project URL</strong>: <a href="#">www.example.com</a></li>
</ul>
</div>
<div class="portfolio-description" data-aos="fade-up" data-aos-delay="300">
<h2>Exercitationem repudiandae officiis neque suscipit</h2>
<p>
Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia accusantium nesciunt est omnis tempora consectetur dignissimos. Sequi nulla at esse enim cum deserunt eius.
</p>
</div>
</div>
</div>
</div>
</section><!-- /Portfolio Details Section -->
</main>
<footer id="footer" class="footer position-relative">
<div class="container">
<div class="copyright text-center ">
<p>© <span>Copyright</span> <strong class="px-1 sitename">iPortfolio</strong> <span>All Rights Reserved</span></p>
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you've purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer>
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Preloader -->
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/typed.js/typed.umd.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>