<!doctype html>
<html class="h-100" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="description" content="A growing collection of ready to use components for the CSS framework Bootstrap 5">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon.png">
<meta name="author" content="Holger Koenemann">
<meta name="generator" content="Eleventy v2.0.0">
<meta name="HandheldFriendly" content="true">
<title>Stride HTML Template - Frontpage one</title>
<link rel="stylesheet" href="css/theme.min.css">
<style>
/* inter-300 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: local(''),
url('./fonts/inter-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('./fonts/inter-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: local(''),
url('./fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('./fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: local(''),
url('./fonts/inter-v12-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('./fonts/inter-v12-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navScroll">
<nav id="navScroll" class="navbar navbar-expand-lg navbar-light fixed-top" tabindex="0">
<div class="container">
<a class="navbar-brand pe-4 fs-4" href="/">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-layers-half" viewbox="0 0 16 16">
<path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z"/>
</svg>
<span class="ms-1 fw-bolder">Stride</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#services" aria-label="Brings you to the frontpage">
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutus">
About us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#numbers">
Numbers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">
Gallery
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workwithus">
Work with us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">
Testimonials
</a>
</li>
</ul>
<a href="http://www.mobanwang.com/" target="_blank" data-splitbee-event="Click Download" aria-label="Download this template" class="link-dark pb-1 link-fancy me-2">
Download this Template <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download ms-1" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</a>
</div>
</div>
</nav>
<main>
<div class="w-100 overflow-hidden bg-gray-100" id="top">
<div class="container position-relative">
<div class="col-12 col-lg-8 mt-0 h-100 position-absolute top-0 end-0 bg-cover" data-aos="fade-left" style="background-image: url(img/webp/interior11.webp);">
</div>
<div class="row">
<div class="col-lg-7 py-vh-6 position-relative" data-aos="fade-right">
<h1 class="display-1 fw-bold mt-5">Sell more useless stuff faster!</h1>
<p class="lead">To be honest, this is just a stupid placeholder text. We don´t know how to sell anything, not even lesser or slower as you.</p>
<a href="#" class="btn btn-dark btn-xl shadow me-3 rounded-0 my-5">Get started free</a>
</div>
</div>
</div>
</div>
<div class="py-vh-5 w-100 overflow-hidden" id="services">
<div class="container">
<div class="row d-flex justify-content-end">
<div class="col-lg-8" data-aos="fade-down"><h2 class="display-6">Okay, there are three really good reasons for us. There are no more than three, but we think three is a reasonable good number of good stuff.</h2></div>
</div>
<div class="row d-flex align-items-center">
<div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<span class="h5 fw-lighter">01.</span>
<h3 class="py-5 border-top border-dark">We rented this fancy startup office in an old factory building.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus culpa, voluptatibus ex itaque, sapiente a consequatur inventore beatae, ipsam debitis omnis consequuntur iste asperiores. Similique quisquam debitis corrupti deserunt, dolor.</p>
<a href="#" class="link-fancy">Learn more
</a>
</div>
<div class="col-md-6 col-lg-4 py-vh-4 pb-0" data-aos="fade-up" data-aos-delay="400">
<span class="h5 fw-lighter">02.</span>
<h3 class="py-5 border-top border-dark">We don´t know exactly what we are doing. But thats good because we can´t break something intentionally.</h3>
<p>Lorem, ipsum dolor sit adipisicing elit. Minus culpa, voluptatibus ex itaque, sapiente a consequatur inventore beatae, ipsam debitis omnis consequuntur iste asperiores. Similique quisquam debitis corrupti deserunt, dolor.</p>
<a href="#" class="link-fancy">Learn more
</a>
</div>
<div class="col-md-6 col-lg-4 py-vh-6 pb-0" data-aos="fade-up" data-aos-delay="600">
<span class="h5 fw-lighter">03.</span>
<h3 class="py-5 border-top border-dark">There is no real number three reason. So please read again number one and two.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus culpa, voluptatibus ex itaque, sapiente a consequatur inventore beatae, ipsam debitis omnis consequuntur iste asperiores. Similique quisquam debitis corrupti deserunt, dolor.</p>
<a href="#" class="link-fancy">Learn more
</a>
</div>
</div>
</div>
</div>
<div class="py-vh-4 bg-gray-100 w-100 overflow-hidden" id="aboutus">
<div class="container">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-lg-6">
<div class="row gx-5 d-flex">
<div class="col-md-11">
<div class="shadow ratio ratio-16x9 rounded bg-cover bp-center align-self-end" data-aos="fade-right" style="background-image: url(img/webp/people15.webp);--bs-aspect-ratio: 50%;">
</div>
</div>
<div class="col-md-5 offset-md-1">
<div class="shadow ratio ratio-1x1 rounded bg-cover mt-5 bp-center float-end" data-aos="fade-up" style="background-image: url(img/webp/interior42.webp);">
</div>
</div>
<div class="col-md-6">
<div class="col-12 shadow ratio rounded bg-cover mt-5 bp-center" data-aos="fade-left" sty
HTML+CSS+JS+JQ+Bootstrap的简洁生活休闲产品网页.7z （111个子文件） 
theme.css 277KB theme.min.css 41KB
index.html 40KB content.html 15KB register.html 4KB 404.html 3KB favicon.ico 1KB 363e7da2-1024.jpeg 99KB 63b92862-1024.jpeg 94KB 4e3f26e0-1024.jpeg 83KB 60e54d2c-768.jpeg 66KB 74d6cec4-768.jpeg 47KB
crash.jpg 2.87MB colorful.jpg 1.03MB interior29.jpg 520KB people2.jpg 417KB person9.jpg 338KB people1.jpg 279KB people4.jpg 275KB 404.jpg 268KB person17.jpg 261KB person8.jpg 257KB people23.jpg 254KB person18.jpg 238KB person10.jpg 236KB person5.jpg 235KB person16.jpg 230KB person12.jpg 229KB person15.jpg 221KB person14.jpg 208KB person6.jpg 178KB people15.jpg 174KB person11.jpg 167KB person7.jpg 159KB person13.jpg 151KB person1.jpg 115KB person3.jpg 113KB interior42.jpg 111KB person2.jpg 94KB person4.jpg 87KB interior37.jpg 48KB interior11.jpg 35KB bootstrap.bundle.js 203KB bootstrap.js 142KB bootstrap.esm.js 132KB bootstrap.bundle.min.js 78KB bootstrap.esm.min.js 72KB bootstrap.min.js 59KB aos.cjs.js 19KB aos.esm.js 19KB aos.js 13KB bootstrap.bundle.js.map 439KB bootstrap.bundle.min.js.map 321KB bootstrap.js.map 301KB bootstrap.esm.js.map 300KB bootstrap.esm.min.js.map 213KB bootstrap.min.js.map 209KB
android-chrome-512x512.png 18KB android-chrome-192x192.png 6KB apple-touch-icon.png 5KB favicon-32x32.png 764B favicon-16x16.png 400B crash.webp 1.16MB colorful.webp 609KB 404.webp 128KB interior29.webp 49KB person8.webp 22KB people2.webp 22KB person14.webp 22KB person10.webp 21KB person5.webp 20KB person9.webp 18KB person17.webp 17KB person15.webp 15KB person18.webp 15KB person16.webp 15KB person12.webp 15KB people4.webp 13KB person11.webp 12KB interior42.webp 11KB interior11.webp 10KB person7.webp 10KB people1.webp 10KB people15.webp 9KB person13.webp 9KB people23.webp 8KB person3.webp 8KB person6.webp 7KB person1.webp 7KB person2.webp 7KB person4.webp 5KB android-chrome-512x512.webp 3KB interior37.webp 2KB android-chrome-192x192.webp 1KB apple-touch-icon.webp 1KB favicon-32x32.webp 310B favicon-16x16.webp 190B inter-v12-latin-700.woff 22KB inter-v12-latin-500.woff 22KB inter-v11-latin-500.woff 22KB共 111 条
- 1
- 2
资源评论
master_chenchengg
- 粉丝: 1w+
- 资源: 2157
最新资源
- C#ASP.NET口腔门诊会员病历管理系统源码 门诊会员管理系统源码数据库 SQL2008源码类型 WebForm
- 灰狼优化算法（Grey Wolf Optimizer，GWO）是一种群智能优化算法
- JAVA的SpringBoot宠物医院管理系统源码数据库 MySQL源码类型 WebForm
- STM32Fxx英文参考手册 + Jlink下载教程
- 贪心算法 - 数据结构与算法
- C#ASP.NET网络进销存管理系统源码数据库 SQL2008源码类型 WebForm
- Liny 的浏览器为 HarmonyOS NEXT 而构建，旨在为各种性能水平的设备提供一个浏览器的轻量之选
- FLASH批量导入PSD文件
- 529f675667cf31af3454bd60644e631a.mp4
- 此文件夹包含用于分析和转换 .d.ts文件，目的是将 ArkUI 界面暴露给更多语言和运行时
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
