简介：前端领域创作者。扫码或搜索添加文末微信「耀南」：🍗 回复 ”网站模板“，免费送网站模板！
欢迎点赞 👍 收藏 ⭐留言 📝 私信📄
❤ 【小程序模板/PC登录页模板/GPT开源/ 分布式架构系统】
❤ 【web前端静态网页设计/小程序前端成品项目——🔥🔥移动成品项目精品实战案例】
一、网页效果🌌
二、内容简介🧩
通过对Web知识内容的了解，我们掌握了HTML、CSS和JavaScript的基本知识以及利用它们实现一些简单的应用。
接下来我们要使用这些知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用，CSS设计内容样式和图片、动画、视频的大小位置格式，JavaScript实现轮播图效果等。
三、网站介绍📚
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
四、前端介绍🔗：
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。
五、目录结构📂
六、代码💒
<!DOCTYPE html>
<html>
<head>
<title>Heady</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="description" content="Bootstrap 5 Landing Page HTML CSS Template">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/10.3.1/swiper-bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/vendor.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- script
================================================== -->
<script src="js/modernizr.js"></script>
</head>
<body class="bg-body" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="http://www.w3.org/2000/svg" id="navbar-icon" viewBox="0 0 16 16">
<path d="M14 10.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0 0 1h7a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0 0 1h11a.5.5 0 0 0 .5-.5z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="play" viewBox="0 0 32 32">
<path fill="currentColor" d="M7 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.482-.876l20 11a1 1 0 0 1 0 1.752l-20 11A1 1 0 0 1 7 28ZM8 6.69v18.62L24.925 16Z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="star-empty" viewBox="0 0 16 16">
<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="cart" viewBox="0 0 24 24">
<path fill="currentColor" d="M17 18a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2M1 2h3.27l.94 2H20a1 1 0 0 1 1 1c0 .17-.05.34-.12.5l-3.58 6.47c-.34.61-1 1.03-1.75 1.03H8.1l-.9 1.63l-.03.12a.25.25 0 0 0 .25.25H19v2H7a2 2 0 0 1-2-2c0-.35.09-.68.24-.96l1.36-2.45L3 4H1V2m6 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2m9-7l2.78-5H6.14l2.36 5H16Z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="wishlist" viewBox="0 0 24 24">
<path fill="currentColor" d="m12.1 18.55l-.1.1l-.11-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04 1 3.57 2.36h1.86C13.46 6 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05M16.5 3c-1.74 0-3.41.81-4.5 2.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5c0 3.77 3.4 6.86 8.55 11.53L12 21.35l1.45-1.32C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3Z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="balloon" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
<path d="M8 16.607c1.15.86 2.518 1.38 4 1.393c4.142.034 7.594-3.92 7.56-8.196C19.527 5.53 16.142 2.034 12 2c-4.142-.034-7.473 3.404-7.44 7.68A8.88 8.88 0 0 0 5.244 13" />
<path d="M15.5 9a3.035 3.035 0 0 0-3-3M12 20.35c.321 0 .482 0 .593-.022c.654-.128 1.051-.772.858-1.39c-.033-.105-.109-.242-.261-.515M12 20.35c-.321 0-.482 0-.593-.022c-.654-.128-1.051-.772-.858-1.39c.033-.105.109-.242.261-.515M12 20.35v2.15" />
</g>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="bag-heart" viewBox="0 0 24 24">
<g fill="none">
<path fill="currentColor" d="m12 12.191l-.519.542a.75.75 0 0 0 1.038 0L12 12.191Zm-.957 3.675l-.444.604l.444-.604Zm1.914 0l-.444-.605l.444.605Zm-.957.462v.75v-.75Zm-.514-1.067c-.417-.307-.878-.69-1.227-1.093c-.368-.426-.509-.757-.509-.971h-1.5c0 .77.441 1.45.875 1.952c.453.525 1.014.984 1.474 1.321l.887-1.21ZM9.75 13.197c0-.576.263-.827.492-.907c.25-.088.714-.06 1.24.443l1.037-1.083c-.825-.79-1.861-1.096-2.773-.776c-.934.327-1.496 1.226-1.496 2.323h1.5Zm3.65 3.273c.46-.337 1.022-.796 1.475-1.32c.434-.502.875-1.183.875-1.953h-1.5c0 .214-.141.545-.51.971c-.348.403-.809.786-1.226 1.093l.887 1.21Zm2.35-3.273c0-1.097-.563-1.996-1.496-2.323c-.912-.32-1.948-.014-2.773.776l1.038 1.083c.525-.503.989-.531 1.24-.443c.228.08.491.33.491.907h1.5ZM10.6 16.47c.368.27.782.608 1.4.608v-1.5c-.024 0-.04 0-.094-.03a4 4 0 0 1-.42-.287l-.887 1.21Zm1.914-1.21a4 4 0 0 1-.42.289c-.054.029-.07.029-.094.029v1.5c.618 0 1.032-.337 1.4-.608l-.886-1.21Z" />
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M9 6V5a3 3 0 1 1 6 0v1m5.224 6.526c-.586-3.121-.878-4.682-1.99-5.604C17.125 6 15.537 6 12.36 6h-.72c-3.176 0-4.764 0-5.875.922c-1.11.922-1.403 2.483-1.989 5.604c-.823 4.389-1.234 6.583-.034 8.029C4.942 22 7.174 22 11.639 22h.722c4.465 0 6.698 0 7.897-1.445c.696-.84.85-1.93.696-3.555" />
</g>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="handiplast" viewBox="0 0 24 24">
<g fill="none">
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M13.5 7.642L9.071 3.213a4.142 4.142 0 0 0-5.858 5.858L14.93 20.787a4.142 4.142 0 0 0 5.858-5.858l-4.358-4.358" />
<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="m12 17.858l-2.929 2.929A4.142 4.142 0 0 1 2.596 20m3.546-8l-2.929 2.929c-.322.322-.58.685-.774 1.071M12 6.142l2.929-2.929a4.142 4.142 0 1 1 5.858 5.858L17.857 12" />
<path fill="currentColor" d="M15.841 12.871a.788.788 0 1 1-1.114 1.114a.788.788 0 0 1 1.114-1.114Zm-3.712-3.712a.787.787 0 1 0-1.114 1.114a.787.787 0 0 0 1.114-1.114Zm4.641 6.497a.787.787 0 1 1-1.114 1.114a.787.787 0 0 1 1.114-1.114ZM9.345 8.23A.788.788 0 1 0 8.23 9.346A.788.788 0 0 0 9.345 8.23Zm3.712 3.713a.787.787 0 1 1-1.113 1.114a.787.787 0 0 1 1.113-1.114Zm.928 2.785a.788.788 0 1 1-1.114 1.113a.788.788 0 0 1 1.114-1.113Zm-3.712-3.713a.787.787 0 1 0-1.114 1.114a.787.787 0 0 0 1.114-1.114Z" />
</g>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="send" viewBox="0 0 32 32">
<path fill="currentColor" d="M26.07 3.996a2.974 2.974 0 0 0-.933.223h-.004c-.285.113-1.64.683-3.7 1.547l-7.382 3.109c-5.297 2.23-10.504 4.426-10.504 4.426l.062-.024s-.359.118-.734.375a2.03 2.03 0 0 0-.586.567c-.184.27-.332.683-.277 1.11c.09.722.558 1.155.894 1.394c.34.242.664.355.664.355h.008l4.883 1.645c.219.703 1.488 4.875 1.793 5.836c.18.574.355.933.574 1.207c.106.14.23.257.379.351a1.119 1.119 0 0 0 .246.106l-.05-.012c.015.004.027.016.038.02c.04.011.067.015.118.023c.773.234 1.394-.246 1.394-.246l.035-.028l2.883-2.625l4.832 3.707l.11.047c1.007.442 2.027.196 2.566-.238c.543-.437.754-.996.754-.996l.035-.09l3.734-19.129c.106-.472.133-.914.016-1.343a1.807 1.807 0 0 0-.781-1.047a1.872 1.872 0 0 0-1.067-.27zm-.101 2.05c-.004.063.008.056-.02.177v.011l-3.699 18.93c-.016.027-.043.086-.117.145c-.078.062-.14.101-.465-.028l-5.91-4.531l-3.57 3.254l.75-4.79l9.656-9c.398-.37.265-.448.265-.448c.028-.454-.601-.133-.601-.133l-12.176 7.543l-.004-.02l-5.836-1.965v-.004l-.015-.003a.27.27 0 0 0 .03-.012l.032-.016l.031-.011s5.211-2.196 10.508-4.426c2.652-1.117 5.324-2.242 7.379-3.11a807.312 807.312 0 0 1 3.66-1.53c.082-.032.043-.032.102-.032z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="facebook" viewBox="0 0 24 24">
<path fill="currentColor" d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4v-8.5Z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="twitter" viewBox="0 0 24 24">
<path fill="currentColor" d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="instagram" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3Z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="linkedin" viewBox="0 0 24 24">
<path fill="currentColor" d="M6.94 5a2 2 0 1 1-4-.002a2 2 0 0 1 4 .002ZM7 8.48H3V21h4V8.48Zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91l.04-1.68Z" />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="youtube" viewBox="0 0 24 24">
<path fill="currentColor" d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476h.489ZM9.999 8.5v7l6-3.5l-6-3.5Z" />
</symbol>
</svg>
<header id="header" class="site-header text-black bg-white fixed-top">
<nav id="header-nav" class="navbar navbar-expand-lg px-3 mb-3">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="images/main-logo.png" class="logo">
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2 border-0 shadow-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-icon" width="50" height="50">
<use xlink:href="#navbar-icon"></use>
</svg>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
<div class="offcanvas-header px-4 pb-0">
<a class="navbar-brand" href="index.html">
<img src="images/main-logo.png" class="logo">
</a>
<button type="button" class="btn-close btn-close-black" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 gap-5 pe-3">
<li class="nav-item">
<a class="nav-link p-0" href="#intro">Home</a>
</li>
<li class="nav-item">
<a class="nav-link p-0" href="#overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link p-0" href="#video-player">Video</a>
</li>
<li class="nav-item">
<a class="nav-link p-0" href="#testimonials">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link p-0" href="#featured-products">Collection</a>
</li>
<li class="nav-item">
<a class="nav-link p-0" href="#faqs">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link p-0" href="#subscribe">Newsletter</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<section id="intro">
<div class="row g-0">
<div class="col-lg-6 col-md-12">
<div class="banner-image">
<img src="images/banner-image1.jpg" alt="banner" class="img-fluid">
</div>
</div>
<div class="col-lg-6 col-md-12 d-flex justify-content-center align-items-center" style="background-image: url(images/banner-bg.jpg); background-repeat: no-repeat; background-position: center; height: auto;">
<div class="banner-content p-5 text-center" data-aos="fade-up" data-aos-delay="9000">
<h1 class="display-1 fw-medium">Minimalist Headphones</h1>
<p class="fs-5">Experience the power of this innovative tool designed to rejuvenate and enhance your skin's natural radiance.</p>
<a href="shop.html" class="btn btn-lg btn-outline-dark btn-bg-dark text-uppercase mt-3">Order Now</a>
</div>
</div>
</div>
</section>
<section id="overview">
<div class="container-lg">
<div class="row align-items-center py-lg-9 justify-content-between">
<div class="col-lg-3" data-aos="fade-up" data-aos-delay="9000">
<div class="featured-item mb-5 text-center">
<h3 class="fs-3 fw-medium mb-1">Wireless Connectivity</h3>
<p>Seamlessly connect to your devices Bluetooth for a tangle-free listening experience.</p>
</div>
<div class="featured-item mb-5 text-center">
<h3 class="fs-3 fw-medium mb-1">Long Battery Life</h3>
<p>Enjoy hours of uninterrupted music with the long-lasting battery of Heady headphones.</p>
</div>
<div class="featured-item mb-5 text-center">
<h3 class="fs-3 fw-medium mb-1">Sleek Design</h3>
<p>Show off the stylish and sleek design of the headphones, available in various colors.</p>
</div>
</div>
<div class="col-lg-4" data-aos="zoom-out" data-aos-delay="9000">
<div class="image-holder text-center">
<img src="images/single-image1.jpg" alt="headphone" class="rounded-11 img-fluid">
</div>
</div>
<div class="col-lg-3" data-aos="fade-up" data-aos-delay="9000">
<div class="featured-item mb-5 text-center">
<h3 class="fs-3 fw-medium mb-1">Superior Sound Quality</h3>
<p>Enjoy rich, immersive sound with high-fidelity audio technology from heady.</p>
</div>
<div class="featured-item mb-5 text-center">
<h3 class="fs-3 fw-medium mb-1">Noise Isolation</h3>
<p>Block out external distractions immerse you in your music and yourself in your music.</p>
</div>
<div class="featured-item mb-5 text-center">
<h3 class="fs-3 fw-medium mb-1">Comfortable Fit</h3>
<p>Designed with plush ear cushions and an adjustable headband for listening sessions.</p>
</div>
</div>
</div>
</div>
</section>
<section id="video-player" class="video overflow-hidden">
<div class="row">
<div class="video-content open-up" data-aos="zoom-out">
<div class="video-bg position-relative">
<img src="images/video-item.jpg" alt="video" class="img-fluid">
<div class="player position-absolute d-flex justify-content-center align-items-center">
<a class='youtube play-btn d-flex justify-content-center align-items-center bg-white-trans rounded-pill' href="#">
<svg class="play text-dark" width="32" height="42">
<use xlink:href="#play"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials" class="py-lg-8">
<div class="container-lg">
<div class="section-header mt-0 text-center mb-5">
<h2 class="display-4 fw-600">Our Customer’s Reviews</h2>
</div>
<div class="d-flex flex-wrap">
<div class="swiper review-swiper position-relative mb-5">
<div class="swiper-wrapper" data-aos="zoom-out" data-aos-delay="9000">
<div class="swiper-slide">
<div class="review-item text-center px-3">
<blockquote class="fs-5">"I'm blown away by the sound quality of my Heady headphones. The clarity and depth of the audio are unparalleled. Whether I'm listening to my favorite songs or immersing myself in a movie, these headphones deliver an incredible audio experience. I can't recommend them enough!"</blockquote>
<div class="author-detail mt-4">
<div class="rating d-flex justify-content-center">
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
</div>
<div class="name fw-600 mt-3">David William - Feb 22, 2023</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="review-item text-center px-3">
<blockquote class="fs-5">"Comfort and style are equally important to me, and Heady headphones deliver on both fronts. The cushioned ear cups and adjustable headband make them incredibly comfortable to wear, even for long periods. Plus, they look sleek and modern. I'm impressed by the perfect blend of comfort and aesthetics."</blockquote>
<div class="author-detail mt-4">
<div class="rating d-flex justify-content-center">
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
</div>
<div class="name fw-600 mt-3">Emma Turner - April 5, 2023</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="review-item text-center px-3">
<blockquote class="fs-5">"I lead an active lifestyle, and my Heady headphones have become an essential companion. The wireless connectivity allows me to move freely during workouts or while running errands. Blocking out external noise and helping me stay focused on my music enjoying my favorite tunes."</blockquote>
<div class="author-detail mt-4">
<div class="rating d-flex justify-content-center">
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
</div>
<div class="name fw-600 mt-3">Rachel Bryan - April 18, 2023</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="review-item text-center px-3">
<blockquote class="fs-5">"I've owned several luxury watches, but my Reddy watch stands out from the rest. The craftsmanship is impeccable, and the attention to detail is truly remarkable. It's a timeless piece that never fails to garner compliments. I'm proud to be a Reddy watch owner." </blockquote>
<div class="author-detail mt-4">
<div class="rating d-flex justify-content-center">
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
</div>
<div class="name fw-600 mt-3">Park C - May 22, 2023</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination position-absolute"></div>
</div>
</div>
</div>
</section>
<section id="featured-products" class="bg-gray-1 py-lg-6 open-up" data-aos="zoom-out" data-aos-delay="9000">
<div class="container-lg">
<div class="display-header mt-0 text-center mb-5">
<h2 class="display-4 fw-600">Collection Of Headphones</h2>
<p>Check it out our varieties of colorful headphones.</p>
</div>
<div class="product-content">
<div class="row">
<div class="col-lg-4 col-md-6 mb-5">
<div class="product-card">
<div class="image-holder position-relative">
<a href="#">
<img src="images/product-item1.jpg" alt="product-item" class="img-fluid">
</a>
<div class="cart-concern">
<div class="cart-button position-absolute">
<button type="button" class="btn btn-normal bg-white" data-bs-toggle="modal" data-bs-target="#modallong">
<svg class="cart" width="20" height="20">
<use xlink:href="#cart"></use>
</svg>
</button>
<button type="button" class="btn btn-normal bg-white" data-bs-target="#modaltoggle" data-bs-toggle="modal">
<svg class="wishlist" width="20" height="20">
<use xlink:href="#wishlist"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="card-detail mt-3">
<div class="rating">
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
</div>
<h3 class="card-title fs-3 mb-2 mt-2">
<a href="single-product.html" class="text-dark">Wireless Connectivity</a>
</h3>
<span class="card-price text-primary fs-3 fw-600">$290</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="product-card">
<div class="image-holder position-relative">
<a href="#">
<img src="images/product-item2.jpg" alt="product-item" class="img-fluid">
</a>
<div class="cart-concern">
<div class="cart-button position-absolute">
<button type="button" class="btn btn-normal bg-white" data-bs-toggle="modal" data-bs-target="#modallong">
<svg class="cart" width="20" height="20">
<use xlink:href="#cart"></use>
</svg>
</button>
<button type="button" class="btn btn-normal bg-white" data-bs-target="#modaltoggle" data-bs-toggle="modal">
<svg class="wishlist" width="20" height="20">
<use xlink:href="#wishlist"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="card-detail mt-3">
<div class="rating">
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
</div>
<h3 class="card-title fs-3 mb-2 mt-2">
<a href="single-product.html" class="text-dark">Blossom Headphone</a>
</h3>
<span class="card-price text-primary fs-3 fw-600">$290</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-5">
<div class="product-card">
<div class="image-holder position-relative">
<a href="#">
<img src="images/product-item3.jpg" alt="product-item" class="img-fluid">
</a>
<div class="cart-concern">
<div class="cart-button position-absolute">
<button type="button" class="btn btn-normal bg-white" data-bs-toggle="modal" data-bs-target="#modallong">
<svg class="cart" width="20" height="20">
<use xlink:href="#cart"></use>
</svg>
</button>
<button type="button" class="btn btn-normal bg-white" data-bs-target="#modaltoggle" data-bs-toggle="modal">
<svg class="wishlist" width="20" height="20">
<use xlink:href="#wishlist"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="card-detail mt-3">
<div class="rating">
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
<svg class="star-fill svg-yellow" width="15" height="15">
<use xlink:href="#star-fill"></use>
</svg>
</div>
<h3 class="card-title fs-3 mb-2 mt-2">
<a href="single-product.html" class="text-dark">Water proof headphone</a>
</h3>
<span class="card-price text-primary fs-3 fw-600">$290</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="faqs" class="py-lg-9">
<div class="container-lg">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12">
<div class="image-holder mb-5" data-aos="zoom-out" data-aos-delay="9000">
<img src="images/single-image2.jpg" alt="faqs" class="img-fluid">
</div>
</div>
<div class="col-lg-6 col-md-12" data-aos="fade-left" data-aos-delay="9000">
<h2 class="display-4 fw-600 mt-0">FAQs Section</h2>
<div class="accordion" id="accordionExample">
<div class="accordion-item border-0">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button fs-3 fw-medium bg-transparent px-0" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Are Heady headphones compatible with my devices? </button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body"> Absolutely! Heady headphones are equipped with a built-in microphone, allowing you to make and receive calls conveniently. Whether you're using them with your smartphone or other compatible devices, the microphone ensures clear and crisp audio for your phone conversations. Stay connected while enjoying the superior headphones. </div>
</div>
</div>
<div class="accordion-item border-0">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button fs-3 fw-medium bg-transparent px-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> How long does the battery of Heady headphones last? </button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body"> Absolutely! Heady headphones are equipped with a built-in microphone, allowing you to make and receive calls conveniently. Whether you're using them with your smartphone or other compatible devices, the microphone ensures clear and crisp audio for your phone conversations. Stay connected while enjoying the superior headphones. </div>
</div>
</div>
<div class="accordion-item border-0">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button fs-3 fw-medium bg-transparent px-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Do Heady headphones come with a warranty? </button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body"> Absolutely! Heady headphones are equipped with a built-in microphone, allowing you to make and receive calls conveniently. Whether you're using them with your smartphone or other compatible devices, the microphone ensures clear and crisp audio for your phone conversations. Stay connected while enjoying the superior headphones. </div>
</div>
</div>
<div class="accordion-item border-0">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button fs-3 fw-medium bg-transparent px-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> Can I use Heady headphones for making calls? </button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body"> Absolutely! Heady headphones are equipped with a built-in microphone, allowing you to make and receive calls conveniently. Whether you're using them with your smartphone or other compatible devices, the microphone ensures clear and crisp audio for your phone conversations. Stay connected while enjoying the superior headphones.</div>
</div>
</div>
<div class="accordion-item border-0">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button fs-3 fw-medium bg-transparent px-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> How do I clean and maintain my Heady headphones? </button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
<div class="accordion-body"> Absolutely! Heady headphones are equipped with a built-in microphone, allowing you to make and receive calls conveniently. Whether you're using them with your smartphone or other compatible devices, the microphone ensures clear and crisp audio for your phone conversations. Stay connected while enjoying the superior headphones.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="company-services" data-aos="fade-right" data-aos-delay="9000">
<div class="container-lg">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="icon-box text-center">
<div class="icon-box-icon mb-3">
<svg class="balloon svg-primary" width="39" height="39">
<use xlink:href="#balloon"></use>
</svg>
</div>
<div class="icon-box-content ps-3">
<h4 class="fs-3 fw-600 text-capitalize">100% high quality product</h4>
<p>We have option of pick up in store</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 border-start border-end">
<div class="icon-box text-center">
<div class="icon-box-icon mb-3">
<svg class="bag-heart svg-primary" width="39" height="39">
<use xlink:href="#bag-heart"></use>
</svg>
</div>
<div class="icon-box-content ps-3">
<h4 class="fs-3 fw-600 text-capitalize">Free shipping charge</h4>
<p>Inside City delivery within 5 days</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="icon-box text-center">
<div class="icon-box-icon mb-3">
<svg class="handiplast svg-primary" width="39" height="39">
<use xlink:href="#handiplast"></use>
</svg>
</div>
<div class="icon-box-content ps-3">
<h4 class="fs-3 fw-600 text-capitalize">Money back guarantee</h4>
<p>We will take return in some cases</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="subscribe" class="py-lg-6 bg-gray-1 my-lg-9 mb-lg-0" data-aos="zoom-out" data-aos-delay="9000">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-lg-6">
<div class="subscribe-content">
<div class="subscribe-header text-center">
<h2 class="display-4 fw-bold">Subscribe Us</h2>
<p>Subscribe to our newsletter for discounts and updates.</p>
</div>
<form id="form" class="py-5 position-relative">
<input type="text" name="email" placeholder="Write your email address here..." class="w-100 bg-transparent border-0 border-bottom pb-3">
<a href="#"><svg class="send position-absolute svg-secondary" width="54" height="54">
<use xlink:href="#send"></use>
</svg></a>
</form>
<div class="social-links">
<ul class="list-unstyled d-flex flex-wrap gap-3 justify-content-center">
<li class="border rounded-pill p-2">
<a href="#">
<svg width="25" height="25" viewBox="0 0 24 24" class="svg-secondary">
<use xlink:href="#facebook"></use>
</svg>
</a>
</li>
<li class="border rounded-pill p-2">
<a href="#">
<svg width="25" height="25" viewBox="0 0 24 24" class="svg-secondary">
<use xlink:href="#twitter"></use>
</svg>
</a>
</li>
<li class="border rounded-pill p-2">
<a href="#">
<svg width="25" height="25" viewBox="0 0 24 24" class="svg-secondary">
<use xlink:href="#youtube"></use>
</svg>
</a>
</li>
<li class="border rounded-pill p-2">
<a href="#">
<svg width="25" height="25" viewBox="0 0 24 24" class="svg-secondary">
<use xlink:href="#linkedin"></use>
</svg>
</a>
</li>
<li class="border rounded-pill p-2">
<a href="#">
<svg width="25" height="25" viewBox="0 0 24 24" class="svg-secondary">
<use xlink:href="#instagram"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="footer-bottom text-center py-3">
<p>© 2024 Heady. <a target="_blank" href="#" title="网站模板大全" class="text-dark">网站模板大全</a>
</p>
</div>
<script src="js/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha3/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/10.3.1/swiper-bundle.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
</body>
</html>由于代码篇幅过长 已上传到专栏源码里 点击自行下载即可~
不明白的可以留言 随时在~
结束啦🙇：
更多干货🎁
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!📣以上内容技术相关问题😈欢迎一起交流学习💌嘉vx+18634371151 👇🏻👇🏻👇🏻
853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
