主页:搞前端的半夏
简介:前端领域优质创作者。扫码或搜索添加文末公众号「搞前端的半夏」:🍗 回复 ”网站模板“,免费送网站模板!
欢迎点赞 👍 收藏 ⭐留言 📝 私信📄
你还在未HTML网页设计作业头大吗?
你还在为自学前端,没有项目练手苦恼吗?
你还在为外包项目没有模板难受吗?
关注专栏《前端网站模板》,自用,作业,外包。你想要的全都有,持续更新,励志更新1000套模板!!
Training Studio CSS 模板适用于健身房、健身俱乐部和瑜伽俱乐部网站。此 HTML 模板基于 Bootstrap v4.3.1 框架构建。此布局具有视频背景横幅、内容选项卡、日程表、联系表和 Google 地图。您可以根据需要调整任何部分或内容。
模块设计-文末获取源码
-
首页
-
关于
-
锻炼版
-
计划安排
-
联系我们
首页
大图展示
<div class="main-banner" id="top">
<video autoplay muted loop id="bg-video">
<source src="assets/images/gym-video.mp4" type="video/mp4" />
</video>
<div class="video-overlay header-text">
<div class="caption">
<h6>更强健的身体</h6>
<h2>与我们一起 <em>gym</em></h2>
<div class="main-button scroll-to-section">
<a href="#features">立即加入</a>
</div>
</div>
</div>
</div>
服务列表轮播
<section class="section" id="features">
<div class="container">
<div class="row">
<div class="col-lg-6">
<ul class="features-items">
<li class="feature-item">
<div class="left-icon">
<img src="assets/images/features-first-icon.png" alt="fourth muscle">
</div>
<div class="right-content">
<h4>Advanced Muscle Course</h4>
<p>You may want to browse through <a rel="nofollow" href="" target="_parent">Digital Marketing</a> or <a href="">Corporate</a> HTML CSS templates on our website.</p>
<a href="#" class="text-button">Discover More</a>
</div>
</li>
<li class="feature-item">
<div class="left-icon">
<img src="assets/images/features-first-icon.png" alt="training fifth">
</div>
<div class="right-content">
<h4>Yoga Training</h4>
<p>This template is built on Bootstrap v4.3.1 framework. It is easy to adapt the columns and sections.</p>
<a href="#" class="text-button">Discover More</a>
</div>
</li>
<li class="feature-item">
<div class="left-icon">
<img src="assets/images/features-first-icon.png" alt="gym training">
</div>
<div class="right-content">
<h4>Body Building Course</h4>
<p>Suspendisse fringilla et nisi et mattis. Curabitur sed finibus nisi. Integer nibh sapien, vehicula et auctor.</p>
<a href="#" class="text-button">Discover More</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
课程列表
课程安排
<section class="section" id="our-classes">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<div class="section-heading">
<h2>Our <em>Classes</em></h2>
<img src="assets/images/line-dec.png" alt="">
<p>Nunc urna sem, laoreet ut metus id, aliquet consequat magna. Sed viverra ipsum dolor, ultricies fermentum massa consequat eu.</p>
</div>
</div>
</div>
<div class="row" id="tabs">
<div class="col-lg-4">
<ul>
<li><a href='#tabs-1'><img src="assets/images/tabs-first-icon.png" alt="">First Training Class</a></li>
<li><a href='#tabs-2'><img src="assets/images/tabs-first-icon.png" alt="">Second Training Class</a></a></li>
<li><a href='#tabs-3'><img src="assets/images/tabs-first-icon.png" alt="">Third Training Class</a></a></li>
<li><a href='#tabs-4'><img src="assets/images/tabs-first-icon.png" alt="">Fourth Training Class</a></a></li>
<div class="main-rounded-button"><a href="#">View All Schedules</a></div>
</ul>
</div>
</section>
</div>
</div>
</div>
</section>
联系我们
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="contact-form">
<form id="contact" action="" method="post">
<div class="row">
<div class="col-md-6 col-sm-12">
<fieldset>
<input name="name" type="text" id="name" placeholder="Your Name*" required="">
</fieldset>
</div>
<div class="col-md-6 col-sm-12">
<fieldset>
<input name="email" type="text" id="email" pattern="[^ @]*@[^ @]*" placeholder="Your Email*" required="">
</fieldset>
</div>
<div class="col-md-12 col-sm-12">
<fieldset>
<input name="subject" type="text" id="subject" placeholder="Subject">
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<textarea name="message" rows="6" id="message" placeholder="Message" required=""></textarea>
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<button type="submit" id="form-submit" class="main-button">Send Message</button>
</fieldset>
</div>
</div>
</form>
</div>
</div>
响应式
完整代码
获取完整源码:关注公众号【搞前端的半夏】回复[网站模板],免费获取源码。回复[网站模板],免费获取N++套模板
大家点赞、收藏、关注、评论啦 、查看👇🏻👇🏻👇🏻微信公众号获取👇🏻👇🏻👇🏻