---
title: 模板 1
slug: docs/cn/1
description: 这个可定制的白标网站模板文档提供代码文件、示例和框架，便于网站个性化定制。通过 jQuery 和 CSS 代码片段，你可以获取用于样式化页面区域、按钮、链接和页脚等元素的规则。
createdAt: 2023-06-28T08:23:40.655Z
---

:::hint{type="info"}
这是一个白标模板。要使其符合您的品牌和风格，您需要对提供的模板进行进一步自定义
:::

### 外观如下：

使用下面的链接查看白标模板的外观。请记住，每个颜色/徽标/占位符都可以自定义以匹配您的风格和品牌。

[https://vpft1m.csb.app/](https://vpft1m.csb.app/)

### 自定义代码文件：

:::hint{type="info"}
提示：使用代码编辑器右上角的 :FontAwesome[]{icon="fa-solid fa-copy"} Copy 按钮复制全部代码
:::

我们已为您在下面的代码编辑器中添加了自定义代码。查看如何使用它 [在这里](docId\:hsJEtUwCeOJZkpJKsMlG0)

:::CodeblockTabs
Index.html

```html
<!-- START Include headers -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Work+Sans: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"
/>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
  crossorigin="anonymous"
></script>
<!-- END Include headers-->

<!-- START NOT NEEDED -->
<link rel="stylesheet" href="/style.css" />
<script src="/script.js"></script>
<!-- END NOT NEEDED -->

<!-- START Landing page -->
<div class="body">
  <header class="header">
    <div class="search-bar">
      <div class="search-form">
        <input class="form-control" type="text" placeholder="Search..." />
        <button class="search-button">
          <span class="material-symbols-outlined"> search </span>
        </button>
      </div>
      <button class="close-icon">
        <span class="material-symbols-outlined"> close </span>
      </button>
    </div>
    <div class="logo-bar">
      <div class="container">
        <div class="logo-bar-inner">
          <a class="logo" href=""
            ><img
              src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here"
              alt="logo"
          /></a>
          <div class="search-wrape mobile">
            <button class="search-btn">
              <span class="material-symbols-outlined"> search </span>
            </button>
          </div>
          <div class="toggle-icon">&nbsp;</div>
        </div>
      </div>
    </div>
    <div class="navigation-menu">
      <div class="container">
        <div class="nav-menu">
          <nav>
            <ul>
              <li><a href="">LINK</a></li>
              <li><a href="">LINK</a></li>
              <li><a href="">LINK</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </header>
  <section class="home-banner">
    <div class="banner-width container">
      <div class="banner-wrape">
        <div class="banner-row">
          <div class="banner-col-sm">
            <div class="banner-wrape">
              <div class="banner-text">
                <h1>Title <strong>Subtitle</strong></h1>
              </div>
            </div>
          </div>
          <div class="banner-col-lg">
            <div class="banner-image">
              <figure>
                <img
                  src="https://placehold.co/1115x530/2166ae/FFF?text=Banner%20Image"
                  alt="banner-img"
                />
              </figure>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="intro-section">
    <div class="container">
      <div class="intro-width">
        <div class="intro-text">
          <h2>Intro title</h2>
          <h5>Intro subtitle</h5>
          <p>
            Some intro description. Lorem ipsum dolor, sit amet consectetur
            adipisicing elit. Doloremque id mollitia dolorum quam. Aspernatur
            omnis vitae debitis consequatur aliquam exercitationem facilis? Vero
            maiores aut dignissimos aspernatur quod pariatur odit quasi!
          </p>
        </div>
      </div>
    </div>
  </section>
  <section class="info-section">
    <div class="container">
      <div class="info-parent">
        <div class="overview-data">
          <div class="overview-row">
            <div class="overview-col">
              <div class="overview-wrape">
                <div class="overview-box">
                  <h3>Title</h3>
                  <p>Subtitle</p>
                  <a class="btn-default" href="">Browse</a>
                </div>
              </div>
            </div>
            <div class="overview-col">
              <div class="overview-wrape">
                <div class="overview-box">
                  <h3>Title</h3>
                  <p>Subtitle</p>
                  <a class="btn-default" href="">Explore</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="framework-data">
          <div class="framework-row">
            <div class="framework-col">
              <div class="framework-wrape">
                <div class="framework-box">
                  <figure>
                    <img
                      src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
                      alt="framework-icon-1"
                    />
                  </figure>
                  <div class="framework-text">
                    <h4>Title</h4>
                    <p>Description</p>
                    <a class="start-btn" href="">Start &gt;</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="framework-col">
              <div class="framework-wrape">
                <div class="framework-box">
                  <figure>
                    <img
                      src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
                      alt="framework-icon-2"
                    />
                  </figure>
                  <div class="framework-text">
                    <h4>Title</h4>
                    <p>Description</p>
                    <a class="start-btn" href="">Start &gt;</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="framework-col">
              <div class="framework-wrape">
                <div class="framework-box">
                  <figure>
                    <img
                      src="https://placehold.co/103x124/2166ae/FFF?text=Your%20icon"
                      alt="framework-icon-3"
                    />
                  </figure>
                  <div class="framework-text">
                    <h4>Title</h4>
                    <p>Description</p>
                    <a class="start-btn" href="">Start &gt;</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="buttons-link-section">
    <div class="container">
      <div class="buttons-link-group">
        <div class="buttons-link">
          <a class="btn-default" href="">Button</a>
        </div>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="container">
      <div class="footer-wrape">
        <a class="foot-logo" href="#"
          ><img
            src="https://placehold.co/130x74/2166ae/FFF?text=Your%20logo%20here"
            alt="logo"
        /></a>
      </div>
    </div>
    <div class="copyright">
      <div class="container">
        <div class="copyright-inner">
          <p>
            &copy; Copyright 2023 | | <a href="#">Link</a> |
            <a href="#">Link</a> | <a href="#">Link</a> by
            <a href="#">Nobody</a>
          </p>
          <ul>
            <li>
              <a href=""
                ><span class="material-symbols-outlined"> grid_guides </span>
              </a>
            </li>
            <li>
              <a href=""
                ><span class="material-symbols-outlined"> grid_guides </span>
              </a>
            </li>
            <li>
              <a href=""
                ><span class="material-symbols-outlined"> grid_guides </span>
              </a>
            </li>
            <!-- Your social links -->
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>
<!-- END Landing page-->

```

Script.js

```javascript
/*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */
$(document).ready(function () {
  $(".toggle-icon").click(function () {
    $(".nav-menu").toggleClass("show");
  });
});

$(document).ready(function () {
  $(".search-btn").click(function () {
    $(".header").addClass("show-search");
  });
  $(".close-icon").click(function () {
    $(".header").removeClass("show-search");
  });
});

```

Style.css

```css
:root {
  --accent-color: #2166ae;
  --link-primary: #656565;
  --link-accent: var(--accent-color);
  --text-primary: #000;
  --text-secondary: #fff;
  --text-accent: var(--accent-color);
  --sub-title-color: #6f6f6f;
  --primary-background: #fff;
  --secondary-background: #f3f3f3;
  --accent-background: var(--accent-color);
  --foter-background: #363839;
  --copyright-background: #282a2b;
  --copyright-text: #8c8989;
  --copyrigth-link: #bfbfbf;
  --border-color: #e5e5e5;
}

.body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: #333;
  font-family: "Work Sans", sans-serif;
}

/* comman */
html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*comman-area*/
ol,
ul {
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
a {
  text-decoration: none;
  transition: all 0.5s ease;
}
a:focus,
a:hover,
a:active {
  text-decoration: none;
  outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin: 0;
}
p {
  margin: 0;
  font-size: 16px;
  color: #222;
  line-height: 24px;
}
figure {
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
}
button:focus {
  outline: none;
  box-shadow: none;
}
.btn:hover,
.btn:focus {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}
.container {
  margin: 0 auto;
  width: 100%;
}

.toggle-icon {
  display: none;
  cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
  width: 30px;
  height: 2px;
  background-color: #626c70;
  margin: 6px 0;
  transition: 0.4s;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-4px, 6px);
  transform: rotate(-45deg) translate(-4px, 6px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-5px, -8px);
  transform: rotate(45deg) translate(-5px, -8px);
}

.mobile {
  display: none;
}

/* Navigation */
.logo-bar {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-color);
}
.logo-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navigation-menu {
  padding: 0 0;
}
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.nav-menu ul {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.nav-menu ul li {
  margin: 0 22px 0 0;
}
.nav-menu ul li a {
  color: var(--link-primary);
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  padding: 12px 0;
}
.nav-menu ul li a:hover {
  color: var(--link-accent);
}

.search-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 18px;
  transition: all 0.5s ease;
}
.search-btn:hover {
  opacity: 0.5;
}

/* banner */
.home-banner {
  padding: 20px 0 20px 0;
}
.banner-width {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
}
.banner-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 0;
}
.banner-col-sm {
  width: 50%;
  padding: 0 0;
}
.banner-col-lg {
  width: 50%;
  padding: 0 0;
}
.banner-wrape {
  min-height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 0;
}
.banner-text {
  max-width: 490px;
  padding: 0 30px 0 0;
  margin: 0 0;
  width: 100%;
}
.banner-text h1 {
  font-size: 4rem;
  line-height: 70px;
  color: var(--text-secondary);
}
.banner-text h1 strong {
  font-weight: normal;
}

/* intro section*/
.intro-section {
  padding: 3rem 0;
}
.intro-width {
  width: 100%;
  margin: 0 auto;
}
.intro-text h2 {
  font-size: 3.2rem;
  margin: 0 0 3rem 0;
  line-height: 1.14;
}
.intro-text h5 {
  font-size: 20px;
  color: var(--sub-title-color);
  line-height: 1.3;
}
.intro-text p {
  font-size: 17px;
  line-height: 1.7em;
  margin-top: 10px;
}

/* info-section */
.info-section {
  padding: 2.6rem 0 0 0;
  background-color: var(--secondary-background);
}
.overview-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.overview-col {
  width: 50%;
}
.overview-wrape {
  width: 100%;
  min-height: 334px;
  background-color: var(--primary-background);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 1px 10px 5px 1px #ededed;
  padding: 20px;
  margin: 0 0 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overview-box {
  text-align: center;
}
.overview-box h3 {
  font-size: 3.2rem;
  margin: 0 0 30px 0;
}
.overview-box p {
  color: var(--sub-title-color);
  max-width: 280px;
  width: 100%;
  font-size: 20px;
  margin: 0 auto 30px auto;
}
.btn-default {
  padding: 12px 29px;
  font-size: 16px;
  color: var(--text-secondary);
  border: 2px solid var(--accent-color);
  letter-spacing: 1px;
  background-color: var(--accent-color);
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 5px;
  display: inline-block;
  text-align: center;
}
.btn-default:hover {
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  background-color: var(--text-secondary);
}

.framework-data {
  padding: 28px 0;
}
.framework-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.framework-col {
  width: 33.33%;
  padding: 0 10px;
}
.framework-box {
  background-color: var(--primary-background);
  margin: 0 0 30px 0;
  display: flex;
  flex-wrap: wrap;
}
.framework-box figure {
  width: 165px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: var(--accent-color);
}
.framework-text {
  width: calc(100% - 165px);
  min-height: 100%;
  padding: 10px 10px 10px 15px;
}
.framework-text h4 {
  font-size: 20px;
  font-weight: bold;
  color: var(--accent-color);
  margin: 0 0 10px 0;
  min-height: 50px;
  display: flex;
  align-items: center;
}
.framework-text p {
  margin: 0 0 20px 0;
  font-size: 17px;
  line-height: 1.7em;
  min-height: 230px;
}
.start-btn {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent-color);
}

.buttons-link-section {
  background-color: var(--secondary-background);
}
.buttons-link-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
  min-height: 200px;
  padding: 15px 0;
  margin: 0 -25px;
}
.buttons-link {
  width: 25%;
  padding: 0 25px;
}
.buttons-link-group .btn-default {
  width: 100%;
  display: table;
}

.footer {
  background-color: var(--foter-background);
}
.footer-wrape {
  padding: 6.15rem 0;
}
.copyright {
  padding: 25px 0;
  background-color: var(--copyright-background);
  border-top: 1px solid #4b4c4d;
}
.copyright-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.copyright p {
  color: var(--copyright-text);
  font-size: 13px;
}
.copyright p a {
  color: var(--copyrigth-link);
}
.copyright ul {
  list-style: none;
  margin: 0;
}
.copyright ul li {
  margin: 0 5px 0 0;
  display: inline-block;
}
.copyright ul li a {
  color: var(--copyrigth-link);
}
.copyright ul li:last-child {
  margin-right: 0;
}
.copyright ul li a {
  display: block;
  width: 17px;
}

.header {
  position: relative;
}
.search-bar {
  max-width: 880px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  top: 0%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.8s ease;
  background-color: #fff;
  z-index: 111;
}
.search-form {
  position: relative;
  width: calc(100% - 50px);
}
.form-control {
  border: 1px solid #d2d2d2;
  border-radius: 0;
  color: #aaa9a9;
  font-size: 13px;
  background-color: #fff;
  width: 100%;
  height: 50px;
  opacity: 1;
}
.form-control::placeholder {
  color: #aaa9a9;
  font-size: 13px;
  opacity: 1;
}
.form-control:focus {
  border: 1px solid #d2d2d2;
  box-shadow: none;
  outline: none;
}
.search-bar .form-control {
  padding-left: 50px;
}

.search-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.search-button img {
  width: 14px;
  opacity: 0.7;
}
.close-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  border: none;
  justify-content: center;
}
.close-icon img {
  width: 12px;
}

.show-search .search-bar {
  top: 50%;
  opacity: 1;
  visibility: visible;
}
.show-search .nav-menu {
  position: relative;
  z-index: -1;
  transition: all 0.8s ease;
  transform: translateY(50px);
}

.home-banner {
  position: relative;
}
.banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}
.home-banner::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--accent-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: multiply;
}
.banner-wrape {
  position: relative;
  z-index: 11;
}

@media (min-width: 2001px) and (max-width: 2560px) {
  .container {
    max-width: 1300px !important;
  }
}
@media (min-width: 1801px) and (max-width: 2000px) {
  .container {
    max-width: 1300px !important;
  }
}
@media (min-width: 1551px) and (max-width: 1800px) {
  .container {
    max-width: 1300px !important;
  }
}
@media (min-width: 1300px) and (max-width: 1550px) {
  html {
    font-size: 55%;
  }
  .container {
    max-width: 1200px !important;
  }
  .logo-bar {
    padding: 20px 0;
  }

  .home-banner {
    padding: 40px 0 50px 0;
  }
  .banner-width {
  }
  .intro-section {
    padding: 60px 0;
  }
  .framework-box figure {
    width: 140px;
  }
  .framework-text {
    width: calc(100% - 140px);
  }
  .overview-box p {
    font-size: 18px;
  }

  .featured-videos-box h3 {
    font-size: 24px;
  }

  .buttons-link-group {
    margin: 0 -10px;
    min-height: 150px;
  }
  .buttons-link {
    padding: 0 10px;
  }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  .container {
    max-width: 1150px !important;
  }

  html {
    font-size: 55%;
  }
  .container {
    padding: 0 15px;
  }
  .logo-bar {
    padding: 20px 0;
  }

  .home-banner {
    padding: 40px 0 50px 0;
  }
  .banner-width {
  }
  .intro-section {
    padding: 60px 0;
  }
  .framework-box figure {
    width: 140px;
  }
  .framework-text {
    width: calc(100% - 140px);
  }
  .framework-text h4 {
    font-size: 18px;
  }
  .overview-box p {
    font-size: 18px;
  }

  .featured-videos-box h3 {
    font-size: 24px;
  }

  .buttons-link-group {
    margin: 0 -10px;
    min-height: 150px;
  }
  .buttons-link {
    padding: 0 10px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 950px !important;
  }
  html {
    font-size: 48%;
  }
  .container {
    padding: 0 15px;
  }
  .logo-bar {
    padding: 20px 0;
  }

  .home-banner {
    padding: 40px 0 50px 0;
  }
  .banner-width {
    padding: 0 15px;
    max-width: 950px;
  }
  .intro-section {
    padding: 60px 0;
  }
  .overview-box p {
    font-size: 18px;
  }
  .framework-col {
    width: 50%;
  }
  .featured-videos-box h3 {
    font-size: 24px;
  }

  .buttons-link-group {
    margin: 0 -10px;
    min-height: 150px;
  }
  .buttons-link {
    padding: 0 10px;
  }

  .intro-text p,
  .framework-text p,
  .featured-videos-title p {
    font-size: 16px;
  }

  .featured-videos-col {
    width: 50%;
    padding: 0 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .featured-videos-col {
    width: 50%;
    padding: 0 10px;
  }

  .container {
    max-width: 700px !important;
  }
  .show-search .nav-menu {
    z-index: 1;
    transition: all 0.8s ease;
    transform: translateY(0px);
  }
  html {
    font-size: 43%;
  }
  .container {
    padding: 0 15px;
  }
  .search-wrape {
    margin: 0 20px 0 auto;
    display: table;
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  .toggle-icon {
    display: block;
  }
  .nav-menu {
    display: none;
  }
  .nav-menu.show {
    display: block;
  }

  .logo-bar {
    padding: 15px 0;
  }
  .nav-menu ul li {
    width: 100%;
    margin: 0;
  }
  .nav-menu ul li a {
    border-bottom: 1px solid var(--border-color);
  }

  .home-banner {
    padding: 20px 0;
  }
  .banner-text {
    padding: 0;
  }
  .banner-text h1 {
  }
  .banner-width {
    max-width: 645px;
  }
  .intro-section {
    padding: 50px 0;
  }
  .overview-wrape {
    min-height: 285px;
  }
  .overview-box h3 {
    margin-bottom: 20px;
  }
  .overview-box p {
    font-size: 16px;
  }

  .framework-col {
    width: 100%;
  }
  .featured-videos-box {
    padding: 15px;
  }
  .featured-videos-box h3 {
    font-size: 22px;
    margin-bottom: 15px;
  }
  .featured-videos-box p {
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 15px;
  }

  .buttons-link-group {
    min-height: 160px;
  }
  .buttons-link {
    width: 50%;
  }

  .intro-text p,
  .framework-text p,
  .featured-videos-title p {
    font-size: 16px;
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  html {
    font-size: 42%;
  }
  .container {
    padding: 0 15px;
  }
  .search-wrape {
    margin: 0 20px 0 auto;
    display: table;
  }
  .show-search .nav-menu {
    z-index: 1;
    transition: all 0.8s ease;
    transform: translateY(0px);
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  .toggle-icon {
    display: block;
  }
  .nav-menu {
    display: none;
  }
  .nav-menu.show {
    display: block;
  }

  .logo-bar {
    padding: 15px 0;
  }
  .nav-menu ul li {
    width: 100%;
    margin: 0;
  }
  .nav-menu ul li a {
    border-bottom: 1px solid var(--border-color);
  }

  .home-banner {
    padding: 40px 0;
  }
  .banner-width {
    padding: 0 15px;
    max-width: 530px;
    width: 100%;
    margin: 0 auto;
  }
  .banner-col-sm,
  .banner-col-lg,
  .overview-col,
  .framework-col,
  .featured-videos-col {
    width: 100%;
  }
  .banner-text {
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .intro-section {
    padding: 3rem 0;
  }
  .intro-text h2 {
    font-size: 4rem;
  }
  .intro-text h5,
  .overview-box p {
    font-size: 18px;
  }

  .framework-box figure {
    width: 100%;
    min-height: 130px;
  }
  .framework-box figure img {
    height: 90px;
    object-fit: contain;
  }
  .framework-text {
    width: 100%;
    padding: 20px;
  }

  .buttons-link-group {
    min-height: 140px;
    margin: 0 -15px;
  }
  .buttons-link {
    width: 100%;
    margin: 5px 0;
    padding: 0 15px;
  }

  .foot-logo {
    margin: 0 auto;
    display: table;
  }
  .copyright-inner {
    text-align: center;
    justify-content: center;
  }
  .copyright ul {
    margin-left: 10px;
  }

  .banner-text h1 {
  }

  .intro-text p,
  .framework-text p,
  .featured-videos-title p {
    font-size: 16px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .container {
    max-width: 530px;
  }
}

```
:::