---
title: Modèle 1
slug: modele-1
description: Ce modèle de site Web en marque blanche, personnalisable, offre des fichiers de code, des exemples et des cadres pour faciliter la personnalisation du site. Avec des extraits de code jQuery et CSS, vous aurez accès à des règles de style pour des éléments 
docTags: 
createdAt: 2023-06-28T08:23:40.655Z
---

:::hint{type="info"}
Il s’agit d’un modèle en marque blanche. Pour qu’il corresponde à votre marque et à votre style, vous devez effectuer d’autres personnalisations sur le modèle fourni.
:::

### À quoi il ressemble :

Utilisez le lien ci-dessous pour voir à quoi ressemble le modèle en marque blanche. Gardez à l’esprit que chaque couleur/logo/espace réservé peut être personnalisé pour correspondre à votre style et à votre image de marque.

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

### Fichiers de code personnalisés :

:::hint{type="info"}
Conseil : utilisez le bouton :FontAwesome[]{icon="fa-solid fa-copy"} Copy en haut à droite de l’éditeur de code pour copier tout le code
:::

Nous avons ajouté le code personnalisé pour que vous puissiez l’utiliser dans l’éditeur de code ci-dessous. Voyez comment l’utiliser [ici](docId\:zrJ7nA8eWXjTtregZVgKl)

:::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;
  }
}

```
:::