Почему постеры разных размеров?
Всем доброго времени суток, вывожу постеры через JSON, но при выводе постеры становятся разных размеров... не могу найти причину. Буду благодарен в решении проблемы.
"use strict";
let url = "https://www.omdbapi.com/?apikey=c286dd4c&s=";
const
body = document.querySelector("body"),
moviePoster = document.querySelectorAll(".item"),
block1 = document.querySelector("div.block-D-none"),
blockClose = document.querySelector("div.window"),
windowClose = document.querySelector(".closeWindow"),
divMovieContainer = document.querySelector("div.container-postr"),
templatePostr = document.querySelector(".movie-content").content,
search = document.getElementById("search"),
btnSearch = document.querySelector(".btn-search"),
spinner = document.querySelector('#spinner');
//header - nav
const btnFilm = document.querySelector('a.film').href = url,
btnSerial = document.querySelector('a.serial'),
btnMultFilm = document.querySelector('a.multfilm');
spinner.addEventListener('click', getInfoMovies);
getInfoMovies();
async function getInfoMovies() {
try {
const textSearch = search.value;
const response = await fetch(`https://www.omdbapi.com/?apikey=c286dd4c&s=${textSearch}`);
const { Search } = await response.json();
createNameMovie(Search);
} catch (error) {
showErr(error);
}
}
function showErr(err) {
body.innerHTML = `<span class="error">ERROR:${err}</span>`;
}
function createNameMovie(Search) {
for (let movie of Search) {
const fragment = templatePostr.cloneNode(true);
fragment.querySelector(".name-movie").textContent = movie.Title;
fragment.querySelector(".date-movie").textContent = "Date: " + movie.Year;
fragment.querySelector(".poster-img").src = `${movie.Poster}`;
divMovieContainer.append(fragment);
}
};
function clearInfo() {
divMovieContainer.textContent = "";
}
//buttons
search.addEventListener("keydown", (event) => {
if (event.code == "Enter") {
clearInfo();
getInfoMovies();
}
});
btnSearch.addEventListener("click", () => {
clearInfo();
getInfoMovies();
});
//ModalWindow
// divMovieContainer.addEventListener("mouseover", (event) => {
// if (event.target !== divMovieContainer) {
// const item = event.target.closest(".item");
// const modal = item.querySelector(".window");
// modal.classList.add("block");
// modal.classList.remove("block-D-none");
// }
// }),
// divMovieContainer.addEventListener("mouseout", (event) => {
// if (event.target !== divMovieContainer) {
// const item = event.target.closest(".item");
// const modal = item.querySelector(".window");
// modal.classList.remove("block");
// modal.classList.add("block-D-none");
// }
// });* {
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
}
.wrap {
background-image : url(movie-background-collage.jpg);
/* background-repeat: no-repeat; */
min-width : 320px;
position : relative;
padding-top : 200px;
background-size : cover;
}
.wrap-center {
max-width: 1100px;
margin : 0 auto;
}
header {
display : flex;
flex-direction: row;
align-items : center;
background-color: white;
}
header>ul {
display : none;
list-style-type: none;
font-size : larger;
font-weight : 800;
padding : 0 .2em .3em .6em;
}
#spinner {
height: 60px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* background-color: #ededed; */
background-image: url(data:image/gif;base64,R0lGODlhQABAAKUAAAQCBJyenERCRNTS1CQiJGRmZLS2tPTy9DQyNHR2dAwODKyqrFRSVNze3GxubMzKzPz6/Dw6PAwKDKSmpExKTNza3CwqLLy+vHx+fBQWFLSytAQGBKSipERGRNTW1CQmJGxqbLy6vPT29DQ2NHx6fBQSFKyurFRWVOTi5HRydPz+/Dw+PP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQICQAAACwAAAAAQABAAAAG/kCWcEgsGo/IpHLJbDqf0CjxwEmkJgepdrvIAL6A0mJLdi7AaMC4zD4eSmlwKduuCwNxdMDOfEw4D0oOeWAOfEkmBGgEJkgphF8ph0cYhCRHeJB7SCgJAgIJKFpnkGtTCoQKdEYGEmgSBlEqipAEEEakcROcqGkSok8PkGCBRhNwcrtICYQJUJnDm0YHASkpAatHK4Qrz8Nf0mTbed3B3wDFZY95kk8QtIS2bQ29r8BPE8PKbRquYBuxpJCwdKhBghUrQpFZAA8AgX2T7DwIACiixYsYM2rc+OSAhwrZOEa5QGHDlw0dLoiEAqEAoQK3VjJxCQmEzCUhzgXciOKE/gIFJ+4NEXBOAEcPyL6UqEBExLkvIjYyiMOAyICnAAZs9IdGgVWsWjWaTON1yAGsUTVOTUOhyLhh5TQi7cqUyIVzKjmiYCBBQtAjNAnZvKmk5cuYhJVc6DAWZd7ETTx6CAm5suXLRQY4sPDTQoqwmIlAADE2DYi0oUUQhbQC8WUQ5wZf9oDVA58KdaPAflqgTgMEXxA0iPIB64c6I9AgiFL624Y2FeLkbtJ82HM2tNPYfmLBOHLlUQJ/6z0POADhUa4+3V7HA/vw58gfEaFBA+qMIt6Su9/UPAL+F4mwWxwwJZGLGitp9kFfHzgAGhIHmhKaESIkB8AIrk1YBAQmDJiQoYYghijiiFAEAQAh+QQICQAAACwAAAAAQABAAIUEAgSEgoREQkTU0tRkYmQ0MjSkpqTs6ux0cnQUEhSMjozc3ty0trT09vRUUlRsamw8OjwMCgxMSkx8fnwcGhyUlpTk5uS8vrz8/vwEBgSMioxERkTc2txkZmQ0NjS0srT08vR0dnQUFhSUkpTk4uS8urz8+vxsbmw8Pjz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG/sCUcEgsGo/IpHLJbDqf0Kh0Sl0aPACAx1DtOh/ZMODhLSMNYjHXzBZi01lPm42BizHz5CAk2YQGSSYZdll4eUUYCHAhJkhvcAWHRiGECGeEa0gNAR4QEw1TA4RZgEcdcB1KBwViBQdSiqOWZ6wABZlIE3ATUhujAAJsj2FyUQK/wWbDcVInvydsumm8UaKjpWWrra+whNBtDRMeHp9UJs5pJ4aSXgMnGxsI2Oz09fb3+Pn6+/xEJh8KRjBo1M/JiARiEowoyIQAIQIMk1T4tXAfBw6aEI5KAArfgjcFFhj58CsLg3zDIhXRUBKABnwc4GAkoqDly3vWxMxLQbLk/kl8tbKoJAJCIyGO+RbUCnlkxC8F/DjsLOLQDsSISRREEBMBKlYlDRgoUMCg49ezaNOqVQJCqtm1Qy5IGAQgw4YLcFOYOGWnA8G0fAmRSVui5c+zx0omM2NBgwYLUhq0zPKWSIMFHCojsUAhiwjIUHKWnPpBAF27H5YEEBOg2mQA80A4ICQBRBJpWVpDAfHabAMUv1BoFkJChGcSUoCXREGEUslZRxoHAB3lQku8Qg7Q/ZWB26HAdgYLmTi5Aru9hPwSqdryKrsLG07fNTJ7soN7IAZwsH2EfUn3ETk1WUVYWbDdKBlQh1Usv0D3VQPLpOHBcAyBIAFt/K31AQrbBqGQWhtBAAAh+QQICQAAACwAAAAAQABAAIUEAgSEgoTEwsREQkTk4uQsLiykoqRkYmQUEhTU0tRUUlT08vS0srSMjox8enwMCgzMysw8OjwcGhxcWlz8+vy8urxMSkzs6uysqqxsamzc2tyUlpQEBgSMiozExsTk5uQ0NjSkpqRkZmQUFhRUVlT09vS0trSUkpR8fnwMDgzMzsw8PjwcHhxcXlz8/vy8vrxMTkzc3tz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG/kCZcEgsGo/IpHLJbDqf0Kh0Sq1ar8nEgMOxqLBgZCIFKAMeibB6aDGbB2u1i+Muc1xxJSWmoSwpdHUcfnlGJSgIZSkoJUptdXCFRRQrdQArhEcqD24PX0wUmVMOlmUOSiqPXkwLLQ8PLQtTFCOlAAiiVyRuJFMatmVpYIB1jVEJwADCWCWBdsZQtLa4artmvaO2p2oXrhyxVCWVdSvQahR4ViUOZAApDuaSVhQaGvHy+Pn6+/z9/v8AAzrxICJCBBEeBII6YOnAPYVDWthqAfGIgGQC/H3o0OEDEonAKPL7IKHMCI9GQCQD0S+AmwBHVAJjyQ/FyyMgJ/YjUAvA/ggCFjFqDNAxSc46IitOOlqmRS6lQwSIABHhwAuoWLNq3cq1ogcHLVqgyFiFAoMGJ0w8teJBphsQCaWcaFcGwYkwITiV4hAiCsNSB7B4cLYXwpMNye5WcVEgWZkC6ZaUSAQMwUMnFRybqdCEgWYTVUhpBrBtSQfNHZC48BDCgIfIRKxpxrakAWojLjaUNCNhA2wZsh3TVuLZMWgiJRTYgiFKtObSShbQLZUinohkIohkHs25yYnERVRo/iSDQmPHBdYi+Wsp6ZDrjrNH1Uz2SYPpKRocOZ+sQJEQhLnBgQFTlHBWAyZcxoJmEhjRliVw4cMfMP4ZQYEADpDQggMvJ/yWB3zYYQWBZnFBxV4p8mFVAgzLqacQBSf0ZNIJLla0mgGu1ThFEAAh+QQICQAAACwAAAAAQABAAIUEAgSUkpRERkTMyswkIiTs6uy0trRkZmQ0MjTU1tQcGhykpqRUVlT09vTEwsQsKix8enwMCgycnpzU0tS8vrw8Ojzc3txcXlz8/vwEBgSUlpRMSkzMzswkJiT08vS8urxsamw0NjTc2twcHhysqqz8+vzExsQsLix8fnxkYmT///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG/kCVcEgsGo/IpHLJbDqf0Kh0Sq1ar8tEAstdWk4AwMnSLRfBYbF5nUint+tu2w2Ax5OFghMdPt2TBg9hDwZMImgnIn9HH3QAhUxaTw0LCw1WHY4dax6CAA8eVAWOYXplEm4SoqQApl2oaapUmXSbZgW0HaFUBo6QZpQLu1UGub+LWHnIy8zNzs/Q0dLTzSYQFxcoDtRMAwiOCCZJDRwDl88kGawZC0YlEOoAGRDnywPx6wNEHnxpJ8N/SvRjdaLEkAOsDiyjwMrRByEe8NHJADAOhIZ0IAgZgFHcIgYY3TAQYqIjMpAhw4xUEXFdxTUXUwLQKAQhKYXIGsl8CHGg/piXa0p4wvgAA5EG8MLMq4esZEiPRRoMMMGU2QKJbthxQ2LiG51wW5NgcACBwQUIFIyGXcu2bdgGGjZ06LBBQ1UoJg5UqHAAKhcTBByN8OukRApHKe5OcYA1TQbCTC6wuoClQeCGIxQjcYBxm5UAKQM8kdyQshUBKQU8CYERwZURKUc88crKNZIJZRlAmIAEdkjZTkhPPtLAppsDd1GHVO2Ec0PPREoodyTAIBHQIUWPHm5EA0btQxoowKgAaJISwtNcsF7ENyvgRCg0Vgq5iYMDISqkoIDEQkoyRZjgXhojQHcHRyHpYwRcAhBAgAB2LeNfSACyNaBgbqngXUPgGLElHSvVZahCA4fRcYFma3GQGwQciAhNEAAh+QQICQAAACwAAAAAQABAAIUEAgSEgoTEwsRERkTk4uQkIiSkpqRsamwUEhTU0tT08vSUkpRUUlQ0MjS0trQMCgzMyszs6ux8enwcGhzc2tz8+vyMioxMTkysrqw8OjwEBgSEhoTExsRMSkzk5uQkJiSsqqxsbmwUFhTU1tT09vSUlpRUVlQ0NjS8vrwMDgzMzszs7ux8fnwcHhzc3tz8/vz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG/kCYcEgsGo/IpHLJbDqf0Kh0Sq1ar9hs1sNiebRgowsBACBczJcKA1K9wkxWucxSVgKTOUC0qcCTcnN1SBEnenoZX39iZAApaEcVhod6J35SFSgoJE4EXYpHFpSUAVIqBWUFKlkVIqOHIpdOJHlzE5xXEK+UHFAClChYBruHBlAowMLEesZPtHoiuFa6y2W9UBAtZS2rWK3VsVIkmtJYosuDi1Ekk68n5epPhe4R8VR3rnN8svZTLxAg2vDrR7CgwYMItZAo0eHDhw4l4CVMwgHVoRbXjrygMOLNQQEaXmnISARErQnNCFbQtqsFPBCUUtpbUG0BkRe19EzwaG9A/rUBREa8GkHQIrEWRCgMJcjyKJFvsHjG87kMaMmYBWkus1nEwEmZ9p7tmqBA44gRA/uhCDlq5MQlHJrOaSHgLZOFAwoUGBDRrt+/gAMLhkMiwYiyV0iogCARCwUTbDWYoHBPQmQJjak4eEDpgQMpKxpQarAiCwXOox4QhXLg1YEsDIgxgKKALSUNiKvUXpb5CLVXJKeoqNatCQdiwY2QyH0kAfEnu9syJ0Jiw4dUGxorqNb7SOtRr4+saDeH9BETsqOEHl36yIVXF46MQN15NRQSlstowIzk+K7kMGzW2WdUKAABB90FQEwp8l1g2wX2xfOda0oolkB3YWyw4GBCIfgHHIdCvDdKByAKsd4h5pUIAwkBsNRCdioWoUB7MRoUBAAh+QQICQAAACwAAAAAQABAAIUEAgSEhoTMzsxMSkykpqQcHhz08vRkYmQUEhSUlpS0trTc3twsLixsbmwMCgzU1tSsrqz8+vycnpyMjoxUUlQkJiRsamwcGhy8vrw0NjR0dnQEBgTU0tSsqqz09vRkZmQUFhScmpy8urzk5uQ0MjR0cnQMDgzc2ty0srT8/vykoqSUkpRUVlQsKiz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG/kCXcEgsGo8RRWlAaSgix6h0Sp2KKoCstiKqer/fkHasTYDP6KFoQ25303BqBNsmV6DxvBFSr0P0gEMNfW0WgYEDhGQDRwsTFhYTC4dTiYpajEQeB2xjBx6URxaXWoZDHiR9JKChRHykAH9DB4oHcQIlJQJRc6R3Qwukk2gcnRscUSKkb0ITpBNpo6VSCZ11ZkS0l7Zo0lmmUQp0YxUKRtq1aQLGyFNJDUxOeEXOl9DqDbqhJ6QnrYDo6nD7l8cDgz4MWBHMYyBglgMGFh46MeHDhwn+JGrcyLGjx48gO3rg8CBiSDQnWBhjkfFkFQUO2jgwF8UACgUmPz6IWcfB/oMjGBBkQYABJAVFFIwYMDEGQc6NBqz1USjk1RhZHAWQ2kUERRsUHrVe4jpk6RgTTzV6IEVVCAamAEwU/XiUUNIjNlGk5bizj0+XVGDKpAl4yoO6WSj8LOzFgwAObRlLnky5suXLEg2o0FCCwF40KU48SEGwg1AtCDrk6XAhywUCrTr0UZ1GNhnYhwycbuMUdGsyF0gHkqBIApoHfRYDKqGoAcrkhzQoKoEmAog2IIRHSSEiQAAR84wQJ2Qcje0xuKOcaDGmhfIiZuughUPg9+spI66TATEiyvnbeaTwwAPhidLHB1IQsBsACKS3kX7YTWGABLlI8BlBEShSIGUQIO6HmRDekIHgh/lh19+HLjzA3hbvfZiEdwpoh+KMjAUBACH5BAgJAAAALAAAAABAAEAAhQQCBISGhMzKzERCRDQyNKSmpOzq7GRiZBQSFHRydJyanNTW1LS2tPz6/Dw6PAwODLSytPTy9GxubBweHHx6fKSipNze3AQGBIyKjMzOzExOTDQ2NKyqrOzu7GRmZBQWFHR2dJyenNza3Ly+vPz+/Dw+PP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAb+QJNwSCwaj8ikcslsmjoYx+fjwHSc2KyS8QF4vwiGdjxmXL5or5jMXnYQ6TTi2q4bA/F4wM60UDZTGxQWRw55aRt8SSQUhyAkRQ+HaA+KRw0akwAaDUSSmgCVRg0hA1MDCp1ZIKAACUQbrYlFBrGIBlgirV4LQ3ige0QNtnEbqkwSuwASQ2+aD3RDCpoKTgTKBEQMmmtEhpMlTp+tokMMcGkP3UToh+VL46DvQh0BGwgIGwHRkc/W2HW+HQrXJNkuZm2mTarWZIGyXm2GHTKGhRWoV3ZqFcOFBZMmTooaKCiBr0SqMQ0sxgFxzJIiESAI4CMAQoTLmzhz6tzJs6f+z59Ah0SoACJBgQhByXDoAoZD0iwcDjlFIuDAAQFPOzCNM+dIhjMALmRIGkJTiCMe0BxIavAQwiIH1CZNoAljka9exJI1iySDVaxJneV5gPQpk6h5Chh2UqAdAASKFzvpEKJoCH6SM2vezLmz58+gQ7fhsOHCBQeR20SAwKDwzbZf3o4ZgQ7BiJsFDqXOEiFeV0sCEZGBEGcqHxKaIGkhngaCJRJg41xQnkWwF8IuiQknM+LTg9tMBAQIADhJ7sRtOrDGfIRE3C8HWhqB7UV2Twx6lhQofWHDbp8TxDGBaEIgl4d8nwWYxoAEmvALGsEQ6J5aCIYmHnkNZqghgUEBAAAh+QQICQAAACwAAAAAQABAAIUEAgSEgoRERkTEwsTk4uRkYmQ0MjQUFhRUVlTU1tT08vSkpqQMCgxMTkzMysxsbmz8+vzs6uwcHhxcXlzc3tysrqwEBgSEhoRMSkzExsRkZmQ8OjwcGhxcWlzc2tz09vSsqqwMDgxUUlTMzsx0dnT8/vzs7uz///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG/sCTcEgsGo/IpHLJbA5NjozJSa02RxiAFiAYWb/g08Ky3VoW4TRzxCiXLV613Jh1lwVzJ4RCgCQjdnZTeUkZImQAFiIZRxmBbgOERyUkjyQlRQOPZZFIFCAVHmGVmyRFgJtag0UUAncUVpqpAJ1Drpt4RhQHdgewVHWpGEUOiHZwR7d2uU0fbbMWfkRjx2hGHqkJTtizWqLEylwOSAup1kzc3d9GERlSShWpIE4fxpvRaumB2k7BuHPh7lSRlapWml29flEhZYkQARF31lGBwNANCWmEPIAAwS9MhgaILDQwKEnSHgoYS6pcqRJCSpZzMhTgBeBAAZIwrXzo8AjB/oecXxQYSGVgFdAmCLohODoEhAELFjacE+KoGy2mD+w8IJLU6lKgIB6d42C15tENjwwMKatFQc4SqTCdYAvALcwS9t7IpdntwNGhgdQK4en1aNhA5wjOwrkyq5utXJUyFbLgqQUDU4UIJWp3MhMFXe0gMOqZyYAJZAFwmMC4dBMIP13Lnk27tu3buHPnSYABKoaOYRwUKMBIZYJnWhgAtzIiZBxJ/rQw+6KhTIGSEPImkvulgPWSeI+9pNJcC7KS0bmoGTFhwnNJx8sod10BAYIKTRLcErD86IUyAeiGhAn2WECagCeMYMd7CJ5A4BsHIhgAgA0eUd99FWao4YYcAy4RBAA7R3NoTm5KUWh4TVdtcE1Ka2xEa0c3K1Z3My85MndDcFErLzhuRnByOFZ4VzdxUEVPcGFZOHVTV0RTTURVcVFWWg==);
}
header>ul>li>a {
text-decoration: none;
color : gray;
}
header>ul>li>a:hover {
padding-bottom: .6em;
box-shadow : inset 0 -2px blue;
transition : .3s ease;
}
header>ul>li {
padding: 0 .5em 0 .4em;
}
.logo {
display : flex;
align-items : center;
font-size : x-large;
text-decoration: none;
letter-spacing : .2em;
color : black;
}
.icon-logo {
padding-right: .5em;
}
.group-logo {
margin : .3em 0;
margin-left: .6em;
}
.btn-search {
position: absolute;
margin : .5em;
}
.group-search {
flex-grow : 1;
display : none;
margin : .3em 0;
margin-right: .6em;
}
.group-poisk {
display : flex;
align-items : center;
justify-content: flex-end;
flex-grow : 1;
}
.story {
height : 31px;
width : 100%;
box-shadow : 1px 0px 6px blue;
border-radius: 11px;
padding-left : .7em;
font-size : large;
}
.login {
margin-left : 1em;
border-radius : 7px;
border : none;
background-color: darkblue;
font-size : large;
color : white;
}
.login:hover {
background-color: blue;
}
.form {
display : flex;
justify-content: center;
}
.search-btn {
top : 28px;
right : 310px;
position : absolute;
/* background-color: white; */
}
.desc-text {
background-color: rgb(208, 206, 206);
padding : .2em 0 1em .6em;
}
.name-site {
letter-spacing: 0.2em;
}
.text-color {
color : white;
margin-bottom: .8em;
}
img {
max-width : 100%;
/* border-radius: 10%; */
}
main {
background-color: #ededed;
}
.container-postr {
padding : 1em;
display : flex;
flex-direction : row;
justify-content: center;
flex-wrap : wrap;
}
.item {
width : 42%;
margin: .5em .7em;
}
.url-movie {
display : block;
position : relative;
}
.desc {
position : absolute;
left : 0;
right : 0;
bottom : 0;
z-index : 10;
padding : .4em;
color : #fff;
text-align: center;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) -33%, rgb(11, 7, 55) 73%);
}
.name-movie {
width : 100%;
font-size : calc(14px + 2 * ((100vw - 420px) / 860));
font-weight: 600;
margin : 0;
}
.rating {
display : flex;
flex-direction : row;
justify-content: space-between;
margin-top : 0.3em;
}
.date-movie {
margin : .5em;
position : absolute;
z-index : 99;
padding : 3px 5px;
border-radius : 3px;
background-color: rgba(39, 39, 137, 0.868);
color : #fff;
font-weight : 600;
font-size : 13px;
}
.error {
color: black;
}
footer {
display : flex;
flex-direction : column;
justify-content: space-between;
align-items : center;
background-color: rgb(9, 9, 54);
color : white;
padding : 1em 0em;
}
.group-logo-foot {
margin-left : .6em;
display : flex;
flex-direction: column;
align-items : center;
}
.foot-menu {
display : flex;
flex-direction: column;
align-items : center;
margin : 0 1em;
font-size : larger;
}
.foot-menu>ul {
padding : 0;
margin-top : 0;
list-style-type: '›';
}
.foot-menu>ul>li>a {
text-decoration: none;
padding : 0 .6em;
color : white;
}
ul>li {
padding-bottom: .5em;
}
ul>li>a:hover {
color: blue;
}
/* window modal*/
span {
user-select: none;
}
button {
user-select: none;
}
.block-D-none {
display: none;
}
.block {
position : absolute;
inset : auto;
transform : translate(-35%, -75%);
width : 40vw;
height : 60vh;
background-color: black;
opacity : 1;
border-radius : 5%;
z-index : 999;
}
.block2 {
width : 100%;
height : 100%;
display : flex;
flex-direction : column;
justify-content: center;
align-items : center;
}
.closeWindow {
width : 5vw;
height : 5vh;
font-weight: 900;
color : black;
}
@media(min-width:500px) {
.item {
width: 33.33%;
}
footer {
flex-direction: row;
}
.group-logo-foot {
align-items: flex-start;
}
}
@media(min-width:700px) {
.item {
width: 27%;
}
footer {
flex-direction: row;
}
.group-logo-foot {
align-items: flex-start;
}
}
@media(min-width:900px) {
.group-search,
header>ul {
display: flex;
}
.item {
width: 16.66%;
}
}<!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="wink.css">
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="wrap-center">
<header>
<div class="group-logo"><a class="logo" href="#"><img class="icon-logo" src="ico-logo.png" alt="">NAZFILM</a></div>
<ul>
<li><a class="film" target="_blank">Фильмы</a></li>
<li><a class="serial" target="_blank" >Сериалы</a></li>
<li><a class="multfilm" target="_blank">Мультфильмы</a></li>
</ul>
<div class="group-search">
<div class="group-poisk">
<input id="search" class="story form__email" type="text" value="Harry-Potter">
<span class="btn-search form__btn"><img src="ico-poisk.png" alt=""></span>
</div>
<button class="login openModalWindow">Войти</button>
</div>
</header>
<main>
<div class="container-postr">
</div>
<div id="spinner"></div>
<img id="spinner" src="" alt="">
</main>
<div class="desc-text">
<h3><span class="name-site">NAZFILM</span> – фильмы в HD онлайн бесплатно и без регистрации!</h3>
<span>Современный портал nazfilm вас точно порадует: на сайте собраны тысячи фильмов,
которые можно просматривать онлайн в высоком качестве. Удобный,
простой и комфортный «кинотеатр на дому» предлагает смотреть новинки совершенно бесплатно,
то есть значительно экономит ваше время и деньги на поиск кинозала и покупку билетов.
Фильмы, представленные на сайте, рассортированы по категориям и жанрам: Лордфильм регулярно добавляет не только популярные киноленты,
но и сериалы, и мультфильмы в приятной озвучке и хорошем качестве.
Смотреть кино можно круглосуточно и в любой точке мира – мы публикуем новинки,
которые помогут отдохнуть после тяжелых будней и еще раз встретиться с любимыми героями.
Официальный сайт Лорд Фильм дает возможность смотреть любимые фильмы и сериалы с любого устройства.
Это может быть компьютер, планшет, а также смартфон на IOS или Android.
Умный проигрыватель определит оптимальный режим просмотра для вашего девайса,
а вам останется только подобрать увлекательные фильмы онлайн из огромного архива и наслаждаться просмотром!</span>
</div>
<footer>
<div class="group-logo-foot"><a class="logo text-color" href="#"><img class="icon-logo" src="ico-logo.png" alt="">NAZFILM</a>
<span>
<span class="name-site">NAZFILM</span> - сайт Назфильм онлайн в хорошем качестве бесплатно.
<br>
<a class="text-color" href="https://mail.ru/po" target="_blank">[email protected]</a> - почта для обратной связи.
</span>
</div>
<div class="foot-menu">
<p>Главное меню</p>
<ul>
<li><a href="">Фильмы</a></li>
<li><a href="">Сериалы</a></li>
</ul>
</div>
</footer>
</div>
</div>
<template class="movie-content">
<div class="item">
<div class="date-movie"></div>
<a class="url-movie" href="https://mo.lordfilm15.com/filmy/51352-chuzhoj-romul-2024.html" target="_blank">
<div class="movie-poster-img">
<img class="poster-img">
</div>
<div class="desc">
<h3 class="name-movie"></h3>
<div class="rating">
<div class="rat-kp">КП</div>
<div class="rat-imdb">IMDB</div>
</div>
</div>
<!--open window-->
<div class="block-D-none window">
<div class="block2">
</div>
</div>
</a>
</div>
</template>
<script src="wink.js"></script>
</body>
</html>