Сделать макет во флексбоксе с адаптивным [закрыто] ⇐ CSS

[Anonymous]

Пожалуйста, помогите мне сделать это (прикрепленные файлы JPG, то, что я хочу) макет с использованием CSS flexbox с адаптивным дизайном, у меня есть JS-код для создания кода ниже:

Код: Выделить всё

Login Box comes here


const imageUrls = [
'https://hotpotmedia.s3.us-east-2.amazonaws.com/8-YJNgzLb7xwnd5OI.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/8-Ee2ZeHQQUUlrKkU.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/8-qZS07FnjzTbFSYV.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/8-P9wgiJOj8wcE73h.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-7UcoLohEW5FlWr4.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-IWZFI9pSX1OX8DN.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-ZQ4rORtFxDo2f1S.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-UtRnz0yIcMpz2oR.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-DJm1fNDtgGAq5s2.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-jqGLzcjTVzgKudu.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-Sqix0IjB80xKQw1.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-XRnaqcEWWSTP8bG.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-tysrOzDMdI6qLsI.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-xevbudJRfRbzw7o.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-Y0MejRE2EVMoHgg.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-2bCZ8obK4qZaS4E.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-LEplU2n0l5RjcyO.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-ktjNZFfLbmLWsT7.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-WIA3dRYqcJrVJkr.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-v0wzjMCaXpeV7tQ.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-phbR3Qou7UKtzsD.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-OCO0KPrcDQq5HeY.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/8-jhYtcjAulYaJHEn.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/8-lzqP1Rl7otkAZjw.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-OCO0KPrcDQq5HeY.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-rl7eU5D5543mxSp.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-Ht2GdnJ7iNpW9cR.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-nHHhApoW5QPqxfH.png',
'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-uaBRNk6XHWkKVAs.png', 'https://hotpotmedia.s3.us-east-2.amazonaws.com/22-Rrp64IMDIHDKtSF.png',
];

const gridContainer = document.getElementById('gridContainer');
const totalImages = 30;
const initialImages = 15;
const gridItems = [];

function getRandomInt(max) {
return Math.floor(Math.random() * max);
}

function loadInitialImages() {
let usedIndexes = [];
for (let i = 0; i < initialImages; i++) {
let index;
do {
index = getRandomInt(totalImages);
} while (usedIndexes.includes(index));
usedIndexes.push(index);
const imgUrl = imageUrls[index];
const div = document.createElement('div');
div.className = 'grid-item';
div.style.backgroundImage = `url(${imgUrl})`;
gridContainer.appendChild(div);
gridItems.push(div);
if (isWhiteImage(imgUrl)) {
div.style.border = '2px solid red';
}
}
}

function isWhiteImage(url) {
// Placeholder for actual logic to detect white images
// For now, assume images with 'white' in their URL are white
return url.includes('white');
}

function changeImagesRandomly() {
let usedIndexes = [...Array(initialImages).keys()];
setInterval(() => {
if (usedIndexes.length === 0) {
usedIndexes = [...Array(initialImages).keys()];
}
const itemIndex = usedIndexes.splice(getRandomInt(usedIndexes.length), 1)[0];
let newIndex;
do {
newIndex = getRandomInt(totalImages);
} while (gridItems.some(item =>  item.style.backgroundImage === `url("${imageUrls[newIndex]}")`));
gridItems[itemIndex].style.backgroundImage = `url(${imageUrls[newIndex]})`;
if (isWhiteImage(imageUrls[newIndex])) {
gridItems[itemIndex].style.border = '2px solid gray';
} else {
gridItems[itemIndex].style.border = 'none';
}
}, 5000); // 10 seconds interval
}

loadInitialImages();
setTimeout(changeImagesRandomly, 5000);

Код: Выделить всё

body {
margin: 0;
padding: 0;
background-color: #fff;
}
.grid-container {
display: flex;
flex-wrap: wrap;
width: 50.7vw;
height: 100vh;
gap: 0;
grid-template-rows: auto;
}
.grid-item {
flex: 1 1 calc(33.33% - 1px);
height: 20%;
width: 50vw;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: background-image 1s ease-in-out;
opacity: 0;
animation: fadeIn 1s forwards;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.loginBox {
align-self: stretch;
flex-grow: 1;
order: 16;
width: 50vw;
flex: 1 1 calc(50% - 1px);
height: 100%;
}
.grid-item:nth-child(1) { order: 1; animation-delay: 0s; background-color: #f7f7f7; }
.grid-item:nth-child(2) { order: 2; animation-delay: 0.2s; background-color: #f0f0f0; }
.grid-item:nth-child(3) { order: 3; animation-delay: 0.4s; background-color: #f7f7f7; }
.grid-item:nth-child(4) { order: 4; animation-delay: 0.6s; background-color: #f0f0f0; }
.grid-item:nth-child(5) { order: 5; animation-delay: 0.8s; background-color: #f7f7f7; }
.grid-item:nth-child(6) { order: 6; animation-delay: 1s; background-color: #f0f0f0; }
.grid-item:nth-child(7) { order: 7; animation-delay: 1.2s; background-color: #f7f7f7; }
.grid-item:nth-child(8) { order: 8; animation-delay: 1.4s; background-color: #f0f0f0; }
.grid-item:nth-child(9) { order: 9; animation-delay: 1.6s; background-color: #f7f7f7; }
.grid-item:nth-child(10) { order: 10; animation-delay: 1.8s; background-color: #f0f0f0; }
.grid-item:nth-child(11) { order: 11; animation-delay: 2s; background-color: #f7f7f7; }
.grid-item:nth-child(12) { order: 12; animation-delay: 2.2s; background-color: #f0f0f0; }
.grid-item:nth-child(13) { order: 13; animation-delay: 2.4s; background-color: #f7f7f7; }
.grid-item:nth-child(14) { order: 14; animation-delay: 2.6s; background-color: #f0f0f0; }
.grid-item:nth-child(15) { order: 15; animation-delay: 2.8s; background-color: #f7f7f7; }
@keyframes fadeIn {
to { opacity: 1; }
}
@media (max-width: 1400px) {
.grid-container {
width: 55vw;
}
.grid-item {
background-size: cover;
}
}
@media (max-width: 480px) {
.grid-item {
flex: 1 0 45%; /* Adjust for smaller screens */
}
}

Код: Выделить всё

вот пример кода Codepen:
https://codepen. io/alpesh88ww/pen/qBGqdez
вот что я хочу показать на прикрепленном изображении.
ниже прикрепленного изображения, что мне нужно
< b>что мне нужно посмотреть на рабочем столе[/b]


что мне нужно искать на мобильных устройствах



Подробнее здесь: https://stackoverflow.com/questions/785 ... responsive