Как расположить мой контент рядом с моей боковой панелью?

Я не очень хорошо разбираюсь в HTML и CSS. В настоящее время я создаю веб-сайт и интегрировал боковую панель в свое веб-приложение с помощью Bootstrap, но это испортило мои макеты, и я не могу понять, как переместить содержимое в блок слева от боковой панели. .

Пожалуйста, просмотрите изображение по этой ссылке [1]: https://i.stack.imgur.com/XFaVv.png

Как видно на картинке выше, моя боковая панель расположена справа, а содержимое — внизу моей боковой панели. Ниже приведены мои коды для моей боковой панели и базового шаблона.

// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');

// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
  menu_toggle.classList.toggle('is-active');
  sidebar.classList.toggle('is-active');
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* Sidebar Section */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 1 1 0;
  max-width: 300px;
  padding: 20px;
  background: linear-gradient(#ed7014, #fa5b3d);
  /* With Scrollbar */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}

.sidebar h3 {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.sidebar .menu {
  margin: 0 -1rem;
}

.sidebar .menu .menu-item {
  display: block;
  padding: 1em;
  color: #fff;
  text-decoration: none;
  transition: 0.2s linear;
}

.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
  color: rgb(255, 238, 151);
  ;
  border-right: 5px solid rgb(255, 238, 151);
}


/* Content Scrollbar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #ffa500;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #d67229;
}


/* Content Section */

.content {
  flex: 1 1 0;
  padding: 2rem;
  background: linear-gradient(#dd5713, #d67229);
}

.content img {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: auto;
}

.content h1 {
  font-family: 'Bungee', cursive;
  color: #fff;
  margin-bottom: 1rem;
}

.content strong {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.content p {
  text-align: justify;
  color: #fff;
}


/* Sample Code Content */

.sample-code {
  width: 65%;
  background: rgb(255, 238, 151);
  padding: 1em;
  margin-bottom: 2em;
  border-radius: 10px;
  box-shadow: 15px 15px;
}

.sample-code p {
  color: #000;
}


/* Button Sidebar section */

.menu-toggle {
  display: none;
  position: fixed;
  top: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 99px;
  background-color: #ed7014;
  cursor: pointer;
}

.button {
  position: relative;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
}

.button>span,
.button>span::before,
.button>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background-color: #fff;
  transition-duration: .25s;
}

.button>span::before {
  content: '';
  top: -8px;
}

.button>span::after {
  content: '';
  top: 8px;
}


/* Button Animation */

.menu-toggle.is-active .button>span {
  transform: rotate(45deg);
}

.menu-toggle.is-active .button>span::before {
  top: 0;
  transform: rotate(0deg);
}

.menu-toggle.menu-toggle.is-active .button>span::after {
  top: 0;
  transform: rotate(90deg);
}


/* Sidebar Footer */

.white-section {
  text-align: center;
}

.p-white-sec {
  color: #fff;
}

.container-fluid {
  padding: 7px 15px;
}

.footer-icon {
  margin: 20px 10px;
  color: #fff;
}

.footer-icon:hover {
  color: #ffa500;
  transition: 0.2s linear;
}


/* Mobile Size */

@media (max-width: 1024px) {
  /* Sidebar Section */
  .sidebar {
    max-width: 200px;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
}

@media (max-width: 768px) {
  /* Sidebar Section */
  .menu-toggle {
    display: block;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
  }
  .sidebar.is-active {
    left: 0;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
  /* Content */
  .content {
    padding-top: 8rem;
  }
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Codin'up | HTML Course</title>

  <!-- Bootstrap -->
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
  <link rel = "preconnect" href = "https://fonts.googleapis.com">
  <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>

  <!-- Google Fonts -->
  <link href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:ital,wght@0,300;1,400;1,700&display=swap" rel = "stylesheet" />
  <link href = "https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel = "stylesheet">
  <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=Source+Code+Pro&display=swap" rel = "stylesheet">

  <!-- Favicon -->
  <link rel = "shortcut icon" href = "/favicon.png">

  <!-- CSS Stylesheet -->
  <link rel = "stylesheet" href = "/CSS/List of Course/HTML Course.css">
</head>

<body>
  <section class = "app">
    <!-- Button for Sidebar -->
    <div class = "menu-toggle">
      <div class = "button">
        <span></span>
      </div>
    </div>

    <!-- Sidebar Section -->
    <aside class = "sidebar">
      <a href = "/HTML/List of Course/HTML Course.html">
        <img src = "/Logo/Codin'up Logo (1) White.png" alt = "Codin'up">
      </a>
      <h3>HTML Course</h3>

      <nav class = "menu">
        <a href = "/HTML/Home.html" class = "menu-item">Home</a>
        <a href = "/HTML/Courses.html" class = "menu-item">Courses</a>
      </nav>

      <hr>

      <nav class = "menu">
        <a href = "/HTML/List of Course/HTML Course.html" class = "menu-item is-active">HTML Introduction</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
      </nav>

      <hr>

      <!-- Sidebar Footer -->
      <footer class = "white-section" id = "footer">
        <div class = "container-fluid">
          <a href = "https://twitter.com/i/flow/login"><i class = "fa-brands fa-twitter footer-icon"></i></a>
          <a href = "https://www.facebook.com/login.php/"><i class = "fa-brands fa-facebook-f footer-icon"></i></a>
          <a href = "https://www.secure.instagram.com/accounts/login/?next=/pbnddj/&source=profile_posts&hl=en-gb"><i class = "fa-brands fa-instagram footer-icon"></i></a>
          <a href = "https://www.google.com/gmail/about/"><i class = "fa-solid fa-envelope footer-icon"></i></a>
          <p class = "p-white-sec">&copy; 2022 ITMAWD21 Group 3</p>
        </div>
      </footer>
    </aside>

    <!-- Content Section -->
    <main class = "content">
      <h1>Introduction To HTML</h1>
      <img src = "/Logo/HTML Logo.png" alt = "Codin'up Logo">

      <strong>Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
        corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
        iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
        eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>

      <!-- Sample Code Content -->
      <div class = "sample-code">
        <p>&lt;html&gt;</p>
        <p><span style = "padding-left: 20px;">&lt;head&gt;</span></p>
        <p><span style = "padding-left: 40px;">&lt;title&gt;HTML Course&lt;/title&gt;</span></p>
        <p><span style = "padding-left: 20px;">&lt;/head&gt;</span></p>
        <p><span style = "padding-left: 20px;">&lt;body&gt;</span></p>
        <p><span style = "padding-left: 40px;">&lt;p&gt;Hello World&lt;p&gt;</span></p>
        <p><span style = "padding-left: 20px;">&lt;/body&gt;</span></p>
        <p>&lt;/html&gt;</p>
      </div>

      <strong>Code Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
    </main>
  </section>

  <!-- Font Awesome -->
  <script src = "https://kit.fontawesome.com/c9df5e490e.js" crossorigin = "anonymous"></script>

  <!-- Bootstrap JS & External JS -->
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin = "anonymous"></script>
  <script src = "/JS/List of Course/HTML Course.js"></script>
</body>
</html>

Может ли кто-нибудь помочь мне разместить содержимое справа от моей боковой панели, особенно его макет? Спасибо за большую помощь!

javascript html jquery css bootstrap-5

18.10.2022 12:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я не знаю, хорошо ли я понимаю, но.

Попробуйте в классе контента добавить:

width:100%;
padding-left:300px; (the width of the menu)

18.10.2022 12:46

.sidebar имеет позицию; исправлено. Вы можете применить стиль к основному контенту <main class = "content" style = "left: 272px;position: absolute;">. Но вы также должны учитывать медиа-запросы, регулирующие ширину боковой панели. Например.

@media (max-width: 1024px){
  .sidebar {
     max-width: 200px;
  }
  main.content {
     left: 200px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
  }

  main.content {
     left: 0;
     height: 100%;
  }
}

Я бы также использовал свойство ширины вместо максимальной ширины. Чтобы убедиться, что содержимое всегда выравнивается, как и ожидалось.

18.10.2022 12:48

Ответ принят как подходящий

Я бы просто применил position: sticky и height: 100vh на боковой панели:

position: sticky;
height: 100vh;

Наличие height: 100vh гарантирует, что боковая панель всегда растягивается на всю высоту экрана. position: sticky работает аналогично position: fixed, но не влияет на поток документов таким же образом. Затем вы можете применить значения позиционирования, такие как top: 0 и left: 0, но эти свойства уже применяются в вашем фрагменте.

// Not bringing sidebar when active
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');

// When the button is clicked the sidebar will be active in the following code
menu_toggle.addEventListener('click', () => {
  menu_toggle.classList.toggle('is-active');
  sidebar.classList.toggle('is-active');
})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* Sidebar Section */

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 1 1 0;
  max-width: 300px;
  padding: 20px;
  background: linear-gradient(#ed7014, #fa5b3d);
  /* With Scrollbar */
  /* Edit start */
  position: sticky;
  height: 100vh;
  /* Edit end */
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}

.sidebar h3 {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.sidebar .menu {
  margin: 0 -1rem;
}

.sidebar .menu .menu-item {
  display: block;
  padding: 1em;
  color: #fff;
  text-decoration: none;
  transition: 0.2s linear;
}

.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
  color: rgb(255, 238, 151);
  ;
  border-right: 5px solid rgb(255, 238, 151);
}


/* Content Scrollbar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #ffa500;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #d67229;
}


/* Content Section */

.content {
  flex: 1 1 0;
  padding: 2rem;
  background: linear-gradient(#dd5713, #d67229);
}

.content img {
  width: 100%;
  max-width: 300px;
  display: block;
  margin: auto;
}

.content h1 {
  font-family: 'Bungee', cursive;
  color: #fff;
  margin-bottom: 1rem;
}

.content strong {
  font-family: 'Bungee', cursive;
  color: #fff;
}

.content p {
  text-align: justify;
  color: #fff;
}


/* Sample Code Content */

.sample-code {
  width: 65%;
  background: rgb(255, 238, 151);
  padding: 1em;
  margin-bottom: 2em;
  border-radius: 10px;
  box-shadow: 15px 15px;
}

.sample-code p {
  color: #000;
}


/* Button Sidebar section */

.menu-toggle {
  display: none;
  position: fixed;
  top: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 99px;
  background-color: #ed7014;
  cursor: pointer;
}

.button {
  position: relative;
  top: calc(50% - 2px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
}

.button>span,
.button>span::before,
.button>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background-color: #fff;
  transition-duration: .25s;
}

.button>span::before {
  content: '';
  top: -8px;
}

.button>span::after {
  content: '';
  top: 8px;
}


/* Button Animation */

.menu-toggle.is-active .button>span {
  transform: rotate(45deg);
}

.menu-toggle.is-active .button>span::before {
  top: 0;
  transform: rotate(0deg);
}

.menu-toggle.menu-toggle.is-active .button>span::after {
  top: 0;
  transform: rotate(90deg);
}


/* Sidebar Footer */

.white-section {
  text-align: center;
}

.p-white-sec {
  color: #fff;
}

.container-fluid {
  padding: 7px 15px;
}

.footer-icon {
  margin: 20px 10px;
  color: #fff;
}

.footer-icon:hover {
  color: #ffa500;
  transition: 0.2s linear;
}


/* Mobile Size */

@media (max-width: 1024px) {
  /* Sidebar Section */
  .sidebar {
    max-width: 200px;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
}

@media (max-width: 768px) {
  /* Sidebar Section */
  .menu-toggle {
    display: block;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    height: 100vh;
    width: 100%;
    max-width: 300px;
    transition: 0.2s linear;
  }
  .sidebar.is-active {
    left: 0;
  }
  .sidebar img {
    height: 6.5rem;
    width: 10rem;
  }
  /* Content */
  .content {
    padding-top: 8rem;
  }
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Codin'up | HTML Course</title>

  <!-- Bootstrap -->
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
  <link rel = "preconnect" href = "https://fonts.googleapis.com">
  <link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>

  <!-- Google Fonts -->
  <link href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:ital,wght@0,300;1,400;1,700&display=swap" rel = "stylesheet" />
  <link href = "https://fonts.googleapis.com/css2?family=Bungee&family=Poppins&display=swap" rel = "stylesheet">
  <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=Source+Code+Pro&display=swap" rel = "stylesheet">

  <!-- Favicon -->
  <link rel = "shortcut icon" href = "/favicon.png">

  <!-- CSS Stylesheet -->
  <link rel = "stylesheet" href = "/CSS/List of Course/HTML Course.css">
</head>

<body>
  <section class = "app">
    <!-- Button for Sidebar -->
    <div class = "menu-toggle">
      <div class = "button">
        <span></span>
      </div>
    </div>

    <!-- Sidebar Section -->
    <aside class = "sidebar">
      <a href = "/HTML/List of Course/HTML Course.html">
        <img src = "/Logo/Codin'up Logo (1) White.png" alt = "Codin'up">
      </a>
      <h3>HTML Course</h3>

      <nav class = "menu">
        <a href = "/HTML/Home.html" class = "menu-item">Home</a>
        <a href = "/HTML/Courses.html" class = "menu-item">Courses</a>
      </nav>

      <hr>

      <nav class = "menu">
        <a href = "/HTML/List of Course/HTML Course.html" class = "menu-item is-active">HTML Introduction</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
        <a href = "#" class = "menu-item">HTML Course no.</a>
      </nav>

      <hr>

      <!-- Sidebar Footer -->
      <footer class = "white-section" id = "footer">
        <div class = "container-fluid">
          <a href = "https://twitter.com/i/flow/login"><i class = "fa-brands fa-twitter footer-icon"></i></a>
          <a href = "https://www.facebook.com/login.php/"><i class = "fa-brands fa-facebook-f footer-icon"></i></a>
          <a href = "https://www.secure.instagram.com/accounts/login/?next=/pbnddj/&source=profile_posts&hl=en-gb"><i class = "fa-brands fa-instagram footer-icon"></i></a>
          <a href = "https://www.google.com/gmail/about/"><i class = "fa-solid fa-envelope footer-icon"></i></a>
          <p class = "p-white-sec">&copy; 2022 ITMAWD21 Group 3</p>
        </div>
      </footer>
    </aside>

    <!-- Content Section -->
    <main class = "content">
      <h1>Introduction To HTML</h1>
      <img src = "/Logo/HTML Logo.png" alt = "Codin'up Logo">

      <strong>Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium ipsa, quod, placeat cupiditate enim hic natus maiores nobis sequi nisi odit voluptas earum quas perspiciatis qui explicabo recusandae ullam quibusdam? Lorem ipsum dolor sit amet
        consectetur, adipisicing elit. Dignissimos obcaecati exercitationem voluptatem accusamus, beatae sunt voluptatibus quam odio magnam, mollitia minima dicta distinctio, amet accusantium! Dolore debitis qui quis iusto. Lorem, ipsum dolor sit amet
        consectetur adipisicing elit. Accusantium harum corrupti nisi ratione aperiam commodi rerum. Delectus illum suscipit distinctio unde iste veritatis voluptate nulla, enim rem harum ullam rerum. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Ut cumque totam ipsum, quia voluptate quam esse reprehenderit explicabo atque, molestiae doloribus earum repellendus architecto aperiam minima impedit dicta autem laboriosam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique,
        corrupti adipisci. Itaque sint, nemo laborum a ratione corrupti laboriosam tenetur soluta pariatur nostrum fuga, earum voluptate ducimus iure ipsum saepe? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi repudiandae recusandae
        iste, molestiae modi ea numquam vero repellat. Doloremque iusto labore nobis placeat perspiciatis optio repellendus eius adipisci voluptas expedita. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor doloremque rem debitis? Sed quod
        eligendi inventore deleniti aliquid velit, magni perferendis, quaerat officiis in consequuntur tenetur ipsum animi tempore asperiores.</p>

      <!-- Sample Code Content -->
      <div class = "sample-code">
        <p>&lt;html&gt;</p>
        <p><span style = "padding-left: 20px;">&lt;head&gt;</span></p>
        <p><span style = "padding-left: 40px;">&lt;title&gt;HTML Course&lt;/title&gt;</span></p>
        <p><span style = "padding-left: 20px;">&lt;/head&gt;</span></p>
        <p><span style = "padding-left: 20px;">&lt;body&gt;</span></p>
        <p><span style = "padding-left: 40px;">&lt;p&gt;Hello World&lt;p&gt;</span></p>
        <p><span style = "padding-left: 20px;">&lt;/body&gt;</span></p>
        <p>&lt;/html&gt;</p>
      </div>

      <strong>Code Description</strong>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui iusto, eveniet repudiandae ratione sint harum pariatur id numquam doloremque sequi eaque quo accusamus ab nihil aut alias inventore! Cumque, tempore.</p>
    </main>
  </section>

  <!-- Font Awesome -->
  <script src = "https://kit.fontawesome.com/c9df5e490e.js" crossorigin = "anonymous"></script>

  <!-- Bootstrap JS & External JS -->
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin = "anonymous"></script>
  <script src = "/JS/List of Course/HTML Course.js"></script>
</body>
</html>

18.10.2022 13:08

Я проверил макет, возможно, вы можете попробовать использовать строки и столбцы, чтобы отсортировать его.

<div class = "row">
    <div class = "col-lg-3 col-xs-4">
     //Sidebar code
    </div>
    <div class = "col-lg-9 col-xs-8">
     //Content code
    </div>
</div>

Это может быть лучшим вариантом, а также будет отзывчивым.

Если вам неудобно или знакомо, то, возможно, как и другие, вы можете удалить position:fixed стиль в .sidebar, чтобы временно решить эту проблему.

18.10.2022 13:11