Как сделать так что бы фото были в таком порядке? Фото ниже кода

Question

<!DOCTYPE html>

<html>

<head>
 <style>

.container:after {
  content: "";
  clear: both;
}

.container {
  width: 100%;
  max-width: 1024px;
  padding: 15px;
  margin: 0 auto;
}

header {
  background-color: #949eb3;
}

.main{
background-color: #b1b8c7;
}

footer {
  background-color: #949eb3;

}


.logo {
   position: relative;
   top: -50px;
   right: -50px;
}
nav {
  float: right;
}
nav ul {
  position: relative;
  left: -200px;
  bottom: -11px;

}
nav li {
  display: inline-block;
  padding: 50px;
}

nav a {
  font-variant: small-caps;
  font-size: 22px;
  text-decoration: none;
  line-height: 30px;

}



h2 {
  width: 50%;
  font-size: 30px;
  font-variant: small-caps;
  position: relative;
  right: -260px;
  bottom: -39px;
}



img.image:hover,
div.container:has(a.text:hover) img.image {
  filter: brightness(0.8);
  transition: 0.4s;
}

img.image:not(:hover)+a.text:not(:hover) {
  opacity: 0;
  transition: 0.4s;
}

body {
  position: fixed;
  inset: 0;
}

div.container {
  width: 500%;
  height: 500%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

img.image {
  object-fit: contain;
  width: 500%;
  height: 500%;
  position: absolute;
  margin: auto;
}

a.text {
  position: absolute;
  margin: auto;
  color: white;
}


</style>

</head>

<body>

<header>
 <div class="container-head">
     <h2 align="center">Апарт-отель <font color= "#edeff2">Ascella</font><br>Современный отель - не <font color= "#edeff2">сказка</font><br></h2>

  <a herf="/" class="logo">
     <img src="img/logo.png">
  </a>

 <nav>
      <ul>
        <li><a href="Number.html"><font color= "#000000">Номера</font></a></li>
        <li><a href=""><font color= "#000000">Услуги</font></a></li>
        <li><a href=""><font color= "#000000">Контакты</font></a></li>
        <li><a href=""><font color= "#000000">Бронирование</font></a></li>
        <li><a href=""><font color= "#000000">Спецпредложения</font></a></li>
      </ul>
    </nav>
 </div>
</header>

<div class="main">

    <div class="container">
     <img class="image" src="img/room21.jpg">
     <a class="text" href="">Blackberry</a>
   </div>

   <div class="container">
     <img class="image" src="img/room22.jpg">
     <a class="text" href="">Currant</a>
   </div>

   <div class="container">
     <img class="image" src="img/room24.jpg">
     <a class="text" href="">Nice code bro</a>
   </div>

   <div class="container">
     <img class="image" src="img/room25.jpg">
     <a class="text" href="">Nice code bro</a>
   </div>

   <div class="container">
     <img class="image" src="img/room26.jpg">
     <a class="text" href="">Nice code bro</a>
   </div>

   <div class="container">
     <img class="image" src="img/room27.jpg">
     <a class="text" href="">Nice code bro</a>
   </div>

</div>

<footer>
 <div class="container">
  <h4><font color= "bfbfbf">2024 © Все права защищены</font></h4>
 </div>
</footer>

Answer 1

Как вы сами считаете, через неделю вы сами разберетесь что у вас в коде где?

const menuWrapper = document.querySelector(".header-menu");
const menuOpen = document.querySelector(".header-menu-open");
menuOpen.addEventListener("click", () => {
  menuWrapper.classList.add("active");
});

const menuClose = document.querySelector(".header-menu-close");
menuClose.addEventListener("click", () => {
  menuWrapper.classList.remove("active");
});

body {
  width: 100%;
  max-width: 1024px;
  min-height: 100dvh;
  margin: 0 auto;
  font: normal normal 20px/1.2 sans;
  display: flex;
  flex-direction: column;
}

.header-container {
  background-color: #949eb3;
  font-variant: small-caps;
  height: 160px;
  padding: 2em;
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1em;
  align-items: center;
}

@media screen and (width < 1024px) {
  .header-container {
    height: unset;
    grid-template-columns: 80px 1fr auto;
    grid-template-rows: 1fr;
  }
}

@media screen and (width < 700px) {
  .header-container {
    height: unset;
    grid-template-columns: 60px 1fr auto;
    grid-template-rows: 1fr;
  }
}

.header-logo-link {
  grid-column: 1/2;
  grid-row: 1/3;
}

@media screen and (width < 1024px) {
  .header-logo-link {
    grid-row: 1/2;
  }
}

.header-logo-image {
  display: block;
  border-radius: 100%;
  width: 100%;
  height: auto;
}

.header-title {
  grid-column: 2/3;
  grid-row: 1/2;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

@media screen and (width < 540px) {
  .header-title {
    white-space: normal;
  }
}

@media screen and (width < 700px) {
  .header-title b {
    display: none;
  }
}

.header-title span {
  color: #edeff2;
}

.header-menu {
  grid-column: 2/3;
  grid-row: 2/3;
  display: flex;
  gap: 2em;
  justify-content: space-evenly;
}

@media screen and (width < 1024px) {
  .header-menu {
    display: none;
  }
}

.header-menu.active {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #949eb3;
}

.header-menu,
.header-menu-item {
  list-style: none;
}

.menu-item-link {
  color: inherit;
  text-decoration: none;
  transition: 0.2s;
}

.menu-item-link:hover {
  color: #edeff2;
}

.header-menu-open {
  border: none;
  background-color: unset;
  width: 40px;
  height: 40px;
  cursor: pointer;
  user-select: none;
  transition: 0.2s;
  display: none;
}

.header-menu-open:hover {
  fill: #edeff2;
}

@media screen and (width < 1024px) {
  .header-menu-open {
    display: block;
  }
}

.header-menu-close {
  display: none;
}

.header-menu.active~.header-menu-close {
  position: fixed;
  z-index: 200;
  top: 2em;
  left: 2em;
  border: none;
  background-color: unset;
  width: 40px;
  height: 40px;
  cursor: pointer;
  user-select: none;
  transition: 0.2s;
  display: block;
}

.header-menu.active~.header-menu-close:hover {
  fill: #edeff2;
}

.header-menu-open svg {
  width: 40px;
  height: 40px;
}

main {
  background-color: #b1b8c7;
  flex: 1;
}

.galery-container {
  padding: 2em;
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(max(calc(100% / 4), min(15rem, 100%)), 1fr));
  gap: 2em;
}

.galery-item {
  position: relative;
  overflow: hidden;
  transition: 0.2s;
}

.galery-item-image {
  display: block;
  width: 100%;
  height: auto;
  transition: 0.2s;
}

.galery-item:hover .galery-item-image {
  filter: brightness(0.4);
}

@media (hover: none) {
  .galery-item .galery-item-image {
    filter: brightness(0.4);
  }
}

.galery-item-link {
  font-variant: small-caps;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  transition: 0.2s;
  color: #edeff2;
  text-decoration: underline;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galery-item:hover .galery-item-link {
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (hover: none) {
  .galery-item .galery-item-link {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.footer-container {
  background-color: #949eb3;
  color: #edeff2;
  padding: 2em;
}

<header>
  <div class="header-container">
    <a class="header-logo-link" href="/"><img class="header-logo-image" src="https://picsum.photos/160/160"></a>
    <h2 class="header-title">Апарт-отель <span>Ascella</span><b><br>Современный отель - не <span>сказка</span></b></h2>
    <nav>
      <ul class="header-menu">
        <li class="header-menu-item"><a class="menu-item-link" href="Number.html">Номера</a></li>
        <li class="header-menu-item"><a class="menu-item-link" href="Number.html">Услуги</a></li>
        <li class="header-menu-item"><a class="menu-item-link" href="Number.html">Контакты</a></li>
        <li class="header-menu-item"><a class="menu-item-link" href="Number.html">Бронирование</a></li>
        <li class="header-menu-item"><a class="menu-item-link" href="Number.html">Спецпредложения</a></li>
      </ul>
      <button class="header-menu-open">
         <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11 16.745c0-.414.336-.75.75-.75h9.5c.414 0 .75.336.75.75s-.336.75-.75.75h-9.5c-.414 0-.75-.336-.75-.75zm-9-5c0-.414.336-.75.75-.75h18.5c.414 0 .75.336.75.75s-.336.75-.75.75h-18.5c-.414 0-.75-.336-.75-.75zm4-5c0-.414.336-.75.75-.75h14.5c.414 0 .75.336.75.75s-.336.75-.75.75h-14.5c-.414 0-.75-.336-.75-.75z" fill-rule="nonzero" />
         </svg>
      </button>
      <button class="header-menu-close">
         <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191-.001.383-.074.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191-.001-.38.071-.525.215z" fill-rule="nonzero" />
         </svg>
       </button>
    </nav>
  </div>
</header>

<main>
  <div class="galery-container">
    <div class="galery-item">
      <img class="galery-item-image" src="https://picsum.photos/300/200?random=1">
      <a class="galery-item-link" href="">Blackberry</a>
    </div>
    <div class="galery-item">
      <img class="galery-item-image" src="https://picsum.photos/300/200?random=2">
      <a class="galery-item-link" href="">Currant</a>
    </div>
    <div class="galery-item">
      <img class="galery-item-image" src="https://picsum.photos/300/200?random=3">
      <a class="galery-item-link" href="">Nice code bro</a>
    </div>
    <div class="galery-item">
      <img class="galery-item-image" src="https://picsum.photos/300/200?random=4">
      <a class="galery-item-link" href="">Nice code bro</a>
    </div>
    <div class="galery-item">
      <img class="galery-item-image" src="https://picsum.photos/300/200?random=5">
      <a class="galery-item-link" href="">Nice code bro</a>
    </div>
    <div class="galery-item">
      <img class="galery-item-image" src="https://picsum.photos/300/200?random=6">
      <a class="galery-item-link" href="">Nice code bro</a>
    </div>
  </div>
</main>

<footer>
  <div class="footer-container">
    <span>© 2024 Все права защищены</span>
  </div>
</footer>

Answer 2

Решеточная верстка

/* Main part */

div.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4vmin;
  gap: 4vmin;
}


/* Only for demo */

body {
  position: fixed;
  inset: 0;
}

div.container {
  position: absolute;
  inset: 0;
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

<div class="container">
  <img src="https://i.sstatic.net/AG1jv98J.png" alt="vista">
  <img src="https://i.sstatic.net/pBz0buBf.png" alt="xp">
  <img src="https://i.sstatic.net/4hzpD4VL.png" alt="7">
  <img src="https://i.sstatic.net/2f4dC1UM.png" alt="8">
  <img src="https://i.sstatic.net/GPJ1M74Q.png" alt="10">
  <img src="https://i.sstatic.net/2TZj79M6.png" alt="11">
</div>

БЛОГ НА HUSL

Как сделать так что бы фото были в таком порядке? Фото ниже кода

Ответы (2 шт):

Решеточная верстка