CSS Grid разваливается при уменьшении размера окна — проблема с «фиксированной позицией»?

Я новичок в веб-программировании, и я пытаюсь создать с нуля веб-сайт статического художественного портфолио, который может быть адаптивным., который мне порекомендовали для макета, который я хотел использовать CSS-сетка, я также комбинирую контейнеры, используя flexbox для содержимого, которое находится внутри него. Структура, которая у меня есть на моем сайте, следующая:

Навбар
Заголовок
Содержание

Изображение концепции моего сайта

По сути, я хотел, чтобы боковая вертикальная панель навигации находилась в фиксированном положении, чтобы пользователь мог прокручивать вниз, пока она остается на том же месте. Я добился этого, используя свойство position: fixed, но я считаю, что это, возможно, провоцирует часть сетка не настраивается на панели навигации, и она сдвигается вправо при изменении размера окна, а галерея в «контенте» перемещается под панелью навигации.. Затронутым элементом является «контент» (простите за повторение имен/слов). Проблема возникает преимущественно в браузерах на базе Chromium.

Таким образом, в основном возникают проблемы как с элементом сетки, называемым «контент», так и с элементами в этой структуре (которые используют flexbox).

Что я пробовал до сих пор:

У меня также есть некоторые свойства @media, установленные в моем CSS для настройки панель навигации при уменьшении масштаба. Я пытался увидеть, удаляя ли это свойство решило бы проблему, но это все еще то же самое.
Я попытался удалить галерею, которую я поместил в «контент», чтобы проверить, не это решает проблему, но это не так.

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

Код на моем сайте:

@import url('https://fonts.googleapis.com/css2?family=Raleway: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');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    background-color: none;
    font-family: 'Raleway', sans-serif;
    scroll-behavior: smooth;

    

    /* Adjust font size */
    -webkit-text-size-adjust: 100%;

    /* Font variant */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;

    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.7px;
    
    @-webkit-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-moz-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
    
    
    
    
}



/* Basic structure */




.grid {
    animation: fadein 2s;
    
}


@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

.grid {
    display: grid;
    grid-template-rows: 1fr fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}






#navbar {

    background-color: #3c5d79;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 1;
    padding: 3vw;
    align-content: center;
    text-align: center;
    color: #f4d3cc;
    height: 100vh;
    width: 40vh;
    position: fixed;
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
}





#header2 {

    background-color: #f2f2f5;
    grid-row-start: ;
    grid-column-start: 2;

    grid-row-end: 2;
    grid-column-end: 6;
    height: 15vh;

}


#header {

    background-color: #f4d3cc;
    grid-row-start: ;
    grid-column-start: 2;

    grid-row-end: 2;
    grid-column-end: 6;
    height: 15vh;

}



#content {

    background-color: #f2f2f5;


    grid-row-start: 2;
    grid-column-start: 2;
    height: 100%;

    grid-row-end: 3;
    grid-column-end: 6;

}






/* styling */

/* -------NAVBAR STYLING START-------- */


a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit;
}


a:hover {
    color: white;
}
a {
    transition: color 500ms ease 0.1s;
}


.contnav {

    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    padding-top: 20%;
    text-align: center;
    align-content: center;
    line-height: 30px;
    color: #f4d3cc;

}


/* Line height is provoking the grid to break */


.work-nav {


    margin-top: 15%;
    margin-bottom: 5%;
    font-weight: 700;
    font-size: 13px;
    color: #f4d3cc;


}


.logo-nav {

    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: #f4d3cc;

}


.divbar {

    border-top: 1.5px solid #bbb;
    margin: 15px;
    height: 0px;
    color: #3c5d79;

}


.divbar1 {

    border-top: 2px solid #bbb;
    margin: 27px;


}



.items-nav {
    
}



.items-nav2 {


    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    padding-top: 100px;

}


.division {

    padding: 10px;
}


.info-nav2 {


    font-weight: 700;


}




.icons {

    display: flex;
    align-items: center;
    padding-top: 70%;
    justify-content: space-around;



}


.circle1 {

    width: 10px;
    height: 10px;
    background: #f4d3cc;
    border-radius: 50%
}



.circle2 {

    width: 10px;
    height: 10px;
    background: #f4d3cc;
    border-radius: 50%
}


.circle3 {

    width: 10px;
    height: 10px;
    background: #f4d3cc;
    border-radius: 50%
}


/* -------NAVBAR STYLING END-------- */











/* -------HEADER STYLING START-------- */




.navmarg {
    
    padding-left: 20px;
    
}

.info-header2 {


    padding-top: 25px;
    display: flex;
    margin: 20px;
    font-size: 1.3rem;
    font-weight: 300;
    color: #3c5d79;


}


.info-header {


    margin-top: 34px;
    margin-bottom: 34px;
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 300;
    color: #3c5d79;


}



/* -------HEADER STYLING END-------- */
















/* -------CONTENT STYLING START-------- */




.contbox {

    display: flex;
    align-content: center;
    margin: 1vh;
    color: #595959;
    display: flex;
    margin: 15px;
    padding: 2%;
    font-size: 1rem;
    margin-left: 10%;
    margin-right: 10%;
}


/* -------CONTENT STYLING END-------- */




/* -------GALLERY-------- */



.gallery-container {
    
    display: flex;
    align-content: center;
    padding-left: 30px;
}


.image-gallery {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    grid-gap: 20px;
}

.image-gallery .image-box {
    position: relative;
    background-color: #d7d7d8;
    overflow: hidden;
}

.image-gallery .image-box:nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.image-gallery .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: all 0.5s ease;
}

.image-gallery .image-box:hover img {
    transform: scale(1.1);
}

.image-gallery .image-box .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fafafaf2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 1;
}

.image-gallery .image-box:hover .overlay {
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    opacity: 1;
}

.image-gallery .image-box .details {
    text-align: center;
}

.image-gallery .image-box .details .title {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    top: -5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.image-gallery .image-box .details .category {
    font-size: 18px;
    font-weight: 400;
    position: relative;
    bottom: -5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.image-gallery .image-box:hover .details .title {
    top: 0px;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box:hover .details .category {
    bottom: 0;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box .details .title a,
.image-gallery .image-box .details .category a {
    color: #222222;
    text-decoration: none;
}

/* Let's make it responsive */
@media (max-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-auto-rows: 250px;
    }

    .image-gallery .image-box:nth-child(7n + 1) {
        grid-column: unset;
        grid-row: unset;
    }
}



 @media screen and (max-width: 1200px) {
    #navbar {
      width: 26%;
    }
    #navbar .logo-nav {
      font-size: 100% !important;
    }
     
     #navbar li {
         
         font-size:100%; !important;
     }
  
    .d {
      display: none;
    }
  }

<!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>Inicio - Portfolio</title>
    <link rel = "stylesheet" href = "css/style.css">
    <script type = "text/javascript" src = "js/java.js"></script>
</head>

<body>
    <div class = "grid">


        <div id = "navbar">


            <div class = "logo-nav"><a href = "#">PORTFOLIO</a></div>
            <div class = "divbar1"></div>

            <div class = "contnav">


                <div class = "work-nav">WORK</div>


                <div class = "items-nav">

                    <ul>
                        <li><a href = "#"><i class = "Animation"></i>Animation</a></li>
                        <li><a href = "#"><i class = "Rough"></i>Rough</a></li>
                        <li><a href = "#"><i class = "Original Art"></i>Original Art</a></li>
                        <li><a href = "#"><i class = "Graphic Design"></i>Graphic Design</a></li>
                        <li><a href = "#"><i class = "Character design"></i>Character Design</a></li>
                    </ul>

                </div>





                <div class = "items-nav2">
                    <ul>
                        <li>
                            <div class = "info-nav2"><a href = "#">About me</a></div>
                        </li>


                        <li><a href = "#"><i class = "contact"></i>Contact</a></li>
                    </ul>

                    
                    
                    
                    
                    <div class = "icons">

                        <div class = "circle1"></div>
                        <div class = "circle2"></div>
                        <div class = "circle3"></div>

                    </div>
                </div>


            </div>
        </div>


        <!--<div id = "header2">
            <div class = "navmarg">
                <p class = "info-header2">ORIGINAL ART</p>
                <div class = "divbar"></div>
            </div>
        </div>-->
        
        
        <div id = "header">
            <p class = "info-header">WORK</p>
        </div> -->


        <div id = "content">

            <!--  <div class = "contbox">
                00
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pjjjariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                
            </div> -->

<div class = "gallery-container">
            <div class = "image-gallery">
                <div class = "image-box">
                    <img src = "images/5.png" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Original Art</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/2.jpg" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/3.jpg" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/7.png" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/11.png" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/6.png" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/4.jpg" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/img-5.jpg" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/img-6.jpg" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/img-4.jpg" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/img-10.jpg" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class = "image-box">
                    <img src = "images/img-7.jpg" alt = "img.jpg" />
                    <div class = "overlay">
                        <div class = "details">
                            <h3 class = "title">
                                <a href = "#">Your Title</a>
                            </h3>
                            <span class = "category">
                                <a href = "#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
</div>


        </div>
    </div>
</body>

</html>

Решение: не используйте фиксированное положение; Скоро выложу решение сетки

— 06.04.2022 03:40

html css flexbox css-selectors css-grid

06.04.2022 01:54

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

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

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

Ответы 1

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

Это был бы мой подход:

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

@import url("https://fonts.googleapis.com/css2?family=Raleway: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");
:root {
  --headerBackground: #3c5d79;
  --headerText: #f4d3cc;
  --mainBackground: #f2f2f5;
  --mainHeaderBackground: #f4d3cc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  background-color: none;
  font-family: "Raleway", sans-serif;
  scroll-behavior: smooth;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.7px;
}

a:link,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: white;
}

a {
  transition: color 500ms ease 0.1s;
}

body {
  display: grid;
}

.main-header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
  padding: 3vw;
  background-color: var(--headerBackground);
  color: var(--headerText);
}

.main-header h1 {
  font-weight: 700;
  font-size: 1.5rem;
  padding: 1.3em;
  border-bottom: 1.5px solid #bbb;
}

.main-header li {
  padding-block: 1em;
}

.main-header li li {
  padding-block: 0.5em;
}

.main-header .icons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.main-header .circle {
  width: 10px;
  height: 10px;
  background: #f4d3cc;
  border-radius: 50%;
}

.info-header {
  font-size: 2.5rem;
  font-weight: 300;
  text-align: center;
  padding: 2rem;
  background-color: var(--mainHeaderBackground);
  color: #3c5d79;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  margin: 0 auto;
  padding: 4rem 2rem;
  grid-gap: 1.5rem;
}
.image-gallery .image-box:nth-child(7n + 1) {
  grid-area: span 2 / span 2;
}
.image-box {
  position: relative;
  background-color: #d7d7d8;
}
.image-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-box .overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  transition: all 0.5s ease;
  opacity: 0;
  background-color: #fafafaf2;
  color: #222;
  text-align: center;
}
.image-box:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.image-box:hover .overlay {
  opacity: 1;
}
@media (min-width: 50rem) {
  body {
    grid-template-columns: 1fr 3fr;
    max-height: 100vh;
  }
  header {
    max-height: 100vmax;
  }
  main {
    max-height: 100vh;
    overflow: auto;
  }
}

    <header class = "main-header">
      <h2 class = "logo-nav"><a href = "#">PORTFOLIO</a></h2>
      <nav>
        <ul class = "contnav">
          <li>
            <h2 class = "work-nav">WORK</h2>
            <ul>
              <li>
                <a href = "#"><i class = "Animation"></i>Animation</a>
              </li>
              <li>
                <a href = "#"><i class = "Rough"></i>Rough</a>
              </li>
              <li>
                <a href = "#"><i class = "Original Art"></i>Original Art</a>
              </li>
              <li>
                <a href = "#"><i class = "Graphic Design"></i>Graphic Design</a>
              </li>
              <li>
                <a href = "#"><i class = "Character design"></i>Character Design</a>
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li>
                <div class = "info-nav2"><a href = "#">About me</a></div>
              </li>
              <li>
                <a href = "#"><i class = "contact"></i>Contact</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <div class = "icons">
        <div class = "circle1"></div>
        <div class = "circle2"></div>
        <div class = "circle3"></div>
      </div>
    </header>
    <main>
      <header class = "info-header">
        <h2>WORK</h2>
      </header>
      <section class = "image-gallery">
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
        <figure class = "image-box">
          <img src = "https://source.unsplash.com/random/500x500" alt = "Original Art" />
          <figcaption class = "overlay">
            <h3 class = "title">
              <a href = "#">Original Art</a>
            </h3>
            <a class = "category" href = "#">Category</a>
          </figcaption>
        </figure>
      </section>
    </main>

06.04.2022 05:19