HTML, CSS and JS custom design request [duplicate]

Question 1

I am making inventory with HTML, CSS and JS, for the GTA5 platform, but my inventory consists of 35 boxes, I want 4 slots out of these 35 boxes to be a different size than the others in the lower right corner in the form of a single 1 box, how can I do it?

// Eklenecek öğelerin sayısı
const itemCount = 34;

// Öğelerin ekleneceği ana div öğesini seçin
const inventoryBolge2 = document.querySelector('.inventory-bolge-2');

// Belirtilen sayıda öğeyi oluşturun ve ekleyin
for (let i = 0; i < itemCount; i++) {
  const item = document.createElement('div');
  item.classList.add('inventory-bolge-2-item-box');
  inventoryBolge2.appendChild(item);
}

body {
  /* background-image: url('img/hq720.jpg'); /* Arka plan resmi eklemek için bu satırı ekledik */
  background-size: cover;
  /* Arka plan resmini kaplamasını sağlar */
  background-repeat: no-repeat;
  /* Arka plan resminin tekrar etmemesini sağlar */
}

@font-face {
  font-family: 'Euclid Circular B SemiBold';
  /* h1 başlık */
  src: url('assets/fonts/Euclid Circular B SemiBold.ttf') format('ttf');
  /* Yazı tipi dosyasının yolu ve formatı */
}

.inventory {
  width: 400px;
  height: 735px;
  text-align: center;
  padding: 20px;
  border-radius: 5px;
  background-color: rgb(0 0 0 / 70%);
  backdrop-filter: blur(16px) brightness(115%);
  display: flex;
  justify-content: center;
}

.inventory-align {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  margin: 20px;
}

h1 {
  font-family: Euclid Circular B SemiBold;
  color: #969696;
  font-size: 20px;
}

.no-filter {
  filter: opacity(1) blur(0px);
}

.inventory-bolge-2 {
  display: flex;
  justify-content: space-around;
  width: 350px;
  flex-wrap: wrap;
}

.inventory-bolge-2-item-box {
  background-color: rgb(42 41 38 / 50%);
  margin-bottom: 5px;
  width: 64px;
  height: 64px;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackoverflow.com/questions/77336288/style.css">
  <title>Envanter</title>
</head>

<body>
  <div class="inventory-align">
    <div class="inventory">

      <div class="inventory-bolge-kontrol">
        <!-- Bolge 1 başlangıç -->
        <div class="inventory-bolge-1">
          <h1>ENVANTER</h1>
        </div>
        <!-- Bolge 1 bitiş -->

        <!-- Bolge 2 başlangıç -->
        <div class="inventory-bolge-2">
          <div class="inventory-bolge-2-item-box"></div>
        </div>
        <!-- Bolge 2 bitiş -->

        <!-- Bolge 3 başlangıç -->
        <div class="inventory-bolge-3">
        </div>
        <!-- Bolge 3 bitiş -->
      </div>

    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Question 2

I changed your flex display to a grid and used variables.
I’ll let you take a look at the code

// Eklenecek öğelerin sayısı
const itemCount = 36;

// Öğelerin ekleneceği ana div öğesini seçin
const inventoryBolge2 = document.querySelector('.inventory-bolge-2');

// Belirtilen sayıda öğeyi oluşturun ve ekleyin
for (let i = 0; i <= itemCount; i++) {
    const item = document.createElement('div');
    item.classList.add('inventory-bolge-2-item-box');
    inventoryBolge2.appendChild(item);
}

:root{
--inventory-bolge-size : 64px;
--inventory-bolge-grid-gap : 5px;
}

body {
    /* background-image: url('img/hq720.jpg'); /* Arka plan resmi eklemek için bu satırı ekledik */
    background-size: cover; /* Arka plan resmini kaplamasını sağlar */
    background-repeat: no-repeat; /* Arka plan resminin tekrar etmemesini sağlar */
}

@font-face {
    font-family: 'Euclid Circular B SemiBold'; /* h1 başlık */
    src: url('assets/fonts/Euclid Circular B SemiBold.ttf') format('ttf'); /* Yazı tipi dosyasının yolu ve formatı */
}

.inventory {
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    background-color: rgb(0 0 0 / 70%);
    backdrop-filter: blur(16px) brightness(115%);
}

.inventory-align {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin: 20px;
}


h1 {
    font-family: Euclid Circular B SemiBold;
    color: #969696;
    font-size: 20px;
}

.no-filter {
    filter: opacity(1) blur(0px);
}


.inventory-bolge-2 {
    display: grid; 
  grid-template-columns: repeat(5, var(--inventory-bolge-size));
  grid-template-rows: repeat(7, var(--inventory-bolge-size));; 
  gap: var(--inventory-bolge-grid-gap); 
}

.inventory-bolge-2-item-box {
    background-color: rgb(42 41 38 / 50%);
    width:100%;
    height:var(--inventory-bolge-size);
}

.inventory-bolge-2-item-box:last-of-type{
background:red;
grid-column-start: 4;
grid-column-end: 6;
grid-row-start:6;
grid-column-end: 7;
height:calc(var(--inventory-bolge-size) * 2 + var(--inventory-bolge-grid-gap));
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackoverflow.com/questions/77336288/style.css">
    <title>Envanter</title>
</head>
<body>
<div class="inventory-align">
    <div class="inventory">

        <div class="inventory-bolge-kontrol">
                <h1>ENVANTER</h1>
            <div class="inventory-bolge-2">
            </div>
        </div>

    </div>
</div>
    <script src="script.js"></script>
</body>
</html>

Leave a Comment Cancel reply